:root{
  --bg-top:#0e0b10;
  --bg-mid:#0a080b;
  --bg-bottom:#020202;
  --glow:#ffc774;
  --glow-soft: rgba(255,199,116,0.16);
  --glow-dim: rgba(255,199,116,0.06);
  --plum: rgba(120,72,150,0.10);
  --indigo: rgba(60,80,150,0.08);
  --text:#eae6de;
  --text-dim: rgba(234,230,222,0.5);
  --text-faint: rgba(234,230,222,0.28);
  --line: rgba(234,230,222,0.1);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  position:relative;
  min-height:100vh;
  overflow-x:hidden;
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(ellipse 65% 42% at 50% 2%, rgba(255,183,110,0.10), transparent 60%),
    radial-gradient(ellipse 55% 46% at 12% 96%, var(--plum), transparent 62%),
    radial-gradient(ellipse 50% 42% at 90% 88%, var(--indigo), transparent 60%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bottom) 100%);
}

/* soft film grain for texture, keeps flat gradients from looking sterile */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:999;
  opacity:0.03;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:998;
  box-shadow: inset 0 0 14vw 3vw rgba(0,0,0,0.65);
}

section{ position:relative; width:100%; min-height:100vh; display:flex; align-items:center; justify-content:center; }
.hidden{ display:none !important; }

/* ---------- 3D chamber background ---------- */
.ambient{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.chamber{
  position:absolute; inset:0;
  perspective:1000px;
  perspective-origin:50% 30%;
  overflow:hidden;
}
.chamber-wall{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 55% 40% at 50% 14%, rgba(255,199,116,0.13), transparent 62%),
    linear-gradient(180deg, #100d12 0%, #08070a 55%, #020202 100%);
}
.chamber-floor{
  position:absolute;
  left:-60%; right:-60%; bottom:0; height:62%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 140px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 70px),
    linear-gradient(180deg, rgba(18,15,13,0.95) 0%, #000 90%);
  transform: rotateX(80deg);
  transform-origin: top center;
  -webkit-mask-image: radial-gradient(ellipse 55% 80% at 50% 0%, black 0%, black 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 55% 80% at 50% 0%, black 0%, black 30%, transparent 78%);
}

/* ---------- LANDING ---------- */
/* height (not min-height) + overflow:hidden guarantees the whole pitch
   fits in one viewport, no scrolling — 100dvh accounts for mobile browser
   chrome, with 100vh as the fallback for browsers that don't support it. */
#landing{
  flex-direction:column;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  padding:2.5vh 6vw;
  text-align:center;
  z-index:2;
}

.brand-mark{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-bottom:1.8vh;
  z-index:2;
}
.brand-glyph{
  width:26px; height:26px;
  color:var(--glow);
  opacity:0.85;
}
.wordmark{
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:0.5em;
  color:var(--text-dim);
  text-transform:uppercase;
  z-index:2;
}

/* ---------- bulb / light chamber ---------- */
.bulb-stage{
  position:relative;
  width:100%;
  max-width:520px;
  height:clamp(170px, 24vh, 230px);
  margin:0 auto;
  z-index:2;
}
.light-cone{
  position:absolute;
  top:68px; left:50%;
  width:190px; height:280px;
  transform:translateX(-50%);
  clip-path: polygon(44% 0%, 56% 0%, 100% 100%, 0% 100%);
  background:linear-gradient(180deg, rgba(255,199,116,0.18) 0%, rgba(255,199,116,0.05) 55%, transparent 100%);
  filter:blur(22px);
  opacity:0;
  z-index:1;
  transition:opacity 1.1s ease;
}
.floor-glow{
  position:absolute;
  bottom:0; left:50%;
  width:60%; height:70px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(255,199,116,0.16), transparent 72%);
  filter:blur(14px);
  opacity:0;
  transition:opacity 1.1s ease;
  z-index:1;
}
.bulb-stage.lit .light-cone{ opacity:0.8; }
.bulb-stage.lit .floor-glow{ opacity:1; }

.bulb-wrap{
  position:relative;
  width:140px;
  height:134px;
  margin:0 auto;
  transform-origin:50% 0%;
  animation: sway 7s ease-in-out infinite alternate;
  z-index:3;
}
@keyframes sway{
  0%{ transform:rotate(-1.4deg); }
  100%{ transform:rotate(1.4deg); }
}
.bulb-wrap svg{ width:100%; height:100%; overflow:visible; }

