/* Eclipse · abertura do site (hero-x.js, 04/10/2026). Copyright (c) Eclipse. Todos os direitos reservados.
   Mesma identidade do site: Grenze Gotisch, Alegreya Sans, Spline Sans Mono nos rótulos, noite, ouro e as seis cores
   dos clãs na coroa. O palco é opaco: os vídeos do Maestro continuam como cena das seções de baixo. */
.hx{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;overflow:hidden;isolation:isolate;
 padding:calc(env(safe-area-inset-top,0px) + 96px) var(--gutter) clamp(28px,6svh,64px);
 background:radial-gradient(ellipse 70% 60% at 50% 36%,#2a1410 0%,#120a0c 45%,var(--ink) 80%)}
.hx-stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.hx-plate{position:absolute;inset:0;background:center 30%/cover no-repeat;opacity:0;transition:opacity 1.6s var(--ease);
 -webkit-mask:linear-gradient(180deg,#000 55%,transparent 96%);mask:linear-gradient(180deg,#000 55%,transparent 96%)}
.hx-plate.on{opacity:.5}
.hx-sky{position:absolute;inset:0;width:100%;height:100%}
.hx-orbit{position:absolute;inset:0;perspective:1100px;pointer-events:none;
 transform:translateY(calc(var(--sc,0) * -12vh)) scale(calc(1 + var(--sc,0) * .12));opacity:calc(1 - var(--sc,0) * .6)}
.hx-vignette{position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(11,8,7,.75) 78%,var(--ink) 100%),radial-gradient(ellipse 90% 80% at 50% 40%,transparent 55%,rgba(0,0,0,.55))}

/* Lua negra: fica entre as cartas de trás (camada baixa) e as da frente (camada alta). */
.hx-moon{position:absolute;z-index:500;width:calc(var(--r,100px) * 2);height:calc(var(--r,100px) * 2);border-radius:50%;
 transform:translate(-50%,-50%) translateX(calc(var(--off,0) * var(--r,100px)))}
.hx-disc{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 38% 34%,#1d1414 0%,#0a0606 55%,#000 100%);
 box-shadow:inset -10px -14px 30px rgba(0,0,0,.9),inset 4px 6px 18px rgba(232,201,139,.08)}
.hx-rim{position:absolute;inset:-1px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,236,196,.85),0 0 22px 2px rgba(255,214,154,.55),0 0 70px 10px rgba(226,58,34,.25)}
.hx-moon::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,236,196,.9);opacity:0}
.hx-burst .hx-moon::after{animation:hxShock .9s var(--ease) both}
@keyframes hxShock{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(5.5);border-width:1px}}

/* Cartas em órbita. --d: profundidade (0 atrás, 1 na frente). */
.hx-card{position:absolute;left:0;top:0;width:clamp(78px,8.6vw,158px);aspect-ratio:2/3;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;
 transform-origin:50% 50%;will-change:transform;transform-style:preserve-3d;-webkit-tap-highlight-color:transparent}
