/* =============================================================================
   CTFY · Muse (/programs/muse/, PRD pages/31) · page-only layer
   Builds on css/site.css (foundation) and css/modules.css (M01–M33). Only page variants live here:
   the H4 product plinth (small native-size image), the "calm weather" sky instrument (M14 right column),
   chapter rhythm. The sky is drawn with data-brainwave divider canvases (static, no JS loop) plus CSS transforms:
   shape and drift speed change, brightness never does. Every loop stops with the pause button, off-screen
   ([data-in-view="false"]), with the G4 toggle (html[data-motion="off"]) and with prefers-reduced-motion.
   ============================================================================= */

#why,#how,#start{scroll-margin-top:96px}

/* ---------- 1 · H4 hero with product plinth ---------- */
.mu-chips{margin-top:26px}
.mu-chips a.chip{text-decoration:none}
.mu-hero .hero__content{align-items:center}
.mu-plinth{position:relative;isolation:isolate;overflow:hidden;margin:0;justify-self:end;width:min(520px,100%);aspect-ratio:5/4;
  display:grid;place-items:center;border-radius:var(--r-xl)}
.mu-plinth__bloom{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(46% 52% at 50% 52%,rgba(62,85,245,.30),rgba(62,85,245,.09) 52%,transparent 74%)}
/* three concentric 1px rings, abstract (no meaning) */
.mu-plinth__rings{position:absolute;inset:0;z-index:-1;pointer-events:none}
.mu-plinth__rings i{position:absolute;left:50%;top:50%;width:calc(32% + var(--i) * 18%);aspect-ratio:1;translate:-50% -50%;
  border-radius:50%;border:1px solid var(--line-1)}
.mu-plinth__stage{display:grid;justify-items:center;width:100%;translate:0 -8px}
.mu-plinth__img,.mu-plinth__refl{display:block;width:min(389px,78%);height:auto}   /* never above its 389px native width */
.mu-plinth__refl{margin-top:3px;opacity:.1;transform:scaleY(-1);
  -webkit-mask-image:linear-gradient(to top,#000,transparent 85%);mask-image:linear-gradient(to top,#000,transparent 85%)}
@media (min-width:1024px){.mu-hero .hero__content{grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:32px clamp(40px,5vw,80px)}}
@media (max-width:1023px){.mu-plinth{justify-self:start;width:100%;max-width:520px}}
/* entrance: rings draw in 70ms apart (scale .92 → 1 + opacity) */
html.js:not([data-motion="off"]) .mu-plinth__rings i{animation:mu-ring .9s var(--ease-out) both;animation-delay:calc(700ms + var(--i) * 70ms)}
@keyframes mu-ring{from{opacity:0;scale:.92}to{opacity:1;scale:1}}

/* ---------- 2 · Why: split + calm-sky card ---------- */
.mu-why .m-split{gap:clamp(32px,6vw,96px)}
/* PRD mobile order: text first, instrument card after it */
@media (max-width:1023px){.mu-why .m-split__media{order:0}}
@media (min-width:1024px){.mu-why .m-split{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.mu-why .m-split__copy p a,.ao-why .m-split__copy p a,.m-route p a{color:var(--fg-link);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.mu-sky{position:relative;isolation:isolate;overflow:hidden;width:100%;height:100%;border-radius:var(--r-xl)}
.mu-sky__scene{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;
  background:linear-gradient(180deg,var(--bg-0) 0%,#0B1030 100%)}
/* a few fixed stars: static, no twinkle */
.mu-sky__stars{position:absolute;inset:0;
  background:
    radial-gradient(1.5px 1.5px at 14% 12%,rgba(255,255,255,.55) 98%,transparent),
    radial-gradient(1px 1px at 33% 24%,rgba(255,255,255,.4) 98%,transparent),
    radial-gradient(1.5px 1.5px at 58% 9%,rgba(255,255,255,.5) 98%,transparent),
    radial-gradient(1px 1px at 81% 19%,rgba(255,255,255,.4) 98%,transparent),
    radial-gradient(1.5px 1.5px at 90% 36%,rgba(255,255,255,.45) 98%,transparent),
    radial-gradient(1px 1px at 8% 41%,rgba(255,255,255,.35) 98%,transparent),
    radial-gradient(1px 1px at 47% 15%,rgba(255,255,255,.35) 98%,transparent),
    radial-gradient(1px 1px at 70% 8%,rgba(255,255,255,.35) 98%,transparent),
    radial-gradient(1px 1px at 24% 33%,rgba(255,255,255,.3) 98%,transparent)}
/* three pre-softened mist layers (radial gradients ≤10% alpha, no filter: blur) */
.mu-sky__mist{position:absolute;left:-30%;width:160%;top:var(--y);height:var(--h);pointer-events:none;
  background:radial-gradient(closest-side,var(--c),transparent)}
/* the line: a wide static canvas (150%) swaying one cycle either way; busy twin carries ×2 frequency and ×1.4 amplitude */
.mu-sky__wave{position:absolute;left:-25%;width:150%;pointer-events:none}
.mu-sky__wave canvas{display:block;width:100%;height:100%}
.mu-sky__wave--calm{top:37%;height:26%;opacity:1}
.mu-sky__wave--busy{top:21.5%;height:57%;opacity:0}
.mu-sky__pause{position:absolute;right:14px;bottom:14px;z-index:3}

/* the loop starts when the card is first in view: calm 9s, wandering 5s, return 6s = 20s (mist profile 40s, mirrored) */
html.js:not([data-motion="off"]) .mu-sky.is-entered .mu-sky__mist{animation:mu-drift 40s linear infinite}
html.js:not([data-motion="off"]) .mu-sky.is-entered .mu-sky__wave--calm{animation:mu-sway-calm 16s var(--ease-in-out) infinite alternate,mu-calm 20s linear infinite}
html.js:not([data-motion="off"]) .mu-sky.is-entered .mu-sky__wave--busy{animation:mu-sway-busy 8s var(--ease-in-out) infinite alternate,mu-busy 20s linear infinite}
.mu-sky.is-paused .mu-sky__scene *,.mu-sky[data-in-view="false"] .mu-sky__scene *{animation-play-state:paused!important}
@keyframes mu-drift{
  0%{transform:translateX(0)} 22.5%{transform:translateX(calc(var(--k) * -4%))} 35%{transform:translateX(calc(var(--k) * -8.4%))}
  50%{transform:translateX(calc(var(--k) * -12.4%))} 72.5%{transform:translateX(calc(var(--k) * -8.4%))}
  85%{transform:translateX(calc(var(--k) * -4%))} 100%{transform:translateX(0)}}
@keyframes mu-sway-calm{from{transform:translateX(8.333%)}to{transform:translateX(-8.333%)}}
@keyframes mu-sway-busy{from{transform:translateX(8.333%)}to{transform:translateX(-8.333%)}}
/* complementary opacities (sum = 1 at every instant): the picture changes shape, never overall brightness */
@keyframes mu-calm{0%,40%{opacity:1}50%,70%{opacity:0}100%{opacity:1}}
@keyframes mu-busy{0%,40%{opacity:0}50%,70%{opacity:1}100%{opacity:0}}
/* off / reduced: still frame in the calm state, no button */
html[data-motion="off"] .mu-sky__scene *{animation:none!important}
html[data-motion="off"] .mu-sky__pause{display:none}
@media (prefers-reduced-motion:reduce){.mu-sky__scene *{animation:none!important}.mu-sky__pause{display:none}}

/* ---------- 3 · Your session · 4 · Note ---------- */
.mu-how .sec__head{max-width:640px}
.mu-note{padding-block:clamp(40px,5vw,72px)}