/* ============ base ============ */
:root{
  --ink:#e8e8e8;
  --bg:#050505;
  --blood:#8a0303;
  --bone:#cfcabd;
  --gold:#c9a24b;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'VT323',monospace;
  overflow-x:hidden;
  cursor:crosshair;
  position:relative;
}
img{display:block;max-width:100%}

/* ============ overlays globais ============ */
.grain{
  position:fixed;inset:-50%;z-index:9000;pointer-events:none;
  opacity:.08;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .4s steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}
  50%{transform:translate(3%,-2%)}75%{transform:translate(-2%,-4%)}
  100%{transform:translate(2%,2%)}
}
.scanlines{
  position:fixed;inset:0;z-index:9001;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,
    rgba(0,0,0,.35) 3px,rgba(0,0,0,.35) 4px);
  mix-blend-mode:multiply;opacity:.5;
  animation:roll 8s linear infinite;
}
@keyframes roll{from{background-position:0 0}to{background-position:0 100px}}
.vignette{
  position:fixed;inset:0;z-index:9002;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.9) 100%);
}
.flash{
  position:fixed;inset:0;z-index:9100;pointer-events:none;
  background:#fff;opacity:0;mix-blend-mode:difference;
}
.flash.on{animation:flash .12s steps(2);}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}

