/* ══════════════════════════════════════════════════════════
   GLASS EATERS
   ══════════════════════════════════════════════════════════ */

:root{
  --blood:#8e0b06;
  --blood-hot:#e2170c;
  --bile:#7b8a2e;
  --corn:#c9a227;
  --bone:#ddd3c0;
  --meat:#4a1212;
  --void:#070301;
  --dirt:#140b05;
  --glass:#9fd8e0;
  --dread:0;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;background:var(--void)}

body{
  background:var(--void);
  color:var(--bone);
  font-family:"Courier New",Courier,monospace;
  overflow-x:hidden;
  cursor:crosshair;
  -webkit-font-smoothing:none;
}

body.locked{overflow:hidden;height:100vh}

::selection{background:var(--blood);color:#fff}

/* ───────── GATE ───────── */
#gate{
  position:fixed;inset:0;z-index:9000;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:6vw;
  transition:opacity .9s ease, filter .9s ease;
}
#gate.gone{opacity:0;pointer-events:none;filter:blur(30px) contrast(4)}
.gate-inner{max-width:640px}
.gate-warn{
  color:var(--blood-hot);letter-spacing:.5em;font-size:.75rem;
  margin-bottom:2.5rem;animation:warnblink 1.7s steps(1) infinite;
}
@keyframes warnblink{0%,70%{opacity:1}71%,100%{opacity:.15}}
.gate-title{
  font-size:clamp(2.5rem,11vw,7rem);letter-spacing:-.02em;line-height:.85;
  color:var(--bone);position:relative;margin-bottom:1.5rem;
  animation:gateshift 4s infinite;
}
@keyframes gateshift{0%,92%{text-shadow:0 0 0 transparent}93%{text-shadow:-4px 0 var(--blood-hot),4px 0 var(--glass)}96%{text-shadow:5px 0 var(--blood-hot),-5px 0 var(--glass)}100%{text-shadow:0 0 0 transparent}}
.gate-sub{color:var(--bile);font-size:.72rem;letter-spacing:.35em;margin-bottom:2.5rem;text-transform:uppercase}
.gate-body{color:#7d7266;line-height:2;font-size:.9rem;margin-bottom:3rem}
#enterBtn{
  font-family:inherit;font-size:1rem;letter-spacing:.3em;
  background:transparent;color:var(--blood-hot);
  border:1px solid var(--blood);padding:1.1rem 2.4rem;cursor:pointer;
  transition:.25s;position:relative;
}
#enterBtn:hover{background:var(--blood);color:#000;letter-spacing:.45em;box-shadow:0 0 60px rgba(226,23,12,.55)}
.gate-fine{margin-top:2rem;font-size:.65rem;color:#3f3830;letter-spacing:.2em}

/* ───────── FX LAYERS ───────── */
#grain,#scan,#vignette,#flash{position:fixed;inset:0;pointer-events:none;z-index:500}

#grain{
  z-index:502;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift .12s steps(1) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}
}

#scan{
  z-index:503;opacity:.35;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.55) 0 1px,transparent 1px 3px);
}
#scan::after{
  content:"";position:absolute;left:0;right:0;height:22vh;
  background:linear-gradient(180deg,transparent,rgba(226,23,12,.06) 45%,rgba(159,216,224,.05) 55%,transparent);
  animation:rollbar 7s linear infinite;
}
@keyframes rollbar{0%{top:-25vh}100%{top:105vh}}

#vignette{
  z-index:501;
  background:
    radial-gradient(ellipse at 50% 45%,transparent 28%,rgba(0,0,0,.55) 72%,#000 100%),
    radial-gradient(ellipse at 50% 50%,rgba(142,11,6,calc(.25 * var(--dread))) 0%,transparent 60%);
  animation:breathe 5.5s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}

#flash{z-index:600;background:#fff;opacity:0;mix-blend-mode:difference}
#flash.pop{animation:popflash .18s steps(2)}
@keyframes popflash{0%{opacity:.9}50%{opacity:.2}100%{opacity:0}}

