/* The card row under the hero, and the travelling cards that fly into it.
   Without deck.js (or with reduced motion, or on phones) the hero keeps its
   artwork cards and this row shows its figures: both complete on their own. */

.deck-stage { position: relative; }

/* ---- The row: same light ground as the hero, so the two read as one ---- */
.deck { position: relative; background: #f4f6f9; }
.deck-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 18.75rem));
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: 1rem var(--pad) 0;
}

/* A short centred paragraph under the row, with generous room either side. */
.deck-copy {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(5rem, 9vw, 8rem) var(--pad) clamp(5rem, 8vw, 7.5rem);
  text-align: center;
  font-size: clamp(1.15rem, 1.6vw, 1.375rem);
  line-height: 1.5;
  color: rgb(10 22 40 / 0.72);
  text-wrap: balance;
}
/* Each landed card is one figure set straight on the card's own colour:
   icon at the top, the figure large at the foot over a hairline and its
   label, and a quarter of the rising sun tucked into the top corner in a
   tint of the card. Colours per card are tokens, so the layout is shared. */
.dcard {
  --card-bg: var(--ink);
  --card-ink: var(--paper);
  --card-figure: var(--brand);
  --card-icon: var(--sun);
  --card-soft: rgb(242 244 247 / 0.72);
  --card-rule: rgb(242 244 247 / 0.18);
  --card-tone: rgb(43 173 233 / 0.14);
  position: relative;
  overflow: hidden;
  aspect-ratio: 124 / 164;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1.5rem, 2.3vw, 2.1rem);
  background: var(--card-bg);
  color: var(--card-ink);
  box-shadow: 0 18px 38px rgb(10 22 40 / 0.14), 0 2px 6px rgb(10 22 40 / 0.08);
}
.dcard--sky {
  --card-bg: var(--brand);
  --card-ink: var(--ink);
  --card-figure: var(--ink);
  --card-icon: var(--ink);
  --card-soft: rgb(10 22 40 / 0.78);
  --card-rule: rgb(10 22 40 / 0.22);
  --card-tone: rgb(255 255 255 / 0.22);
}
.dcard--sun {
  --card-bg: var(--sun);
  --card-ink: var(--ink);
  --card-figure: var(--ink);
  --card-icon: var(--ink);
  --card-soft: rgb(10 22 40 / 0.78);
  --card-rule: rgb(10 22 40 / 0.22);
  --card-tone: rgb(255 255 255 / 0.4);
}
.dcard-sun {
  position: absolute; top: 0; right: 0;
  width: 56%; aspect-ratio: 1;
  border-radius: 0 0 0 100%;
  background: var(--card-tone);
  pointer-events: none;
}
.dcard-icon { position: relative; width: 2rem; height: 2rem; color: var(--card-icon); }
.dcard-stat { position: relative; }
.dcard-title { font-size: clamp(1.2rem, 1.75vw, 1.55rem); line-height: 1; color: var(--card-figure); }
.dcard-label {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--card-rule);
  font-size: 0.9375rem; font-weight: 500; line-height: 1.5; color: var(--card-soft); text-wrap: pretty;
  /* Room for the longest description on every card, so the three titles
     sit on one line across the row. */
  min-height: calc(1rem + 1px + 5 * 1.5em);
}

@media (max-width: 959px) {
  .deck-row { grid-template-columns: minmax(0, 22rem); gap: 1rem; padding-top: 0; }
  .deck-copy { padding-top: 3.5rem; padding-bottom: 4.5rem; }
  .dcard { aspect-ratio: auto; min-height: 17rem; }
  .dcard-sun { width: 40%; }
  .dcard-label { min-height: 0; }
}

/* ---- The travelling layer (built by deck.js) ----
   The cards are laid out at their landed size and position, and a transform
   carries them back up to the hero pose. At the top of the page they are the
   hero cards; at the end of the scroll the transform is gone and they sit
   exactly over the row. */
.deck-stage.is-deck .hero .hcard,
.deck-stage.is-deck .deck-row .dcard { opacity: 0; }
.deck-layer { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.tcard {
  position: absolute;
  pointer-events: auto;
  transform-origin: 50% 50%;
  will-change: transform;
  transition: translate 0.55s var(--ease), rotate 0.55s var(--ease), scale 0.55s var(--ease);
}
.tcard-inner {
  position: absolute; inset: 0;
  box-shadow: 0 18px 38px rgb(10 22 40 / 0.14), 0 2px 6px rgb(10 22 40 / 0.08);
  transition: box-shadow 0.55s var(--ease);
}
.tcard-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.tcard--0 { z-index: 1; }
.tcard--1 { z-index: 2; }
.tcard--2 { z-index: 3; }

/* The landed face: its colour covers the artwork first, then the figures
   fade up. deck.js sets --bga and --ca as the card travels. */
.dcard.tcard-face { position: absolute; inset: 0; aspect-ratio: auto; background: none; box-shadow: none; opacity: 1; }
.tcard-face::before { content: ""; position: absolute; inset: 0; background: var(--card-bg); opacity: var(--bga, 1); }
.tcard-face > * { opacity: var(--ca, 1); }

/* Hover, only while the cards are at rest in the hero: the stack fans out
   and the card under the pointer lifts forward with one small settle. The
   individual properties add to the travel transform rather than replace it,
   and the settle runs on the inner box so it never touches the transform. */
@media (hover: hover) {
  .deck-layer.is-rest:has(.tcard:hover) .tcard--0 { translate: -6% 2%; rotate: -3deg; }
  .deck-layer.is-rest:has(.tcard:hover) .tcard--1 { translate: 0 -2%; }
  .deck-layer.is-rest:has(.tcard:hover) .tcard--2 { translate: 6% 2%; rotate: 3deg; }
  .deck-layer.is-rest .tcard:hover { z-index: 4; scale: 1.05; }
  .deck-layer.is-rest .tcard--0:hover { translate: -6% -6%; rotate: 2deg; }
  .deck-layer.is-rest .tcard--1:hover { translate: 0 -8%; rotate: 2deg; }
  .deck-layer.is-rest .tcard--2:hover { translate: 6% -6%; rotate: -3deg; }
  .deck-layer.is-rest .tcard:hover .tcard-inner {
    box-shadow: 0 30px 60px rgb(10 22 40 / 0.22), 0 4px 10px rgb(10 22 40 / 0.1);
    animation: hcard-settle 0.6s var(--ease);
  }
}