:root{
  --preto:#07070d;
  --carvao:#0e0e17;
  --vermelho:#e62429;
  --ciano:#00e5ff;
  --magenta:#ff2e88;
  --amarelo:#ffd400;
  --areia:#efe9dc;
  --cinza:#9a97a6;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--preto);
  color:var(--areia);
  font-family:'Sora',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--vermelho);color:var(--areia)}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;
  background-image:radial-gradient(circle,#fff 1px,transparent 1.3px);
  background-size:18px 18px;
}
canvas.fx{position:fixed;inset:0;pointer-events:none}
#particulas{z-index:0;opacity:.7}
#confete{z-index:90}

/* ===== barra de progresso (fio de teia) ===== */
#fio{
  position:fixed;top:0;left:0;height:3px;width:0%;z-index:80;
  background:linear-gradient(90deg,var(--vermelho),var(--magenta),var(--ciano));
  box-shadow:0 0 12px rgba(230,36,41,.7);
  transition:width .1s linear;
}

/* ================= CAPA (mínima) ================= */
#capa{
  position:fixed;inset:0;z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;
  background:
    radial-gradient(55% 40% at 50% 115%,rgba(230,36,41,.28),transparent),
    radial-gradient(30% 25% at 88% 5%,rgba(0,229,255,.07),transparent),
    var(--preto);
  cursor:pointer;transition:opacity 1.1s ease,visibility 1.1s;
  text-align:center;padding:28px;
}
#capa.fechada{opacity:0;visibility:hidden}
#capa .msg{
  font-weight:300;font-size:clamp(1.1rem,3.4vw,1.5rem);
  line-height:1.9;color:var(--areia);max-width:520px;
}
#capa .msg b{font-weight:600;color:var(--vermelho)}
#capa .toque{
  font-family:'IBM Plex Mono',monospace;font-size:.74rem;
  letter-spacing:.32em;text-transform:uppercase;color:var(--areia);
  background:none;border:1px solid rgba(239,233,220,.35);
  padding:18px 44px;cursor:pointer;
  transition:border-color .3s,box-shadow .3s,color .3s;
  animation:respira 3s ease-in-out infinite;
}
#capa .toque:hover,#capa:hover .toque{
  border-color:var(--vermelho);color:#fff;
  box-shadow:0 0 34px rgba(230,36,41,.35);
}
@keyframes respira{0%,100%{opacity:.75}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ================= ESTRUTURA ================= */
main{position:relative;z-index:2}
section{padding:130px 24px;max-width:960px;margin:0 auto}
.mono{
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--cinza);
}
.rotulo{
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--vermelho);margin-bottom:20px;
  display:flex;align-items:center;gap:14px;
}
.rotulo::after{content:"";height:1px;flex:1;max-width:120px;background:rgba(230,36,41,.4)}
h2{
  font-family:'Anton',sans-serif;font-size:clamp(2.4rem,7vw,4.8rem);
  line-height:1;text-transform:uppercase;letter-spacing:.01em;
  color:var(--areia);margin-bottom:38px;
}
h2 .neon{color:var(--vermelho)}
p{font-weight:300;line-height:1.95;font-size:1rem;color:#c9c5bb;max-width:620px}
p+p{margin-top:20px}
strong{color:var(--areia);font-weight:600}
.ciano{color:var(--ciano)}
.rosa{color:var(--magenta)}
/* piadas ruins agora vêm lacradas */
.piada-box{margin-top:16px;max-width:620px}
.piada-box summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--amarelo);
  border:1px dashed rgba(255,212,0,.5);padding:10px 16px;
  transition:border-color .3s,box-shadow .3s;user-select:none;
}
.piada-box summary::-webkit-details-marker{display:none}
.piada-box summary::before{content:"⚠";font-size:.85rem}
.piada-box summary:hover{border-color:var(--amarelo);box-shadow:0 0 16px rgba(255,212,0,.2)}
.piada-box[open] summary{opacity:.45}
.piada{
  display:block;margin-top:12px;font-size:.85rem;color:var(--cinza);
  font-style:italic;border-left:2px solid rgba(0,229,255,.4);padding-left:14px;
  line-height:1.8;animation:solta .5s ease;
}
@keyframes solta{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}

