/* ============================================================
   THE LISTENING ROOM — motion layer v84 (site-wide)
   Cross-page iris transitions · scroll reveals · parallax ·
   listening typography · spotlight cards · magnetic CTAs ·
   aurora · scroll progress.
   Safety: everything is gated by html.mo-on, which the script sets only
   when motion is allowed (no prefers-reduced-motion, not paused).
   Nothing flashes: no luminance change repeats faster than once
   every few seconds; every effect is a single, slow ease.
   ============================================================ */

/* ── 1 · cross-document "iris" transition ───────────────────── */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: .9s; }
::view-transition-old(root) { animation: mo-vt-out .6s cubic-bezier(.65,0,.35,1) both; }
::view-transition-new(root) { animation: mo-vt-in .9s cubic-bezier(.65,0,.35,1) both; }
@keyframes mo-vt-out { to { opacity: 0; transform: scale(.965); filter: blur(5px); } }
@keyframes mo-vt-in {
  from { clip-path: circle(0% at var(--mo-x, 50%) var(--mo-y, 50%)); }
  to   { clip-path: circle(150% at var(--mo-x, 50%) var(--mo-y, 50%)); }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ── 2 · scroll progress hairline ───────────────────────────── */
#mo-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 2147483000; pointer-events: none;
  background: linear-gradient(90deg, #6f2cff, #b783ff 45%, #5fe0e0 80%, #dff39e);
  transform-origin: 0 50%; transform: scaleX(var(--mo-p, 0)); opacity: .9; }
html:not(.mo-on) #mo-progress { display: none; }
@supports (animation-timeline: scroll()) {
  html.mo-on #mo-progress { animation: mo-prog linear both; animation-timeline: scroll(root block); }
  @keyframes mo-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ── 3 · reveals (only for content that starts below the fold) ── */
html.mo-on .mo-r { transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--mo-d, 0ms), transform 1.1s cubic-bezier(.2,.7,.2,1) var(--mo-d, 0ms), filter 1s cubic-bezier(.2,.7,.2,1) var(--mo-d, 0ms); }
html.mo-on .mo-r:not(.mo-in) { opacity: 0; transform: translate3d(0, 34px, 0); }
html.mo-on .mo-r.mo-card:not(.mo-in) { transform: translate3d(0, 40px, 0) scale(.975); filter: blur(6px); }
html.mo-on .mo-r.mo-head:not(.mo-in) { transform: translate3d(0, 26px, 0); filter: blur(4px); }
html.mo-on .mo-r.mo-img:not(.mo-in) { transform: translate3d(0, 46px, 0) scale(.965); filter: saturate(.35) blur(5px); }
html.mo-on .mo-r.mo-in { opacity: 1; transform: none; filter: none; }

/* letters (listening type + typewriter kickers) */
.mo-w { display: inline; } /* keeps the original line-breaking (dashes, overflow-wrap) */
.mo-l { transition: opacity .6s ease calc(var(--mo-d, 0ms) + var(--i, 0) * 22ms), filter .6s ease calc(var(--mo-d, 0ms) + var(--i, 0) * 22ms); }
html.mo-on .mo-split:not(.mo-in) .mo-l { opacity: 0; filter: blur(6px); }
html.mo-on .mo-type:not(.mo-in) .mo-l { opacity: 0; }
html.mo-on .mo-type .mo-l { transition: opacity .25s linear calc(var(--i, 0) * 28ms); filter: none; }

/* ── 4 · parallax (scroll-driven where supported, JS fallback otherwise) ── */
@supports (animation-timeline: view()) {
  html.mo-on .mo-par { animation: mo-par linear both; animation-timeline: view(); animation-range: cover; }
  @keyframes mo-par { from { translate: 0 var(--mo-amp, 22px); } to { translate: 0 calc(var(--mo-amp, 22px) * -1); } }
}
html.mo-on.mo-js-par .mo-par { translate: 0 var(--mo-py, 0px); }

/* ── 5 · spotlight + tilt cards ─────────────────────────────── */
html.mo-on .mo-tilt { --mo-rx: 0deg; --mo-ry: 0deg; }
html.mo-on .mo-tilt.mo-tilting { transform: perspective(1000px) rotateX(var(--mo-rx)) rotateY(var(--mo-ry)) translate3d(0, -3px, 0) !important; transition: transform .18s ease-out !important; }
html.mo-on .mo-tilt.mo-settle { transition: transform .7s cubic-bezier(.2,.8,.2,1) !important; }
.mo-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s ease; z-index: 1;
  background: radial-gradient(420px circle at var(--mo-mx, 50%) var(--mo-my, 50%), rgba(196,166,255,.16), rgba(95,224,224,.06) 35%, transparent 62%);
  mix-blend-mode: screen; }
