/* musicchill v1 · Music Studio CHILL PASS + genre moods (music-studio.html only). LOCAL 2026-11-03 ~20:00 AEST. Original NextRising AI CSS.
   Loads AFTER studio.css?v=3 and only overrides backgrounds, accent colours, subtle textures and motion. No copy, structure or price changes.
   Header, footer, menus, glass recipe, tokens, fonts, radii and the original Ted art are untouched. Enroll/CTA buttons stay #BF5508 + white (hover #A64508).
   Section moods: hero = chill lo-fi · Echo's story = lo-fi dusk (blend) · "More than a one-click track" + Try it = bright pop ·
   student previews (turntable) = warm late-night studio · five-lesson journey = moody electronic (timeline panel only; Ted stays on light) ·
   pricing / class times / next step / contact = clean and calm.
   Every band starts/ends on a shared pale tone (#FBFAFF / #FFFBF7) so sections blend without hard edges.
   Rollback: remove the chill.css + chill.js tags (studio.css?v=3 look returns). */
body[data-page="music-studio"]{--mc-paper:#FBFAFF;--mc-warm:#FFFBF7;--mc-ink:#14204A;--mc-mu:#4A5578;
  --mc-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.12  0 0 0 0 0.29  0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- A · hero = chill lo-fi: dusk gradient + soft grain ---------- */
body[data-page="music-studio"] #course-top.hero{background:
  var(--mc-grain) 0 0/160px 160px repeat,
  radial-gradient(60% 70% at 88% 18%,rgba(255,196,160,.38),transparent 70%),
  radial-gradient(55% 60% at 8% 92%,rgba(184,168,255,.28),transparent 72%),
  linear-gradient(180deg,#FFF6F1 0%,#F6F0FF 58%,var(--mc-paper) 100%)}
body[data-page="music-studio"] #course-top.hero::selection{background:#E3DDFB}

/* ---------- B · Echo's story = lo-fi dusk (softer curtains, gentler bars) ---------- */
body[data-page="music-studio"] #echo-player.ma-player-band{background:
  var(--mc-grain) 0 0/160px 160px repeat,
  linear-gradient(180deg,var(--mc-paper) 0%,#F3EEFF 40%,#FFF3EA 100%)}
body[data-page="music-studio"] #echo-player .gbars{opacity:.55}

/* ---------- C · bright pop: "More than a one-click track" (projects) + Try it ---------- */
body[data-page="music-studio"] #what-you-will-create{background:
  radial-gradient(22% 28% at 6% 18%,rgba(255,179,214,.42),transparent 70%),
  radial-gradient(20% 26% at 96% 30%,rgba(255,224,138,.45),transparent 70%),
  radial-gradient(26% 30% at 84% 92%,rgba(160,232,210,.40),transparent 72%),
  radial-gradient(18% 22% at 30% 96%,rgba(150,205,255,.38),transparent 70%),
  linear-gradient(180deg,#FFF3EA 0%,#FFF2F8 30%,#F2F7FF 72%,var(--mc-warm) 100%)}
body[data-page="music-studio"] #try-it{background:
  radial-gradient(24% 40% at 4% 50%,rgba(255,179,214,.32),transparent 70%),
  radial-gradient(24% 40% at 98% 40%,rgba(160,232,210,.34),transparent 70%),
  linear-gradient(180deg,var(--mc-warm) 0%,#F7F3FF 100%)}
body[data-page="music-studio"] #try-it::before{opacity:.35;animation-duration:60s!important}

/* ---------- D · student previews = warm late-night studio (lighter plum, amber lamp, quieter decoration) ---------- */
.ms-show.sa2{background:var(--mc-warm);
  --st-bg:#2B2347;--st-bg2:#3A2C52;--st-desk:#2A2246;--st-row:#352B56;--st-line:#4E4374;--st-tx:#F6F2FA;--st-mu:#D3CBE6;--st-vi:#D9CCFF;--st-or:#F5A35C;--st-ye:#FFD27A}
.sa2-stage{padding:120px 0 150px;background:
  radial-gradient(40% 44% at 22% 30%,rgba(255,176,110,.20),transparent 70%),
  radial-gradient(36% 40% at 82% 70%,rgba(185,160,255,.16),transparent 72%),
  linear-gradient(180deg,#FFF3EA 0%,#5B4268 70px,#3A2C52 170px,var(--st-bg) 55%,#3A2C52 calc(100% - 170px),#5B4268 calc(100% - 70px),var(--mc-warm) 100%)}
.sa2-spot{opacity:.55}
.sa2-word{-webkit-text-stroke:1px rgba(217,204,255,.10);top:70px}
.sa2-curtain{opacity:.22;bottom:70px;height:110px}
.sa2-badge{border-color:rgba(217,204,255,.30);opacity:.8}
.ms-show.sa-on .sa2-badge b{box-shadow:0 0 0 4px rgba(245,163,92,.22)}
.sa2 .ms-panel{background:linear-gradient(180deg,#3A2F5C,var(--st-desk));border-color:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 50px -24px rgba(20,12,40,.55)}
.sa2-deck{background:#2F2650;border-color:var(--st-line)}
.sa2-tt{background:radial-gradient(circle at 50% 50%,#3A2F5E 0 60%,#2F2650 61%)}
.sa2-rec{background:
   radial-gradient(circle,#F5A35C 0 3%,#9C86F9 3.5% 21%,#1A1530 21.5% 23%,transparent 23.5%),
   conic-gradient(from 20deg,rgba(255,255,255,.08),transparent 18%,rgba(255,255,255,.05) 34%,transparent 52%,rgba(255,255,255,.08) 70%,transparent 86%),
   repeating-radial-gradient(circle,#1C1733 0 2px,#272043 2px 3px);box-shadow:0 0 0 2px #4A3F72,0 12px 26px rgba(20,12,40,.4)}
.sa2-ch i{background:#463C6E}
.sa2-ch i:nth-child(-n+3){background:#7FC8B0}
.ms-show.sa-on .sa2-ch i:nth-child(-n+8){background:#8ED6BC}
.ms-show.sa-on .sa2-ch i:nth-child(n+9):nth-child(-n+11){background:#FFD27A}
.ms-show.sa-on .sa2-ch i:nth-child(12){background:#F5A35C}
.sa2 .ms-track.is-playing{border-color:#B3A2FF;box-shadow:inset 3px 0 0 var(--st-or),0 0 0 1px rgba(179,162,255,.28),0 10px 26px -14px rgba(156,134,249,.5)}
.sa2 .ms-bar{background:rgba(217,204,255,.26)}
.sa2 .ms-bar i{background:linear-gradient(90deg,#F5A35C,#FFD27A)}
.sa2 .ms-play{box-shadow:0 4px 12px -6px rgba(191,85,8,.6)}
/* motion: slow, gentle, no flashing */
.ms-show.sa-on .sa2-rec{animation:sa2spin 10s linear infinite}
.ms-show.sa-on .sa2-ch{animation:mcvu 2.6s ease-in-out infinite alternate}
.ms-show.sa-on .sa2-ch + b + .sa2-ch{animation-duration:3.1s;animation-delay:-1.2s}
@keyframes mcvu{0%{--vu:46%}50%{--vu:58%}100%{--vu:52%}}
.sa2-arm{transition-duration:1.6s}
html:not(.rm-user) .ms-track.is-playing .ms-eq i{animation-duration:1.8s}
html:not(.rm-user) .ms-track.is-playing .ms-eq i:nth-child(2n){animation-duration:2.3s}
.ma-playing .ma-vinyl{animation-duration:10s}
.ma-playing .ma-eq i{animation-duration:1.8s}
.ma-playing .ma-eq i:nth-child(2n){animation-duration:2.2s}
.ma-playing .ma-eq i:nth-child(3n){animation-duration:2.6s}
/* after the stage: warm paper, Ted chip + tip */
.sa2-after{background:var(--mc-warm)}
.sa2 .ms-cta-row{position:relative}
button.sa2-ted{cursor:pointer;padding:0;font:inherit}
button.sa2-ted:hover{background:#ECE8FF}
button.sa2-ted:focus-visible{outline:3px solid #7A5AF8;outline-offset:3px}
.mc-tip{position:absolute;z-index:5;left:50%;bottom:calc(100% - 64px);transform:translate(-50%,-100%);width:min(320px,calc(100vw - 40px));
  padding:16px 44px 14px 16px;border-radius:18px;background:#fff;color:var(--mc-ink);border:1px solid #E3DDFB;text-align:left;
  box-shadow:0 18px 40px -18px rgba(20,32,74,.35)}
.mc-tip[hidden]{display:none}
.mc-tip::after{content:"";position:absolute;left:50%;bottom:-8px;width:14px;height:14px;background:#fff;border-right:1px solid #E3DDFB;border-bottom:1px solid #E3DDFB;transform:translateX(-50%) rotate(45deg)}
.mc-tip p{margin:0 0 4px;color:var(--mc-ink);font-size:15px}
.mc-tip p.mc-tip-pain{font-weight:700}
.mc-tip p.mc-tip-help{color:var(--mc-mu)}
.mc-tip .mc-tip-ok{margin-top:10px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid #D6DCE8;background:#fff;color:var(--mc-ink);font:700 14px/1 var(--font,inherit);cursor:pointer}
.mc-tip .mc-tip-x{position:absolute;top:2px;right:2px;width:44px;height:44px;border:0;background:none;color:var(--mc-mu);font-size:22px;line-height:1;cursor:pointer;border-radius:50%}
.mc-tip button:focus-visible{outline:3px solid #7A5AF8;outline-offset:2px}
@media (prefers-reduced-motion:no-preference){html:not(.rm-user) .mc-tip:not([hidden]){animation:mctip .5s ease-out}}
@keyframes mctip{from{opacity:0;transform:translate(-50%,-96%)}to{opacity:1;transform:translate(-50%,-100%)}}
/* optional Chill mode (OFF by default; JS only) */
.mc-chill{justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 14px;border-radius:999px;
  border:1px solid rgba(217,204,255,.45);background:transparent;color:var(--st-tx);font:700 14px/1 var(--font,inherit);cursor:pointer}
.mc-chill::before{content:"";width:30px;height:18px;border-radius:999px;background:#4E4374;box-shadow:inset -12px 0 0 2px #4E4374,inset 0 0 0 2px #4E4374;
  background-image:radial-gradient(circle at 9px 9px,#D3CBE6 6px,transparent 6.5px);transition:background-position .4s}
.mc-chill[aria-pressed="true"]::before{background-color:#8ED6BC;background-image:radial-gradient(circle at 21px 9px,#fff 6px,transparent 6.5px);box-shadow:none}
.mc-chill:hover{border-color:#D9CCFF}
.mc-chill:focus-visible{outline:3px solid #A996FF;outline-offset:3px}
.mc-chill[hidden]{display:none}
.sa2 .ms-panel .mc-chill{grid-column:2}
@media (max-width:860px){.sa2 .ms-panel .mc-chill{grid-column:1 / -1}}

/* ---------- E · five-lesson journey = moody electronic (soft neon on deep blue, timeline panel only) ---------- */
body[data-page="music-studio"] #five-lesson-journey{background:linear-gradient(180deg,#F7F3FF 0%,#EEF0FF 50%,var(--mc-paper) 100%)}
body[data-page="music-studio"] #five-lesson-journey .sec-head{margin-bottom:36px}
body[data-page="music-studio"] #five-lesson-journey .lesson-tl{position:relative;margin-top:108px;padding:26px 22px 14px;border-radius:24px;
  background:radial-gradient(50% 90% at 50% 0%,rgba(122,90,248,.30),transparent 70%),radial-gradient(40% 80% at 100% 100%,rgba(77,186,229,.18),transparent 70%),linear-gradient(180deg,#1B2152,#161B45);
  box-shadow:0 0 0 1px rgba(169,150,255,.25),0 20px 40px -24px rgba(22,27,69,.6)}
body[data-page="music-studio"] #five-lesson-journey .lesson-tl svg text:not([fill="#fff"]){fill:#E8ECF7}
body[data-page="music-studio"] #five-lesson-journey .lesson-tl svg circle{fill:#262C6E;stroke:#A996FF;stroke-width:2}
body[data-page="music-studio"] #five-lesson-journey .lesson-tl svg line{stroke:#F5A35C;filter:drop-shadow(0 0 4px rgba(245,163,92,.45))}
body[data-page="music-studio"] #five-lesson-journey .lesson-tl figcaption{color:#C9D0EA}

/* ---------- F · pricing, class times, next step, contact = clean and calm ---------- */
body[data-page="music-studio"] #learning-formats,body[data-page="music-studio"] #class-times{background:linear-gradient(180deg,var(--mc-paper) 0%,#F6F8FD 100%)}
body[data-page="music-studio"] #your-next-step,body[data-page="music-studio"] #contact-block{background:linear-gradient(180deg,#F6F8FD 0%,var(--mc-paper) 100%)}

/* ---------- G · human mood photos: polaroid wall (own CSS; Masonry Grid Appear used as design reference only, no code taken).
   3 columns on desktop, gap 14px, 12px radius, white polaroid frame, hover 1.02, no lightbox. One-time soft fade-up (chill.js), none under reduced motion.
   Phones (<=768px): MOB-SWIPE-01 row via data-mobswipe on .mc-wall. Illustrative Pexels stock, NOT NextRising AI students (no captions). ---------- */
body[data-page="music-studio"] .mc-photos-band{padding:8px 0 44px;background:linear-gradient(180deg,var(--mc-paper),#F6F1FF 60%,var(--mc-paper))}
.mc-wall{columns:3 220px;column-gap:14px;max-width:980px;margin:0 auto;padding:0}
.mc-wall figure{break-inside:avoid;margin:0 0 14px;padding:9px 9px 22px;background:#fff;border-radius:12px;box-shadow:0 12px 28px -18px rgba(20,32,74,.38),0 0 0 1px rgba(20,32,74,.05);
  transform:rotate(var(--r,0deg));transition:transform .5s ease}
.mc-wall figure:nth-child(1){--r:-1.6deg}.mc-wall figure:nth-child(2){--r:1.2deg}.mc-wall figure:nth-child(3){--r:-.8deg}.mc-wall figure:nth-child(4){--r:1.6deg}.mc-wall figure:nth-child(5){--r:-1.2deg}
.mc-wall img{display:block;width:100%;height:auto;border-radius:6px;filter:saturate(.92)}
@media (hover:hover){.mc-wall figure:hover{transform:rotate(var(--r,0deg)) scale(1.02)}}
.mc-wall.mc-anim figure{opacity:0;translate:0 12px;transition:opacity .9s ease,translate .9s ease,transform .5s ease}
.mc-wall.mc-anim.is-in figure{opacity:1;translate:0 0}
.mc-wall.mc-anim.is-in figure:nth-child(2){transition-delay:.12s}.mc-wall.mc-anim.is-in figure:nth-child(3){transition-delay:.24s}.mc-wall.mc-anim.is-in figure:nth-child(4){transition-delay:.36s}.mc-wall.mc-anim.is-in figure:nth-child(5){transition-delay:.48s}
.mc-credit{margin:6px auto 0;max-width:980px;text-align:center;color:var(--mc-mu);font-size:12.5px;line-height:1.5}
@media (max-width:768px){.mc-wall{columns:auto;align-items:flex-start}.mc-wall figure{transform:none;padding:8px 8px 18px}.mc-wall img{aspect-ratio:4/3;object-fit:cover}}
@media (prefers-reduced-motion:reduce){.mc-wall figure,.mc-wall.mc-anim figure{opacity:1!important;translate:none!important;transition:none!important}}
html.rm-user .mc-wall figure{opacity:1!important;translate:none!important;transition:none!important}

/* journey photo pair (cool-light 06 + 09, Relay 20:06): framed like the neon timeline panel; no Ted nearby (Ted stays on the light head) */
body[data-page="music-studio"] #five-lesson-journey .mc-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 0}
body[data-page="music-studio"] #five-lesson-journey .mc-pair figure{margin:0;padding:8px;border-radius:18px;background:linear-gradient(180deg,#1B2152,#161B45);box-shadow:0 0 0 1px rgba(169,150,255,.25),0 16px 34px -22px rgba(22,27,69,.6)}
body[data-page="music-studio"] #five-lesson-journey .mc-pair img{display:block;width:100%;height:auto;border-radius:12px}
@media (max-width:768px){body[data-page="music-studio"] #five-lesson-journey .lesson-tl{margin-top:72px}}
/* Ted rule: Ted (static, in the light head) must end >=20px above the deep-blue panel; checked by QA */
/* ---------- H · tap targets (QA): sticky Enroll + Echo arrows >=44px ---------- */
.sbar .sbar-go{min-height:44px}
#echo-player .ma-prev,#echo-player .ma-next{min-width:44px}

/* ---------- I · reduced motion: spin, meters, EQ, bars all stop ---------- */
@media (prefers-reduced-motion:reduce){.ms-show.sa-on .sa2-rec,.ms-show.sa-on .sa2-ch,.ms-track .ms-eq i,.ma-vinyl,.ma-eq i,#try-it::before{animation:none!important}.sa2-arm{transition:none}}
html.rm-user .ms-show.sa-on .sa2-rec,html.rm-user .ms-show.sa-on .sa2-ch,html.rm-user .ma-vinyl,html.rm-user .ma-eq i,html.rm-user #try-it::before{animation:none!important}