/* palavras-segredo com notas escondidas */
.segredo{
  position:relative;color:var(--ciano);cursor:pointer;
  border-bottom:1px dashed rgba(0,229,255,.55);
  transition:color .3s;
}
.segredo:hover{color:#7ff3ff}
.segredo .nota{
  position:absolute;bottom:calc(100% + 10px);left:50%;translate:-50% 4px;
  width:max-content;max-width:min(260px,72vw);
  background:#12121f;border:1px solid var(--ciano);
  box-shadow:0 0 24px rgba(0,229,255,.25),-4px 4px 0 rgba(255,46,136,.25);
  padding:12px 16px;z-index:10;
  font-style:normal;font-size:.78rem;line-height:1.7;color:var(--areia);
  font-family:'Sora',sans-serif;letter-spacing:0;text-transform:none;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease,translate .3s ease;
}
.segredo .nota::after{
  content:"";position:absolute;top:100%;left:50%;translate:-50% 0;
  border:7px solid transparent;border-top-color:var(--ciano);
}
.segredo.aberto{color:#7ff3ff}
.segredo.aberto .nota{opacity:1;translate:-50% 0}

.dica-segredo{
  font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--cinza);margin-top:34px;
}
.dica-segredo b{color:var(--ciano);font-weight:400}
.aberra{position:relative;display:inline-block}
.aberra::before,.aberra::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none}
.aberra::before{color:var(--ciano);opacity:.5;transform:translateX(-2.5px);z-index:-1}
.aberra::after{color:var(--magenta);opacity:.45;transform:translateX(2.5px);z-index:-1}

/* flicker glitch ocasional nos títulos */
.visivel h2 .aberra,.visivel h3{animation:flick 7s infinite steps(1)}
@keyframes flick{
  0%,96.5%,98%,100%{opacity:1;transform:none}
  97%{opacity:.85;transform:translateX(2px)}
  97.5%{opacity:1;transform:translateX(-2px)}
}

/* ================= HERO ================= */
#hero{min-height:88vh;display:flex;flex-direction:column;justify-content:center;position:relative}
#hero .num{
  position:absolute;right:-30px;top:6%;
  font-family:'Anton',sans-serif;font-size:clamp(11rem,34vw,26rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px rgba(230,36,41,.5);
  pointer-events:none;user-select:none;will-change:transform;
}
#hero h2{font-size:clamp(3rem,9.5vw,6.8rem);margin-bottom:30px}
.codinomes{display:flex;gap:26px;flex-wrap:wrap;margin-top:38px}
.codinomes div{border-top:1px solid rgba(239,233,220,.18);padding-top:12px;min-width:110px}
.codinomes .mono{font-size:.62rem;margin-bottom:6px}
.codinomes b{font-family:'Anton',sans-serif;font-weight:400;font-size:1.3rem;letter-spacing:.04em;color:var(--areia)}

/* serpentinas decorativas fixas do hero */
.serpentina{
  position:absolute;width:110px;height:110px;border-radius:50%;
  border:2px dashed;opacity:.28;pointer-events:none;
  animation:girasl 24s linear infinite;
}
.s1{top:12%;left:-40px;border-color:var(--ciano)}
.s2{bottom:16%;left:16%;width:60px;height:60px;border-color:var(--magenta);animation-duration:16s;animation-direction:reverse}
.s3{top:26%;right:14%;width:80px;height:80px;border-color:var(--amarelo);animation-duration:30s}
@keyframes girasl{to{transform:rotate(360deg)}}

/* ================= CAPÍTULOS ================= */
.cap{
  position:relative;padding:46px 0 46px 42px;margin-bottom:8px;
  border-left:1px solid rgba(239,233,220,.14);
  opacity:0;translate:0 36px;transition:opacity .9s ease,translate .9s ease;
}
.cap.visivel{opacity:1;translate:0 0}
.cap::before{
  content:"";position:absolute;left:-5px;top:58px;width:9px;height:9px;
  background:var(--vermelho);transform:rotate(45deg);
  box-shadow:0 0 14px rgba(230,36,41,.7);
  transition:transform .5s ease .3s;
}
.cap.visivel::before{transform:rotate(225deg)}
.cap .terra{
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ciano);margin-bottom:12px;
}
.cap h3{
  font-family:'Anton',sans-serif;font-size:clamp(1.6rem,4.5vw,2.4rem);
  text-transform:uppercase;letter-spacing:.02em;color:var(--areia);margin-bottom:18px;
}

/* ================= GALERIA ================= */
#galeria{max-width:1100px}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;margin-top:16px}
.quadro{
  position:relative;background:var(--carvao);border:1px solid rgba(239,233,220,.1);
  padding:10px;cursor:zoom-in;
  transition:border-color .4s ease,box-shadow .4s ease;
  opacity:0;translate:0 28px;transform-style:preserve-3d;will-change:transform;
}
.quadro.visivel{opacity:1;translate:0 0;transition:opacity .8s ease,translate .8s ease,border-color .4s ease,box-shadow .4s ease}
.quadro:hover{
  border-color:rgba(0,229,255,.5);
  box-shadow:-8px 8px 0 rgba(255,46,136,.3),8px -8px 0 rgba(0,229,255,.25);
  z-index:3;
}
.quadro img{width:100%;height:auto;display:block;filter:saturate(1.05);pointer-events:none}
.quadro figcaption{
  font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cinza);padding:14px 4px 6px;
}
.quadro:hover figcaption{color:var(--areia)}

