/* Motion Plus: chapter rail, mask reveals, scroll-drawn score, sound toggle.
   One easing set for everything new: --ease (existing), --ease-io, durations --t1/--t2/--t3. */
:root{--ease-io:cubic-bezier(.65,0,.35,1);--t1:.35s;--t2:.9s;--t3:1.3s}

/* ---------- 1. Chapter rail ---------- */
.mp-rail{position:fixed;right:max(18px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);z-index:55;display:none}
.mp-rail ol{list-style:none;margin:0;padding:10px 6px;display:flex;flex-direction:column;gap:2px;border-radius:999px;background:rgba(244,242,236,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line2,rgba(0,0,0,.08));transition:background var(--t2) var(--ease),border-color var(--t2) var(--ease)}
.mp-rail a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:10px;height:28px;padding:0 8px;text-decoration:none;color:var(--ink,#12111C);font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.12em}
.mp-rail .n{opacity:.45;transition:opacity var(--t1) var(--ease),transform var(--t1) var(--ease)}
.mp-rail .bar{display:block;width:10px;height:1.5px;background:currentColor;opacity:.35;transition:width var(--t2) var(--ease),opacity var(--t1) var(--ease)}
.mp-rail .lb{position:absolute;right:calc(100% + 10px);top:50%;white-space:nowrap;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--ink,#12111C);color:var(--bg,#F4F2EC);opacity:0;pointer-events:none;transform:translate(8px,-50%);clip-path:inset(0 0 0 100% round 999px);transition:opacity var(--t1) var(--ease),transform var(--t1) var(--ease),clip-path var(--t1) var(--ease)}
.mp-rail a:hover .lb,.mp-rail a:focus-visible .lb{opacity:1;transform:translate(0,-50%);clip-path:inset(0 0 0 0 round 999px)}
.mp-rail a.on .n{opacity:1}
.mp-rail a.on .bar{opacity:1;width:22px}
.mp-rail a:hover .n{opacity:.9}
.mp-rail a:focus-visible{outline:2px solid var(--mood,#FBAB3E);outline-offset:2px;border-radius:999px}
html.dk .mp-rail ol,.mp-rail.dark ol{background:rgba(10,8,54,.45);border-color:rgba(255,255,255,.14)}
html.dk .mp-rail a,.mp-rail.dark a{color:#F2F0FB}
html.dk .mp-rail .lb,.mp-rail.dark .lb{background:#F2F0FB;color:#0A0836}
@media (min-width:1180px) and (pointer:fine){.mp-rail.ready{display:block}}

/* ---------- 2. Mask reveals (cards, rungs, facts, photos) ---------- */
.js .mp-mask[data-reveal]{clip-path:inset(18% 0 0 0 round 22px);transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease),clip-path var(--t3) var(--ease);transition-delay:var(--d,0s)}
.js .mp-mask[data-reveal].in{clip-path:inset(0 0 0 0 round 22px)}
.mp-img{display:block}.js .mp-img{clip-path:inset(0 0 100% 0);transition:clip-path var(--t3) var(--ease-io)}
.js .mp-img.in{clip-path:inset(0 0 0 0)}
.js .mp-img img{transform:scale(1.12);transition:transform 1.6s var(--ease)}
.js .mp-img.in img{transform:none}

/* Section wipe: the dark score panel opens like an iris as it scrolls in */
.mp-wipe{clip-path:inset(calc(var(--mpw,1) * 9%) calc(var(--mpw,1) * 7%) round calc(var(--mpw,1) * 120px + 40px));will-change:clip-path}

/* Light parallax helper (pearl sections only) */
.mp-par{translate:0 var(--mpy,0px)}

/* ---------- 3. Scroll-drawn score ---------- */
.dial[data-dial-scroll] .pg{transition:none}
.mp-trend{margin-top:16px;padding:12px 4px 2px;border-top:1px solid rgba(255,255,255,.12)}
.mp-trend .hd{display:flex;justify-content:space-between;font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.mp-trend svg{display:block;width:100%;height:auto;margin-top:8px;overflow:visible}
.mp-trend .grid line{stroke:rgba(255,255,255,.1);stroke-width:1}
.mp-trend .area{fill:url(#mpTrendFill);opacity:var(--mpa,0)}
.mp-trend .ln{fill:none;stroke:#FBAB3E;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mp-trend .pt{fill:#0A0836;stroke:#FBAB3E;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity var(--t1) var(--ease),transform var(--t1) var(--ease)}
.mp-trend .pt.on{opacity:1;transform:none}
.mp-trend .ax{display:flex;justify-content:space-between;font-family:var(--mono,monospace);font-size:10px;letter-spacing:.1em;opacity:.55;margin-top:4px}

/* ---------- 4. Sound toggle ---------- */
.mp-snd{display:inline-flex;align-items:center;gap:8px;height:40px;min-width:40px;padding:0 12px;border-radius:999px;border:1px solid var(--line,rgba(0,0,0,.12));background:#fff9;color:var(--muted,#555);font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:color var(--t1) var(--ease),background var(--t1) var(--ease)}
.mp-snd:hover{color:var(--ink,#12111C);background:#fffc}
.mp-snd:focus-visible{outline:2px solid var(--ring,var(--mood,#FBAB3E));outline-offset:2px}
.mp-snd .eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.mp-snd .eq i{display:block;width:2px;height:5px;background:currentColor;border-radius:1px;transition:height var(--t1) var(--ease)}
.mp-snd[aria-pressed="true"]{color:var(--ink,#12111C)}
.mp-snd[aria-pressed="true"] .eq i{animation:mpEq 1.1s var(--ease-io) infinite alternate}
.mp-snd[aria-pressed="true"] .eq i:nth-child(2){animation-delay:-.4s}
.mp-snd[aria-pressed="true"] .eq i:nth-child(3){animation-delay:-.75s}
@keyframes mpEq{0%{height:3px}100%{height:12px}}
html.dk .mp-snd{background:#ffffff14;border-color:#ffffff33;color:#f2f0fbb3}
html.dk .mp-snd:hover,html.dk .mp-snd[aria-pressed="true"]{color:#F2F0FB;background:#ffffff26}
@media (max-width:900px){.navcta .mp-snd .t{display:none}.navcta .mp-snd{width:40px;padding:0;justify-content:center}}@media (max-width:640px){.navcta .mp-snd{display:none}}
.mp-hint{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);z-index:70;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 18px;border-radius:999px;background:var(--ink,#12111C);color:var(--bg,#F4F2EC);font-size:14px;box-shadow:0 12px 40px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease);max-width:calc(100vw - 32px)}
.mp-hint.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.mp-hint button{border:0;border-radius:999px;padding:8px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;min-height:36px}
.mp-hint .y{background:#FBAB3E;color:#0A0836}
.mp-hint .x{background:transparent;color:inherit;opacity:.7}

/* ---------- Reduced motion: everything settles instantly ---------- */
@media (prefers-reduced-motion:reduce){
  .js .mp-mask[data-reveal],.js .mp-img,.mp-wipe{clip-path:none!important}
  .js .mp-img img{transform:none!important}.mp-par{translate:none!important}
  .mp-snd .eq i{animation:none!important}
  .mp-rail *,.mp-hint{transition:none!important}
}
.mp-snd .eq i:nth-child(2){height:9px}.mp-snd .eq i:nth-child(3){height:6px}
@media (max-width:640px){.mp-hint{left:16px;right:16px;transform:translateY(16px);flex-wrap:wrap;border-radius:20px;padding:14px 14px 12px 18px}.mp-hint.show{transform:none}.mp-hint span{flex:1 1 100%}}