/* =========================================================
   ROOT / RESET / GLOBAL TYPOGRAPHY
========================================================= */
:root{
  --ink:#f5f5f5;
  --muted:#9ca3af;
  --acid:#9cff73;
  --bruise:#7c3aed;
  --blood:#ff4b5c;

  --panel: rgba(10,10,18,0.72);
  --stroke: rgba(255,255,255,0.10);

  /* spotlight (JS updates) */
  --mx: 50vw;
  --my: 50vh;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }

body{
  background:#020208;
  color:var(--ink);
  font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  overflow:hidden;
}

/* =========================================================
   BACKGROUND SYSTEM
========================================================= */
.bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
}

/* base */
.bg-base{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 20% 10%, rgba(124,58,237,.18) 0, transparent 42%),
    radial-gradient(circle at 85% 25%, rgba(156,255,115,.08) 0, transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(0,0,0,.95) 0, rgba(2,2,8,1) 55%);
  filter:saturate(.95) contrast(1.05);
}

/* vignette */
.bg-vignette{
  position:absolute;
  inset:-10%;
  background: radial-gradient(circle at 50% 45%, transparent 0 32%, rgba(0,0,0,.90) 72%);
  mix-blend-mode:multiply;
}

/* grain */
.bg-grain{
  position:absolute;
  inset:-30%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
  opacity:.16;
  mix-blend-mode:overlay;
  animation:grainMove 2.2s steps(6) infinite;
}
@keyframes grainMove{
  0%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(-2%,1%,0)}
  50%{transform:translate3d(1%,-2%,0)}
  75%{transform:translate3d(3%,2%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* fog */
.bg-fog{
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 25% 40%, rgba(245,245,245,.05) 0, transparent 42%),
    radial-gradient(circle at 70% 58%, rgba(245,245,245,.04) 0, transparent 45%),
    radial-gradient(circle at 75% 20%, rgba(245,245,245,.03) 0, transparent 40%);
  filter: blur(18px);
  opacity:.52;
  mix-blend-mode:screen;
}
.fog-a{ animation:fogA 14s linear infinite; }
.fog-b{ animation:fogB 19s linear infinite; opacity:.38; }

@keyframes fogA{
  from{ transform:translate3d(-5%,0,0) scale(1.06); }
  to{ transform:translate3d(7%,-2%,0) scale(1.12); }
}
@keyframes fogB{
  from{ transform:translate3d(9%,2%,0) scale(1.20); }
  to{ transform:translate3d(-7%,-3%,0) scale(1.14); }
}

/* occult wash */
.bg-sigil{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 40%, rgba(0,0,0,0) 0 26%, rgba(0,0,0,.55) 60%),
    conic-gradient(from 20deg at 50% 40%,
      transparent 0 12%,
      rgba(156,255,115,.06) 12% 14%,
      transparent 14% 28%,
      rgba(124,58,237,.06) 28% 30%,
      transparent 30% 44%,
      rgba(156,255,115,.05) 44% 46%,
      transparent 46% 60%,
      rgba(124,58,237,.05) 60% 62%,
      transparent 62% 100%);
  mix-blend-mode:screen;
  opacity:.35;
  filter:blur(.6px);
  animation:pulse 7s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:.30}
  50%{opacity:.48}
}

/* wake-up */
body.awake .bg-sigil{ opacity:.60; }
body.awake .bg-fog{ opacity:.72; }

/* spotlight */
.spotlight{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle 220px at var(--mx) var(--my),
      rgba(255,255,255,0.04) 0%,
      rgba(156,255,115,0.03) 25%,
      rgba(0,0,0,0.84) 60%,
      rgba(0,0,0,0.94) 100%);
  mix-blend-mode:multiply;
  pointer-events:none;
  opacity:.97;
}

/* =========================================================
   FLOATING EYES
========================================================= */
.floaters{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
}

.floater-eye{
  position:absolute;
  width: var(--size);
  height: calc(var(--size) * 0.62);
  opacity: var(--op);
  filter: blur(var(--blur));
  animation: drift var(--dur) linear infinite;
  will-change: transform;
}
@keyframes drift{
  0%   { transform: translate3d(var(--x0), var(--y0), 0) rotate(var(--r0)); }
  100% { transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--r1)); }
}

.floater-eye .ring{
  position:absolute; inset:0;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 45%, rgba(245,245,245,.06) 0, transparent 55%),
    repeating-linear-gradient(135deg, rgba(0,0,0,.12) 0 3px, transparent 3px 8px);
  border: 1px solid rgba(245,245,245,0.10);
  box-shadow: 0 0 18px rgba(0,0,0,.55);
}

.floater-eye .lid{
  position:absolute; inset:18% 8%;
  border-top: 1px solid rgba(245,245,245,0.12);
  border-bottom: 1px solid rgba(245,245,245,0.10);
  border-radius: 999px;
  opacity:.85;
}

