/* MockMuse motion, round 2 (2026-10-28, preview only until picked). Each effect is a class on <html>:
   m-hero + one of m-ha..m-he (the headline builds letter by letter, five styles to choose from; the underline draws after)
   m-loops (a tiny looping animation on each "what we make" card)
   m-slice (section headings and their lines arrive through thin slices, like the reels' slice transitions)
   m-steps (the five steps light up one after another, the line between them fills)
   m-films (bigger films on wide screens) */

/* ---------- 1. hero headline, letter by letter ----------
   Letters are inline-block spans (.ch) grouped per word (.wd, kept unbreakable); .u stays inline so the underline
   sits where it always did. --c = letter number, --n = letter count. */
.hero h1 .wd{display:inline-block;white-space:nowrap}
.hero h1 .ch{display:inline-block;position:relative}
.m-hero .hero h1 .ch{opacity:0}
.m-hero .hero h1.go .ch{animation-duration:.6s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.2,.8,.2,1);
  animation-delay:calc(var(--c) * 42ms)}
/* A · drop: each letter falls into place with a small bounce */
.m-ha .hero h1 .ch{translate:0 -.7em;rotate:-10deg}
.m-ha .hero h1.go .ch{animation-name:mm-drop;animation-timing-function:cubic-bezier(.3,1.5,.5,1);animation-duration:.55s}
@keyframes mm-drop{to{opacity:1;translate:none;rotate:none}}
/* B · assemble: letters fly in from scattered spots and lock into the word */
.m-hb .hero h1 .ch{translate:var(--x) var(--y);rotate:var(--r);scale:.6}
.m-hb .hero h1.go .ch{animation-name:mm-gather;animation-duration:.9s;animation-delay:calc(var(--c) * 28ms)}
@keyframes mm-gather{0%{opacity:0}35%{opacity:1}100%{opacity:1;translate:none;rotate:none;scale:1}}
/* C · rise: letters slide up from behind the baseline, like a title card */
.m-hc .hero h1 .ch{translate:0 .6em;clip-path:inset(0 0 100% 0)}
.m-hc .hero h1.go .ch{animation-name:mm-rise;animation-duration:.6s}
@keyframes mm-rise{to{opacity:1;translate:none;clip-path:inset(-20% -10% -30% -10%)}}
/* D · onion skin: each letter appears with the logo's two echoes trailing behind it */
.m-hd .hero h1 .ch::before,.m-hd .hero h1 .ch::after{content:attr(data-c);position:absolute;left:0;top:0;opacity:0;pointer-events:none}
.m-hd .hero h1 .ch::before{color:var(--hot-2)}.m-hd .hero h1 .ch::after{color:var(--peach)}
.m-hd .hero h1 .ch{translate:.35em 0}
.m-hd .hero h1.go .ch{animation-name:mm-skin;animation-duration:.5s}
.m-hd .hero h1.go .ch::before{animation:mm-echo1 .9s cubic-bezier(.2,.8,.2,1);animation-delay:calc(var(--c) * 42ms)}
.m-hd .hero h1.go .ch::after{animation:mm-echo2 1.05s cubic-bezier(.2,.8,.2,1);animation-delay:calc(var(--c) * 42ms)}
@keyframes mm-skin{to{opacity:1;translate:none}}
@keyframes mm-echo1{0%{opacity:.7;transform:translateX(-.18em)}60%{opacity:.35}100%{opacity:0;transform:none}}
@keyframes mm-echo2{0%{opacity:.5;transform:translateX(-.36em)}70%{opacity:.18}100%{opacity:0;transform:none}}
/* E · focus pull: the letters start wide apart and blurred, then tighten into sharp words */
.m-he .hero h1 .ch{translate:var(--s) 0;filter:blur(10px)}
.m-he .hero h1.go .ch{animation-name:mm-focus;animation-duration:1.1s;animation-delay:calc(var(--c) * 12ms);
  animation-timing-function:cubic-bezier(.16,1,.3,1)}
@keyframes mm-focus{40%{opacity:1}100%{opacity:1;translate:none;filter:none}}
/* the underline draws once the word is built; then the line and buttons follow */
.m-hero .hero h1 .u svg path{stroke-dasharray:1;stroke-dashoffset:1;animation:none}
.m-hero .hero h1.go .u svg path{animation:mm-draw .7s cubic-bezier(.6,0,.2,1) forwards;animation-delay:calc(var(--n) * 42ms + 450ms)}
@keyframes mm-draw{to{stroke-dashoffset:0}}
@keyframes mm-up{to{opacity:1;translate:none}}
.m-hero .hero .lede,.m-hero .hero .ctas{opacity:0;translate:0 14px}
/* the line and buttons don't wait for the headline: they're readable within half a second */
.m-hero .hero h1.go ~ .lede,.m-hero .hero h1.go ~ .ctas{animation:mm-up .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:250ms}
.m-hero .hero h1.go ~ .ctas{animation-delay:380ms}

