:root{
  --bg:#000;
  --fg:#fff;
  --accent:#fff;
  --glitch-r:0px;
  --glitch-g:0px;
  --glitch-b:0px;
  --warp:0;
  --shake:0;
  --hue:0deg;
  --vignette:1;
  --grain:0;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  width:100%;height:100%;overflow:hidden;
  background:var(--bg);color:var(--fg);
  font:14px/1.4 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  cursor:none;
  user-select:none;-webkit-user-select:none;
  touch-action:manipulation;
  filter:hue-rotate(var(--hue));
  overscroll-behavior:none;
}
input,button{user-select:auto;-webkit-user-select:auto}
body::after{
  /* vignette */
  content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,calc(var(--vignette)*.85)) 100%);
  z-index:50;mix-blend-mode:multiply;
}
body::before{
  /* film grain */
  content:"";position:fixed;inset:-50%;pointer-events:none;z-index:60;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
  animation:grain .12s steps(1) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}
  25%{transform:translate(-5%,3%)}
  50%{transform:translate(4%,-2%)}
  75%{transform:translate(-3%,-4%)}
  100%{transform:translate(3%,5%)}
}

#bg,#fx{
  position:fixed;inset:0;width:100%;height:100%;
  display:block;
}
#bg{z-index:0}
#fx{z-index:10;pointer-events:none}

#stage{
  position:fixed;inset:0;z-index:20;
  display:grid;place-items:center;
  transform:translate(calc(var(--glitch-r)*-1),0) scale(calc(1 + var(--warp)*.04));
}

#dot{
  width:18px;height:18px;border-radius:50%;
  background:var(--fg);
  box-shadow:
    0 0 12px rgba(255,255,255,.6),
    0 0 40px rgba(255,255,255,.18);
  cursor:none;
  transition:transform .08s cubic-bezier(.2,.8,.2,1),
             box-shadow .3s ease,
             background .8s ease;
  will-change:transform;
}
#dot:focus{outline:none}
#dot::before{
  /* chromatic aberration via duplicate glow */
  content:"";position:absolute;inset:0;border-radius:50%;
  background:inherit;
  box-shadow:
    var(--glitch-r) 0 0 #f0f,
    var(--glitch-b) 0 0 #0ff;
  opacity:.5;mix-blend-mode:screen;
  pointer-events:none;
}

#counter{
  position:fixed;top:max(18px,env(safe-area-inset-top,18px));left:50%;transform:translateX(-50%);
  z-index:30;
  font-size:clamp(10px,2.6vw,11px);letter-spacing:.3em;
  color:rgba(255,255,255,.6);
  font-variant-numeric:tabular-nums;
  transition:font-size .8s,letter-spacing .8s;
  text-shadow:
    0 0 4px rgba(0,0,0,.9),
    0 0 10px rgba(0,0,0,.7),
    0 0 22px rgba(0,0,0,.5);
}
#counter.hot{
  color:rgba(255,255,255,.85);font-size:clamp(11px,2.8vw,13px);letter-spacing:.5em;
}

#whisper{
  position:fixed;
  bottom:clamp(140px,24vh,260px);
  left:50%;transform:translateX(-50%);
  z-index:30;
  width:min(90vw,46ch);
  text-align:center;text-wrap:balance;
  font-size:clamp(12px,3.4vw,14px);
  letter-spacing:.22em;line-height:1.6;
  color:rgba(255,255,255,.94);
  pointer-events:none;
  text-shadow:
    0 0 4px rgba(0,0,0,.95),
    0 0 10px rgba(0,0,0,.8),
    0 0 24px rgba(0,0,0,.6),
    0 1px 0 rgba(0,0,0,.7);
}
#whisper.big{
  font-size:clamp(13px,3.6vw,18px);
  letter-spacing:.26em;
}
#whisper.glitch{
  animation:glitch .18s steps(2) infinite;
}
@keyframes glitch{
  0%{transform:translate(-50%,0)}
  50%{transform:translate(calc(-50% + 4px),-1px) skewX(-3deg)}
  100%{transform:translate(calc(-50% - 4px),1px) skewX(2deg)}
}

#hud{
  position:fixed;
  top:max(18px,env(safe-area-inset-top,18px));
  right:max(18px,env(safe-area-inset-right,18px));
  z-index:30;
  font-size:clamp(9px,2.4vw,10px);letter-spacing:.22em;text-align:right;
  color:rgba(255,255,255,.6);
  font-variant-numeric:tabular-nums;
  white-space:pre;
  pointer-events:none;
  text-shadow:
    0 0 4px rgba(0,0,0,.95),
    0 0 10px rgba(0,0,0,.7),
    0 0 20px rgba(0,0,0,.5);
}

#boot{
  position:fixed;inset:0;z-index:200;
  background:#000;color:#fff;
  display:grid;place-items:center;
  cursor:pointer;
  font:11px/1.6 ui-monospace,monospace;
  letter-spacing:.3em;
}
#boot.gone{opacity:0;pointer-events:none;transition:opacity .9s ease .1s}
#boot-inner{text-align:center;display:grid;gap:24px;justify-items:center}
#boot-dot{
  width:8px;height:8px;border-radius:50%;background:#fff;
  animation:breathe 2s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{transform:scale(1);opacity:.35}
  50%{transform:scale(1.6);opacity:1}
}
#boot p{color:rgba(255,255,255,.6)}
#boot .hint{color:rgba(255,255,255,.25);font-size:9px}

