/* =========================================================
   Heaven → Hell — v5 (longer + no angels/demons + extra smooth)
   Keep effects: portal, aurora, bloom, heat haze, particles, meteors, sparks,
   modes, intensity, calm, snap, progress, auto FPS.
   ========================================================= */

:root{
  --t: 0;
  --time: 0;
  --portal: 0;
  --auroraA: 0;
  --mx: 0;
  --my: 0;
  --wHeaven: 1;
  --wTwilight: 0;
  --wHell: 0;

  --grain: 0.06;
  --blur: 12px;
  --cardA: 0.14;
  --cardB: 0.06;

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.72);
  --radius: 22px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Base */
*{ box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--text);
  background: #000;
  overflow-x: hidden;
  letter-spacing: 0.2px;
}
.filters{ position: absolute; width: 0; height: 0; }

/* ===== World ===== */
#world{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  filter:
    url(#heat)
    saturate(calc(1.22 - (var(--t) * 0.52)))
    contrast(calc(1.05 + (var(--t) * 0.28)));
}

#world{
  background:
    radial-gradient(900px 520px at 50% 18%,
      rgba(255,255,255, calc(0.22 * var(--wHeaven))) 0%,
      rgba(255,255,255,0) 62%),

    radial-gradient(1100px 700px at 50% 46%,
      rgba(120,120,255, calc(0.18 * var(--wTwilight))) 0%,
      rgba(120,120,255,0) 60%),

    radial-gradient(900px 520px at 50% 84%,
      rgba(255,110,55, calc(0.20 * var(--wHell))) 0%,
      rgba(255,110,55,0) 65%),

    linear-gradient(to bottom,
      hsl(198 90% 78% / calc(0.95 * var(--wHeaven))) 0%,
      hsl(210 60% 96% / calc(0.60 * var(--wHeaven))) 26%,
      hsl(250 40% 18% / calc(0.95 * var(--wTwilight))) 52%,
      hsl(345 55% 14% / calc(0.90 * var(--wHell))) 74%,
      hsl(0 0% 5% / 0.98) 100%);
}

#world::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(1200px 850px at 50% 10%,
      rgba(255,255,255, calc(0.16 * var(--wHeaven))) 0%,
      rgba(255,255,255,0) 65%),
    radial-gradient(1400px 1000px at 50% 90%,
      rgba(0,0,0, calc(0.10 + (var(--t) * 0.45))) 0%,
      rgba(0,0,0, 0.96) 82%);
  mix-blend-mode: soft-light;
}

#world::after{
  content:"";
  position:absolute;
  inset: 0;
  opacity: var(--grain);
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.9), rgba(255,255,255,0)),
    radial-gradient(1px 1px at 37% 62%, rgba(255,255,255,0.7), rgba(255,255,255,0)),
    radial-gradient(1px 1px at 64% 43%, rgba(255,255,255,0.8), rgba(255,255,255,0)),
    radial-gradient(1px 1px at 78% 19%, rgba(255,255,255,0.6), rgba(255,255,255,0)),
    radial-gradient(1px 1px at 21% 84%, rgba(255,255,255,0.7), rgba(255,255,255,0)),
    radial-gradient(1px 1px at 92% 71%, rgba(255,255,255,0.6), rgba(255,255,255,0));
  filter: blur(0.2px);
  transform: translateZ(0);
}

/* Bloom */
#bloom{
  position:absolute;
  inset: -10%;
  opacity: calc(0.55 * var(--wHeaven));
  background:
    radial-gradient(800px 520px at 50% 18%,
      rgba(255,255,255,0.36),
      rgba(255,255,255,0) 62%),
    radial-gradient(1100px 700px at 30% 28%,
      rgba(170,220,255,0.18),
      rgba(170,220,255,0) 65%);
  filter: blur(24px);
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--mx) * -2%), calc(var(--my) * -2%), 0);
}

