/* =========================================================
   Made to Scale: cinematic motion layer
   Everything here is an extra. It only applies when js/motion.js has run
   (class "m-on" on <html>) and the visitor has not asked for reduced motion.
   Remove the <link> to this file and the site looks exactly as before.
   ========================================================= */

:root{
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --hh: 84px; /* header height, kept exact by motion.js */
}

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

  /* ---------- 1. HERO: load sequence ---------- */

  /* headline is hidden for the first instants only, then words rise out of a mask.
     The 2.8s animation is a safety net: if the script never runs, the headline still appears. */
  html.m-pre .hero__title{ opacity: 0; animation: mShow .01s 2.8s forwards; }
  @keyframes mShow{ to{ opacity: 1; } }

  .m-w{ display: inline-block; overflow: clip; vertical-align: top; padding: 0 .04em .14em; margin: 0 -.04em -.14em; }
  .m-wi{ display: inline-block; will-change: transform; }

  .m-on .hero__title.m-split{ animation: none; opacity: 1; }
  .m-on .hero__title.m-split .m-wi{
    transform: translateY(112%);
    animation: mWordUp 1.05s var(--ease-expo) both;
    animation-delay: calc(.3s + var(--i, 0) * .075s);
  }
  @keyframes mWordUp{ from{ transform: translateY(112%) rotate(3deg); } to{ transform: none; } }

  .m-on .hero__inner > .hero__lede{ animation: mRise 1s var(--ease-expo) .95s both; }
  .m-on .hero__inner > .hero__actions{ animation: mRise 1s var(--ease-expo) 1.15s both; }
  @keyframes mRise{ from{ opacity: 0; transform: translateY(26px); } to{ opacity: 1; transform: none; } }

  .m-on .top{ animation: mHeader 1.1s var(--ease-expo) .1s both; }
  @keyframes mHeader{ from{ opacity: 0; translate: 0 -18px; } }

  /* the earth rises into frame from darkness, then the sun comes up */
  .m-on .hero__earth{
    transform-origin: 50% 36%;
    scale: var(--es, 1);
    translate: calc(var(--mx, 0) * -1.6vw) calc(var(--my, 0) * -0.8vw);
    animation: mEarth 3s var(--ease-expo) both;
  }
  @keyframes mEarth{ from{ opacity: 0; scale: 1.16; filter: brightness(.3); } }

  .hero__sun{
    position: absolute; left: 50%; top: 36%; width: 40%; aspect-ratio: 1;
    translate: -50% -50%; pointer-events: none; mix-blend-mode: screen; opacity: 0;
    background: radial-gradient(circle, rgba(255,218,150,.9) 0, rgba(255,190,96,.38) 24%, rgba(255,170,60,0) 64%);
    animation: mSun 3.4s var(--ease-expo) .6s forwards, mBreathe 7s ease-in-out 4s infinite;
  }
  @keyframes mSun{ from{ opacity: 0; scale: .35; } to{ opacity: .9; scale: 1; } }
  @keyframes mBreathe{ 0%, 100%{ opacity: .9; scale: 1; } 50%{ opacity: .58; scale: 1.09; } }

  .m-on .hero__inner{ translate: calc(var(--mx, 0) * .7vw) calc(var(--my, 0) * .5vw); }

  .hero__stars{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; animation: mStars 3s ease-out .4s forwards; }
  @keyframes mStars{ to{ opacity: 1; } }

  /* ---------- 2. HELD STATEMENT: words light up as you scroll ---------- */

  .m-on .intro.m-scene{ height: 230svh; padding: 0; }
  .m-on .intro.m-scene > .wrap{
    position: sticky; top: var(--hh); height: calc(100svh - var(--hh));
    display: flex; align-items: center; justify-content: center;
  }
  .m-on .intro.m-scene .statement{ font-size: clamp(30px, 4.6vw, 68px); line-height: 1.12; max-width: 24ch; }
  .m-ink .m-wi{ display: inline; opacity: .2; }

  /* ---------- 3. HEADINGS: words rise out of a mask when scrolled to ---------- */

  .m-split:not(.hero__title) .m-wi{ transform: translateY(112%); }
  .m-head.is-in .m-wi, .m-split.is-in .m-wi{ animation: mWordUp 1s var(--ease-expo) both; animation-delay: calc(var(--i, 0) * .07s); }
  .m-head > :not(h2){ opacity: 0; transform: translateY(18px); }
  .m-head.is-in > :not(h2){ animation: mRise .9s var(--ease-expo) .35s both; }

  /* ---------- 4. CARDS: light follows the pointer, gentle tilt ---------- */

  .m-card{ position: relative; isolation: isolate; }
  .m-card > *:not(.m-spot){ position: relative; z-index: 1; }
  .m-spot{
    position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    transition: opacity .35s ease;
    background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(211,170,106,.16), rgba(211,170,106,0) 62%);
  }
  .m-card.is-hot .m-spot{ opacity: 1; }

  /* ---------- 5. MAGNETIC BUTTONS ---------- */

  .m-mag{ transition: transform .2s ease, background-color .2s ease, color .2s ease, translate .4s var(--ease-out); }

  /* ---------- 6. Scroll progress bar gets a soft head ---------- */
  .progress{ box-shadow: 0 0 14px rgba(211,170,106,.7); }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 720px){
  .m-on .intro.m-scene{ height: 190svh; }
  .m-on .intro.m-scene .statement{ font-size: clamp(26px, 7.4vw, 40px); }
  .m-on .hero__earth{ translate: 0 0; }
  .m-on .hero__inner{ translate: 0 0; }
}