/* --- lamp: off by default, only comes alive when the cord is pulled --- */
.bulb-glow-ambient{
  position:absolute;
  top:-50px; left:50%;
  width:250px; height:250px;
  transform:translateX(-50%);
  background:radial-gradient(circle, var(--glow-soft) 0%, var(--glow-dim) 35%, transparent 70%);
  filter:blur(6px);
  opacity:0;
  pointer-events:none;
  transition: opacity 0.8s ease, width 1.2s cubic-bezier(.2,.8,.2,1), height 1.2s cubic-bezier(.2,.8,.2,1), top 1.2s cubic-bezier(.2,.8,.2,1);
}
@keyframes flicker{
  0%,100%{ opacity:1; }
  4%{ opacity:0.85; }
  6%{ opacity:1; }
  46%{ opacity:1; }
  48%{ opacity:0.55; }
  50%{ opacity:0.95; }
  72%{ opacity:0.9; }
  74%{ opacity:1; }
}
@keyframes flickerOn{
  0%{ opacity:0; }
  8%{ opacity:0.65; }
  16%{ opacity:0.1; }
  26%{ opacity:0.8; }
  36%{ opacity:0.25; }
  50%{ opacity:1; }
  100%{ opacity:1; }
}
.filament{ opacity:0; transform-origin:center; }
.rim-glow{ opacity:0; transition: opacity 0.7s ease 0.1s; }
.shade{ filter:none; transition: filter 0.6s ease; }

.bulb-wrap.lit .shade{ filter: drop-shadow(0 0 14px rgba(255,199,116,0.28)); }
.bulb-wrap.lit .rim-glow{ opacity:1; }
.bulb-wrap.lit .filament{ animation: flickerOn 1s ease-out forwards; }
.bulb-wrap.lit .bulb-glow-ambient{
  opacity:1;
  width:610px; height:610px;
  top:-235px;
  background:radial-gradient(circle, rgba(255,199,116,0.38) 0%, rgba(255,199,116,0.09) 40%, transparent 70%);
}
.bulb-wrap.steady .filament{ animation: flicker 6s ease-in-out infinite; }
.bulb-wrap.steady .bulb-glow-ambient{ animation: flicker 6s ease-in-out infinite; }

/* --- the cord: this is the actual call to action --- */
.cord-pull{
  cursor:pointer;
  transform-box: fill-box;
  transform-origin: 50% 0%;
  pointer-events: all;
}
.chain-ring{
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: ringHint 2.8s ease-in-out infinite;
  transition: stroke 0.3s ease;
  pointer-events: none;
}
.chain-hit{ pointer-events: all; }
.cord-pull:hover .chain-ring{ stroke:var(--glow); }
@keyframes ringHint{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(3px); }
}
.cord-pull.tugged{ animation: cordTug 0.6s cubic-bezier(.34,1.56,.64,1) 1; }
.cord-pull.tugged .chain-ring{ animation:none; }
@keyframes cordTug{
  0%{ transform:translateY(0); }
  35%{ transform:translateY(16px); }
  60%{ transform:translateY(-4px); }
  80%{ transform:translateY(3px); }
  100%{ transform:translateY(0); }
}

.pull-hint{
  display:inline-block;
  font-family:var(--sans);
  font-size:14px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--bg-bottom);
  background:var(--glow);
  border:none;
  padding:14px 34px;
  border-radius:999px;
  margin:1vh 0 1.8vh;
  cursor:pointer;
  box-shadow:0 0 24px var(--glow-dim);
  animation: hintPulse 2.6s ease-in-out infinite;
  transition: box-shadow 0.4s ease, transform 0.3s ease, letter-spacing 0.3s ease, opacity 0.5s ease;
  z-index:2;
}
.pull-hint:hover{
  box-shadow:0 0 40px rgba(255,199,116,0.45);
  transform:translateY(-2px);
  letter-spacing:0.18em;
}
.pull-hint:active{ transform:translateY(0) scale(0.98); }
.pull-hint.done{ opacity:0; pointer-events:none; }
@keyframes hintPulse{
  0%,100%{ box-shadow:0 0 24px var(--glow-dim); }
  50%{ box-shadow:0 0 34px var(--glow-soft); }
}

#flash{
  position:fixed; inset:0; z-index:500;
  background:radial-gradient(circle at 50% 22%, rgba(255,224,170,0.95), rgba(255,199,116,0.4) 40%, transparent 75%);
  opacity:0;
  pointer-events:none;
}
#flash.fire{ animation: flashpop 0.75s ease-out forwards; }
@keyframes flashpop{
  0%{ opacity:0; }
  30%{ opacity:1; }
  100%{ opacity:0; }
}