/* Portal */
#portal{
  position:absolute;
  inset: 0;
  opacity: calc(0.82 * var(--portal));
  clip-path: circle(calc(var(--portal) * 140vmin) at 50% 56%);
  background:
    radial-gradient(520px 380px at 50% 58%,
      rgba(255,140,70,0.24),
      rgba(255,60,20,0.14),
      rgba(0,0,0,0.0) 70%),
    radial-gradient(1100px 780px at 50% 86%,
      rgba(255,40,20,0.16),
      rgba(0,0,0,0.0) 70%),
    linear-gradient(to bottom, rgba(255,90,45,0.06), rgba(0,0,0,0.26));
  filter: blur(0.4px) saturate(1.15);
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--mx) * 1%), calc(var(--my) * 1%), 0);
}

/* Aurora */
#aurora{
  position:absolute;
  inset: -10%;
  opacity: calc(0.80 * var(--auroraA));
  background:
    linear-gradient(90deg,
      rgba(120,210,255,0.0),
      rgba(120,210,255,0.18),
      rgba(170,120,255,0.20),
      rgba(255,110,200,0.14),
      rgba(255,170,120,0.16),
      rgba(120,210,255,0.0));
  filter: blur(18px);
  transform:
    translateY(calc((0.40 - var(--t)) * 60vh))
    rotate(-6deg);
  animation: auroraMove 7.5s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes auroraMove{
  0%,100%{ transform: translateY(calc((0.40 - var(--t)) * 60vh)) rotate(-6deg) translateX(-2%); }
  50%{ transform: translateY(calc((0.40 - var(--t)) * 60vh)) rotate(-6deg) translateX(2%); }
}

/* FX Canvas */
#fx{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.96;
}

/* Whisper */
.whisper{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 45;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,0.78);
  font-size: 13px;
  letter-spacing: 0.3px;
  opacity: 0;
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
  max-width: min(880px, calc(100% - 28px));
  text-align: center;
}
.whisper.is-on{
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* Topbar */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(0,0,0,0.58), rgba(0,0,0,0));
}
.v3-only .brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 780;
  text-shadow: 0 14px 35px rgba(0,0,0,0.25);
  opacity: calc(0.96 - (var(--t) * 0.18));
}
.v3-only .brand .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(255,255,255,0.95),
      rgba(255,255,255,0.05));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.22),
    0 0 26px rgba(255,255,255, calc(0.35 * var(--wHeaven))),
    0 0 26px rgba(255,120,55, calc(0.30 * var(--wHell)));
}

/* Nav */
.v3-only .nav{ display:flex; gap: 10px; }
.v3-only .nav a{
  position: relative;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  font-size: 14px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.v3-only .nav a::after{
  content:"";
  position:absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(240px 120px at 20% 20%,
      rgba(255,255,255,0.18),
      rgba(255,255,255,0.0) 60%),
    radial-gradient(240px 120px at 80% 80%,
      rgba(255,120,55,0.12),
      rgba(255,120,55,0.0) 60%);
  transition: opacity .18s ease;
}
.v3-only .nav a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 14px 40px rgba(0,0,0,0.22);
}
.v3-only .nav a:hover::after{ opacity: 1; }
.v3-only .nav a.is-active{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.26);
  box-shadow: 0 16px 46px rgba(0,0,0,0.22);
}

/* Controls */
.controls{ display:flex; gap: 10px; align-items:center; }
.chipbtn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.88);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
  user-select: none;
}
.chipbtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 16px 46px rgba(0,0,0,0.24);
}
.chipbtn:active{ transform: translateY(0); }
.chipbtn:focus-visible{ outline: 2px solid rgba(255,255,255,0.35); outline-offset: 2px; }
.chipbtn__dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(255,255,255,0.95),
      rgba(255,255,255,0.08));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.20),
    0 0 24px rgba(255,255,255, calc(0.25 * var(--wHeaven))),
    0 0 24px rgba(255,120,55, calc(0.22 * var(--wHell)));
}
.chipbtn__icon{ font-size: 13px; opacity: 0.92; }
.chipbtn__text{ font-size: 13px; letter-spacing: 0.25px; }

