/* Visual do site da banda. O conteúdo vem do banco: ver lib/site/montar.ts. */
:root{
  --ink:#0c0a08;
  --ink-2:#17130f;
  --parch:#e9dfc8;
  --parch-2:#d9cba9;
  --gold:#c9a35a;
  --gold-hi:#f1c66b;
  --ember:#d8641d;
  --blood:#7a1a14;
  --line:rgba(233,223,200,.22);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--parch);font-family:"Cormorant Garamond",Georgia,serif;overflow-x:hidden}
body.locked{overflow:hidden;height:100vh}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* grão de papel sobre tudo */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:90;opacity:.09;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .85  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ============ PORTÃO ============ */
.gate{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;grid-template-rows:1fr auto 1fr;align-items:center;justify-items:center;padding:6vh 16px;text-align:center;transition:opacity 1.1s ease, visibility 1.1s}
.gate.gone{opacity:0;visibility:hidden}
.gate h2{font-family:"Grenze Gotisch",serif;font-weight:600;font-size:clamp(44px,9vw,128px);line-height:.9;letter-spacing:.01em;color:var(--parch)}
.gate h2:first-child{align-self:start}
.gate h2:last-child{align-self:end}
.gate-row{display:flex;align-items:center;gap:clamp(28px,12vw,190px)}
.gate-btn{font-family:"IM Fell English SC",serif;font-size:15px;letter-spacing:.14em;border:1.5px solid var(--parch);padding:14px 26px;min-width:128px;transition:background .3s,color .3s}
.gate-btn:hover,.gate-btn:focus-visible{background:var(--parch);color:var(--ink);outline:none}
.gate-sigil{width:46px;height:86px;color:var(--parch);animation:breathe 3.4s ease-in-out infinite}
.gate-no{position:absolute;bottom:4vh;left:0;right:0;font-style:italic;font-size:18px;opacity:0;transition:opacity .6s}
.gate-no.show{opacity:.7}
@keyframes breathe{50%{opacity:.45;transform:scale(.96)}}

/* ============ ABERTURA ============ */
.intro{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--ink);display:grid;place-items:center}
#brush,#embers{position:absolute;inset:0;width:100%;height:100%}
#embers{mix-blend-mode:screen}
.intro-logo{position:relative;z-index:2;width:min(760px,86vw);filter:drop-shadow(0 0 40px rgba(0,0,0,.9))}
.intro-logo img{width:100%;height:auto;opacity:0;clip-path:inset(0 0 100% 0);filter:blur(10px) drop-shadow(0 0 0 rgba(241,198,107,0))}
.intro-sub{position:absolute;z-index:2;bottom:15vh;left:0;right:0;text-align:center;font-family:"IM Fell English SC",serif;letter-spacing:.32em;font-size:clamp(12px,1.3vw,15px);color:var(--gold);opacity:0}
.scroll-cue{position:absolute;z-index:2;bottom:4.5vh;left:50%;width:1px;height:56px;background:linear-gradient(var(--parch),transparent);opacity:0;transform:translateX(-50%)}
.scroll-cue::after{content:"";position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:50%;background:var(--gold-hi);animation:drip 2.2s ease-in infinite}
@keyframes drip{0%{transform:translateY(0);opacity:1}100%{transform:translateY(52px);opacity:0}}

/* borda rasgada de tinta entre escuro e pergaminho */
.tear{position:relative;height:120px;margin-top:-1px;background:var(--ink)}
.tear svg{position:absolute;inset:0;width:100%;height:100%}
.tear.flip{transform:scaleY(-1);margin-top:0;margin-bottom:-1px}