h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(22px, 3.6vw, 42px);
  line-height:1.2;
  max-width:16ch;
  margin:0.8vh auto 1.2vh;
  z-index:2;
  letter-spacing:-0.01em;
}
.sub{
  font-size:clamp(13px, 1.1vw, 16px);
  color:var(--text-dim);
  max-width:42ch;
  margin:0 auto 1.5vh;
  line-height:1.55;
  font-weight:300;
  z-index:2;
}

.cta{
  position:relative;
  font-family:var(--sans);
  font-size:14px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--bg-bottom);
  background:var(--glow);
  border:none;
  padding:18px 42px;
  border-radius:999px;
  cursor:pointer;
  z-index:2;
  box-shadow:0 0 0 rgba(255,199,116,0.4);
  transition: box-shadow 0.4s ease, transform 0.3s ease, letter-spacing 0.3s ease;
}
.cta:hover{
  box-shadow:0 0 40px rgba(255,199,116,0.45);
  transform:translateY(-2px);
  letter-spacing:0.18em;
}
.cta:active{ transform:translateY(0px) scale(0.98); }

.cta-note{
  margin-top:2.2vh;
  font-size:12px;
  color:var(--text-faint);
  letter-spacing:0.03em;
  z-index:2;
}

.privacy-note{
  position:absolute;
  bottom:1.5vh; left:0; right:0;
  text-align:center;
  font-size:10px;
  color:var(--text-faint);
  letter-spacing:0.08em;
  z-index:2;
}

/* ---------- DIAL (brutality level selector) ---------- */
#dial{ flex-direction:column; padding:8vh 6vw; text-align:center; z-index:2; }
.dial-screen{ max-width:520px; margin:0 auto; }
.dial-eyebrow{
  font-size:12px; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:5vh;
}

.dial-wrap{ position:relative; width:250px; height:250px; margin:0 auto 5vh; }
.dial-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--line);
  background:radial-gradient(circle at 50% 42%, rgba(255,199,116,0.06), transparent 70%);
}
.dial-needle{
  position:absolute; bottom:50%; left:50%; width:2px; height:36%;
  background:linear-gradient(to top, var(--glow), rgba(255,199,116,0));
  transform-origin:bottom center;
  transform:translateX(-50%) rotate(0deg);
  transition:transform 0.6s cubic-bezier(.2,.8,.2,1);
  border-radius:2px;
  box-shadow:0 0 8px var(--glow-soft);
}
.dial-needle.lvl-2{ transform:translateX(-50%) rotate(90deg); }
.dial-needle.lvl-3{ transform:translateX(-50%) rotate(180deg); }
.dial-needle.lvl-4{ transform:translateX(-50%) rotate(270deg); }

.dial-tick{
  position:absolute; width:44px; height:44px; border-radius:50%;
  background:#0b0a0d; border:1px solid var(--line); color:var(--text-dim);
  font-family:var(--serif); font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.3s ease;
}
.dial-tick:hover{ border-color:var(--glow); color:var(--glow); }
.dial-tick.active{ border-color:var(--glow); color:var(--glow); box-shadow:0 0 16px var(--glow-dim); background:#120f0a; }
.dial-tick.n{ top:-6px; left:50%; transform:translate(-50%,-50%); }
.dial-tick.e{ top:50%; right:-6px; transform:translate(50%,-50%); }
.dial-tick.s{ bottom:-6px; left:50%; transform:translate(-50%,50%); }
.dial-tick.w{ top:50%; left:-6px; transform:translate(-50%,-50%); }

.dial-hub{
  position:absolute; inset:27%; border-radius:50%;
  background:#08070a; border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:8px; text-align:center;
}
.dial-hub-name{ font-family:var(--serif); font-style:italic; font-size:19px; color:var(--text); margin-bottom:6px; }
.dial-hub-tagline{ font-size:10.5px; color:var(--text-faint); line-height:1.4; padding:0 6px; }

.dial-begin{ margin-top:0.5vh; }

.premium-teaser{ margin-top:8vh; padding-top:5vh; border-top:1px solid var(--line); }
.premium-label{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:2.4vh; }
.premium-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:1.6vh; }
.premium-chip{
  font-family:var(--sans); font-size:12px; letter-spacing:0.04em; color:var(--text-faint);
  border:1px solid var(--line); border-radius:999px; padding:9px 16px;
  opacity:0.55; cursor:not-allowed;
}
.premium-note{ font-size:11px; color:var(--text-faint); letter-spacing:0.06em; }

