/* The Music Wiz — parent site. One bold idea: the hero logo is a playable choir. */
:root{
  --night:#120630; --night-2:#1E0F4A; --deep:#0A0620; --cream:#FFF4EC; --cream-dim:#D9CCEA; --line:rgba(255,244,236,.14);
  --violet:#5B2BE0; --magenta:#E8338F; --orange:#FF9A1F; --gold:#FFC93A;
  --voices:linear-gradient(110deg,#5B2BE0,#E8338F 55%,#FF9A1F);
  --brass:linear-gradient(110deg,#A3102A,#FF5A1F 55%,#FFC21F);
  --strings:linear-gradient(110deg,#2A33D9,#14A3D6 55%,#1FCC8C);
  --f:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--night);color:var(--cream);font-family:var(--f);font-weight:500;font-size:17px;line-height:1.6;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;background:var(--cream);color:var(--night);padding:10px 16px;border-radius:999px;font-weight:700;z-index:100}
.skip:focus{top:12px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 1rem/1 var(--f);padding:16px 26px;border-radius:999px;text-decoration:none;cursor:pointer;border:0;
  transition:transform .2s var(--spring),box-shadow .2s ease,background .2s;white-space:nowrap;color:var(--cream)}
.btn svg{width:18px;height:18px;fill:currentColor}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn-brand{background:var(--voices);box-shadow:0 18px 40px -16px rgba(232,51,143,.8)}
.btn-ghost{background:rgba(255,244,236,.06);box-shadow:inset 0 0 0 2px rgba(255,244,236,.28)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--cream)}
.btn-light{background:var(--cream);color:var(--night)}
.btn-sm{padding:11px 18px;font-size:.9rem}

/* ---------- top bar ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px clamp(16px,4vw,48px);
  transition:background .3s,backdrop-filter .3s,box-shadow .3s}
.bar.scrolled{background:rgba(18,6,48,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--line)}
.bar-logo img{height:36px;width:auto}
.bar-nav{display:flex;gap:6px}
.bar-nav a{text-decoration:none;font-weight:700;font-size:.95rem;padding:9px 14px;border-radius:999px;color:var(--cream-dim)}
.bar-nav a:hover{color:var(--cream);background:rgba(255,244,236,.08)}

/* ---------- hero: the playable stage ---------- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:clamp(20px,4vw,64px);
  padding:110px clamp(16px,5vw,72px) 60px;max-width:1440px;margin:0 auto;isolation:isolate;overflow-x:clip}
.spot{position:absolute;inset:-10% -20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(600px 420px at var(--sx,68%) var(--sy,46%),rgba(232,51,143,.32),transparent 70%),
    radial-gradient(520px 400px at calc(var(--sx,68%) - 14%) calc(var(--sy,46%) + 18%),rgba(91,43,224,.42),transparent 72%),
    radial-gradient(420px 360px at calc(var(--sx,68%) + 16%) calc(var(--sy,46%) - 8%),rgba(255,154,31,.22),transparent 70%);
  transition:background-position .4s}
.hero h1{font-size:clamp(2.5rem,5.3vw,5.6rem);font-weight:900;letter-spacing:-.035em;line-height:.98}
.hero h1 .ln{display:block;white-space:nowrap}
.hero h1 .ln-big{background:var(--voices);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.lede{margin-top:26px;font-size:clamp(1.05rem,1.4vw,1.25rem);max-width:44ch;color:var(--cream-dim)}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.stage{position:relative;display:grid;gap:18px;justify-items:center}
.stage-art{position:relative;width:100%;max-width:760px;aspect-ratio:236/178}
.stage-mark,.rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rings{pointer-events:none}
.hits{position:absolute;inset:0}
.hit{position:absolute;border:0;background:transparent;border-radius:40% 40% 30% 30%;cursor:pointer;padding:0}
.hit:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.stage-mark .singer{transform-box:fill-box;transform-origin:50% 100%;cursor:pointer}
.stage-mark .ribbon{cursor:pointer;transition:filter .3s}
.stage-mark .ribbon.lit{filter:brightness(1.35) drop-shadow(0 0 6px rgba(255,244,236,.6))}
.singer > *{transition:filter .3s}
.singer.lit > *{filter:brightness(1.25) drop-shadow(0 0 5px rgba(255,244,236,.55))}
.ring{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:ring 1.3s var(--ease) forwards}
@keyframes ring{from{transform:scale(.08);opacity:.95}to{transform:scale(1);opacity:0}}
.note-glyph{font:800 9px var(--f);animation:float-note 1.6s var(--ease) forwards}
@keyframes float-note{from{transform:translate(0,0);opacity:0}15%{opacity:1}to{transform:translate(var(--dx,6px),-34px);opacity:0}}

.play-row{display:grid;gap:12px;justify-items:center;text-align:center}
.play-hint{font-weight:600;color:var(--cream-dim);font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{font:700 .95rem var(--f);color:var(--cream);border:0;border-radius:999px;padding:12px 20px;cursor:pointer;position:relative;background:rgba(255,244,236,.06);
  box-shadow:inset 0 0 0 2px rgba(255,244,236,.2);transition:transform .18s var(--spring),box-shadow .2s}
.chip::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:9px;vertical-align:0;background:var(--g)}
.chip-voices{--g:var(--voices)} .chip-brass{--g:var(--brass)} .chip-strings{--g:var(--strings)}
.chip-all{--g:conic-gradient(#5B2BE0,#E8338F,#FF9A1F,#FFC21F,#1FCC8C,#14A3D6,#5B2BE0)}
.chip:hover{box-shadow:inset 0 0 0 2px var(--cream)}
.chip:active,.chip.on{transform:scale(.96)}
.chip.on{background:rgba(255,244,236,.16)}

/* page-load moment: singers rise one by one, ribbons sweep in */
.stage-mark .singer{animation:rise .9s var(--spring) both}
.stage-mark .s0{animation-delay:.35s}.stage-mark .s1{animation-delay:.5s}.stage-mark .s2{animation-delay:.65s}.stage-mark .s3{animation-delay:.8s}
.stage-mark .ribbon{animation:sweep 1s var(--ease) both}
.stage-mark .r-voices{animation-delay:.15s}.stage-mark .r-brass{animation-delay:.25s}.stage-mark .r-strings{animation-delay:.35s}
@keyframes rise{from{transform:translateY(34px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes sweep{from{clip-path:inset(0 100% 0 0);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}
.stage.ready .stage-mark .singer,.stage.ready .stage-mark .ribbon{animation:none}
.stage.ready .stage-mark .singer.sing{animation:sing .55s var(--spring)}
@keyframes sing{0%{transform:none}35%{transform:translateY(-7%) scale(1.06,1.1)}100%{transform:none}}
.hero-copy > *{animation:in .8s var(--ease) both}
.hero-copy h1{animation-delay:.05s}.hero-copy .lede{animation-delay:.2s}.hero-copy .cta{animation-delay:.3s}
@keyframes in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- film ---------- */
.film{padding:clamp(70px,10vw,140px) clamp(16px,5vw,72px);max-width:1280px;margin:0 auto}
.film-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:end;margin-bottom:34px}
.film h2{font-size:clamp(2.2rem,4.6vw,4rem)}
.film-head p{color:var(--cream-dim);max-width:42ch;justify-self:end}
.screen{margin:0;border-radius:clamp(16px,2.4vw,30px);overflow:hidden;background:var(--deep);aspect-ratio:16/9;
  box-shadow:0 60px 120px -40px rgba(91,43,224,.7),0 0 0 1px var(--line)}
.screen video{width:100%;height:100%;object-fit:cover;background:var(--deep)}

/* ---------- family: three full-width stages ---------- */
.family{padding:clamp(40px,6vw,80px) 0 clamp(60px,8vw,110px)}
.family-title{font-size:clamp(2.2rem,4.6vw,4rem);padding:0 clamp(16px,5vw,72px);max-width:1280px;margin:0 auto clamp(28px,4vw,48px)}
.fam{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(20px,4vw,64px);
  padding:clamp(48px,7vw,96px) max(clamp(16px,5vw,72px),calc((100vw - 1280px)/2))}
.fam + .fam{border-top:1px solid var(--line)}
.fam::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55}
.fam-choir::before{background:radial-gradient(70% 90% at 80% 50%,rgba(91,43,224,.55),transparent 70%),radial-gradient(40% 60% at 95% 20%,rgba(232,51,143,.35),transparent 70%)}
.fam-band::before{background:radial-gradient(70% 90% at 20% 50%,rgba(163,16,42,.6),transparent 70%),radial-gradient(40% 60% at 5% 80%,rgba(255,90,31,.32),transparent 70%)}
.fam-orch::before{background:radial-gradient(70% 90% at 80% 50%,rgba(42,51,217,.55),transparent 70%),radial-gradient(40% 60% at 95% 85%,rgba(31,204,140,.3),transparent 70%)}
.fam{isolation:isolate}
.fam-band .fam-copy{order:2}
.fam-copy{display:grid;gap:16px;justify-items:start;max-width:520px}
.fam-icon{width:72px;height:72px;border-radius:17px;box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}
.fam h3{font-size:clamp(2.6rem,5.4vw,4.6rem);font-weight:900;letter-spacing:-.035em}
.fam .wz{-webkit-background-clip:text;background-clip:text;color:transparent}
.fam-choir .wz{background-image:var(--voices)} .fam-band .wz{background-image:var(--brass)} .fam-orch .wz{background-image:var(--strings)}
.fam-for{font-weight:700;font-size:1.1rem;color:var(--cream)}
.fam-copy > p:not(.fam-for):not(.status){color:var(--cream-dim)}
.fam-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.status{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.92rem;color:var(--cream-dim)}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(255,244,236,.45)}
.dot-live{background:#3FE09A;box-shadow:0 0 0 0 rgba(63,224,154,.6);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{to{box-shadow:0 0 0 12px rgba(63,224,154,0)}}
.fam-art{width:100%;max-width:640px;justify-self:center;cursor:pointer}
.fam-mark{width:100%;height:auto;overflow:visible}
.fam-mark .singer{transform-box:fill-box;transform-origin:50% 100%;transition:transform .4s var(--spring)}
.fam-art:hover .singer{transform:translateY(-3%)}
.fam-art.playing .singer{animation:bob .62s ease-in-out infinite alternate}
.fam-art.playing .s1{animation-delay:.12s}.fam-art.playing .s2{animation-delay:.24s}.fam-art.playing .s3{animation-delay:.36s}
@keyframes bob{from{transform:none}to{transform:translateY(-6%) scale(1.03,1.06)}}
.fam-art.playing .string{animation:vibrate .09s linear infinite alternate}
@keyframes vibrate{from{transform:translateY(-.8px)}to{transform:translateY(.8px)}}

/* ---------- how it works ---------- */
.how{padding:clamp(60px,9vw,120px) clamp(16px,5vw,72px);max-width:1280px;margin:0 auto}
.how h2{font-size:clamp(2.2rem,4.6vw,4rem);margin-bottom:clamp(28px,4vw,52px)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);counter-reset:s}
.steps li{display:grid;gap:12px;align-content:start;padding-top:24px;border-top:2px solid var(--line);position:relative}
.steps li::before{content:"";position:absolute;top:-2px;left:0;width:64px;height:2px;background:var(--voices)}
.step-n{font-weight:900;font-size:3.2rem;line-height:1;background:var(--voices);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content}
.steps h3{font-size:1.5rem;letter-spacing:-.01em}
.steps p{color:var(--cream-dim)}

/* ---------- updates ---------- */
.updates{padding:0 clamp(16px,5vw,72px) clamp(70px,10vw,140px);max-width:1280px;margin:0 auto}
.updates-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:start;padding:clamp(28px,5vw,64px);
  border-radius:clamp(20px,3vw,36px);background:linear-gradient(150deg,rgba(91,43,224,.35),rgba(232,51,143,.18) 55%,rgba(255,154,31,.14));box-shadow:inset 0 0 0 1px var(--line)}
.updates h2{font-size:clamp(2.2rem,4.4vw,3.8rem)}
.updates-copy p{margin-top:16px;color:var(--cream-dim);max-width:40ch}
.updates-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:grid;gap:8px;min-width:0}
.field label,.field legend{font-weight:700;font-size:.92rem}
.updates-form input[type=email],.updates-form select{font:600 1rem var(--f);color:var(--cream);background:rgba(10,6,32,.55);border:2px solid rgba(255,244,236,.2);border-radius:14px;padding:14px 16px;width:100%;min-width:0}
.updates-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cream) 50%),linear-gradient(135deg,var(--cream) 50%,transparent 50%);
  background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.updates-form input:focus,.updates-form select:focus{border-color:var(--gold);outline:none}