.floater-eye .pupil{
  position:absolute;
  width: 18%;
  height: 30%;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background:
    radial-gradient(circle at 35% 35%, rgba(245,245,245,0.10) 0,
      rgba(156,255,115,0.20) 45%,
      rgba(0,0,0,0.92) 100%);
  box-shadow: 0 0 12px rgba(0,0,0,0.7);
}

/* =========================================================
   WHISPERS
========================================================= */
.whispers{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
}

.whisper{
  position:absolute;
  font-family:"Space Grotesk", system-ui, sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size: clamp(12px, 1.2vw, 16px);
  color: rgba(245,245,245,0.65);
  text-shadow: 0 0 18px rgba(0,0,0,0.85);
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  animation: whisper 1100ms ease-out forwards;
  mix-blend-mode: screen;
}
@keyframes whisper{
  0%   { opacity: 0; transform: translate3d(0, 10px, 0); filter: blur(1.6px); }
  20%  { opacity: .85; filter: blur(0.2px); }
  70%  { opacity: .55; }
  100% { opacity: 0; transform: translate3d(0, -6px, 0); filter: blur(1.6px); }
}

/* =========================================================
   FLICKER OVERLAY
========================================================= */
.flicker{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
  opacity:0;
}
.flicker.on{ animation:flickerFlash 240ms ease-out forwards; }
@keyframes flickerFlash{
  0% { opacity: 0; }
  30%{ opacity: .22; }
  100%{ opacity: 0; }
}

/* =========================================================
   FOREGROUND LAYOUT
========================================================= */
.shell{
  position:relative;
  z-index:5;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 2rem 1.25rem;
  text-align:center;
  gap:.8rem;
}

/* =========================================================
   CROSS (MUCH GRUNGIER)
========================================================= */
.cross-wrap{
  width: 120px;
  height: 120px;
  display:grid;
  place-items:center;
}

.cross{
  position:relative;
  width:96px;
  height:96px;
  transform: rotate(-3deg);
  filter: drop-shadow(0 18px 36px rgba(0,0,0,0.72));
}

/* base bars: heavier, dirtier */
.cross .bar{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  border-radius: 10px;

  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.08) 0, transparent 60%),
    linear-gradient(135deg, rgba(30,30,38,0.95), rgba(0,0,0,0.96)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 7px);

  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 0 18px rgba(0,0,0,0.9),
    inset 0 0 28px rgba(0,0,0,0.6);
}

.cross .bar.vertical{
  width: 24px;
  height: 96px;
  /* slight unevenness */
  clip-path: polygon(6% 0%, 94% 2%, 100% 100%, 0% 98%);
}

.cross .bar.horizontal{
  width: 82px;
  height: 22px;
  top: 48%;
  clip-path: polygon(0% 6%, 100% 0%, 98% 96%, 2% 100%);
}

/* grit + soot */
.cross-grit{
  position:absolute;
  inset:-25%;
  background:
    radial-gradient(circle at 40% 35%, rgba(0,0,0,0.55) 0, transparent 55%),
    radial-gradient(circle at 65% 55%, rgba(0,0,0,0.45) 0, transparent 60%),
    repeating-linear-gradient(15deg, rgba(0,0,0,0.22) 0 3px, transparent 3px 10px);
  mix-blend-mode:multiply;
  opacity:.75;
  pointer-events:none;
}