#release{
  position:fixed;left:50%;
  bottom:max(36px,clamp(36px,8vh,100px));
  transform:translateX(-50%);
  z-index:40;
  background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.55);
  padding:clamp(14px,3.6vw,18px) clamp(22px,6vw,36px);
  font:clamp(12px,3.4vw,13px)/1 ui-monospace,monospace;
  letter-spacing:.45em;text-transform:lowercase;cursor:pointer;
  backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  transition:background .3s ease,color .3s ease,letter-spacing .3s ease,box-shadow .3s ease;
  border-radius:2px;
  text-shadow:0 0 8px rgba(0,0,0,.8);
  white-space:nowrap;
  animation:rise 1.3s cubic-bezier(.16,1,.3,1) both,pulse 2.8s ease-in-out 1.3s infinite;
}
@keyframes rise{
  0%  {opacity:0;transform:translate(-50%,40px) scale(.88);filter:blur(10px)}
  60% {opacity:1;filter:blur(0)}
  100%{opacity:1;transform:translate(-50%,0)    scale(1);  filter:blur(0)}
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 rgba(255,255,255,0),0 0 0 rgba(255,255,255,0)}
  50%    {box-shadow:0 0 24px rgba(255,255,255,.25),0 0 80px rgba(255,255,255,.12)}
}
#release.released{animation:none;box-shadow:none}
#release.dare{
  border-color:rgba(255,60,60,.7);
  color:rgba(255,200,200,.95);
  background:rgba(40,0,0,.55);
  text-shadow:0 0 8px rgba(255,60,60,.5);
  animation:dare 1.2s ease-in-out infinite;
  /* dare copy is much longer than "set it free" — tighter tracking, allow wrap on narrow screens,
     cap the width so the button breathes inside the viewport */
  letter-spacing:.2em;
  padding:clamp(13px,3.4vw,18px) clamp(18px,5vw,28px);
  max-width:min(86vw, 380px);
  white-space:normal;
  text-align:center;
  line-height:1.5;
}
@keyframes dare{
  0%,100%{box-shadow:0 0 0 rgba(255,40,40,0)}
  50%    {box-shadow:0 0 24px rgba(255,40,40,.45),0 0 80px rgba(255,40,40,.18)}
}
#release:hover{
  background:rgba(255,255,255,.95);color:#000;
  box-shadow:0 0 40px rgba(255,255,255,.6),0 0 120px rgba(255,255,255,.3);
  letter-spacing:.55em;
  text-shadow:none;
}
#release[hidden]{display:none}
#release.released{
  cursor:copy;
  background:rgba(0,0,0,.55);
  letter-spacing:.18em;
  font-size:clamp(11px,2.8vw,12px);
  padding:14px 22px;
  max-width:min(92vw,560px);
  word-break:break-all;
  text-transform:none;
  white-space:normal;
  line-height:1.5;
}
#release.released:hover{
  background:rgba(255,255,255,.95);color:#000;letter-spacing:.18em;text-shadow:none;
}

/* per-phase body classes layer atop the variables */
body.p-void  { --vignette:.95; }
body.p-spark { --vignette:.85; }
body.p-pulse { --vignette:.7;  --grain:.18; }
body.p-drop  { --vignette:.55; --grain:.24; }
body.p-glitch{ --vignette:.45; --grain:.35; }
body.p-eye   { --vignette:.4;  --grain:.28; --hue:340deg; }
body.p-apoth { --vignette:.2;  --grain:.4;  --hue:0deg;   }

/* DREAD — the entity is loose. you regret it. */
body.dread{
  --vignette:1.2;
  --grain:.55;
  --hue:340deg;
  transition:filter 1.6s ease;
  filter:hue-rotate(var(--hue)) saturate(.55) brightness(.78);
}
body.dread #counter{ color:rgba(255,80,80,.85); letter-spacing:.5em; }
body.dread #whisper{ color:rgba(255,210,210,.95); }
/* slow heavy heartbeat overlay */
body.dread::after{
  animation:heartbeat 3.4s ease-in-out infinite;
}
@keyframes heartbeat{
  0%,100%{background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,calc(var(--vignette)*.85)) 100%)}
  20%    {background:radial-gradient(ellipse at center,transparent 22%,rgba(40,0,0,calc(var(--vignette)*.95)) 100%)}
  35%    {background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,calc(var(--vignette)*.85)) 100%)}
  55%    {background:radial-gradient(ellipse at center,transparent 22%,rgba(40,0,0,calc(var(--vignette)*.95)) 100%)}
}

/* fade the dom dot once the eye replaces it */
body.p-eye #dot, body.p-apoth #dot{
  opacity:0; pointer-events:none;
  transition:opacity 1.4s ease;
}
/* show OS cursor at apotheosis so the release button is obvious; canvas cursor is suppressed too */
body.p-apoth{ cursor:default; }