.hx-face{position:absolute;inset:0;border-radius:10px;padding:4px;overflow:hidden;
 background:linear-gradient(150deg,#fff1c4,#b98a42 30%,#4a2e12 55%,#e8c98b 80%,#6b4416);
 box-shadow:0 18px 40px rgba(0,0,0,.7),0 0 calc(var(--d,.5) * 34px) color-mix(in srgb,var(--clan,#e8c98b) 70%,transparent);
 filter:brightness(calc(.32 + var(--d,.5) * .78)) saturate(calc(.5 + var(--d,.5) * .6)) blur(calc((1 - var(--d,.5)) * 1.6px));transition:box-shadow .3s}
.hx-art{position:absolute;inset:4px;border-radius:7px;background:#120d18 center 22%/cover}
.hx-glare{position:absolute;inset:4px;border-radius:7px;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 48%,transparent 60%);background-size:250% 100%;
 background-position:calc(100% - var(--d,.5) * 100%) 0;mix-blend-mode:overlay}
.hx-name{position:absolute;left:4px;right:4px;bottom:4px;padding:18px 6px 6px;border-radius:0 0 7px 7px;text-align:center;
 font:700 clamp(11px,1vw,15px)/1.05 var(--display);color:#fff6dc;text-shadow:0 1px 3px #000;background:linear-gradient(transparent,rgba(5,3,4,.92))}
.hx-card:hover .hx-face{box-shadow:0 24px 50px rgba(0,0,0,.8),0 0 50px var(--clan,#e8c98b)}

/* Texto. */
.hx-copy{position:relative;z-index:2;display:grid;justify-items:center;text-align:center;gap:12px;max-width:min(1100px,100%)}
.hx-eyebrow{font:600 12px/1 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);text-shadow:0 2px 10px #000}
.hx-word{margin:0;line-height:.78;font:900 clamp(74px,min(9.2vw,16.8vh),176px)/.78 var(--display);letter-spacing:-.01em;perspective:700px;
 filter:drop-shadow(0 6px 0 #1a0c04) drop-shadow(0 0 40px rgba(226,58,34,.35))}
.hx-letters{display:inline-flex}
.hx-l{display:inline-block;transform-origin:50% 100%;
 background:linear-gradient(176deg,#fffaf0 0%,#f6dfa6 26%,#c99447 52%,#6b4416 66%,#e8c98b 80%,#fff1c4 100%);background-size:100% 220%;
 -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px rgba(26,12,4,.55)}
.hx-ready .hx-l{animation:hxShine 5s ease-in-out calc(var(--i) * .12s) infinite}
@keyframes hxShine{0%,100%{background-position:0 0}50%{background-position:0 100%}}
.hx-l:hover{animation:hxJump .5s var(--ease)}
@keyframes hxJump{40%{transform:translateY(-10%) scale(1.06)}}
.hx-lead{max-width:52ch;font-size:clamp(18px,1.55vw,23px);line-height:1.4;color:var(--ivory);text-shadow:0 2px 14px rgba(0,0,0,.95)}
.hx-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.hx-play{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding-inline:36px;transition:translate .25s var(--ease),box-shadow .3s;
 box-shadow:0 0 0 0 rgba(232,201,139,.5),0 10px 40px rgba(232,201,139,.35);animation:hxPulse 2.4s ease-in-out infinite}
.hx-play span{font:800 clamp(20px,1.7vw,26px)/1 var(--display);letter-spacing:.02em}
.hx-play small{font:600 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;opacity:.75}
@keyframes hxPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,201,139,.45),0 10px 40px rgba(232,201,139,.3)}50%{box-shadow:0 0 0 12px rgba(232,201,139,0),0 10px 60px rgba(232,201,139,.5)}}
.hx-facts{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;list-style:none;margin:6px 0 0;padding:0;font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.hx-facts b{color:var(--gold);font-weight:600}
.hx-down{position:relative;z-index:2;display:grid;justify-items:center;gap:8px;margin-top:26px;font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ash);text-decoration:none}
.hx-down i{width:1px;height:38px;background:linear-gradient(var(--gold),transparent);transform-origin:top;animation:hxDown 2s var(--soft) infinite}
@keyframes hxDown{0%{transform:scaleY(0);opacity:1}70%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.hx-down:hover{color:var(--ivory)}

/* Faixa com os nomes dos personagens. */
.hx-marquee{position:relative;z-index:1;overflow:hidden;padding:16px 0;background:linear-gradient(90deg,var(--ink),#1a0f0c 20%,#1a0f0c 80%,var(--ink));
 border-block:1px solid var(--line);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hx-track{display:flex;width:max-content;gap:26px;align-items:center;animation:hxMarquee 70s linear infinite;
 font:800 clamp(22px,2.2vw,34px)/1 var(--display);color:transparent;-webkit-text-stroke:1px rgba(232,201,139,.55);white-space:nowrap}
.hx-track span:nth-child(4n+1){color:var(--gold);-webkit-text-stroke:0}
.hx-track i{font-style:normal;font-size:.5em;color:var(--ember);-webkit-text-stroke:0}
.hx-marquee:hover .hx-track{animation-play-state:running}
@keyframes hxMarquee{to{transform:translateX(-50%)}}

/* Seções aparecem ao rolar. */
.rv{opacity:0;transform:translateY(34px);filter:blur(6px);transition:opacity .9s var(--ease) calc(var(--rv,0) * 90ms),transform .9s var(--ease) calc(var(--rv,0) * 90ms),filter .9s var(--ease) calc(var(--rv,0) * 90ms)}
.rv.in{opacity:1;transform:none;filter:none}

/* Botão da trilha: barras dançando enquanto toca; antes de tocar, um pulso convida. */
.soundBtn .sb-bars{display:none;align-items:flex-end;gap:2px;height:14px}
.soundBtn .sb-bars b{width:3px;height:30%;background:var(--gold);border-radius:1px;animation:sbBar .9s ease-in-out infinite}
.soundBtn .sb-bars b:nth-child(2){animation-delay:-.3s}.soundBtn .sb-bars b:nth-child(3){animation-delay:-.6s}.soundBtn .sb-bars b:nth-child(4){animation-delay:-.15s}
.soundBtn.playing .sb-bars{display:inline-flex}
@keyframes sbBar{0%,100%{height:25%}50%{height:100%}}
html:not(.music-on) .soundBtn{animation:sbInvite 2.6s ease-in-out infinite}
@keyframes sbInvite{0%,100%{box-shadow:0 0 0 0 rgba(232,201,139,.35)}50%{box-shadow:0 0 0 8px rgba(232,201,139,0)}}
.foot-credit{font-size:13px;color:var(--ash)}

@media (max-height:960px){.hx-down{display:none}}
@media (max-width:760px){
 .hx{padding-bottom:28px}
 .hx-word{font-size:clamp(68px,20.5vw,124px)}
 .hx-lead{font-size:17px}
 .hx-facts{gap:14px;font-size:11px}
 .hx-down{display:none}
}
@media (prefers-reduced-motion:reduce){
 .hx-l,.hx-play,.hx-track,.hx-down i,html:not(.music-on) .soundBtn{animation:none!important}
 .rv{transition:none}
}
/* A abertura e a faixa ocupam a largura toda (o main reserva espaço à direita para o painel dos vídeos). */
main>.hx,main>.hx-marquee{max-width:none;margin-inline:0 calc(-1 * (var(--panel-w) + var(--reel-r)))}
.scene-cap{transition:opacity .5s}
.hx-top .scene-cap{opacity:0}

/* Cartas da órbita com o design da carta do combate (Leo, 04/10/2026): proporção 5/7, sem a moldura de ouro nem a arte crua. */
.hx-card{aspect-ratio:5/7}
.hx-face{padding:0;background:none;border-radius:8px}
.hx-face .hx-tile{position:absolute!important;inset:0;display:block;width:100%;height:100%;aspect-ratio:auto;border-radius:8px}
.hx-glare{inset:0;border-radius:8px}
.hx-art,.hx-name{display:none}

/* Nitidez (Leo, 04/10/2026): a carta é desenhada com 340 px e reduzida por JS (hero-x.js, dispW); sem o desfoque de profundidade, só o escurecimento. */
.hx-card{width:340px}
.hx-face{filter:brightness(calc(.4 + var(--d,.5) * .7)) saturate(calc(.6 + var(--d,.5) * .5))}

/* Nitidez 2: will-change:transform trava a resolução da camada no tamanho inicial (pequeno) e o zoom ampliava esse bitmap = embaçado.
   Sem ele, o navegador redesenha a carta no tamanho real a cada quadro. O escurecimento por profundidade sai do filter (outra camada) e vira uma película. */
.hx-card{will-change:auto!important;backface-visibility:hidden}
.hx-face{filter:none!important;will-change:auto}
.hx-face::after{content:'';position:absolute;inset:0;border-radius:8px;background:#000;opacity:calc(.62 - var(--d,.5) * .55);pointer-events:none;z-index:6}

/* Título um pouco menor e o letreiro "Jogo de cartas · grátis no navegador" abaixo dele (Leo, 04/10/2026). */
.hx-word{order:-2}
.hx-eyebrow{order:-1;margin-top:34px}

/* A esteira de nomes nunca pausa, nem com o mouse em cima (Leo, 04/10/2026). */
.hx-marquee .hx-track,.hx-marquee:hover .hx-track,.hx-marquee .hx-track:hover{animation-play-state:running!important}

/* O "p" de Eclipse perdia a perna: com line-height .78 a caixa da letra é mais baixa que o glifo e o gradiente (background-clip:text) só pinta dentro da caixa.
   A folga em baixo aumenta a caixa e a margem negativa devolve o espaço, então o layout não muda. */
.hx-l{padding-bottom:.28em;margin-bottom:-.28em}

/* Só o título ECLIPSE desce um pouco (deslocamento visual: o resto do hero não se move). */
.hx-word{position:relative;top:14px}

/* A lua só aparece depois de posicionada: antes do primeiro layout ela ficava no canto superior esquerdo no começo da animação. */
.hx-moon:not(.ok){visibility:hidden}
/* Textos e botões só depois da órbita: escondidos desde o primeiro quadro (o JS tira .intro e o GSAP assume; sem JS, aparecem após 5 s) */
html.intro .hx-copy,html.intro .hx-down{opacity:0;visibility:hidden;animation:hxShowLate 0s 5s forwards}
@keyframes hxShowLate{to{opacity:1;visibility:visible}}
.hx-card:hover .hx-glare{background-position:var(--gx,50%) 0}