/* ============ HISTÓRIA EM QUADROS ============ */
.story{position:relative;background:var(--parch);color:var(--ink)}
.story::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.35),transparent 60%),radial-gradient(ellipse at 50% 100%,rgba(120,85,40,.22),transparent 70%);}
.scene{position:relative;height:260vh}
.scene-pin{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden;padding:0 16px}
.panel{position:relative;width:min(1100px,90vw);aspect-ratio:3/2;border:4px solid var(--ink);background:var(--ink);overflow:hidden;box-shadow:10px 12px 0 rgba(12,10,8,.9);will-change:transform,clip-path}
.panel.square{width:min(720px,84vw);aspect-ratio:1/1.05}
.panel img{width:100%;height:100%;object-fit:cover;will-change:transform}
.cap{position:absolute;z-index:3;max-width:min(420px,78vw);background:var(--parch);border:2px solid var(--ink);padding:14px 18px;font-family:"IM Fell English SC",serif;font-size:clamp(13px,1.15vw,15.5px);line-height:1.5;letter-spacing:.04em;color:var(--ink);box-shadow:5px 5px 0 var(--ink);opacity:0}
.cap em{font-style:normal;color:var(--blood)}
.cap i{display:block;margin-top:8px;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:1.08em;letter-spacing:0;text-transform:none;opacity:.8}
.scene .numeral{position:absolute;z-index:1;font-family:"Grenze Gotisch",serif;font-weight:800;font-size:clamp(160px,30vw,420px);line-height:.8;color:rgba(12,10,8,.07);pointer-events:none;user-select:none}