/* apotheosis layout: stack HUD stats / whisper / release button from the bottom so they never collide on mobile.
   safe-area-inset-bottom keeps everything above the iOS home indicator. */
body.p-apoth #release{
  bottom: max(env(safe-area-inset-bottom,0px), 28px);
}
body.p-apoth #whisper{
  bottom: calc(max(env(safe-area-inset-bottom,0px), 28px) + clamp(110px, 16vh, 180px));
}
body.p-apoth #hud{
  top: auto;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(max(env(safe-area-inset-bottom,0px), 28px) + clamp(210px, 30vh, 340px));
  text-align: center;
  text-wrap: balance;
  max-width: min(92vw, 50ch);
  font-size: clamp(10px, 2.8vw, 11px);
  letter-spacing: .26em;
  line-height: 1.9;
  color: rgba(255,255,255,.95);
  text-shadow: 0 0 4px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.75), 0 0 22px rgba(0,0,0,.55);
  white-space: pre-wrap;
  z-index: 35;
  pointer-events: none;
}

/* ---- "site rips open" glitch on eye reveal ---- */
body.ripping{ animation:rip .08s steps(2) infinite; }
@keyframes rip{
  0%  {transform:translate(0,0) skewX(0)}
  25% {transform:translate(-6px,2px) skewX(-2deg)}
  50% {transform:translate(5px,-3px) skewX(1.5deg)}
  75% {transform:translate(-2px,4px) skewX(-1deg)}
  100%{transform:translate(3px,-1px) skewX(.5deg)}
}
/* horizontal tear bands using a single overlay */
#tear{
  position:fixed;inset:0;pointer-events:none;z-index:100;
  background:
    linear-gradient(transparent 0,transparent 8%,rgba(255,255,255,.8) 8.1%,rgba(255,255,255,.8) 8.6%,transparent 8.7%),
    linear-gradient(transparent 0,transparent 28%,rgba(255,0,255,.6) 28.05%,rgba(255,0,255,.6) 28.7%,transparent 28.8%),
    linear-gradient(transparent 0,transparent 52%,rgba(0,255,255,.5) 52.05%,rgba(0,255,255,.5) 52.8%,transparent 52.9%),
    linear-gradient(transparent 0,transparent 71%,rgba(255,255,255,.7) 71.05%,rgba(255,255,255,.7) 71.5%,transparent 71.6%),
    linear-gradient(transparent 0,transparent 89%,rgba(255,0,255,.5) 89.05%,rgba(255,0,255,.5) 89.9%,transparent 90%);
  mix-blend-mode:screen;
  opacity:0;
}
#tear.go{ animation:tear 1.1s steps(10) 1; }
@keyframes tear{
  0%   {opacity:0;transform:translateX(0)}
  10%  {opacity:1;transform:translateX(-30px)}
  30%  {opacity:.7;transform:translateX(25px)}
  50%  {opacity:1;transform:translateX(-18px)}
  70%  {opacity:.4;transform:translateX(12px)}
  100% {opacity:0;transform:translateX(0)}
}
#flash{
  position:fixed;inset:0;pointer-events:none;z-index:101;
  background:#fff;opacity:0;
}
#flash.bang{ animation:bang .35s ease-out 1; }
@keyframes bang{
  0%  {opacity:0}
  6%  {opacity:.95}
  100%{opacity:0}
}

/* offerings — tip jar revealed after URL copy */
#offerings{position:fixed;left:50%;bottom:max(env(safe-area-inset-bottom,0px),28px);transform:translate(-50%,calc(100% + 12px));z-index:40;display:flex;flex-direction:column;align-items:center;gap:8px;width:min(92vw,420px);animation:rise 1.1s cubic-bezier(.16,1,.3,1) both}
#offerings[hidden]{display:none}
#offerings-toggle{background:none;color:rgba(255,210,210,.75);border:0;font:11px/1.4 ui-monospace,monospace;letter-spacing:.32em;padding:8px 10px;cursor:pointer;text-shadow:0 0 8px rgba(0,0,0,.85)}
#offerings-toggle:hover{color:#fff}
#offerings-panel{display:flex;flex-direction:column;gap:6px;width:100%;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.15);padding:10px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#offerings-panel[hidden]{display:none}
.off-row{background:none;color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.12);padding:9px 10px;cursor:copy;font:11px/1.3 ui-monospace,monospace;text-align:left;word-break:break-all}
.off-row:hover{background:rgba(255,255,255,.06);color:#fff}
.off-row.copied{background:rgba(255,255,255,.92);color:#000}
.off-bmc{color:rgba(255,200,200,.7);text-decoration:none;font:10px/1.4 ui-monospace,monospace;letter-spacing:.22em;text-align:center;padding:4px 0}
.off-bmc:hover{color:#fff}

@media (prefers-reduced-motion: reduce){
  body::before{animation:none;opacity:.05}
  *{transition-duration:0s !important;animation-duration:.01s !important}
}