/* ---------- 2. card loops ---------- */
.loop{display:none}
.m-loops .cards article{position:relative}
.m-loops .loop{display:block;position:absolute;top:20px;right:20px;width:64px;height:64px;color:var(--ink);pointer-events:none}
.m-loops .cards article:first-child .loop{color:var(--cream)}
.m-loops .cards article > .mono:first-child{padding-right:76px}
.loop *{animation-play-state:paused}
.loop.on *{animation-play-state:running}
/* reels: a 9:16 frame with shots sliding through */
.lp-reel .strip{animation:lp-slide 3.6s cubic-bezier(.7,0,.3,1) infinite}
@keyframes lp-slide{0%,22%{transform:translateY(0)}33%,55%{transform:translateY(-40px)}66%,88%{transform:translateY(-80px)}100%{transform:translateY(-120px)}}
/* brand film: a sun rises over the horizon in a wide frame, a light sweeps */
.lp-film .sun{animation:lp-rise 4s ease-in-out infinite}
@keyframes lp-rise{0%{transform:translateY(14px)}50%{transform:translateY(0)}100%{transform:translateY(14px)}}
.lp-film .sweep{animation:lp-sweep 4s linear infinite}
@keyframes lp-sweep{0%{transform:translateX(-30px)}100%{transform:translateX(50px)}}
/* launch: a box pops, rays flash */
.lp-launch .box{transform-origin:32px 46px;animation:lp-pop 2.8s cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes lp-pop{0%,60%{transform:scale(1)}68%{transform:scale(1.14,.9)}78%{transform:scale(.96,1.08)}88%,100%{transform:scale(1)}}
.lp-launch .ray{stroke-dasharray:8;stroke-dashoffset:8;animation:lp-ray 2.8s ease-out infinite}
@keyframes lp-ray{0%,62%{stroke-dashoffset:8;opacity:1}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-8;opacity:0}}
/* explainer: a little diagram draws itself */
.lp-explain .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:lp-ln 3.4s ease-in-out infinite}
.lp-explain .ln2{animation-delay:.5s}
.lp-explain .nd{transform-box:fill-box;transform-origin:center;animation:lp-nd 3.4s ease-in-out infinite}
.lp-explain .nd2{animation-delay:.45s}.lp-explain .nd3{animation-delay:.95s}
@keyframes lp-ln{0%,8%{stroke-dashoffset:1}40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
@keyframes lp-nd{0%,10%{transform:scale(0)}25%,85%{transform:scale(1)}100%{transform:scale(0)}}
/* logo: the M draws itself with two echoes */
.lp-logo .m{stroke-dasharray:1;stroke-dashoffset:1;animation:lp-m 3.2s cubic-bezier(.6,0,.3,1) infinite}
.lp-logo .e1{animation-delay:.12s;opacity:.45}.lp-logo .e2{animation-delay:.24s;opacity:.22}
@keyframes lp-m{0%{stroke-dashoffset:1}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
/* website: the page scrolls inside a browser window */
.lp-web .page{animation:lp-scroll 4.2s cubic-bezier(.6,0,.3,1) infinite}
@keyframes lp-scroll{0%,20%{transform:translateY(0)}50%,70%{transform:translateY(-18px)}100%{transform:translateY(0)}}

/* ---------- 3. slice reveals (headings + the line under them) ---------- */
@property --sl{syntax:"<number>";inherits:false;initial-value:1}
.m-slice h2.rv,.m-slice .slc{--sl:0;opacity:1!important;translate:none!important;
  -webkit-mask:repeating-linear-gradient(180deg,#000 0 calc(var(--sl) * 9px),transparent calc(var(--sl) * 9px) 9px);
  mask:repeating-linear-gradient(180deg,#000 0 calc(var(--sl) * 9px),transparent calc(var(--sl) * 9px) 9px)}
.m-slice h2.rv::before,.m-slice h2.rv::after{display:none}
.m-slice h2.rv.in,.m-slice .slc.in{animation:mm-slice .9s cubic-bezier(.6,0,.2,1) forwards}
.m-slice .slc.in{animation-delay:.18s}
@keyframes mm-slice{0%{--sl:0;transform:translateX(-.25em)}100%{--sl:1;transform:none}}

/* ---------- 4. steps light up in turn ---------- */
.m-steps .flow .dot{transition:background .35s,color .35s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.m-steps .flow li:last-child .dot{background:var(--cream)}
.m-steps .flow li.lit .dot{background:var(--hot);color:var(--ink);transform:scale(1.12)}
.m-steps .flow li.lit.done .dot{transform:none}
.m-steps .flow li:not(:last-child)::after{background:linear-gradient(90deg,var(--hot-1),var(--hot-2)) 0 0/0% 100% no-repeat,#4A372E;
  transition:background-size .5s cubic-bezier(.6,0,.3,1)}
.m-steps .flow li.lit.done:not(:last-child)::after{background-size:100% 100%}
@media (max-width:980px){
  .m-steps .flow li{position:relative}
  .m-steps .flow li:not(:last-child)::before{content:"";position:absolute;left:21px;top:52px;bottom:-14px;width:2px;border-radius:2px;
    background:linear-gradient(180deg,var(--hot-1),var(--hot-2)) 0 0/100% 0% no-repeat,#4A372E;transition:background-size .5s cubic-bezier(.6,0,.3,1)}
  .m-steps .flow li.lit.done:not(:last-child)::before{background-size:100% 100%}
}

/* ---------- 5. bigger films on wide screens ---------- */
@media (min-width:1200px){
  .m-films #showcase .wrap{max-width:none}
  .m-films #showcase .grid{gap:clamp(18px,1.8vw,30px)}
  .m-films #showcase .grid b{font-size:21px}
}

/* ---------- 6. bigger hero reel (desktop): the glow fills the screen height, the reel fills most of the glow ---------- */
@media (min-width:861px){
  .m-bighero .hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-block:clamp(16px,2vw,32px) clamp(48px,6vw,88px)}
  .m-bighero .hero .glow{--gh:clamp(560px,calc(100svh - 150px),900px);aspect-ratio:auto;height:var(--gh)}
  /* frame width from the 9:16 reel: 86% of the glow's height, minus the 12 px glass edge top and bottom */
  .m-bighero .hero .glow .hero-frame{width:calc((var(--gh) * .86 - 24px) * .5625 + 24px);max-width:92%}
}