/* music_atmos_v1 — Music Studio companion components (own CSS, no external files).
   Page chrome (header, nav, menus, glass, colours, fonts, footer) is NOT touched here.
   Rollback: remove the <link> to this file and the <script> to music-atmos.js. */
:root{--ma-ink:#14204A;--ma-p:#7A5AF8;--ma-pt:#5534C9;--ma-y:#FEC623;--ma-b:#4DBAE5;--ma-g:#14A38B;--ma-o:#F57E20;--ma-muted:#3E4866}

/* ---------- equaliser bars (shared) ---------- */
.ma-eq{display:inline-flex;align-items:flex-end;gap:3px;height:28px}
.ma-eq i{display:block;width:4px;border-radius:2px;background:linear-gradient(180deg,var(--ma-y),var(--ma-o));height:30%}
.ma-eq i:nth-child(3n+1){height:55%}.ma-eq i:nth-child(4n+2){height:85%}.ma-eq i:nth-child(5n){height:40%}
.ma-playing .ma-eq i{animation:ma-eq .9s ease-in-out infinite alternate}
.ma-playing .ma-eq i:nth-child(2n){animation-duration:.7s}.ma-playing .ma-eq i:nth-child(3n){animation-duration:1.1s}
@keyframes ma-eq{0%{height:18%}50%{height:95%}100%{height:42%}}

/* ---------- waveform divider ---------- */
.ma-wave{display:block;height:28px;margin:0 auto 18px;max-width:640px;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 28'%3E%3Cg fill='%237A5AF8'%3E%3Crect x='0' y='12' width='3' height='4' rx='1.5'/%3E%3Crect x='8' y='9' width='3' height='10' rx='1.5'/%3E%3Crect x='16' y='5' width='3' height='18' rx='1.5'/%3E%3Crect x='24' y='10' width='3' height='8' rx='1.5'/%3E%3Crect x='32' y='2' width='3' height='24' rx='1.5'/%3E%3Crect x='40' y='7' width='3' height='14' rx='1.5'/%3E%3Crect x='48' y='11' width='3' height='6' rx='1.5'/%3E%3Crect x='56' y='4' width='3' height='20' rx='1.5'/%3E%3Crect x='64' y='9' width='3' height='10' rx='1.5'/%3E%3Crect x='72' y='12' width='3' height='4' rx='1.5'/%3E%3Crect x='80' y='6' width='3' height='16' rx='1.5'/%3E%3Crect x='88' y='1' width='3' height='26' rx='1.5'/%3E%3Crect x='96' y='8' width='3' height='12' rx='1.5'/%3E%3Crect x='104' y='11' width='3' height='6' rx='1.5'/%3E%3Crect x='112' y='5' width='3' height='18' rx='1.5'/%3E%3Crect x='120' y='9' width='3' height='10' rx='1.5'/%3E%3Crect x='128' y='3' width='3' height='22' rx='1.5'/%3E%3Crect x='136' y='10' width='3' height='8' rx='1.5'/%3E%3Crect x='144' y='6' width='3' height='16' rx='1.5'/%3E%3Crect x='152' y='12' width='3' height='4' rx='1.5'/%3E%3Crect x='160' y='0' width='3' height='28' rx='1.5'/%3E%3Crect x='168' y='7' width='3' height='14' rx='1.5'/%3E%3Crect x='176' y='4' width='3' height='20' rx='1.5'/%3E%3Crect x='184' y='10' width='3' height='8' rx='1.5'/%3E%3Crect x='192' y='2' width='3' height='24' rx='1.5'/%3E%3Crect x='200' y='8' width='3' height='12' rx='1.5'/%3E%3Crect x='208' y='11' width='3' height='6' rx='1.5'/%3E%3Crect x='216' y='5' width='3' height='18' rx='1.5'/%3E%3Crect x='224' y='9' width='3' height='10' rx='1.5'/%3E%3Crect x='232' y='3' width='3' height='22' rx='1.5'/%3E%3Crect x='240' y='12' width='3' height='4' rx='1.5'/%3E%3Crect x='248' y='6' width='3' height='16' rx='1.5'/%3E%3Crect x='256' y='9' width='3' height='10' rx='1.5'/%3E%3Crect x='264' y='4' width='3' height='20' rx='1.5'/%3E%3Crect x='272' y='10' width='3' height='8' rx='1.5'/%3E%3Crect x='280' y='7' width='3' height='14' rx='1.5'/%3E%3Crect x='288' y='12' width='3' height='4' rx='1.5'/%3E%3Crect x='296' y='8' width='3' height='12' rx='1.5'/%3E%3Crect x='304' y='11' width='3' height='6' rx='1.5'/%3E%3Crect x='312' y='12' width='3' height='4' rx='1.5'/%3E%3C/g%3E%3C/svg%3E") center/auto 100% repeat-x}

/* ---------- Echo player ---------- */
.ma-player-band{padding:34px 0 40px;background:linear-gradient(180deg,var(--n50,#F7F8FC),#fff)}
.ma-player{position:relative;display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1.15fr);gap:28px;align-items:center;
  padding:26px;border-radius:28px;background:rgba(255,255,255,.78);border:1px solid rgba(122,90,248,.22);
  box-shadow:var(--gl-rim,inset 0 1px 0 rgba(255,255,255,.9)),0 30px 60px -40px rgba(20,32,74,.45);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow:hidden;isolation:isolate}
.ma-art{position:relative;width:200px;height:200px}
.ma-vinyl{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,var(--ma-y) 0 13%,#14204A 13.5% 15%,#1d2a5c 15.5% 100%),#14204A;
  box-shadow:0 18px 30px -18px rgba(20,32,74,.6)}
.ma-vinyl::before{content:"";position:absolute;inset:6%;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,.07) 0 1px,transparent 1px 5px);
  -webkit-mask:radial-gradient(circle,transparent 0 22%,#000 22.5%);mask:radial-gradient(circle,transparent 0 22%,#000 22.5%)}
.ma-vinyl::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,rgba(255,255,255,0) 0 12%,rgba(255,255,255,.16) 16%,rgba(255,255,255,0) 22% 62%,rgba(255,255,255,.12) 66%,rgba(255,255,255,0) 72%)}
.ma-art img{position:absolute;right:-6px;bottom:-4px;width:112px;height:auto;border-radius:22px;border:3px solid #fff;box-shadow:0 12px 24px -14px rgba(20,32,74,.55);background:#fff}
.ma-playing .ma-vinyl{animation:ma-spin 6s linear infinite}
@keyframes ma-spin{to{transform:rotate(360deg)}}
.ma-meta{min-width:0}
.ma-k{margin:0 0 4px;font:700 12px/1.3 var(--font-b,inherit);letter-spacing:.08em;text-transform:uppercase;color:var(--ma-pt)}
.ma-meta h2{margin:0 0 6px;color:var(--ma-ink)}
.ma-goal{margin:0 0 14px;color:var(--ma-muted);font-size:16px}
.ma-goal b{color:var(--ma-ink)}
.ma-prog{position:relative;height:6px;border-radius:3px;background:#E4E0F7;overflow:hidden;margin:10px 0 6px}
.ma-prog > span{position:absolute;left:0;top:0;bottom:0;width:20%;border-radius:3px;background:linear-gradient(90deg,var(--ma-p),var(--ma-b));transition:width .5s ease}
.ma-pos{display:flex;justify-content:space-between;gap:10px;margin:0 0 12px;font:600 13px/1.3 var(--font-b,inherit);color:var(--ma-muted);font-variant-numeric:tabular-nums}
.ma-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ma-ctl button{font:700 15px/1 var(--font-b,inherit);color:var(--ma-ink);cursor:pointer;border-radius:999px;border:1px solid rgba(20,32,74,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(241,237,255,.85));box-shadow:inset 0 1px 0 #fff,0 8px 18px -12px rgba(20,32,74,.5);min-height:44px}
.ma-ctl .ma-skip{width:44px;padding:0;display:inline-grid;place-items:center}
.ma-ctl .ma-play{padding:0 20px 0 14px;display:inline-flex;align-items:center;gap:10px;background:var(--ma-ink);color:#fff;border-color:var(--ma-ink)}
.ma-ctl .ma-play:hover{background:#25336b}
.ma-ctl .ma-skip:hover{background:#fff;border-color:var(--ma-p)}
.ma-ctl button:focus-visible,.ma-trk:focus-visible,.ma-tk-pause:focus-visible{outline:3px solid var(--ma-p);outline-offset:3px}
.ma-play svg,.ma-skip svg{width:18px;height:18px}
.ma-play .ma-i-pause{display:none}.ma-playing .ma-play .ma-i-pause{display:block}.ma-playing .ma-play .ma-i-play{display:none}
.ma-ctl .ma-eq{height:24px;margin-left:6px}
.ma-note{margin:10px 0 0;font-size:13px;color:var(--ma-muted)}
.ma-tracks{list-style:none;margin:0;padding:0;display:grid;gap:6px;min-width:0}
.ma-trk{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;width:100%;text-align:left;padding:9px 12px;border-radius:14px;
  border:1px solid transparent;background:transparent;color:var(--ma-ink);font:inherit;cursor:pointer;transition:background .2s,border-color .2s}
.ma-trk:hover{background:rgba(122,90,248,.07)}
.ma-trk .ma-n{font:800 13px/1.6 var(--font-d,inherit);color:var(--ma-pt);font-variant-numeric:tabular-nums}
.ma-trk .ma-l{display:block;font:700 12px/1.3 var(--font-b,inherit);letter-spacing:.06em;text-transform:uppercase;color:var(--ma-pt)}
.ma-trk .ma-t{display:block;font-size:15px;line-height:1.4}
.ma-trk[aria-current="true"]{background:#fff;border-color:rgba(122,90,248,.35);box-shadow:0 10px 22px -16px rgba(85,52,201,.55)}
.ma-trk[aria-current="true"] .ma-n{color:#A64508}
@media (max-width:1000px){.ma-player{grid-template-columns:160px minmax(0,1fr)}.ma-art{width:160px;height:160px}.ma-art img{width:92px}.ma-tracks{grid-column:1 / -1}}
@media (max-width:600px){.ma-player-band{padding:24px 0 28px}.ma-player{grid-template-columns:96px minmax(0,1fr);gap:16px 14px;padding:18px 16px;border-radius:22px}
  .ma-art{width:96px;height:96px;align-self:start}.ma-art img{width:58px;right:-8px;bottom:-6px;border-radius:14px;border-width:2px}
  .ma-goal{font-size:15px;margin-bottom:8px}.ma-ctl-row{grid-column:1 / -1}.ma-trk .ma-t{font-size:14.5px}}
@media (max-width:360px){.ma-player{grid-template-columns:72px minmax(0,1fr)}.ma-art{width:72px;height:72px}.ma-art img{width:46px}}

/* ---------- ticker ---------- */
.ma-ticker{position:relative;display:flex;align-items:center;gap:12px;padding:12px 0;background:var(--ma-ink);color:#fff;overflow:hidden}
.ma-tk-view{flex:1;min-width:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ma-tk-track{display:flex;width:max-content}
.ma-tk-group{display:flex;align-items:center;gap:22px;padding-right:22px;white-space:nowrap;font:700 17px/1.2 var(--font-d,inherit)}
.ma-tk-group span{display:inline-flex;align-items:center;gap:22px}
.ma-tk-group span:not(.ma-dup)::after{content:"";width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='%23FEC623'%3E%3Crect x='0' y='5' width='2.4' height='4' rx='1'/%3E%3Crect x='3.8' y='2' width='2.4' height='10' rx='1'/%3E%3Crect x='7.6' y='0' width='2.4' height='14' rx='1'/%3E%3Crect x='11.4' y='4' width='2.4' height='6' rx='1'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.ma-tk-group span.ma-y{color:var(--ma-y)}
.ma-tk-pause{flex:none;margin-right:16px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);color:#fff;font:700 13px/1 var(--font-b,inherit);cursor:pointer}
.ma-tk-pause:hover{background:rgba(255,255,255,.18)}
@media (prefers-reduced-motion:no-preference){html:not(.rm-user) .ma-ticker:not(.ma-tk-off) .ma-tk-track{animation:ma-tk 38s linear infinite}}
.ma-ticker:hover .ma-tk-track,.ma-ticker:focus-within .ma-tk-track{animation-play-state:paused}
@keyframes ma-tk{to{transform:translateX(-50%)}}
@media (max-width:600px){.ma-tk-group{font-size:15px;gap:16px;padding-right:16px}.ma-tk-group span{gap:16px}.ma-tk-pause{margin-right:10px}}
/* static fallback: wrap words, hide the duplicate + pause button */
@media (prefers-reduced-motion:reduce){.ma-tk-view{-webkit-mask:none;mask:none;padding:0 16px}.ma-tk-track{width:auto}.ma-tk-group{flex-wrap:wrap;white-space:normal;justify-content:center;row-gap:8px}.ma-tk-group[aria-hidden]{display:none}.ma-tk-pause{display:none}}
html.rm-user .ma-tk-view{-webkit-mask:none;mask:none;padding:0 16px}html.rm-user .ma-tk-track{width:auto}html.rm-user .ma-tk-group{flex-wrap:wrap;white-space:normal;justify-content:center;row-gap:8px}html.rm-user .ma-tk-group[aria-hidden]{display:none}html.rm-user .ma-tk-pause{display:none}

/* vinyl peeking from behind the course cover */
.cv-fig.ma-cv{position:relative;isolation:isolate}
.cv-fig.ma-cv .ma-vinyl{inset:6% -9% 6% auto;width:auto;aspect-ratio:1;height:88%;z-index:-1;transition:transform .8s ease}
.cv-fig.ma-cv:hover .ma-vinyl{transform:translateX(6%) rotate(40deg)}
@media (max-width:600px){.cv-fig.ma-cv .ma-vinyl{right:-5%}}

/* ---------- reduced motion: everything static ---------- */
@media (prefers-reduced-motion:reduce){.ma-playing .ma-eq i,.ma-playing .ma-vinyl{animation:none!important}.ma-prog > span,.cv-fig.ma-cv .ma-vinyl{transition:none!important}}
html.rm-user .ma-playing .ma-eq i,html.rm-user .ma-playing .ma-vinyl{animation:none!important}
html.rm-user .ma-prog > span{transition:none!important}

/* no-JS: hide controls that need JS */
html:not(.ma-js) .ma-ctl,html:not(.ma-js) .ma-prog,html:not(.ma-js) .ma-pos-now,html:not(.ma-js) .ma-tk-pause{display:none}
html:not(.ma-js) .ma-trk{cursor:default}
.ma-tk-group .ma-dup{display:contents}
@media (prefers-reduced-motion:reduce){.ma-tk-group .ma-dup{display:none}}
html.rm-user .ma-tk-group .ma-dup{display:none}

/* ---------- PLACEHOLDER SLOTS: Rowan drops in downloaded components here (static stand-ins only) ---------- */
.ma-slot{position:relative;border:2px dashed rgba(85,52,201,.45);border-radius:22px;padding:34px 14px 14px;margin:10px 0}
.ma-slot-inline{display:inline-block;max-width:100%;padding:30px 8px 8px;margin:0 0 6px}
.ma-slot-tag{position:absolute;top:-1px;left:14px;transform:translateY(-50%);margin:0;max-width:calc(100% - 28px);
  padding:4px 10px;border-radius:999px;background:#F1EDFF;border:1px solid rgba(85,52,201,.35);color:#4A2DB3;font:700 12px/1.3 var(--font-b,system-ui,sans-serif);letter-spacing:.02em}
.ma-slot-tag small{font-weight:600;font-size:11px;color:#3E4866}
.ma-slot > .ma-slot-tag,.ma-slot-inline > .ma-slot-tag{top:8px;transform:none}
.ma-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.ma-tags .ma-slot-tag{position:static;transform:none;max-width:100%}
.ma-slot-note{margin:0;padding:18px;border-radius:14px;background:rgba(241,237,255,.6);color:#3E4866;font-size:14px;text-align:center}
.ma-player-band .wrap{position:relative}
.ma-player{z-index:1}
@media (max-width:600px){.ma-slot{padding:34px 8px 8px;border-radius:16px}}
/* phone: art floats beside the title, controls run full width */
@media (max-width:600px){
  .ma-player{display:block}
  .ma-art{float:left;margin:2px 14px 6px 0}
  
  .ma-prog{clear:both}
  .ma-pos{flex-wrap:wrap;row-gap:2px}
  .ma-ctl{flex-wrap:nowrap}
  .ma-ctl .ma-play{flex:1;justify-content:center;padding:0 14px}
  .ma-tracks{clear:both;margin-top:14px}
}
@media (max-width:360px){.ma-ctl .ma-eq{display:none}.ma-k{font-size:11px}}
.ma-ctl .ma-play{white-space:nowrap}
@media (max-width:360px){.ma-ctl{gap:6px}.ma-ctl .ma-skip{width:40px}.ma-ctl .ma-play{font-size:14px;padding:0 10px;gap:6px}}
.ma-slot{padding-top:42px}.ma-slot > h3{margin-top:0}.l1-plan .ma-slot{padding-left:18px}

/* blend_v1 (2026-11-03 18:2x AEST, Rowan 17:42/18:00): Framer atmosphere uses the NextRising foundation tokens. Rollback: delete this block. */
/* MED 2: player = site glass_v1 recipe, 24px radius; violet only as a 3px accent line on the left */
.ma-player{border-radius:24px;border:1px solid var(--gl-line,rgba(200,208,226,.72));
  background:rgba(255,255,255,.66) var(--gl-sheen,none);-webkit-backdrop-filter:var(--gl-blur,blur(18px) saturate(1.7));backdrop-filter:var(--gl-blur,blur(18px) saturate(1.7));
  box-shadow:var(--gl-rim),var(--gl-drop),inset 3px 0 0 var(--ma-p,#7A5AF8)}
@media (max-width:600px){.ma-player{border-radius:20px;-webkit-backdrop-filter:var(--gl-blur-m,blur(12px) saturate(1.55));backdrop-filter:var(--gl-blur-m,blur(12px) saturate(1.55))}}
/* MED 5: pending slots = site grey dashed placeholder (.ph look) in the site font */
.ma-slot{border:2px dashed #AEB8CC;border-radius:18px;background:repeating-linear-gradient(135deg,rgba(243,245,249,.7) 0 12px,rgba(238,241,246,.7) 12px 24px)}
.ma-slot-tag{background:#fff;border:1px solid #AEB8CC;color:#3E4866;font-family:inherit}
.ma-slot-note{background:#F3F5F9}
/* LOW 8: atmosphere colours point at the site palette tokens where the site defines them */
:root{--ma-ink:var(--ink,#14204A);--ma-muted:var(--muted,#3E4866)}