/* ---------- QUIZ ---------- */
#quiz{ flex-direction:column; padding:6vh 6vw; z-index:2; }
.progress{
  position:absolute; top:5vh; left:50%; transform:translateX(-50%);
  display:flex; gap:9px;
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--line); transition:all 0.4s ease; }
.dot.done{ background:var(--glow); box-shadow:0 0 6px var(--glow-soft); }
.dot.current{ background:var(--glow); box-shadow:0 0 10px var(--glow); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:0.4; } }

.card{
  max-width:640px;
  width:100%;
  margin:0 auto;
  text-align:left;
  opacity:0;
  transform:translateY(18px);
  animation: cardIn 0.7s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes cardIn{ to{ opacity:1; transform:translateY(0); } }
.card.out{ animation: cardOut 0.45s cubic-bezier(.4,0,1,1) forwards; }
@keyframes cardOut{ to{ opacity:0; transform:translateY(-16px); } }

.card-eyebrow{
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:2.2vh;
}
.card-question{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:clamp(22px, 3vw, 34px);
  line-height:1.4;
  margin-bottom:4vh;
}
textarea{
  width:100%;
  min-height:120px;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  font-weight:300;
  line-height:1.7;
  padding:0 0 16px 0;
  resize:none;
  outline:none;
  transition:border-color 0.3s ease;
}
textarea::placeholder{ color:var(--text-faint); }
textarea:focus{ border-color:var(--glow); }

.card-actions{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:4vh;
}
.continue-btn{
  background:none; border:1px solid var(--line); color:var(--text);
  font-family:var(--sans); font-size:13px; letter-spacing:0.08em;
  padding:13px 28px; border-radius:999px; cursor:pointer;
  transition:all 0.3s ease;
}
.continue-btn:hover{ border-color:var(--glow); color:var(--glow); box-shadow:0 0 20px var(--glow-dim); }
.hint{ font-size:12px; color:var(--text-faint); }

/* ---------- REFLECTION ---------- */
#reflection{ flex-direction:column; padding:10vh 6vw; z-index:2; text-align:center; }
.refl-wrap{ max-width:620px; margin:0 auto; }
.refl-eyebrow{ font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--text-faint); margin-bottom:3vh; }
.refl-title{ font-family:var(--serif); font-size:clamp(24px,3.4vw,38px); margin-bottom:4vh; line-height:1.3; }
.refl-body{ font-size:16px; line-height:1.9; color:var(--text-dim); font-weight:300; text-align:left; }
.refl-body p{ margin-bottom:1.6em; }
.refl-body strong{ color:var(--text); font-weight:500; }
.refl-body .analyzing{
  font-family:var(--serif); font-style:italic; text-align:center;
  color:var(--text-faint); animation: hintPulse 2.2s ease-in-out infinite;
}
.restart{
  display:inline-block; margin-top:6vh; font-size:12px; letter-spacing:0.1em;
  color:var(--text-faint); text-decoration:none; cursor:pointer; border-bottom:1px solid transparent;
  transition:all 0.3s ease;
}
.restart:hover{ color:var(--glow); border-color:var(--glow); }

@media (max-width: 640px){
  .dial-wrap{ width:210px; height:210px; }
  .dial-tick{ width:38px; height:38px; font-size:13px; }
  .dial-hub-tagline{ font-size:9.5px; }
}

/* short viewports (laptop windows, landscape phones): compact the hero
   further so nothing on the landing page ever requires scrolling */
@media (max-height: 700px){
  #landing{ padding:1.5vh 6vw; }
  .brand-mark{ margin-bottom:1vh; }
  .brand-glyph{ width:22px; height:22px; }
  .bulb-stage{ height:clamp(130px, 20vh, 180px); }
  .bulb-wrap{ width:110px; height:105px; }
  .light-cone{ width:150px; height:220px; top:52px; }
  .pull-hint{ padding:11px 28px; margin:0.6vh 0 1.2vh; font-size:13px; }
  h1{ font-size:clamp(18px, 3.2vw, 30px); margin:0.5vh auto 0.8vh; }
  .sub{ font-size:12.5px; margin-bottom:0.8vh; line-height:1.4; }
  .privacy-note{ display:none; }
}