/* Progress */
.progress{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 2px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.progress__bar{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.55),
    rgba(170,120,255,0.55),
    rgba(255,120,55,0.55));
  box-shadow: 0 0 18px rgba(255,255,255,0.18);
}

/* Layout */
main{ position: relative; z-index: 5; }
.panel{
  position: relative;
  min-height: 100vh;
  display: block;
  padding: 0;
  overflow: hidden;
  --p: 0;
}

.panel__content{
  width: min(920px, 100%);
  border-radius: var(--radius);
  padding: 28px 22px;
  background: linear-gradient(to bottom right,
    rgba(255,255,255,var(--cardA)),
    rgba(255,255,255,var(--cardB)));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 22px 70px rgba(0,0,0,0.28);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  transform: translate3d(calc(var(--mx) * -6px), calc(var(--my) * -6px), 0);
}
.v3-only .card{ position: relative; overflow: hidden; }
.v3-only .card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(420px 240px at 20% 30%,
      rgba(255,255,255,0.12),
      rgba(255,255,255,0) 62%),
    radial-gradient(520px 260px at 80% 70%,
      rgba(255,120,55,0.08),
      rgba(255,120,55,0) 62%);
  opacity: 0.55;
  transform: translateX(calc((var(--t) - 0.5) * 30%)) rotate(-8deg);
  transition: opacity .35s ease;
  pointer-events: none;
}
.v3-only .card:hover::before{ opacity: 0.78; }

/* Typography */
.panel__content h1,
.panel__content h2{
  margin: 0 0 10px 0;
  font-size: clamp(28px, 2.9vw, 46px);
  letter-spacing: calc(0.2px + (var(--k) * 0.8px));
  transform: translate3d(0, calc(var(--k) * -2px), 0);
  transition: letter-spacing .35s ease, transform .35s ease;
}
.panel__content p{
  margin: 0;
  line-height: 1.6;
  font-size: clamp(15px, 1.25vw, 18px);
  color: var(--muted);
  opacity: calc(0.92 - (var(--k) * 0.06));
  transition: opacity .35s ease;
}

.chips{ margin-top: 14px; display:flex; flex-wrap: wrap; gap: 10px; }
.chip{
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.84);
}
.chip--warm{ background: rgba(255,110,55,0.12); border-color: rgba(255,140,90,0.18); }

.hint{
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: 0.45px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(4px); } }

/* Choice */
.choice{
  margin-top: 14px;
  display:flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
}
.choice__label{ font-size: 12px; letter-spacing: 0.35px; color: rgba(255,255,255,0.72); margin-right: 2px; }
.choice__btn{
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.86);
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.choice__btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 16px 44px rgba(0,0,0,0.22);
}
.choice__btn.is-active{
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.26);
}

/* Reveal */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* Decorative layers */
.layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  transform: translate3d(calc(var(--mx) * 0.6%), calc(var(--my) * 0.6%), 0);
}

/* Heaven/Cloud layers */
.rays{
  opacity: calc(0.42 * var(--wHeaven));
  background:
    conic-gradient(from 170deg at 50% 18%,
      rgba(255,255,255,0.0),
      rgba(255,255,255,0.22),
      rgba(255,255,255,0.0),
      rgba(255,255,255,0.20),
      rgba(255,255,255,0.0));
  filter: blur(0.6px);
  transform: translate3d(calc(var(--mx) * -0.6%), calc(var(--p) * 16px + var(--my) * -0.4%), 0);
  mix-blend-mode: soft-light;
}