/* lightbox */
#lightbox{
  position:fixed;inset:0;z-index:95;display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:18px;
  background:rgba(7,7,13,.94);padding:26px;cursor:zoom-out;
}
#lightbox.aberto{display:flex;animation:surge .35s ease}
@keyframes surge{from{opacity:0}to{opacity:1}}
#lightbox img{
  max-width:min(92vw,760px);max-height:74vh;width:auto;height:auto;
  border:1px solid rgba(239,233,220,.25);
  box-shadow:-10px 10px 0 rgba(255,46,136,.25),10px -10px 0 rgba(0,229,255,.2);
}
#lightbox figcaption{
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--areia);
}
#lightbox .fechar{
  position:absolute;top:18px;right:22px;background:none;border:1px solid rgba(239,233,220,.3);
  color:var(--areia);font-size:1.2rem;width:44px;height:44px;cursor:pointer;
}
#lightbox .fechar:hover{border-color:var(--vermelho)}

/* ================= DISTÂNCIA ================= */
#distancia .rota{display:flex;align-items:center;gap:16px;margin:6px 0 38px;max-width:620px}
#distancia .ponto{
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--areia);
  border:1px solid rgba(239,233,220,.3);padding:10px 16px;white-space:nowrap;
}
#distancia .ponto.voce{border-color:var(--vermelho);color:var(--vermelho);box-shadow:0 0 18px rgba(230,36,41,.25)}
#distancia .linha{
  position:relative;flex:1;height:1px;
  background:repeating-linear-gradient(90deg,rgba(239,233,220,.4) 0 8px,transparent 8px 16px);
}
#distancia .aviao{
  position:absolute;top:50%;translate:0 -52%;left:0;font-size:1rem;color:var(--ciano);
  animation:viaja 5s ease-in-out infinite;text-shadow:0 0 12px rgba(0,229,255,.8);
}
@keyframes viaja{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% - 18px);opacity:0}}