#whisper{
  position:fixed;z-index:504;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-50%);
  color:var(--blood-hot);font-size:clamp(1.2rem,6vw,3.5rem);letter-spacing:.3em;
  opacity:0;text-align:center;white-space:pre-line;
  text-shadow:0 0 40px var(--blood);
}
#whisper.show{animation:whisperin 1.9s ease-out}
@keyframes whisperin{
  0%{opacity:0;filter:blur(24px);letter-spacing:1em}
  12%{opacity:.95;filter:blur(0);letter-spacing:.3em}
  70%{opacity:.9}100%{opacity:0;filter:blur(14px)}
}

body.glitch #site{animation:hardglitch .22s steps(2) 3}
@keyframes hardglitch{
  0%{transform:translate(0)}25%{transform:translate(-14px,4px) skewX(-3deg);filter:invert(1) hue-rotate(90deg)}
  50%{transform:translate(12px,-6px) skewX(4deg)}75%{transform:translate(-6px,2px);filter:invert(1)}
  100%{transform:translate(0)}
}

body.inverted{filter:invert(1) hue-rotate(180deg) saturate(2)}

/* ───────── HUD ───────── */
#hud{
  position:fixed;top:14px;left:14px;z-index:510;
  font-size:.6rem;letter-spacing:.18em;color:var(--bile);
  opacity:0;transition:opacity 1.2s;pointer-events:none;
  text-shadow:0 0 8px #000;
}
#hud.on{opacity:.85}
.hud-row{display:flex;gap:.8rem;justify-content:space-between;min-width:200px;line-height:1.9}
.hud-v{color:var(--blood-hot)}
.hud-v small{color:#5a5145}
.hud-bar{margin-top:.6rem;width:200px;height:4px;background:#1b120c;border:1px solid #2c1d13}
.hud-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--bile),var(--blood-hot));transition:width .6s}
.hud-dread{margin-top:.25rem;font-size:.5rem;color:#4a4237}

/* ───────── CANVAS ───────── */
#field{
  position:fixed;inset:0;width:100vw;height:100vh;
  z-index:1;display:block;
}

/* ───────── SITE ───────── */
#site{position:relative;z-index:100}

.hero{
  height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:0 5vw;
}