.clouds{
  background:
    radial-gradient(140px 80px at 10% 22%, rgba(255,255,255,0.80), rgba(255,255,255,0) 72%),
    radial-gradient(180px 100px at 26% 26%, rgba(255,255,255,0.76), rgba(255,255,255,0) 74%),
    radial-gradient(210px 120px at 46% 22%, rgba(255,255,255,0.70), rgba(255,255,255,0) 76%),
    radial-gradient(150px 95px at 66% 28%, rgba(255,255,255,0.78), rgba(255,255,255,0) 74%),
    radial-gradient(230px 125px at 84% 20%, rgba(255,255,255,0.66), rgba(255,255,255,0) 77%),
    radial-gradient(310px 170px at 18% 58%, rgba(255,255,255,0.58), rgba(255,255,255,0) 78%),
    radial-gradient(340px 200px at 58% 62%, rgba(255,255,255,0.50), rgba(255,255,255,0) 80%),
    radial-gradient(320px 190px at 86% 58%, rgba(255,255,255,0.54), rgba(255,255,255,0) 80%);
  filter: blur(2px);
}
.cFar{
  opacity: calc(0.40 * var(--wHeaven));
  filter: blur(4px);
  transform: translate3d(calc(var(--mx) * 0.5%), calc(var(--p) * 34px), 0);
  animation: driftFar 22s linear infinite;
}
.cMid{
  opacity: calc(0.56 * var(--wHeaven));
  filter: blur(2.6px);
  transform: translate3d(calc(var(--mx) * 0.3%), calc(var(--p) * 22px), 0);
  animation: driftMid 18s linear infinite;
}
.cNear{
  opacity: calc(0.70 * var(--wHeaven));
  filter: blur(1.8px);
  transform: translate3d(calc(var(--mx) * 0.2%), calc(var(--p) * 12px), 0);
  animation: driftNear 15s linear infinite;
}
@keyframes driftFar{ 0%{ transform: translate3d(2%, calc(var(--p) * 34px), 0); } 50%{ transform: translate3d(-2%, calc(var(--p) * 34px), 0); } 100%{ transform: translate3d(2%, calc(var(--p) * 34px), 0); } }
@keyframes driftMid{ 0%{ transform: translate3d(-2%, calc(var(--p) * 22px), 0); } 50%{ transform: translate3d(2%, calc(var(--p) * 22px), 0); } 100%{ transform: translate3d(-2%, calc(var(--p) * 22px), 0); } }
@keyframes driftNear{ 0%{ transform: translate3d(-1%, calc(var(--p) * 12px), 0); } 50%{ transform: translate3d(1%, calc(var(--p) * 12px), 0); } 100%{ transform: translate3d(-1%, calc(var(--p) * 12px), 0); } }

.sparkles{
  opacity: calc(0.22 * var(--wHeaven));
  background:
    radial-gradient(2px 2px at 12% 38%, rgba(255,255,255,0.8), rgba(255,255,255,0)),
    radial-gradient(2px 2px at 24% 60%, rgba(255,255,255,0.6), rgba(255,255,255,0)),
    radial-gradient(2px 2px at 44% 30%, rgba(255,255,255,0.7), rgba(255,255,255,0)),
    radial-gradient(2px 2px at 66% 54%, rgba(255,255,255,0.6), rgba(255,255,255,0)),
    radial-gradient(2px 2px at 80% 36%, rgba(255,255,255,0.7), rgba(255,255,255,0));
  filter: blur(0.2px);
  animation: twinkle2 4.8s ease-in-out infinite;
}
@keyframes twinkle2{ 0%,100%{ opacity: calc(0.18 * var(--wHeaven)); } 50%{ opacity: calc(0.26 * var(--wHeaven)); } }

.haze{
  opacity: calc(0.28 * var(--wHeaven));
  background:
    radial-gradient(900px 520px at 50% 72%, rgba(255,255,255,0.10), rgba(255,255,255,0) 70%),
    radial-gradient(1100px 700px at 50% 86%, rgba(0,0,0,0.12), rgba(0,0,0,0) 70%);
  filter: blur(18px);
}

