/* =========================================================================
   Module · Card / Service — Figma 9094:125780 (page Global: Modules)
   variants 420 9094:125946 · 1024 9094:125891 · 1440 9094:125836 · 1920 9094:125781
   Home (Pages — Homepage 2.0): 420 9106:127734 · 1024 9106:127614 ·
   1440 9106:127494 · 1920 9094:126061

   The section frame (.l-section): section-padding, page-margin,
   section-gap between the Section Header and "Grid". Grid: the cards in a
   column (420), two columns × three rows from 1024, grid-gutter apart both
   ways; a row's two cards are one height. The ground is Module Background
   (data-bg), over White.

   CardMask — the old cards' arrival, kept as it was (old cloud.css): an
   angled sliver per card that opens to the full rectangle while the card
   rises 44 and fades in; 1.2s on the reveal curve, 170ms apart
   (data-reveal-group on the grid). It lives here, on the module's own grid
   cells, not on the block: it is how this module brings its arrangement in
   (one angle per place in the grid), so the block is never restyled and
   Card / Service elsewhere arrives however its module says. script.js sets
   an inline clip-path:none on the cell once it has arrived, so the card's
   hover outline (drawn just outside the card) is not clipped.
   ========================================================================= */
.m-card-service { background: linear-gradient(var(--module-background), var(--module-background)), var(--color-white); }
.m-card-service > .b-section-header { align-self: stretch; }

.m-card-service__grid {
  align-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-grid-gutter);
}
.m-card-service__cell { display: flex; min-width: 0; }
.m-card-service__cell > .b-card-service { flex: 1 1 auto; min-width: 0; }

@media (min-width: 1024px) {
  .m-card-service__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── CardMask ─────────────────────────────────────────────────────────
   (0,2,0) beats the base [data-reveal]. */
.m-card-service__cell[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 44px, 0);
  clip-path: polygon(0% 6%, 61% 37%, 100% 94%, 30% 67%);
  transition: opacity   1.2s var(--e-reveal),
              transform 1.2s var(--e-reveal),
              clip-path 1.2s var(--e-reveal);
}
/* One angle per card; every vertex travels to its nearest corner, so the quad
   never folds while it opens. (0,3,0), and above the open state on purpose:
   .is-in weighs the same, so source order decides. */
.m-card-service__cell[data-reveal]:nth-child(1) { clip-path: polygon(-84% -17%, 190% 105%, 184% 117%, -90% -5%); }  /* 24° */
.m-card-service__cell[data-reveal]:nth-child(2) { clip-path: polygon(-48% -64%, -37% -73%, 148% 164%, 137% 173%); }  /* 52° */
.m-card-service__cell[data-reveal]:nth-child(3) { clip-path: polygon(12% -95%, 26% -98%, 88% 195%, 74% 198%); }      /* 78° */
.m-card-service__cell[data-reveal]:nth-child(4) { clip-path: polygon(90% -95%, 103% -90%, 10% 195%, -3% 190%); }     /* 108° */
.m-card-service__cell[data-reveal]:nth-child(5) { clip-path: polygon(-63% 149%, 153% -59%, 163% -49%, -53% 159%); }  /* 136° */
.m-card-service__cell[data-reveal]:nth-child(6) { clip-path: polygon(-95% 90%, 190% -3%, 195% 10%, -90% 103%); }     /* 162° */
.m-card-service__cell[data-reveal].is-in {
  opacity: 1;
  transform: none;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
@media (prefers-reduced-motion: reduce) {
  .m-card-service__cell[data-reveal]:nth-child(n),
  .m-card-service__cell[data-reveal].is-in {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}