*{box-sizing:border-box}
:root{
  --bg:#0a0a0c;
  --fg:#e8eaed;
  --muted:#a3a6ad;
  --card:#121218;
  --radius:24px;
  --shadow:0 10px 30px rgba(0,0,0,.5);
}
html,body{height:100%;background:var(--bg);color:var(--fg);margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
#scroller{scroll-snap-type:y mandatory;height:100vh;overflow-y:scroll;perspective:1px}
.panel{
  position:relative;min-height:100vh;display:grid;place-items:center;
  padding:8vh 6vw;scroll-snap-align:start;isolation:isolate;overflow:hidden;
  background:radial-gradient(1200px 600px at 50% 120%, rgba(255,255,255,.04), transparent 60%);
}
.panel::before{
  content:"";position:absolute;inset:0;background:var(--bg);mix-blend:normal;z-index:-3;
}
.panel::after{
  content:"";position:absolute;inset:-10%;background:
    linear-gradient(180deg,transparent,rgba(255,255,255,.04),transparent);
  filter:blur(40px);opacity:.6;z-index:-2;
}
.panel[data-image]::before{
  background:
    linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,.55)),
    var(--img, none);
  background-size:cover; background-position:center;
}
.panel[data-tint]{box-shadow:inset 0 0 0 100vmax color-mix(in oklab, var(--tint,#000) 0%, transparent 100%);}
.panel[data-tint]{--tint:attr(data-tint color, #000)}
.panel .content{
  max-width:900px;text-align:center;backdrop-filter:blur(6px);
  background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);
  padding:32px 28px;border-radius:var(--radius);box-shadow:var(--shadow)
}
h1,h2,h3{margin:0 0 .5rem}
h1{font-size:clamp(2.2rem,3.5vw,3.6rem);letter-spacing:.02em}
h2{font-size:clamp(1.8rem,3vw,3rem);font-weight:800}
h3{font-size:clamp(1.1rem,2.3vw,1.6rem);font-weight:700;color:var(--muted)}
p{font-size:clamp(1rem,1.7vw,1.25rem);line-height:1.55;margin:.25rem 0}
.kicker{color:var(--muted);text-transform:uppercase;letter-spacing:.16em;font-size:.95rem}

.chip{
  display:inline-block;color:#0a0a0c;font-weight:800;padding:.35rem .6rem;border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.35)
}

/* wheel in intro */
.panel-intro .wheel{
  position:absolute;inset:auto;right:-15vmax;bottom:-10vmax;width:60vmax;height:60vmax;border-radius:50%;
  background:conic-gradient(from 0deg, #ff3b3b, #ffd84d, #51a7ff, #bd7cff, #9aa0a6, #ff3b3b);
  filter:blur(60px) saturate(120%);opacity:.15;z-index:-1;
}

/* ending */
.panel-end .content button{
  margin-top:12px;background:#1a1b22;border:1px solid #2a2b33;border-radius:14px;
  padding:.8rem 1.1rem;color:var(--fg);cursor:pointer;font-weight:700
}
.panel-end .content button:hover{transform:translateY(-1px)}

/* mute button */
#mute{
  position:fixed;right:16px;bottom:16px;border:none;border-radius:999px;padding:.7rem .9rem;
  background:#171821;color:#e8eaed;box-shadow:var(--shadow);cursor:pointer;z-index:50
}
#mute[aria-pressed="true"]{opacity:.6}

/* overlay */
.overlay{
  position:fixed;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,#0a0a0c, #0a0a0cb3);
  backdrop-filter:blur(4px);z-index:60;opacity:0;pointer-events:none;transition:opacity .4s ease
}
.overlay.visible{opacity:1;pointer-events:auto}
.overlay-inner{
  text-align:center;background:#11131a;border:1px solid #222434;padding:28px;border-radius:24px;box-shadow:var(--shadow)
}
.overlay h1{font-size:clamp(1.6rem,4vw,3rem)}
.overlay .hint{font-size:2rem;margin-top:.5rem;opacity:.9}

/* subtle glow by section */
.panel[data-glow="red"]::after{background:radial-gradient(60% 60% at 50% 110%, rgba(255,59,59,.2), transparent 60%)}
.panel[data-glow="blue"]::after{background:radial-gradient(60% 60% at 50% 110%, rgba(81,167,255,.2), transparent 60%)}
.panel[data-glow="yellow"]::after{background:radial-gradient(60% 60% at 50% 110%, rgba(255,216,77,.22), transparent 60%)}
.panel[data-glow="purple"]::after{background:radial-gradient(60% 60% at 50% 110%, rgba(189,124,255,.22), transparent 60%)}
.panel[data-glow="grey"]::after{background:radial-gradient(60% 60% at 50% 110%, rgba(154,160,166,.18), transparent 60%)}

/* responsive tweaks */
@media (max-width: 640px){
  .panel .content{padding:22px 18px}
}


/* === Falling colours on final screen === */
.color-rain{
  position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:-1;
}
.color-rain .drop{
  position:absolute; top:-10vh; width:12px; height:12px; border-radius:50%;
  opacity:.9; filter:blur(.2px);
  animation:fall linear infinite;
}
@keyframes fall{
  0%{ transform:translateY(-12vh) translateX(0) scale(1); opacity:.95 }
  100%{ transform:translateY(120vh) translateX(var(--drift, 0px)) scale(1.05); opacity:.9 }
}
.color-rain .s2{ width:10px; height:10px; opacity:.85 }
.color-rain .s3{ width:8px; height:8px; opacity:.8 }


/* === Per-slide effects === */

/* Transition focus */
.panel{ transition: opacity .6s ease; }

/* RED: pulse + subtle shake when active */
.panel[data-effect="red"].active::after{
  animation:pulseRed 2s ease-in-out infinite;
}
.panel[data-effect="red"].active .content{
  animation:shake 3.5s linear infinite;
}
@keyframes pulseRed{
  0%,100%{opacity:.35}
  50%{opacity:.6}
}
@keyframes shake{
  0%,100%{transform:translate3d(0,0,0)}
  10%{transform:translate3d(1px,-1px,0)}
  20%{transform:translate3d(-1px,1px,0)}
  30%{transform:translate3d(.5px,.5px,0)}
  40%{transform:translate3d(-.5px,-.5px,0)}
}

/* BLUE: bubbles */
.panel[data-effect="blue"] .fx-bubbles{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.fx-bubbles span{
  position:absolute;bottom:-10vh;width:12px;height:12px;border-radius:50%;
  background:rgba(81,167,255,.2);filter:blur(1px);animation:rise 12s linear infinite;
}
@keyframes rise{
  0%{transform:translateY(0) scale(1);opacity:.2}
  100%{transform:translateY(-120vh) scale(0.8);opacity:0}
}

/* YELLOW: rotating sunrays */
.panel[data-effect="yellow"] .fx-rays{
  position:absolute;inset:-20%;pointer-events:none;z-index:-1;
  background:conic-gradient(from 0deg, rgba(255,216,77,.05), transparent 8%, rgba(255,216,77,.05) 10%, transparent 30%, rgba(255,216,77,.05) 31%, transparent 60%);
  animation:spin 18s linear infinite; filter:blur(10px) saturate(120%);
}
@keyframes spin{to{transform:rotate(360deg)}}

/* PURPLE: sparkles canvas */
.panel[data-effect="purple"] canvas.fx-sparkles{position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend:screen}

/* GREY: fog drift + vignette grain */
.panel[data-effect="grey"] .fx-fog{
  position:absolute;inset:-10%;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 80% at 50% 120%, rgba(255,255,255,.05), transparent 60%),
             radial-gradient(80% 60% at 10% 30%, rgba(255,255,255,.03), transparent 60%),
             radial-gradient(90% 60% at 90% 40%, rgba(255,255,255,.03), transparent 60%);
  animation:drift 30s ease-in-out infinite alternate; filter:blur(10px);
}
.panel[data-effect="grey"]::before{
  box-shadow: inset 0 0 120px rgba(0,0,0,.6);
}
@keyframes drift{
  0%{transform:translate3d(-2%,0,0)}
  100%{transform:translate3d(2%,0,0)}
}
.panel[data-effect="grey"]::after{
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 1px, transparent 2px);
  opacity:.12;
}