/* ============ watcher (olho que segue) ============ */
.watcher{
  position:fixed;bottom:18px;right:18px;z-index:9200;
  text-align:center;pointer-events:none;mix-blend-mode:exclusion;
  opacity:.85;
}
.watcher__eye{
  width:54px;height:54px;border-radius:50%;
  background:#ddd;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 18px rgba(255,255,255,.4) inset,0 0 8px #000;
  overflow:hidden;
}
.watcher__pupil{
  width:20px;height:20px;border-radius:50%;background:#000;
  transition:transform .05s linear;
}
.watcher__label{font-size:13px;letter-spacing:2px;margin-top:4px;color:#aaa}

/* ============ hero ============ */
.hero{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  position:relative;padding:2rem;
}
.hero__kicker{
  color:var(--blood);letter-spacing:6px;font-size:clamp(.9rem,2vw,1.2rem);
  margin-bottom:1.8rem;text-transform:uppercase;opacity:.8;
}
.hero__title{
  font-family:'Special Elite',serif;
  font-size:clamp(2rem,7vw,5.5rem);
  line-height:1.05;letter-spacing:.04em;color:var(--bone);
  max-width:18ch;text-shadow:0 0 40px rgba(0,0,0,.9);
}
.halo-wrap{position:relative;width:min(70vw,460px);aspect-ratio:1;margin-bottom:-3rem}
.halo{
  width:100%;height:100%;object-fit:cover;
  filter:contrast(1.3) grayscale(1) brightness(1.05);
  mix-blend-mode:screen;
  animation:breathe 6s ease-in-out infinite, slowspin 60s linear infinite;
}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes slowspin{to{transform:rotate(360deg)}}
.halo-noise{
  position:absolute;inset:0;mix-blend-mode:overlay;opacity:.4;
  background:repeating-radial-gradient(circle at 50% 50%,#000 0 2px,transparent 2px 5px);
  animation:slowspin 40s linear infinite reverse;
}
h1.glitch{
  font-family:'Special Elite',serif;
  font-size:clamp(2.5rem,10vw,7rem);
  letter-spacing:.15em;position:relative;z-index:5;
  color:var(--bone);text-shadow:0 0 30px rgba(0,0,0,.9);
}
.glitch{position:relative}
.hero__title.glitch::before,.hero__title.glitch::after{white-space:pre-line;line-height:1.05}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;inset:0;
}
.glitch::before{color:#00fff2;animation:gl1 2.6s infinite linear alternate-reverse;clip-path:inset(0 0 60% 0)}
.glitch::after{color:#ff003c;animation:gl2 1.8s infinite linear alternate-reverse;clip-path:inset(55% 0 0 0)}
@keyframes gl1{0%{transform:translate(0)}100%{transform:translate(-4px,-2px)}}
@keyframes gl2{0%{transform:translate(0)}100%{transform:translate(4px,2px)}}
.hero__sub{
  font-size:clamp(1rem,2.4vw,1.6rem);color:#9b9b9b;margin-top:1.4rem;
  min-height:1.4em;letter-spacing:2px;
}
.hero__sub::after{content:'▋';animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.hero__scroll{
  position:absolute;bottom:28px;font-size:1.1rem;color:#666;letter-spacing:3px;
  animation:bob 2s ease-in-out infinite;
}
@keyframes bob{50%{transform:translateY(8px);color:#999}}

/* ============ marquee ============ */
.marquee{
  overflow:hidden;white-space:nowrap;border-top:1px solid #1a1a1a;
  border-bottom:1px solid #1a1a1a;background:#0a0a0a;padding:.6rem 0;
}
.marquee__track{display:inline-flex;animation:scrollx 18s linear infinite}
.marquee__track span{
  font-size:1.5rem;letter-spacing:4px;color:var(--blood);
  text-shadow:0 0 8px rgba(138,3,3,.6);padding-right:1rem;
}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ============ face section ============ */
.face-section{
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;
  max-width:1100px;margin:0 auto;padding:8rem 2rem;
}
.face-wrap{position:relative;filter:contrast(1.25)}
.face{
  width:100%;filter:grayscale(1) contrast(1.4);
  animation:facejitter 9s steps(1) infinite;
}
@keyframes facejitter{
  0%,92%,100%{transform:translate(0,0);filter:grayscale(1) contrast(1.4)}
  93%{transform:translate(-6px,2px) scale(1.02);filter:grayscale(1) contrast(2) invert(1)}
  95%{transform:translate(8px,-3px);filter:grayscale(1) contrast(1.4)}
  97%{transform:translate(-3px,4px) skewX(3deg)}
}
.face-static{
  position:absolute;inset:0;mix-blend-mode:overlay;opacity:.25;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='s'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  animation:grain .25s steps(2) infinite;
}
.manifesto .kicker{color:var(--blood);letter-spacing:4px;font-size:1.1rem;margin-bottom:1rem}
.manifesto h2{
  font-family:'Special Elite',serif;font-size:clamp(1.8rem,4vw,3rem);
  line-height:1.1;margin-bottom:1.4rem;color:var(--bone);
}
.wobble{animation:wobble 5s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:skewX(0)}50%{transform:skewX(-1.5deg) translateX(3px)}}
.manifesto__body{font-size:1.3rem;line-height:1.5;color:#a8a8a8;max-width:46ch;margin-bottom:2rem}
.cursed-btn{
  background:transparent;border:1px solid var(--blood);color:var(--blood);
  font-family:'VT323',monospace;font-size:1.3rem;letter-spacing:2px;
  padding:.7rem 1.6rem;cursor:crosshair;transition:.2s;position:relative;
}
.cursed-btn:hover{background:var(--blood);color:#000;box-shadow:0 0 24px var(--blood)}

/* ============ ENSAIO PROFUNDO ============ */
.essay{
  max-width:760px;margin:0 auto;padding:11rem 1.6rem;
  position:relative;
}
/* rachadura dourada vertical correndo pelo texto */
.essay::before{
  content:"";position:absolute;top:6rem;bottom:6rem;left:50%;width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--gold) 12%,#7a5a1e 50%,var(--gold) 78%,transparent);
  opacity:.22;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='600' preserveAspectRatio='none'%3E%3Cpath d='M1 0 Q-3 80 2 160 Q6 240 0 320 Q-4 400 3 480 Q5 560 1 600' stroke='black' fill='none' stroke-width='2'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='600' preserveAspectRatio='none'%3E%3Cpath d='M1 0 Q-3 80 2 160 Q6 240 0 320 Q-4 400 3 480 Q5 560 1 600' stroke='black' fill='none' stroke-width='2'/%3E%3C/svg%3E");
  pointer-events:none;
}
.essay p{
  font-size:clamp(1.25rem,2.4vw,1.7rem);
  line-height:1.75;color:#bdbdbd;margin:0 0 2.2rem;
  font-family:'VT323',monospace;letter-spacing:.4px;
  text-align:center;text-wrap:balance;
}
.essay em{color:var(--gold);font-style:normal;text-shadow:0 0 18px rgba(201,162,75,.35)}
.essay__kicker{
  color:var(--blood)!important;letter-spacing:8px;text-transform:uppercase;
  font-size:1rem!important;margin-bottom:4rem!important;opacity:.85;
}
.essay__lead{
  font-family:'Special Elite',serif!important;
  font-size:clamp(1.9rem,5vw,3.3rem)!important;color:var(--bone)!important;
  line-height:1.2!important;margin-bottom:4rem!important;letter-spacing:.02em;
}
.essay__big{
  font-family:'Special Elite',serif!important;
  font-size:clamp(1.5rem,3.6vw,2.4rem)!important;color:var(--bone)!important;
  margin:4rem 0!important;line-height:1.3!important;
}
.essay__close{
  font-family:'Special Elite',serif!important;
  font-size:clamp(1.4rem,3vw,2rem)!important;color:var(--gold)!important;
  line-height:1.6!important;margin-top:5rem!important;
  text-shadow:0 0 24px rgba(201,162,75,.25);
}

/* revelação no scroll */
.reveal{opacity:0;transform:translateY(34px);filter:blur(6px);
  transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1),filter 1.1s ease}
.reveal.seen{opacity:1;transform:none;filter:none}

/* ============ counter ============ */
.counter-section{text-align:center;padding:6rem 2rem;border-top:1px solid #111;border-bottom:1px solid #111}
.counter__label{font-size:1.3rem;color:#777;letter-spacing:2px;margin-bottom:1rem}
.counter{
  font-family:'VT323',monospace;font-size:clamp(3rem,12vw,8rem);
  color:#00fff2;letter-spacing:.1em;
  text-shadow:0 0 20px rgba(0,255,242,.5),2px 0 #ff003c,-2px 0 #00fff2;
}

/* ============ whispers ============ */
.whispers{max-width:1100px;margin:0 auto;padding:6rem 2rem}
.whispers__title{font-size:1.6rem;color:#555;letter-spacing:4px;margin-bottom:2rem}
.whispers__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1px;background:#111}
.whisper{
  background:#070707;padding:1.6rem;font-size:1.25rem;color:#888;line-height:1.4;
  transition:.15s;min-height:120px;display:flex;align-items:center;
}
.whisper:hover{background:#120000;color:var(--blood);transform:scale(1.02)}

/* ============ TRACE / rastreamento ============ */
.trace{max-width:720px;margin:0 auto;padding:8rem 1.6rem 4rem;text-align:center}
.trace__warn{font-size:1.3rem;color:#777;letter-spacing:1px;margin-bottom:1rem}
.trace__title{
  font-family:'Special Elite',serif;font-size:clamp(1.5rem,4vw,2.4rem);
  color:var(--bone);margin-bottom:2.6rem;line-height:1.2;
}
.trace__terminal{
  text-align:left;background:#080808;border:1px solid #1c1c1c;
  border-radius:4px;padding:1.6rem 1.4rem;font-family:'VT323',monospace;
  font-size:clamp(1rem,2.2vw,1.35rem);line-height:1.7;color:#7bd88f;
  box-shadow:0 0 60px rgba(0,0,0,.8),0 0 0 1px rgba(123,216,143,.05) inset;
  min-height:120px;position:relative;overflow:hidden;
}
.trace__terminal::before{
  content:"● ● ●";position:absolute;top:.5rem;left:.9rem;color:#333;
  letter-spacing:3px;font-size:.8rem;
}
.trace__terminal{padding-top:2.4rem}
.trace__line{margin:0;white-space:pre-wrap;word-break:break-word}
.t-key{color:#4a8f5e}
.t-val{color:#bdbdbd}
.t-hot{color:#ff5b5b;text-shadow:0 0 10px rgba(255,91,91,.4)}
.t-dots{animation:blink 1s steps(2) infinite}
.trace__foot{margin-top:2.4rem;font-size:1.2rem;color:#666;letter-spacing:1px}
.trace__foot em{color:var(--blood);font-style:normal}

/* ============ footer ============ */
.footer{text-align:center;padding:8rem 2rem 4rem}
.footer__big{font-family:'Special Elite',serif;font-size:clamp(2rem,8vw,5rem);color:var(--bone)}
.footer__small{margin-top:2rem;font-size:1.1rem;color:#444;letter-spacing:2px}

/* ============ responsivo ============ */
@media(max-width:760px){
  .face-section{grid-template-columns:1fr;gap:2rem;padding:4rem 1.4rem}
  .watcher{transform:scale(.72);bottom:10px;right:10px}
  .essay{padding:5rem 1.3rem}
  .essay p{margin-bottom:1.8rem}
  .essay__kicker{margin-bottom:2.4rem!important}
  .essay__lead{margin-bottom:2.4rem!important}
  .essay__big{margin:2.4rem 0!important}
  .essay__close{margin-top:3rem!important}
  .essay::before{top:3rem;bottom:3rem}
  .counter-section{padding:4rem 1.4rem}
  .whispers{padding:4rem 1.3rem}
  .whispers__grid{grid-template-columns:1fr 1fr}
  .whisper{min-height:auto;padding:1.1rem;font-size:1.05rem}
  .trace{padding:5rem 1.3rem 3rem}
  .marquee__track span{font-size:1.15rem;letter-spacing:2px}
  .footer{padding:5rem 1.4rem 3rem}
  .hero{padding:2rem 1.3rem}
}
@media(max-width:430px){
  .whispers__grid{grid-template-columns:1fr}
  .essay p{font-size:1.15rem}
  body{cursor:auto}
}

/* modo "invertido" acionado via JS */
body.inverted{filter:invert(1) hue-rotate(180deg)}