/* GetFame shared motion system (see the contract at the top of assets/js/motion.js).
   Every hidden-start rule is scoped under html.mo, which only exists when JS is running and motion is allowed. */

:root {
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 620ms;
  --dur-rv: 950ms;
}

/* ---------- Reveal: animations with backwards fill, so nothing lingers on the element afterwards ---------- */
.mo [data-rv]:not(.is-in) { opacity: 0; }
.mo [data-rv].is-in { animation: mo-up var(--dur-rv) var(--ease-out-expo) var(--rv-d, 0ms) backwards; }
.mo [data-rv="fade"].is-in { animation-name: mo-fade; }
.mo [data-rv="scale"].is-in { animation-name: mo-scale; }
.mo [data-rv="clip"].is-in { animation-name: mo-clip; animation-duration: 1100ms; }
.mo [data-rv="left"].is-in { animation-name: mo-left; }
.mo [data-rv="right"].is-in { animation-name: mo-right; }
.mo [data-rv="blur"].is-in { animation-name: mo-blur; }
@keyframes mo-up { from { opacity: 0; transform: translate3d(0, 34px, 0); } }
@keyframes mo-fade { from { opacity: 0; } }
@keyframes mo-scale { from { opacity: 0; transform: scale(.92); } }
@keyframes mo-clip { from { opacity: 0; clip-path: inset(100% 0 0 0); transform: translate3d(0, 40px, 0); } 30% { opacity: 1; } to { clip-path: inset(0 0 0 0); } }
@keyframes mo-left { from { opacity: 0; transform: translate3d(-48px, 0, 0); } }
@keyframes mo-right { from { opacity: 0; transform: translate3d(48px, 0, 0); } }
@keyframes mo-blur { from { opacity: 0; filter: blur(14px); transform: translate3d(0, 16px, 0) scale(1.02); } }

/* ---------- Split headings: each word rises out of its own mask ---------- */
.mo-w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .14em; margin-block: -.14em; }
.mo-w > i { display: inline-block; font-style: inherit; }
.mo [data-split]:not(.is-in) .mo-w > i { transform: translate3d(0, 115%, 0); }
.mo [data-split][data-rv]:not(.is-in) { opacity: 1; }
.mo [data-split][data-rv].is-in { animation: none; }
.mo [data-split].is-in .mo-w > i { animation: mo-word 1000ms var(--ease-out-expo) calc(var(--rv-d, 0ms) + var(--w, 0) * var(--w-step, 45ms)) backwards; }
@keyframes mo-word { from { transform: translate3d(0, 115%, 0) rotate(4deg); } }

/* ---------- Counters ---------- */
[data-count] { font-variant-numeric: tabular-nums; }

/* ---------- Pointer ---------- */
.mo [data-tilt] { transform: perspective(1100px) rotateX(calc(var(--ty, 0) * var(--tilt, 6deg) * -1)) rotateY(calc(var(--tx, 0) * var(--tilt, 6deg))); }

/* ---------- Scroll progress line under the nav ---------- */
.mo-bar { position: absolute; left: calc(30px + var(--shift, 0px)); right: calc(30px + var(--shift, 0px)); bottom: -1px; z-index: -1; height: 2px; border-radius: 2px; background: var(--pink-deep); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* ---------- Page-to-page transitions (cross-document View Transitions; ignored where unsupported) ---------- */
@view-transition { navigation: auto; }
.site-head__bar { view-transition-name: gf-nav; }
.top-strip { view-transition-name: gf-strip; }
::view-transition-old(root) { animation: mo-page-out 260ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: mo-page-in 520ms var(--ease-out-expo) 60ms both; }
::view-transition-group(gf-nav), ::view-transition-group(gf-strip) { animation-duration: 420ms; animation-timing-function: var(--ease-out-expo); }
@keyframes mo-page-out { to { opacity: 0; transform: translate3d(0, -14px, 0); } }
@keyframes mo-page-in { from { opacity: 0; transform: translate3d(0, 22px, 0); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .mo-bar { display: none; }
}

/* On phones the line would hang below the header pill as a stray mark. */
@media (max-width: 760px) { .mo-bar { display: none; } }