/* Twilight */
.mist{
  opacity: calc(0.74 * var(--wTwilight));
  background:
    radial-gradient(560px 300px at 30% 55%, rgba(190,200,255,0.14), rgba(190,200,255,0) 72%),
    radial-gradient(700px 360px at 72% 60%, rgba(220,170,255,0.12), rgba(220,170,255,0) 74%),
    radial-gradient(820px 420px at 50% 78%, rgba(255,255,255,0.08), rgba(255,255,255,0) 80%);
  filter: blur(18px);
  transform: translate3d(calc(var(--mx) * 0.2%), calc(var(--p) * 14px), 0);
  animation: mistMove 11s ease-in-out infinite;
}
@keyframes mistMove{ 0%,100%{ transform: translate3d(-1.6%, calc(var(--p) * 14px), 0); } 50%{ transform: translate3d(1.6%, calc(var(--p) * 18px), 0); } }

.stars{
  opacity: calc(0.46 * var(--wTwilight));
  background:
    radial-gradient(1px 1px at 12% 24%, rgba(255,255,255,0.9), rgba(255,255,255,0)),
    radial-gradient(1px 1px at 22% 38%, rgba(255,255,255,0.7), rgba(255,255,255,0)),
    radial-gradient(1px 1px at 38% 18%, rgba(255,255,255,0.8), rgba(255,255,255,0)),
    radial-gradient(1px 1px at 52% 34%, rgba(255,255,255,0.65), rgba(255,255,255,0)),
    radial-gradient(1px 1px at 68% 22%, rgba(255,255,255,0.75), rgba(255,255,255,0)),
    radial-gradient(1px 1px at 78% 44%, rgba(255,255,255,0.60), rgba(255,255,255,0)),
    radial-gradient(1px 1px at 86% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0));
  filter: blur(0.2px);
  animation: twinkle 4.6s ease-in-out infinite;
  transform: translate3d(calc(var(--mx) * 0.2%), calc(var(--p) * 10px), 0);
}
@keyframes twinkle{ 0%,100%{ opacity: calc(0.40 * var(--wTwilight)); } 50%{ opacity: calc(0.52 * var(--wTwilight)); } }

.nebula{
  opacity: calc(0.34 * var(--wTwilight));
  background:
    radial-gradient(620px 360px at 30% 40%, rgba(160,120,255,0.12), rgba(160,120,255,0) 70%),
    radial-gradient(720px 420px at 70% 54%, rgba(120,210,255,0.10), rgba(120,210,255,0) 72%),
    radial-gradient(820px 480px at 50% 72%, rgba(255,140,220,0.08), rgba(255,140,220,0) 75%);
  filter: blur(22px);
  mix-blend-mode: screen;
}

.veil{
  opacity: calc(0.35 * var(--wTwilight));
  background: linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(0,0,0,0.40));
  mix-blend-mode: multiply;
}

/* Hell */
.heat{
  opacity: calc(0.58 * var(--wHell));
  background:
    radial-gradient(520px 300px at 30% 78%, rgba(255,120,60,0.12), rgba(255,120,60,0) 70%),
    radial-gradient(640px 340px at 70% 80%, rgba(255,80,30,0.10), rgba(255,80,30,0) 72%),
    radial-gradient(900px 460px at 50% 92%, rgba(255,30,10,0.10), rgba(255,30,10,0) 72%);
  filter: blur(18px);
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--mx) * 0.2%), calc((1 - var(--p)) * 18px), 0);
}

