/* Mori motion layer. Loaded after styles.css. Everything animated here is gated behind html.m-on, which motion.js sets
   only when scripts run AND the visitor has not asked for reduced motion, so no-JS and reduced-motion readers see the
   finished page at once. Only transform / opacity / clip-path are animated (compositor friendly, no layout shift).
   Tokens are documented in docs/MOTION.md. */
:root {
  --m-d-1: 120ms; --m-d-2: 200ms; --m-d-3: 320ms; --m-d-4: 600ms; --m-d-5: 900ms;
  --m-ease: cubic-bezier(0.2, 0.8, 0.2, 1);          /* the site's house ease: quick start, long settle */
  --m-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --m-ease-spring: cubic-bezier(0.34, 1.4, 0.4, 1);   /* a hair of overshoot for small, friendly things */
  --m-stagger: 70ms;
  --m-lift: -4px;
  --m-shadow-1: 0 6px 18px rgba(43, 41, 38, 0.06);
  --m-shadow-2: 0 18px 40px rgba(43, 41, 38, 0.09);
  --m-shadow-3: 0 30px 60px rgba(43, 41, 38, 0.12);
}
[data-theme="dark"] {
  --m-shadow-1: 0 6px 18px rgba(0, 0, 0, 0.35);
  --m-shadow-2: 0 18px 40px rgba(0, 0, 0, 0.45);
  --m-shadow-3: 0 30px 60px rgba(0, 0, 0, 0.55);
}
html { scroll-padding-top: 96px; }

/* ------------------------------------------------------------------ progress hairline: loads, then tracks scroll */
.m-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 200; pointer-events: none; transform-origin: 0 50%; transform: scaleX(var(--m-p, 0)); background: var(--signature); opacity: 0; transition: opacity var(--m-d-3) var(--m-ease); }
[dir="rtl"] .m-progress { transform-origin: 100% 50%; }
.m-on .m-progress { opacity: 1; }
.m-on .m-progress.is-idle { opacity: 0; }

/* ------------------------------------------------------------------ headline word reveal (motion.js wraps words) */
.m-w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.06em 0.14em; margin-block: -0.06em -0.14em; }
.m-wi { display: inline-block; will-change: transform; }
.m-on .m-split:not(.m-go) .m-wi { transform: translateY(112%); }
.m-on .m-split.m-go .m-wi { transform: none; transition: transform var(--m-d-5) var(--m-ease); transition-delay: calc(var(--i, 0) * 55ms + var(--m-base, 0ms)); }
.m-on .m-split.rv:not(.in) { opacity: 1; transform: none; }  /* words carry the entrance; the block itself must not fade twice */

/* ------------------------------------------------------------------ hero staging */
.m-on .hero-stage .phone { animation: m-phone-in 1.1s var(--m-ease) backwards; }
.m-on .hero-stage .p-main { animation-delay: 0.25s; }
.m-on .hero-stage .p-left { animation-delay: 0.42s; }
.m-on .hero-stage .p-right { animation-delay: 0.55s; }
@keyframes m-phone-in { from { opacity: 0; translate: 0 70px; scale: 0.94; } to { opacity: 1; translate: 0 0; scale: 1; } }
.m-on .hero-stage .phone .screen { animation: m-breathe 7s ease-in-out 1.4s infinite; }
@keyframes m-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.012; } }
.m-on .chip3d { animation-name: bob, m-chip-in; animation-duration: 6s, 0.9s; animation-timing-function: ease-in-out, var(--m-ease); animation-iteration-count: infinite, 1; animation-fill-mode: none, backwards; animation-delay: var(--bd, 0s), calc(0.7s + var(--ci, 0) * 0.14s); }
@keyframes m-chip-in { from { opacity: 0; scale: 0.8; } to { opacity: 1; scale: 1; } }
.m-on .bloom { animation: drift 16s ease-in-out infinite alternate, m-bloom 10s ease-in-out infinite; }
@keyframes m-bloom { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.6; } }

/* ------------------------------------------------------------------ panels lift as they enter (only those pre-armed below the fold) */
.m-on .m-panel:not(.m-in) { opacity: 0.001; translate: 0 36px; scale: 0.985; }
.m-on .m-panel { transition: opacity var(--m-d-5) var(--m-ease), translate var(--m-d-5) var(--m-ease), scale var(--m-d-5) var(--m-ease); }

/* ------------------------------------------------------------------ cards, tiles, species: one hover language */
.m-on .card, .m-on .sp, .m-on a.tile, .m-on .tile { transition: transform var(--m-d-4) var(--m-ease), box-shadow var(--m-d-4) var(--m-ease), opacity 0.9s var(--m-ease); }
.m-on .card:hover { box-shadow: var(--m-shadow-3); }
.m-on a.tile:hover { box-shadow: 0 0 0 1px var(--line) inset, var(--m-shadow-2); }
.m-on .sp:hover { box-shadow: 0 0 0 1px var(--line) inset, var(--m-shadow-3); }
@media (hover: hover) { .m-on .card:hover, .m-on a.tile:hover { transform: translateY(var(--m-lift)); } }

/* pets: idle life (separate `translate`/`rotate` properties, so hover transforms still work) */
.m-on .sp .art svg, .m-on .marquee figure svg, .m-on .tile .art svg { animation: m-idle 5.5s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -1.3s); transform-origin: 50% 100%; }
@keyframes m-idle { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -5px; rotate: 0.8deg; } }
.m-on .sp:hover .art svg { animation-duration: 2.8s; }
.m-on .m-blink { transform-box: fill-box; transform-origin: center; animation: m-blink 5s infinite; animation-delay: var(--bk, 1s); }
@keyframes m-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } }

