/* RevRep — shared motion system.
   ONE easing, ONE duration scale, ONE reveal distance. transform/opacity only.
   Hook elements with data-attributes (motion.js handles the JS half):

   [data-reveal]            fade + rise in when scrolled into view (once)
   [data-stagger]           children get sequenced reveal-delays (~90ms apart)
   [data-countup="123"]     number counts up to value when in view
   .tile, .card             subtle hover lift + shadow
   .btn .arrow              arrow slides right 4px on btn hover
   body.is-scrolled .nav    0.5px bottom border once past the hero

   Signature modules (.choice, .setup, .section--cinema, .call, .reveal) already
   have their own motion — they're excluded in motion.js so nothing double-animates.

   prefers-reduced-motion: reduce → all transitions/animations off, reveals static-on. */

/* Motion tokens (--motion-ease, --motion-fast, --motion-base, --motion-slow,
   --motion-rise, --motion-stagger) live in styles.css :root — single source of truth. */

/* ---------- [data-reveal] ---------- */
[data-reveal]{
  opacity: 0;
  transform: translate3d(0, var(--motion-rise), 0);
  transition: opacity var(--motion-base) var(--motion-ease),
              transform var(--motion-base) var(--motion-ease);
  will-change: opacity, transform;
}
[data-reveal].is-in{ opacity: 1; transform: none; }

/* ---------- [data-stagger] — children inherit reveal + sequenced delay ---------- */
[data-stagger] > *{
  opacity: 0;
  transform: translate3d(0, var(--motion-rise), 0);
  transition: opacity var(--motion-base) var(--motion-ease),
              transform var(--motion-base) var(--motion-ease);
  transition-delay: calc(var(--motion-stagger) * var(--i, 0));
  will-change: opacity, transform;
}
[data-stagger].is-in > *{ opacity: 1; transform: none; }

/* ---------- card hover lift ---------- */
.tile, .card{ transition: transform var(--motion-fast) var(--motion-ease),
                          box-shadow var(--motion-fast) var(--motion-ease),
                          border-color var(--motion-fast) var(--motion-ease); }
@media (hover:hover) and (pointer:fine){
  .tile:hover, .card:hover{
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 14px 32px -16px rgba(8, 14, 18, .22), 0 2px 6px -2px rgba(8, 14, 18, .08);
  }
}

/* ---------- CTA arrow slide ---------- */
/* Buttons in this site use the literal "→" arrow in a <span aria-hidden> or text node;
   target the right-pointing arrow span by attribute for predictability, with a fallback
   on the last span inside a .btn. transform-only so it never affects layout. */
.btn [aria-hidden="true"], .btn span:last-child{
  display: inline-block;
  transition: transform var(--motion-fast) var(--motion-ease);
  will-change: transform;
}
@media (hover:hover) and (pointer:fine){
  .btn:hover [aria-hidden="true"], .btn:hover span:last-child{
    transform: translate3d(4px, 0, 0);
  }
}

/* ---------- nav border once scrolled past the hero ---------- */
/* The existing nav already has a faint bottom border; we boost it slightly when scrolled. */
.nav{ transition: border-color var(--motion-base) var(--motion-ease),
                  box-shadow var(--motion-base) var(--motion-ease); }
body.is-scrolled .nav{
  border-bottom-color: rgba(12, 16, 20, .14);
  box-shadow: 0 1px 0 0 rgba(12, 16, 20, .04);
}

/* ---------- [data-countup] — fixed-width while counting so digits don't reflow ---------- */
[data-countup]{ font-variant-numeric: tabular-nums; }

/* ---------- reduced motion override (kept last so it wins) ---------- */
@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-stagger] > *{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .tile, .card, .btn [aria-hidden="true"], .btn span:last-child, .nav{ transition: none !important; }
  .tile:hover, .card:hover{ transform: none !important; box-shadow: none !important; }
  .btn:hover [aria-hidden="true"], .btn:hover span:last-child{ transform: none !important; }
}