.wordmark{
  line-height:.82;
  font-size:clamp(3rem,15vw,11rem);
  letter-spacing:-.04em;
  color:var(--bone);
  text-shadow:0 0 70px rgba(0,0,0,.95), 0 8px 0 #000;
}
.wordmark span{display:block;position:relative}
.wordmark .w2{color:var(--blood-hot);text-shadow:0 0 60px var(--blood),0 6px 0 #1a0400}
.wordmark span::before,.wordmark span::after{
  content:attr(data-text);position:absolute;inset:0;
  opacity:0;pointer-events:none;
}
.wordmark span::before{color:var(--glass);animation:gl1 5s infinite steps(1)}
.wordmark span::after{color:var(--blood-hot);animation:gl2 5s infinite steps(1)}
@keyframes gl1{0%,88%{opacity:0;transform:translate(0)}89%{opacity:.9;transform:translate(-9px,3px)}93%{opacity:.7;transform:translate(6px,-4px)}96%,100%{opacity:0}}
@keyframes gl2{0%,90%{opacity:0;transform:translate(0)}91%{opacity:.9;transform:translate(10px,-3px)}95%{opacity:.6;transform:translate(-7px,5px)}97%,100%{opacity:0}}

.tag{
  margin-top:2.5rem;color:var(--bile);font-size:clamp(.6rem,1.6vw,.82rem);
  letter-spacing:.3em;text-transform:uppercase;
}
.hint{
  margin-top:3.5rem;color:var(--corn);font-size:.7rem;letter-spacing:.4em;
  animation:warnblink 2.4s steps(1) infinite;
}
.scrolldown{position:absolute;bottom:3vh;color:#4a4237;font-size:.8rem;animation:bob 2.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(10px);opacity:.9}}

.slab{
  padding:14vh 6vw;max-width:1100px;margin:0 auto;
  background:linear-gradient(180deg,rgba(7,3,1,0) 0%,rgba(7,3,1,.93) 12%,rgba(7,3,1,.93) 88%,rgba(7,3,1,0) 100%);
}
.slab.tight{max-width:820px}

h2.rot{
  font-size:clamp(1.6rem,6vw,3.4rem);letter-spacing:.12em;
  color:var(--bone);margin-bottom:4rem;position:relative;
  border-bottom:1px solid var(--meat);padding-bottom:1.2rem;
}
h2.rot::after{
  content:attr(data-text);position:absolute;left:0;top:0;
  color:var(--blood);opacity:.6;transform:translate(4px,3px);
  z-index:-1;filter:blur(1px);
}

/* ───────── CARDS ───────── */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.card{
  border:1px solid #23150d;padding:2rem;background:rgba(12,6,3,.7);
  transition:.3s;position:relative;
}
.card:hover{border-color:var(--blood);box-shadow:0 0 50px rgba(142,11,6,.25) inset;transform:translateY(-4px)}
.card h3{font-size:1.6rem;letter-spacing:.25em;color:var(--blood-hot);margin-bottom:.3rem}
.card .role{font-size:.6rem;letter-spacing:.3em;color:var(--bile);text-transform:uppercase;margin-bottom:1.4rem}
.card p{color:#8a7e70;line-height:1.9;font-size:.82rem}

/* portraits */
.portrait{
  height:230px;margin-bottom:1.6rem;position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 40%,#2a1b12 0%,#0b0603 70%),
    #000;
  border:1px solid #1a0f08;
  filter:contrast(1.4) saturate(.6);
}
.portrait::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.35) 0 1px,transparent 1px 4px);
  mix-blend-mode:multiply;
}
.face{
  position:absolute;left:50%;top:50%;width:150px;height:185px;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at 50% 35%,#6b5140 0%,#33231a 55%,#150c07 100%);
  border-radius:48% 48% 42% 42%/55% 55% 45% 45%;
  box-shadow:inset 0 -30px 50px #000, inset 0 12px 30px rgba(0,0,0,.6);
  animation:twitch 4s infinite;
}
.p2 .face{animation:twitch 3.1s infinite reverse;background:radial-gradient(ellipse at 50% 35%,#5d6b4a 0%,#28301f 55%,#0d1008 100%)}
@keyframes twitch{
  0%,84%{transform:translate(-50%,-50%) rotate(0)}
  86%{transform:translate(-52%,-51%) rotate(-2deg) scaleY(1.03)}
  88%{transform:translate(-48%,-49%) rotate(2.5deg) scaleX(1.04)}
  90%,100%{transform:translate(-50%,-50%) rotate(0)}
}
.eye{
  position:absolute;top:36%;width:26px;height:12px;
  background:radial-gradient(circle at 50% 50%,#f2ece0 0 30%,#8e0b06 32%,#000 60%);
  border-radius:50%;
  box-shadow:0 0 14px rgba(226,23,12,.7), inset 0 0 6px #000;
  animation:eyejit 2.3s steps(3) infinite;
}
.eye.l{left:22px}
.eye.r{right:22px}
@keyframes eyejit{0%,100%{transform:translate(0)}33%{transform:translate(1px,-1px) scaleY(.7)}66%{transform:translate(-1px,1px) scaleY(1.2)}}
.tear{
  position:absolute;top:44%;width:4px;border-radius:0 0 3px 3px;
  background:linear-gradient(180deg,var(--blood-hot),var(--blood) 40%,#2a0302);
  box-shadow:0 0 10px var(--blood);
  animation:weep 2.8s ease-in infinite;
}
.tear.l{left:33px}
.tear.r{right:33px;animation-delay:.9s}
@keyframes weep{0%{height:0;opacity:0}10%{opacity:1}70%{height:78px;opacity:1}100%{height:92px;opacity:0}}
.mouth{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  width:76px;height:30px;background:#0a0302;
  border-radius:8px 8px 30px 30px;
  box-shadow:inset 0 0 18px #4a0b06, 0 0 20px rgba(0,0,0,.9);
  display:flex;align-items:flex-start;justify-content:space-around;
  overflow:hidden;animation:chew 1.1s ease-in-out infinite;
}
.p2 .mouth{animation-duration:.7s}
@keyframes chew{0%,100%{height:30px}50%{height:11px}}
.mouth span{
  width:0;height:0;margin-top:1px;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:11px solid var(--glass);
  filter:drop-shadow(0 0 4px var(--glass));opacity:.9;
  animation:shardglint 1.6s infinite;
}
.mouth span:nth-child(2){animation-delay:.2s;transform:rotate(8deg)}
.mouth span:nth-child(3){animation-delay:.4s;transform:rotate(-6deg) scale(1.2)}
.mouth span:nth-child(4){animation-delay:.6s;transform:rotate(12deg)}
.mouth span:nth-child(5){animation-delay:.8s;transform:rotate(-11deg)}
@keyframes shardglint{0%,100%{opacity:.35}50%{opacity:1;border-bottom-color:#fff}}

.stats{list-style:none;margin-top:1.8rem;border-top:1px solid #23150d;padding-top:1rem}
.stats li{display:flex;justify-content:space-between;font-size:.62rem;letter-spacing:.2em;padding:.45rem 0;border-bottom:1px dotted #1c1109}
.stats b{color:#5f5649;font-weight:400}
.stats i{color:var(--corn);font-style:normal}

/* ───────── TEXT BLOCKS ───────── */
.big{font-size:clamp(1.1rem,3.6vw,2rem);line-height:1.7;color:var(--bone);margin-bottom:2.5rem}
.big em{color:var(--blood-hot);font-style:normal;text-shadow:0 0 24px var(--blood)}
.body{color:#857a6c;line-height:2.1;font-size:.88rem;margin-bottom:1.6rem;max-width:62ch}

.ticker{
  margin-top:4rem;overflow:hidden;border-top:1px solid var(--meat);border-bottom:1px solid var(--meat);
  padding:.9rem 0;background:rgba(20,4,2,.5);
}
.ticker-track{display:flex;gap:2.5rem;white-space:nowrap;animation:slide 26s linear infinite;font-size:.68rem;letter-spacing:.35em;color:var(--blood-hot)}
@keyframes slide{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ───────── DATES ───────── */
.dates{list-style:none}
.dates li{
  display:grid;grid-template-columns:110px 1fr auto;gap:1.5rem;align-items:center;
  padding:1.3rem .6rem;border-bottom:1px solid #1c1109;font-size:.75rem;letter-spacing:.18em;
  transition:.2s;
}
.dates li:hover{background:rgba(142,11,6,.12);padding-left:1.6rem;color:var(--bone)}
.dates .d{color:var(--corn)}
.dates .v{color:#6e6458}
.dates .t{color:var(--blood-hot);font-size:.62rem}
.dates li.dead{opacity:.35}
.dates li.dead .d,.dates li.dead .t{color:#4a4237}

/* ───────── FOOTER ───────── */
footer{
  text-align:center;padding:16vh 6vw 10vh;
  background:linear-gradient(180deg,rgba(7,3,1,0),#000 30%);
}
.foot-big{
  font-size:clamp(2rem,12vw,7rem);color:#170c06;letter-spacing:.05em;
  text-shadow:0 0 2px #2b1a0f;line-height:1;margin-bottom:3rem;
}
.foot-fine{font-size:.62rem;color:#4d463c;letter-spacing:.15em;line-height:2.2;max-width:56ch;margin:0 auto .8rem}
.foot-fine.dim{color:#2e2922}

/* ───────── SHARD CURSOR ───────── */
.shard{
  position:fixed;pointer-events:none;z-index:505;
  width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;
  border-bottom:8px solid rgba(159,216,224,.8);
  filter:drop-shadow(0 0 4px #9fd8e0);
}

/* ───────── REVEAL ───────── */
.slab{opacity:0;transform:translateY(40px);transition:opacity 1.1s,transform 1.1s}
.slab.seen{opacity:1;transform:none}

/* ───────── RESPONSIVE ───────── */
@media(max-width:760px){
  .cards{grid-template-columns:1fr;gap:2rem}
  .dates li{grid-template-columns:80px 1fr;row-gap:.4rem}
  .dates .t{grid-column:1/-1}
  #hud{font-size:.52rem}
  .hud-row,.hud-bar{min-width:140px;width:140px}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important}
  #grain{opacity:.08}
}