.interests{grid-column:1/-1;border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.interests legend{width:100%;margin-bottom:8px;padding:0}
.tick{display:inline-flex;align-items:center;gap:10px;font-weight:600;cursor:pointer}
.tick input{width:20px;height:20px;accent-color:var(--magenta)}
.updates-form .btn{grid-column:1/-1;justify-self:start}
.form-note{grid-column:1/-1;font-size:.88rem;color:var(--cream-dim)}
.form-note.ok{color:#7FF0B9;font-weight:700}
.form-note.err{color:#FF9AA8;font-weight:700}
.hp{position:absolute;left:-9999px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:48px clamp(16px,5vw,72px) 56px;display:grid;justify-items:center;gap:16px;text-align:center;color:var(--cream-dim)}
.foot img{height:40px;width:auto}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.foot-links a{font-weight:700;color:var(--cream);text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.foot .small{font-size:.85rem;opacity:.8}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:100px;text-align:left}
  .stage{order:-1}
  .film-head{grid-template-columns:1fr}.film-head p{justify-self:start}
  .fam{grid-template-columns:1fr}
  .fam-band .fam-copy{order:0}
  .fam-art{max-width:520px}
  .steps{grid-template-columns:1fr}
  .updates-card{grid-template-columns:1fr}
}
@media (max-width:720px){
  .bar-nav{display:none}
  .bar-logo img{height:30px}
  .updates-form{grid-template-columns:1fr}
  .btn{padding:15px 22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}