html.mo-on .mo-tilt.mo-tilting .mo-glare { opacity: 1; }

/* ── 6 · magnetic CTAs ──────────────────────────────────────── */
html.mo-on .mo-mag { translate: var(--mo-tx, 0px) var(--mo-ty, 0px); transition: translate .5s cubic-bezier(.2,.8,.2,1); }
html.mo-on .mo-mag.mo-pull { transition: translate .12s linear; }

/* ── 7 · aurora + cursor aura (dark pages) ──────────────────── */
#mo-aurora { position: fixed; inset: -20vmax; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 2.4s ease; overflow: hidden; }
html.mo-on.mo-dark #mo-aurora { opacity: 1; }
#mo-aurora i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(90px); opacity: .16; will-change: transform; }
#mo-aurora i:nth-child(1) { left: 5%; top: 0%; background: radial-gradient(circle, #6f2cff, transparent 65%); animation: mo-drift-a 46s ease-in-out infinite alternate; }
#mo-aurora i:nth-child(2) { right: 0%; top: 30%; background: radial-gradient(circle, #1d7f86, transparent 65%); animation: mo-drift-b 58s ease-in-out infinite alternate; }
#mo-aurora i:nth-child(3) { left: 30%; bottom: -10%; background: radial-gradient(circle, #8d42e8, transparent 65%); animation: mo-drift-c 52s ease-in-out infinite alternate; opacity: .1; }
@keyframes mo-drift-a { to { transform: translate3d(18vmax, 12vmax, 0) scale(1.15); } }
@keyframes mo-drift-b { to { transform: translate3d(-16vmax, -10vmax, 0) scale(.9); } }
@keyframes mo-drift-c { to { transform: translate3d(-10vmax, -16vmax, 0) scale(1.1); } }
html.mo-paused-anim #mo-aurora i { animation-play-state: paused; }
#mo-aura { position: fixed; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none; z-index: 2147482000;
  background: radial-gradient(circle, rgba(183,131,255,.10), rgba(95,224,224,.04) 38%, transparent 66%); mix-blend-mode: screen;
  transform: translate3d(var(--ax, -999px), var(--ay, -999px), 0); opacity: 0; transition: opacity .8s ease; }
html.mo-on.mo-dark.mo-fine #mo-aura.on { opacity: 1; }

/* ── 8 · motion switch (pages without their own) ────────────── */
#mo-switch { position: fixed; left: 14px; bottom: 14px; z-index: 2147482500; font: 500 11px/1 ui-monospace, "IBM Plex Mono", Menlo, monospace; letter-spacing: .08em;
  text-transform: uppercase; color: #cfc9dc; background: rgba(12,10,18,.62); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 9px 13px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; opacity: .78; transition: opacity .3s ease, border-color .3s ease; }
#mo-switch:hover, #mo-switch:focus-visible { opacity: 1; border-color: #b783ff; outline: none; }
#mo-switch::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5fe0e0; margin-right: 8px; vertical-align: 0; }
#mo-switch[aria-pressed="true"]::before { background: #6b6577; }
.mo-light #mo-switch { color: #2a2433; background: rgba(255,255,255,.7); border-color: rgba(16,13,20,.18); }
@media print { #mo-switch, #mo-aura, #mo-aurora, #mo-progress { display: none !important; } .mo-r, .mo-l { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; } }