/* ================= MÚSICA ================= */
#musica .player{
  display:flex;align-items:center;gap:30px;flex-wrap:wrap;
  border:1px solid rgba(239,233,220,.12);background:var(--carvao);
  padding:34px;margin-top:10px;margin-bottom:44px;
}
.disco{
  width:110px;height:110px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle,var(--vermelho) 0 16%,var(--preto) 17% 19%,#16161f 20% 100%);
  border:1px solid rgba(239,233,220,.2);
  animation:gira 7s linear infinite;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
}
@keyframes gira{to{transform:rotate(360deg)}}
.pausado .disco{animation-play-state:paused}
.player .info .mono{margin-bottom:8px}
.player .info b{font-family:'Anton',sans-serif;font-weight:400;font-size:1.7rem;letter-spacing:.03em}
.player .info small{display:block;color:var(--cinza);margin-top:4px;font-size:.82rem}
.eq{display:flex;gap:4px;align-items:flex-end;height:26px;margin-top:12px}
.eq span{
  width:5px;background:linear-gradient(to top,var(--vermelho),var(--magenta));
  animation:pula .9s ease-in-out infinite;transform-origin:bottom;
}
.eq span:nth-child(1){height:60%}
.eq span:nth-child(2){height:100%;animation-delay:.15s;background:linear-gradient(to top,var(--vermelho),var(--ciano))}
.eq span:nth-child(3){height:45%;animation-delay:.3s}
.eq span:nth-child(4){height:85%;animation-delay:.45s;background:linear-gradient(to top,var(--magenta),var(--amarelo))}
.eq span:nth-child(5){height:65%;animation-delay:.6s}
@keyframes pula{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.pausado .eq span{animation-play-state:paused;transform:scaleY(.25)}

/* ================= BOLO ================= */
#pedido{text-align:center}
#pedido .rotulo,#pedido h2{text-align:left}
.bolo-wrap{
  display:flex;flex-direction:column;align-items:center;gap:0;
  margin:30px auto 34px;padding:60px 20px 0;
  border:1px solid rgba(239,233,220,.12);background:var(--carvao);
  max-width:560px;position:relative;overflow:hidden;
}
.bolo-wrap::before{
  content:"";position:absolute;inset:0;opacity:.06;
  background-image:radial-gradient(circle,#fff 1px,transparent 1.4px);
  background-size:12px 12px;
}
.velas{display:flex;gap:26px;margin-bottom:-6px;position:relative;z-index:2}
.vela{
  position:relative;width:46px;padding:8px 0 14px;cursor:pointer;background:none;border:none;
  font-family:'Anton',sans-serif;font-size:2.2rem;color:var(--areia);
  border-bottom:none;
}
.vela .corpo{
  display:block;background:repeating-linear-gradient(45deg,var(--vermelho) 0 8px,var(--areia) 8px 16px);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.chama{
  position:absolute;top:-16px;left:50%;translate:-50% 0;
  width:12px;height:18px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 80%,#fff 0 18%,var(--amarelo) 30%,#ff7300 75%,transparent 78%);
  animation:tremula .5s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 10px rgba(255,180,0,.9));
  transition:opacity .3s,transform .3s;
}
@keyframes tremula{from{transform:scale(1) rotate(-3deg)}to{transform:scale(1.12) rotate(3deg)}}
.vela.apagada .chama{opacity:0;transform:scale(.2) translateY(6px)}
.vela.apagada::after{
  content:"";position:absolute;top:-24px;left:50%;translate:-50% 0;
  width:8px;height:8px;border-radius:50%;
  background:rgba(200,200,210,.5);filter:blur(3px);
  animation:fumaca 1.6s ease-out forwards;
}
@keyframes fumaca{to{transform:translateY(-34px) scale(2.4);opacity:0}}
.bolo{position:relative;z-index:1;width:100%;max-width:340px}
.bolo .andar{
  border:1px solid rgba(239,233,220,.25);position:relative;margin:0 auto;
}
.bolo .a1{width:62%;height:56px;background:linear-gradient(#1c1c2a,#14141f);border-bottom:none}
.bolo .a2{width:86%;height:64px;background:linear-gradient(#191926,#101018)}
.bolo .a1::before,.bolo .a2::before{
  content:"";position:absolute;top:0;left:0;right:0;height:16px;
  background:
    radial-gradient(circle at 10% 100%,var(--vermelho) 0 7px,transparent 8px),
    radial-gradient(circle at 30% 100%,var(--vermelho) 0 9px,transparent 10px),
    radial-gradient(circle at 50% 100%,var(--vermelho) 0 7px,transparent 8px),
    radial-gradient(circle at 70% 100%,var(--vermelho) 0 9px,transparent 10px),
    radial-gradient(circle at 90% 100%,var(--vermelho) 0 7px,transparent 8px);
}
.bolo .a2::after{
  content:"· · · aranhaverso confeitaria · · ·";
  position:absolute;bottom:10px;left:0;right:0;text-align:center;
  font-family:'IBM Plex Mono',monospace;font-size:.5rem;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(239,233,220,.35);
}
.prato{width:100%;height:10px;background:var(--vermelho);box-shadow:0 0 24px rgba(230,36,41,.5)}
.dica-bolo{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--cinza);margin-bottom:8px}
#msg-pedido{
  max-width:560px;margin:0 auto;opacity:0;translate:0 14px;
  transition:opacity .8s ease,translate .8s ease;
  font-size:1rem;color:var(--areia);
}
#msg-pedido.mostra{opacity:1;translate:0 0}

/* ================= FINAL ================= */
#final{text-align:center;padding-bottom:180px}
#final h2{font-size:clamp(2.4rem,7.5vw,5.2rem)}
#final p{margin-left:auto;margin-right:auto}
#final .assina{
  margin-top:52px;font-family:'Anton',sans-serif;font-size:1.25rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--vermelho);
}

/* ================= BOTÃO SOM / GATO / FOOTER ================= */
#btnsom{
  position:fixed;right:20px;bottom:20px;z-index:60;
  width:54px;height:54px;border-radius:50%;
  background:var(--carvao);border:1px solid rgba(239,233,220,.3);
  color:var(--areia);font-size:1.15rem;cursor:pointer;
  transition:border-color .3s,box-shadow .3s;
}
#btnsom:hover{border-color:var(--vermelho);box-shadow:0 0 22px rgba(230,36,41,.4)}
#btnsom:focus-visible{outline:2px solid var(--ciano);outline-offset:3px}
#gato{
  position:fixed;bottom:4px;left:-70px;z-index:55;font-size:1.6rem;opacity:.85;
  animation:anda 60s linear infinite;pointer-events:none;
}
@keyframes anda{
  0%{left:-70px;transform:scaleX(1)}
  47%{left:calc(100% + 40px);transform:scaleX(1)}
  50%{left:calc(100% + 40px);transform:scaleX(-1)}
  97%{left:-70px;transform:scaleX(-1)}
  100%{left:-70px;transform:scaleX(1)}
}
footer{
  text-align:center;padding:36px;
  font-family:'IBM Plex Mono',monospace;font-size:.62rem;
  letter-spacing:.3em;text-transform:uppercase;color:#55525f;
}
@media(max-width:640px){
  section{padding:90px 20px}
  .cap{padding-left:28px}
  #musica .player{padding:24px;gap:22px}
}