/* scratches */
.cross-scratches{
  position:absolute;
  inset:-20%;
  background:
    repeating-linear-gradient(25deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(165deg, rgba(0,0,0,0.18) 0 3px, transparent 3px 12px);
  mix-blend-mode: overlay;
  opacity:.55;
  pointer-events:none;
}

/* cracks */
.cross-cracks{
  position:absolute;
  inset:-10%;
  background:
    linear-gradient(110deg, transparent 0 45%, rgba(0,0,0,0.20) 45% 47%, transparent 47% 100%),
    linear-gradient(70deg, transparent 0 56%, rgba(0,0,0,0.18) 56% 58%, transparent 58% 100%),
    linear-gradient(140deg, transparent 0 36%, rgba(255,255,255,0.04) 36% 37%, transparent 37% 100%);
  opacity:.55;
  mix-blend-mode:multiply;
  pointer-events:none;
}

/* aura */
.cross-aura{
  position:absolute;
  inset:-70%;
  background:
    radial-gradient(circle at 50% 50%, rgba(156,255,115,0.09) 0, transparent 42%),
    radial-gradient(circle at 45% 40%, rgba(124,58,237,0.22) 0, transparent 56%),
    radial-gradient(circle at 55% 60%, rgba(255,75,92,0.10) 0, transparent 55%);
  mix-blend-mode:screen;
  opacity:.55;
  filter: blur(0.8px);
  animation: crossPulse 6.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes crossPulse{
  0%,100%{ transform: scale(1); opacity:.35; }
  50%{ transform: scale(1.05); opacity:.78; }
}

/* flash state */
.cross.flash .cross-aura{
  animation:none;
  opacity:1;
  filter: blur(0.4px) saturate(1.2) contrast(1.1);
}
.cross.flash .bar{
  border-color: rgba(255,255,255,0.22);
  box-shadow:
    inset 0 0 18px rgba(0,0,0,0.9),
    0 0 36px rgba(124,58,237,0.24),
    0 0 32px rgba(156,255,115,0.14);
}

/* wake-up affects cross too */
body.awake .cross-aura{
  opacity:.78;
  filter: blur(0.6px) saturate(1.15);
}

/* =========================================================
   TITLES / GLITCH
========================================================= */
.title{
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:1.35rem;
}

.sub{
  font-family:"Inter", system-ui, sans-serif;
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.sep{ opacity:.45; padding:0 .55rem; }

.glitch{
  position:relative;
  display:inline-block;
}
.glitch::before,
.glitch::after{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:0;
  width:100%;
  overflow:hidden;
  opacity:.62;
  pointer-events:none;
}
.glitch::before{
  color:rgba(156,255,115,.70);
  transform:translate(1px,-1px);
  clip-path: inset(0 0 50% 0);
  animation:g1 3s infinite linear alternate-reverse;
}
.glitch::after{
  color:rgba(255,75,92,.55);
  transform:translate(-1px,1px);
  clip-path: inset(50% 0 0 0);
  animation:g2 2.5s infinite linear alternate-reverse;
}
.glitch-base{
  position:relative;
  z-index:2;
}
@keyframes g1{
  0%{clip-path:inset(0 0 40% 0)}
  50%{clip-path:inset(0 0 15% 0)}
  100%{clip-path:inset(0 0 60% 0)}
}
@keyframes g2{
  0%{clip-path:inset(60% 0 0 0)}
  50%{clip-path:inset(20% 0 0 0)}
  100%{clip-path:inset(45% 0 0 0)}
}

/* =========================================================
   LINKS
========================================================= */
.links{
  width: min(520px, 92vw);
  display:flex;
  flex-direction:column;
  gap:.6rem;
  margin-top:.65rem;
}

.link-pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.85rem 1rem;
  border-radius:999px;
  text-decoration:none;
  color:var(--ink);

  background: var(--panel);
  border:1px solid var(--stroke);
  backdrop-filter: blur(10px);

  font-family:"Inter", system-ui, sans-serif;
  font-size:.92rem;

  transition:
    transform 120ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease;
}

.link-pill:hover{
  transform: translateY(-2px);
  border-color: rgba(156,255,115,.55);
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
  background: rgba(10,10,18,0.82);
}

.link-pill.static{
  cursor:default;
  user-select:text;
}
.link-pill.static:hover{
  transform:none;
  border-color: var(--stroke);
  box-shadow:none;
  background: var(--panel);
}

.label{
  display:flex;
  align-items:center;
  gap:.45rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.9rem;
}
.label::before{
  content:"◉";
  color: rgba(245,245,245,.55);
  font-size:.8rem;
}

.meta{
  font-size:.78rem;
  color: rgba(245,245,245,.58);
  letter-spacing:.05em;
}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: rgba(245,245,245,.70);
}

/* footer */
.footer{
  margin-top:1rem;
  font-size:.7rem;
  letter-spacing:.12em;
  color: rgba(245,245,245,.38);
  text-transform: lowercase;
}

/* =========================================================
   AUDIO GATE (STAYS UNTIL USER CHOOSES)
========================================================= */
.audio-gate{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,0.68);
  backdrop-filter: blur(10px);
}

.audio-box{
  width: min(420px, 92vw);
  border-radius: 18px;
  padding: 18px 18px 14px;
  background: rgba(8,8,14,0.80);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 60px rgba(0,0,0,0.70);
  text-align:center;
}

.audio-title{
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size: 12px;
  color: rgba(245,245,245,0.90);
}

.audio-sub{
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(245,245,245,0.60);
}

.audio-actions{
  margin-top: 14px;
  display:flex;
  justify-content:center;
  gap: 10px;
}

.btn{
  font-family:"Space Grotesk", system-ui, sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size: 12px;

  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.40);
  color: rgba(245,245,245,0.92);
  cursor:pointer;

  transition: transform 120ms ease, border-color 140ms ease, background 140ms ease;
}

.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(156,255,115,0.45);
  background: rgba(0,0,0,0.55);
}

.btn-yes{
  border-color: rgba(156,255,115,0.25);
}
.btn-no{
  border-color: rgba(255,75,92,0.22);
}

.audio-foot{
  margin-top: 10px;
  font-size: 11px;
  color: rgba(245,245,245,0.45);
  letter-spacing: .06em;
}

/* gate hidden state (JS adds this class) */
.audio-gate.hidden{
  display:none;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 520px){
  .title{ font-size:1.2rem; }
  .cross-wrap{ width:110px; height:110px; }
}