.flames{
  opacity: calc(0.95 * var(--wHell));
  background:
    radial-gradient(260px 220px at 12% 110%, rgba(255,130,60,0.26), rgba(255,130,60,0) 72%),
    radial-gradient(320px 280px at 36% 112%, rgba(255,95,25,0.24), rgba(255,95,25,0) 74%),
    radial-gradient(280px 240px at 62% 112%, rgba(255,70,10,0.22), rgba(255,70,10,0) 74%),
    radial-gradient(360px 300px at 90% 112%, rgba(255,130,60,0.20), rgba(255,130,60,0) 74%),
    radial-gradient(760px 600px at 50% 118%, rgba(255,30,10,0.14), rgba(255,30,10,0) 72%);
  filter: blur(1px);
  animation: heatWaves 2.8s ease-in-out infinite;
  transform: translate3d(calc(var(--mx) * 0.2%), 0, 0);
}
@keyframes heatWaves{
  0%,100%{ transform: translate3d(calc(var(--mx) * 0.2%), 0, 0) scaleY(1); }
  50%{ transform: translate3d(calc(var(--mx) * 0.2%), -10px, 0) scaleY(1.03); }
}

.smoke{
  opacity: calc(0.55 * var(--wHell));
  background:
    radial-gradient(520px 320px at 20% 74%, rgba(255,255,255,0.06), rgba(255,255,255,0) 72%),
    radial-gradient(620px 360px at 70% 76%, rgba(255,255,255,0.05), rgba(255,255,255,0) 74%),
    radial-gradient(840px 460px at 50% 86%, rgba(0,0,0,0.18), rgba(0,0,0,0) 72%);
  filter: blur(22px);
  animation: smokeMove 9.5s ease-in-out infinite;
}
@keyframes smokeMove{ 0%,100%{ transform: translateX(-1.4%) translateY(0); } 50%{ transform: translateX(1.4%) translateY(-2%); } }

.silhouettes{
  opacity: calc(0.22 * var(--wHell));
  background:
    linear-gradient(to top, rgba(0,0,0,0.70), rgba(0,0,0,0.0) 52%),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.18) 0px,
      rgba(0,0,0,0.18) 16px,
      rgba(0,0,0,0.0) 16px,
      rgba(0,0,0,0.0) 34px);
  transform: translateY(calc((1 - var(--p)) * 18px));
  mix-blend-mode: multiply;
}

/* Buttons */
.v3-only .btn{
  margin-top: 16px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  padding: 10px 14px;
  border-radius: 999px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.v3-only .btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.26);
  box-shadow: 0 18px 50px rgba(0,0,0,0.25);
}
.v3-only .btn:active{ transform: translateY(0); }

.v3-only .footer{
  position:absolute;
  bottom: 14px;
  width: 100%;
  text-align: center;
  color: rgba(255,255,255,0.62);
  font-size: 12px;
  letter-spacing: 0.2px;
}

/* Responsive */
@media (max-width: 980px){
  .nav{ display:none; }
}
@media (max-width: 680px){
  .panel__content{ padding: 24px 18px; }
  .whisper{ bottom: 14px; font-size: 12px; }
}

/* ===== Presets ===== */
body[data-mode="soft"][data-intensity="low"]{ --grain: 0.040; --blur: 14px; --cardA: 0.16; --cardB: 0.07; }
body[data-mode="soft"][data-intensity="med"]{ --grain: 0.055; --blur: 14px; --cardA: 0.16; --cardB: 0.07; }
body[data-mode="soft"][data-intensity="high"]{ --grain: 0.070; --blur: 14px; --cardA: 0.16; --cardB: 0.07; }

body[data-mode="crisp"][data-intensity="low"]{ --grain: 0.030; --blur: 10px; --cardA: 0.12; --cardB: 0.05; }
body[data-mode="crisp"][data-intensity="med"]{ --grain: 0.045; --blur: 10px; --cardA: 0.12; --cardB: 0.05; }
body[data-mode="crisp"][data-intensity="high"]{ --grain: 0.055; --blur: 10px; --cardA: 0.12; --cardB: 0.05; }

body[data-calm="on"]{ --grain: 0.028; }
body[data-calm="on"] #fx{ opacity: 0.80; }
body[data-calm="on"] .v3-only .card::before{ opacity: 0.36; }