/* ------------------------------------------------------------------ buttons: magnetic pull, arrow glide, press */
.m-on .btn { transition: background var(--m-d-3) var(--m-ease), color var(--m-d-3) var(--m-ease), transform var(--m-d-2) var(--m-ease), translate var(--m-d-2) var(--m-ease-out, var(--m-ease)); translate: var(--mx, 0) var(--my, 0); }
.m-on .btn .arr { transition: background var(--m-d-3) var(--m-ease), color var(--m-d-3) var(--m-ease), transform var(--m-d-3) var(--m-ease-spring); }
.m-on .btn:hover .arr { transform: translateX(3px); }
[dir="rtl"].m-on .btn:hover .arr, [dir="rtl"] .m-on .btn:hover .arr { transform: translateX(-3px); }
.m-on .btn .arr svg { transition: transform var(--m-d-3) var(--m-ease); }
[dir="rtl"] .btn .arr svg { scale: -1 1; }
.m-on .btn:active { transform: scale(0.97); transition-duration: var(--m-d-1); }

/* ------------------------------------------------------------------ links: underline sweep */
.m-on .text-link, .m-on .prose a:not(.btn), .m-on .faq .ans a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size var(--m-d-4) var(--m-ease); padding-bottom: 2px; }
[dir="rtl"].m-on .text-link, [dir="rtl"] .m-on .text-link { background-position: 100% 100%; }
.m-on .text-link:hover, .m-on .prose a:not(.btn):hover, .m-on .faq .ans a:hover { background-size: 0 1px; }
.m-on .foot a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color var(--m-d-2), background-size var(--m-d-4) var(--m-ease); }
.m-on .foot a:hover { background-size: 100% 1px; }
[dir="rtl"] .m-on .foot a { background-position: 100% 100%; }

/* ------------------------------------------------------------------ nav: shrinks and thickens its glass once you scroll */
.m-on .nav-wrap { transition: transform var(--m-d-4) var(--m-ease), top var(--m-d-3) var(--m-ease); }
.m-on .nav { transition: height var(--m-d-3) var(--m-ease), box-shadow var(--m-d-3) var(--m-ease), background var(--m-d-3) var(--m-ease), max-width var(--m-d-4) var(--m-ease); }
.m-on .nav-wrap[data-scrolled] { top: 8px; }
.m-on .nav-wrap[data-scrolled] .nav { height: 54px; max-width: 1040px; box-shadow: var(--m-shadow-2); -webkit-backdrop-filter: saturate(1.5) blur(22px); backdrop-filter: saturate(1.5) blur(22px); }
/* mobile menu button: the two lines morph to a cross with the shared timing tokens (the icon itself is built in styles.css) */
.m-on .menu-btn span::before, .m-on .menu-btn span::after { transition: transform var(--m-d-4) var(--m-ease-spring), width var(--m-d-3) var(--m-ease), background var(--m-d-3) var(--m-ease); }
.m-on .sheet { transition: transform var(--m-d-4) var(--m-ease-in-out), visibility 0s linear var(--m-d-4); }
.m-on.menu-open .sheet { transition: transform var(--m-d-4) var(--m-ease), visibility 0s; }
.m-on .sheet > * { opacity: 0; translate: 0 16px; transition: opacity var(--m-d-3) var(--m-ease), translate var(--m-d-4) var(--m-ease); }
.m-on.menu-open .sheet > * { opacity: 1; translate: 0 0; transition-delay: calc(120ms + var(--si, 0) * 45ms); }

/* ------------------------------------------------------------------ story: line draws with scroll, screens crossfade with depth */
.rail::before { content: ""; position: absolute; inset-block: 13px; inset-inline-start: 13px; width: 1px; background: var(--soft); opacity: 0.6; z-index: 0; }
.rail::after { content: ""; position: absolute; inset-block: 13px; inset-inline-start: 13px; width: 1px; background: var(--signature); transform-origin: 50% 0; transform: scaleY(var(--story-p, 0)); z-index: 0; }
.rail li { position: relative; z-index: 1; }
.rail li i { background: var(--paper); }
.m-on .screen .shot { transform: scale(1.035); filter: saturate(0.9); transition: opacity 0.7s var(--m-ease), transform 1.1s var(--m-ease), filter 0.7s var(--m-ease); }
.m-on .screen .shot.on { transform: none; filter: none; }
.m-on .story-phone .phone { rotate: calc((var(--story-p, 0.5) - 0.5) * 4deg); }  /* driven per frame by the scroll loop; a transition here would restart every frame and stutter */
.m-on .step { transition: opacity 0.6s var(--m-ease), translate 0.8s var(--m-ease); translate: 0 14px; }
.m-on .step.on { translate: 0 0; }
.m-on .step .num { transition: transform 0.9s var(--m-ease); transform-origin: 0 100%; transform: scale(0.94); }
.m-on .step.on .num { transform: none; }

/* ------------------------------------------------------------------ FAQ accordion: height animates (JS measures), chevron already rotates */
.m-on .faq details { interpolate-size: allow-keywords; }
.m-on .faq .ans { animation: none; }
.m-on .faq details > .ans { overflow: hidden; }
.m-faq-anim { overflow: hidden; transition: height var(--m-d-4) var(--m-ease), opacity var(--m-d-4) var(--m-ease); }

/* ------------------------------------------------------------------ marquee: GPU layer, smooth easing at the ends */
.m-on .marquee-track { will-change: transform; }

/* off-screen sections pause their idle loops */
.m-on .m-off *, .m-on .m-off { animation-play-state: paused !important; }

/* ------------------------------------------------------------------ calm down for anyone who asked */
@media (prefers-reduced-motion: reduce) {
  .m-progress { display: none; }
  .m-w, .m-wi { transform: none !important; transition: none !important; }
}