/* =========================================================================
   MOTION.CSS  —  the bespoke "geometry" layer, in grey boxes.
   Re-creates the reference site's signature behaviour as plain grey squares:
   · square-dither MOSAIC scenes that assemble/disassemble on scroll
   · stray squares that FLY across the screen (the "flock")
   · CARD fly-in from bottom-right
   · SplitText-style LINE-MASK heading reveals
   · tiled GRID-CELL page transition
   Every knob lives near the top of each block. JS in js/motion.js drives it.
   ========================================================================= */

:root {
  --sq: 18px;             /* base grey-square size (matches reference feel) */
  --sq-gap: 4px;          /* gap between mosaic squares                     */
  --flock-dur: 16s;       /* time for one square to cross the screen        */
}

/* -------------------------------------------------------------------------
   MOSAIC  —  a media box filled with a grid of equal grey squares.
   JS fills [data-mosaic] boxes with .msq cells. On scroll they assemble
   (fade/scale in) in a scattered order, mimicking the dither "scenes".
   ------------------------------------------------------------------------- */
.mosaic { position: relative; overflow: hidden; background: var(--bg-alt); border-radius: var(--radius); }
.mosaic::before, .mosaic::after { content: none; }           /* kill the default .box cross */
.mosaic__grid {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 16), 1fr);
  grid-auto-rows: 1fr;
  gap: 2px; padding: 2px;
}
.msq { background: var(--box-2); border-radius: 2px; opacity: 0; transform: scale(.35); }
.mosaic.is-in .msq { opacity: 1; transform: none; }
/* subtle idle shimmer so a settled scene still feels alive */
@keyframes msqBreath { 0%,100%{ opacity:.9 } 50%{ opacity:.62 } }
.mosaic.is-in .msq[data-breath] { animation: msqBreath 3.2s var(--ease-in-out) infinite; }
.mosaic__tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 3;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
  background: rgba(244,244,242,.6); padding: 4px 8px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce){ .msq{ opacity:1 !important; transform:none !important; animation:none !important; } }

/* -------------------------------------------------------------------------
   FLOCK  —  a cluster of same-size grey squares that flies across screen.
   The container translates left→right on an infinite loop; each square bobs
   so the group reads like a drifting flock. Sits in the hero + scene bands.
   ------------------------------------------------------------------------- */
.flock { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
/* keep section content above the drifting squares */
.wrap { position: relative; z-index: 1; }
.circle-cta, .hero__scroll { z-index: 5; }
.flock__unit { position: absolute; left: 0; will-change: transform; }
.bsq {
  position: absolute; width: var(--bsq, 12px); height: var(--bsq, 12px);
  background: var(--box-3); border-radius: 2px; will-change: transform;
}
@media (prefers-reduced-motion: reduce){ .flock{ display:none; } }

/* -------------------------------------------------------------------------
   CARD FLY-IN  —  base (offscreen bottom-right) state; JS animates to home.
   Put .flyin on any card/grid child. Group container = [data-flyin].
   ------------------------------------------------------------------------- */
.flyin { opacity: 0; transform: translate(60px, 90px) rotate(3deg); }
.flyin.is-in { opacity: 1; transform: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
@media (prefers-reduced-motion: reduce){ .flyin{ opacity:1 !important; transform:none !important; } }

/* benefit cards — ONE ROW of 8; JS (buildCardTrain) drives translateX + scaleX */
.bencards { display: flex; flex-wrap: nowrap; gap: var(--gutter); align-items: stretch; }
.bencard {
  flex: 1 1 0; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  padding: 1rem; display: grid; gap: .7rem; min-height: 230px; align-content: start;
  transform-origin: center center; will-change: transform;
  transition: border-color var(--dur-fast);
}
.bencard:hover { border-color: var(--ink); }
.bencard__media { aspect-ratio: 4/3; }
.bencard strong { font-size: .95rem; }
.bencard__n { font-size: var(--fs-small); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
/* small screens: let the single row scroll horizontally instead of crushing */
@media (max-width: 760px){ .bencards { overflow-x: auto; } .bencard { flex: 0 0 58%; } }

/* -------------------------------------------------------------------------
   SPLIT LINES  —  headings split into lines, each masked & pushed up.
   JS wraps text into .sline > .sline__i ; reveal slides .sline__i to 0.
   ------------------------------------------------------------------------- */
.sline { display: block; overflow: hidden; }
.sline__i { display: block; transform: translateY(110%); transition: transform var(--dur-slow) var(--ease-out); }
.split.is-in .sline__i { transform: none; }
@media (prefers-reduced-motion: reduce){ .sline__i{ transform:none !important; } }

/* -------------------------------------------------------------------------
   GRID-CELL TRANSITION  —  tiled wipe (Barba-style) replacing the flat wipe.
   A grid of cells scales in to cover, then out to reveal. JS staggers them.
   ------------------------------------------------------------------------- */
.gtrans {
  position: fixed; inset: 0; z-index: var(--z-menu);
  display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 1fr;
  pointer-events: none;
}
.gtrans__cell { background: var(--ink); transform: scaleY(0); transform-origin: bottom; }
.gtrans.cover .gtrans__cell   { transform: scaleY(1); transform-origin: bottom; }
.gtrans.uncover .gtrans__cell { transform: scaleY(0); transform-origin: top; }

/* -------------------------------------------------------------------------
   HERO CIRCULAR CTA  +  SOUND TOGGLE  (small chrome the reference has)
   ------------------------------------------------------------------------- */
.circle-cta {
  position: absolute; right: var(--gutter); bottom: var(--section-y);
  width: 150px; height: 150px; border-radius: 999px; border: 1px solid var(--ink-soft);
  display: grid; place-items: center; text-align: center; z-index: 5;
  font-size: var(--fs-small); letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast);
}
.circle-cta:hover { background: var(--ink); color: var(--on-accent); }
.sound-toggle {
  position: fixed; left: var(--gutter); bottom: 1.4rem; z-index: var(--z-nav);
  display: inline-flex; align-items: center; gap: 6px; height: 26px;
}
.sound-toggle .bar { width: 3px; background: var(--ink); border-radius: 2px; height: 8px; }
.sound-toggle.is-on .bar { animation: eq 1s var(--ease-in-out) infinite; }
.sound-toggle .bar:nth-child(2){ animation-delay:.15s } .sound-toggle .bar:nth-child(3){ animation-delay:.3s } .sound-toggle .bar:nth-child(4){ animation-delay:.45s }
@keyframes eq { 0%,100%{ height:6px } 50%{ height:20px } }