/* hanjo motion system: one vocabulary for every page (see DESIGN.md > Motion).
   Loaded last in <head> on every page, so it wins over older per-page motion.

   1. Arrive   the page hero rises in, in reading order, under a second
   2. Work     client work rises in staggered; drifts on scroll; scrolls on hover
   3. Number   a big result rises into place once
   4. Hover    buttons nudge their arrow; nothing lifts, nothing shines

   Transform and opacity only. No loops, no shine, no cursor effects.
   Everything here is off under prefers-reduced-motion. */

:root { --m-ease: cubic-bezier(.2, .8, .2, 1); }

/* 0. Older per-page motion, off everywhere */
.btn::after, .btn--dark::after, .btn--light::after, .btn-primary::after,
.btn-white::after, .nav-cta::after, form .btn::after { content: none !important; animation: none !important; }
[data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
.cursor-glow { display: none !important; }
.ew-track, .seework-chevron, .nav-avail-dot, .avail-dot { animation: none !important; }
#main * { animation: none !important; }
:is(.btn, .btn--dark, .btn--light, .btn-primary, .btn-white, .btn-ghost, .nav-cta):hover { transform: none !important; }

@keyframes mRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes mFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mTile { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {

  /* 1. Arrive: same order and timing on every page */
  #main :is(.crumb, .rx-where, .location-badge) { animation: mFade .5s var(--m-ease) both !important; }
  #main h1 { animation: mRise .7s .05s var(--m-ease) both !important; }
  #main h1 > :is(strong, em) { animation: mRise .7s .17s var(--m-ease) both !important; }
  #main :is(.hero-desc, .hero-sub, .lead) { animation: mRise .6s .3s var(--m-ease) both !important; }
  #main .hero-actions { animation: mRise .6s .4s var(--m-ease) both !important; }
  #main :is(.hero-stats, .zero-grid, .platform-row, .hero-seework) { animation: mRise .6s .5s var(--m-ease) both !important; }
  /* the content right after the hero arrives last, so nothing below the
     title (a form, a document) is on screen before the title itself */
  #main + :not(.wx) { animation: mRise .7s .45s var(--m-ease) both; }

  /* 2. Work: tiles rise in, staggered, wherever client work appears up top */
  :is(.hx-row > li, .rx-shots > *, .wx-board > *, .hero-collage .hc-col) { animation: mTile .8s var(--m-ease) both !important; }
  :is(.hx-row > li, .rx-shots > *, .wx-board > *, .hero-collage .hc-col):nth-child(1) { animation-delay: .45s !important; }
  :is(.hx-row > li, .rx-shots > *, .wx-board > *, .hero-collage .hc-col):nth-child(2) { animation-delay: .53s !important; }
  :is(.hx-row > li, .rx-shots > *, .wx-board > *, .hero-collage .hc-col):nth-child(3) { animation-delay: .61s !important; }
  :is(.hx-row > li, .rx-shots > *, .wx-board > *, .hero-collage .hc-col):nth-child(4) { animation-delay: .69s !important; }
  :is(.hx-row > li, .rx-shots > *, .wx-board > *, .hero-collage .hc-col):nth-child(5) { animation-delay: .77s !important; }
  [data-m-drift] { will-change: transform; }

  /* hover reads the whole piece (motion.js sets the distance per frame) */
  [data-m-read] img { transition: transform 3.2s cubic-bezier(.45, 0, .25, 1); }

  /* 3. Number */
  [data-m-num] { transition: transform .9s var(--m-ease), opacity .9s var(--m-ease), clip-path .9s var(--m-ease); clip-path: inset(0 0 0 0); }
  [data-m-num].is-waiting { opacity: 0; transform: translateY(18%); clip-path: inset(100% 0 0 0); }

  /* 4. Hover: one arrow nudge for every button */
  :is(.btn, .btn--dark, .btn--light, .btn-primary, .btn-white, .btn-ghost, .nav-cta) svg { transition: transform .15s var(--m-ease); }
  :is(.btn, .btn--dark, .btn--light, .btn-primary, .btn-white, .btn-ghost, .nav-cta):hover svg { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}