/* ============ SEGURE ============ */
.hold{position:relative;min-height:100svh;background:var(--ink);display:grid;place-items:center;overflow:hidden;text-align:center;padding:12vh 16px}
.hold-bg{position:absolute;inset:0;background-position:center;background-size:cover;opacity:.16;filter:grayscale(.4) contrast(1.2)}
.hold-inner{position:relative;z-index:2;display:grid;justify-items:center;gap:34px}
.hold h3{font-family:"Grenze Gotisch",serif;font-weight:600;font-size:clamp(38px,6.4vw,92px);line-height:.95;max-width:12ch}
.hold p{font-size:clamp(18px,1.8vw,22px);font-style:italic;opacity:.75;max-width:34ch}
/* círculo de transmutação: acende traço a traço enquanto a pessoa segura */
.hold{--p:0}
#holdDust{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen}
.hold-bg{transition:opacity .2s;opacity:calc(.16 + var(--p)*.34)}
.sigil{position:relative;width:clamp(230px,34vw,330px);aspect-ratio:1;border-radius:50%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;outline:none}
.sigil:focus-visible{box-shadow:0 0 0 2px var(--gold)}
.sigil svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sigil .dim{fill:none;stroke:rgba(233,223,200,.42);stroke-width:1}
.sigil:not(.done) svg{animation:chamado 3.4s ease-in-out infinite}
@keyframes chamado{50%{filter:drop-shadow(0 0 10px rgba(241,198,107,.45))}}
.sigil .lit{fill:none;stroke:var(--gold-hi);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 3px rgba(241,198,107,.9))}
.sigil .runa{font-family:"IM Fell English SC",serif;font-size:9.5px;letter-spacing:2.2px;fill:rgba(233,223,200,.55)}
.sigil .runa.lit-t{fill:var(--gold-hi);filter:drop-shadow(0 0 3px rgba(241,198,107,.9))}
.sigil .glifo{font-size:15px;text-anchor:middle;dominant-baseline:central;fill:rgba(233,223,200,.4);font-family:"Cormorant Garamond",serif}
.sigil .glifo.lit-t{fill:var(--gold-hi)}
.sigil .lit-t{opacity:0}
.sigil-glow{position:absolute;inset:-30%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,236,190,.95) 0%,rgba(241,198,107,.55) 14%,rgba(216,100,29,.22) 34%,transparent 62%);opacity:calc(var(--p)*var(--p));transform:scale(calc(.6 + var(--p)*.5))}
.sigil-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:"IM Fell English SC",serif;font-size:15px;letter-spacing:.32em;padding-left:.32em;color:var(--parch);text-shadow:0 0 12px rgba(0,0,0,.9);opacity:calc(1 - var(--p)*1.6);pointer-events:none;animation:breathe 3.4s ease-in-out infinite}
.sigil.done .sigil-label{opacity:0}
.onda{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;border:2px solid var(--gold-hi);box-shadow:0 0 40px rgba(241,198,107,.7),inset 0 0 40px rgba(241,198,107,.5);pointer-events:none;z-index:3;opacity:0}
#holdHint{min-height:2.6em;transition:opacity .3s}
#holdHint em{font-style:normal;font-family:"Grenze Gotisch",serif;font-size:1.25em;color:var(--gold-hi)}
.flash{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,#fff8e6 0%,#f1c66b 30%,#d8641d 60%,#0c0a08 100%)}
body.shake .hold-inner{animation:shake .08s linear infinite}
@keyframes shake{25%{transform:translate(2px,-1px)}50%{transform:translate(-2px,1px)}75%{transform:translate(1px,2px)}}

/* ============ AS CINCO FAIXAS ============ */
.rites{position:relative;height:100svh;min-height:620px;background:#000;overflow:hidden}
.rite{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 1s}
.rite.on{opacity:1;visibility:visible}
.rite-media{position:absolute;inset:0}
.rite-media video,.rite-media img{width:100%;height:100%;object-fit:cover}
.rite-media img.kb{animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.12) translate(-1%,1%)}}
.rite-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,.05) 75%),linear-gradient(0deg,rgba(0,0,0,.75),transparent 40%)}
.rite-body{position:absolute;z-index:2;left:clamp(16px,6vw,96px);bottom:clamp(96px,16vh,170px);max-width:min(680px,88vw)}
.rite-title{font-family:"Grenze Gotisch",serif;font-weight:600;font-size:clamp(54px,9vw,140px);line-height:.86;color:var(--parch);text-shadow:0 4px 40px rgba(0,0,0,.7)}
.rite-title span{display:inline-block;transform:translateY(40px);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s}
.rite.on .rite-title span{transform:none;opacity:1}
.rite-quote{margin-top:22px;font-size:clamp(19px,1.9vw,25px);font-style:italic;line-height:1.35;color:var(--parch);opacity:.86;max-width:30ch}
.rite-meta{margin-top:26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.play{display:inline-flex;align-items:center;gap:12px;border:1.5px solid var(--parch);border-radius:999px;padding:10px 22px 10px 12px;font-family:"IM Fell English SC",serif;letter-spacing:.12em;font-size:14px;transition:background .3s,color .3s}
.play:hover,.play:focus-visible{background:var(--parch);color:var(--ink);outline:none}
.play .ic{width:30px;height:30px;border-radius:50%;background:var(--parch);color:var(--ink);display:grid;place-items:center;transition:background .3s,color .3s}
.play:hover .ic{background:var(--ink);color:var(--parch)}
.play .ic svg{width:12px;height:12px}
.play.playing .ic{background:var(--gold-hi)}
.rite-len{font-family:"IM Fell English SC",serif;letter-spacing:.14em;font-size:13px;opacity:.6}
.rites-nav{position:absolute;z-index:3;right:clamp(16px,5vw,72px);bottom:clamp(40px,7vh,72px);display:flex;align-items:center;gap:14px}
.rites-nav button{width:52px;height:52px;border-radius:50%;background:var(--parch);color:var(--ink);display:grid;place-items:center;transition:transform .25s,background .25s}
.rites-nav button:hover{transform:scale(1.08);background:var(--gold-hi)}
.rites-nav svg{width:18px;height:18px}
.rites-count{font-family:"IM Fell English SC",serif;letter-spacing:.16em;font-size:14px;min-width:66px;text-align:center}
.rites-count b{font-weight:400;color:var(--gold-hi)}
.rites-bar{position:absolute;z-index:3;left:0;bottom:0;height:3px;background:var(--gold-hi);width:0}
.roman{position:absolute;z-index:1;right:clamp(16px,5vw,72px);top:clamp(28px,6vh,60px);font-family:"Grenze Gotisch",serif;font-size:clamp(80px,13vw,200px);line-height:.8;color:rgba(233,223,200,.12)}

/* ============ VITRIOL ============ */
.vitriol{position:relative;background:var(--parch);color:var(--ink);padding:18vh clamp(16px,6vw,96px) 16vh;overflow:hidden}
.vitriol-words{font-family:"Grenze Gotisch",serif;font-weight:600;font-size:clamp(42px,7.6vw,116px);line-height:.98;max-width:13ch}
.vitriol-words .w{display:block;opacity:.1;transition:none}
.vitriol-words .w b{color:var(--blood);font-weight:800}
.vitriol-trans{margin-top:44px;font-size:clamp(20px,2vw,26px);font-style:italic;max-width:34ch;opacity:.78}
.vitriol-img{position:absolute;right:clamp(-120px,-4vw,0px);top:50%;width:min(520px,44vw);transform:translateY(-50%) rotate(3deg);border:4px solid var(--ink);box-shadow:10px 12px 0 var(--ink)}
.vitriol-img img{width:100%}

/* ============ FIM ============ */
.end{position:relative;background:var(--ink);padding:14vh 16px 8vh;text-align:center;overflow:hidden}
.end-logo{width:min(520px,80vw);margin:0 auto}
.end p{margin:26px auto 0;font-size:clamp(19px,1.8vw,23px);font-style:italic;opacity:.72;max-width:36ch}
.listen{margin:44px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.listen a{text-decoration:none;font-family:"IM Fell English SC",serif;letter-spacing:.14em;font-size:14px;border:1.5px solid var(--line);border-radius:999px;padding:12px 24px;transition:border-color .3s,background .3s,color .3s}
.listen a:hover{border-color:var(--parch);background:var(--parch);color:var(--ink)}
.fine{margin-top:12vh;font-family:"IM Fell English SC",serif;letter-spacing:.2em;font-size:12px;opacity:.38}

/* ============ SOM ============ */
.sound{position:fixed;z-index:70;right:18px;bottom:18px;width:54px;height:54px;border-radius:50%;background:rgba(12,10,8,.72);border:1.5px solid var(--line);display:grid;place-items:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .6s,border-color .3s}
.sound.show{opacity:1}
.sound:hover{border-color:var(--parch)}
.bars{display:flex;align-items:flex-end;gap:3px;height:18px}
.bars i{display:block;width:3px;height:4px;background:var(--parch);border-radius:1px}
.sound.on .bars i{animation:bar 1s ease-in-out infinite}
.sound.on .bars i:nth-child(2){animation-delay:-.3s}
.sound.on .bars i:nth-child(3){animation-delay:-.6s}
.sound.on .bars i:nth-child(4){animation-delay:-.15s}
@keyframes bar{0%,100%{height:4px}50%{height:18px}}

/* ============ CELULAR ============ */
@media (max-width:760px){
  .scene{height:230vh}
  .panel{width:92vw;box-shadow:6px 7px 0 rgba(12,10,8,.9)}
  .panel.square{width:88vw}
  .cap{font-size:13px;padding:11px 14px;max-width:86vw}
  .rite-media::after{background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.6) 45%,rgba(0,0,0,.1) 80%)}
  .rite-body{bottom:120px}
  .rites-nav{left:16px;right:84px;justify-content:space-between;bottom:18px}
  .vitriol-img{position:relative;right:auto;top:auto;transform:rotate(2deg);width:86%;margin:56px 0 0 auto}
  .tear{height:64px}
}
@media (prefers-reduced-motion:reduce){
  .grain,.gate-sigil,.rite-media img.kb{animation:none}
}

/* ============ PRÉVIA DO PAINEL ============ */
html[data-previa] .gate{display:none}
html[data-previa] .sound{display:none}
/* na prévia a frase do VITRIOL aparece inteira acesa, sem depender da rolagem */
html[data-previa] .vitriol-words .w{opacity:1!important}

/* fundo do círculo em vídeo */
.hold-bg-video{width:100%;height:100%;object-fit:cover}