/* Eclipse: página inicial refeita (gab, 01/10/2026, skill frontend-design). Só #menu e a marca do cabeçalho.
   Assinatura: um eclipse vivo. A lua negra cobre o sol e a coroa é feita de seis ondas de som, uma por clã (hero.js).
   Fontes locais (OFL, Google Fonts) em assets/fonts: Grenze Gotisch (marca e títulos), Alegreya Sans (texto). */
@font-face{font-family:'Alegreya Sans';font-style:italic;font-weight:400;font-display:block;src:url('assets/fonts/alegreya-sans-400-italic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:400;font-display:block;src:url('assets/fonts/alegreya-sans-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:500;font-display:block;src:url('assets/fonts/alegreya-sans-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:700;font-display:block;src:url('assets/fonts/alegreya-sans-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Grenze Gotisch';font-style:normal;font-weight:500 900;font-display:block;src:url('assets/fonts/grenze-gotisch.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
#menu{--e-night:#09070d;--e-ink:#120d18;--e-crimson:#d4213d;--e-gold:#e8c98b;--e-parch:#f1e6cc;--e-smoke:#9a8ca6;--e-violet:#7b4bc4;
 --e-display:'Grenze Gotisch',Georgia,serif;--e-body:'Alegreya Sans',system-ui,sans-serif;
 --e-ease:cubic-bezier(.22,1,.36,1);font-family:var(--e-body)}
/* Palco: arte, coroa, lua, brasas e véu. Fica atrás de tudo. */
#menu .menuArt{background:none;animation:none;overflow:hidden;z-index:0;pointer-events:none}
.heroStage{position:absolute;inset:0}
.heroArt{position:absolute;inset:-3%;background:url('assets/ravena.webp') no-repeat 86% 22%/auto 128%;filter:saturate(1.05) contrast(1.04);will-change:transform}
.heroLoop{position:absolute;left:86%;top:22%;height:128%;aspect-ratio:2/3;translate:-86% -22%;opacity:0;transition:opacity 1.4s var(--e-ease);pointer-events:none}
.heroLoop.on{opacity:1}
.heroCorona,.heroEmbers{position:absolute;inset:0;width:100%;height:100%;display:block}
.heroCorona{mix-blend-mode:screen}
.heroEmbers{mix-blend-mode:screen}
.heroMoon{position:absolute;left:var(--ex,74%);top:var(--ey,27%);width:var(--er,220px);height:var(--er,220px);translate:-50% -50%;border-radius:50%;
 background:radial-gradient(circle at 42% 38%,#1a1220,#060408 62%,#020103);box-shadow:0 0 0 1px #ffd9a01a,0 0 60px 6px #000c inset;will-change:transform}
.heroRing{position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 210deg,transparent 0 78%,#ffe7b8 86%,#fff 88%,#ffe7b8 90%,transparent 96%);-webkit-mask:radial-gradient(circle,transparent 66%,#000 68%);mask:radial-gradient(circle,transparent 66%,#000 68%);opacity:.0;filter:blur(1.5px)}
.heroVeil{position:absolute;inset:0;background:
 linear-gradient(90deg,var(--e-night) 6%,#09070de6 30%,#09070d55 56%,#09070d10 74%,#09070d8c),
 linear-gradient(0deg,var(--e-night) 2%,#09070d00 34%),linear-gradient(180deg,#09070dcc,#09070d00 18%)}
#menu.hub{position:relative;isolation:isolate}
#menu.hub>*:not(.menuArt){position:relative;z-index:1}
#menu.hub>.hubToast{position:fixed;z-index:1200} /* o aviso (ex.: "Código copiado.") não pode entrar no fluxo do menu: antes empurrava o layout */
#menu .hubToast{position:fixed}
/* Marca: a palavra ECLIPSE em gótica, acesa pelo lado do eclipse */
#menu .hubIntro{grid-column:1/-1}
.heroMark{margin:0;display:flex;align-items:center;font:700 clamp(66px,7.6vw,122px)/.86 var(--e-display);letter-spacing:-.01em;user-select:none}
.heroMark span{display:inline-block;color:#f1e6cc;text-shadow:0 2px 0 #3a2418,0 10px 30px #000}
/* Lugar do eclipse ao fim da palavra: hero.js mede este espaço para centrar a lua. */
.heroMark::after{content:'';flex:0 0 auto;width:calc(var(--er,120px) * 2.1);height:1px}
#menu .hubIntro small{display:block;margin-top:clamp(8px,1.4vh,14px);font:500 clamp(20px,1.6vw,24px)/1.1 var(--e-display);letter-spacing:.02em;color:var(--e-gold)}
#menu .hubIntro h2{font:400 clamp(18px,1.4vw,21px)/1.4 var(--e-body);letter-spacing:0;margin:4px 0 0;max-width:30em;color:#c9b9d2}
#menu .hubIntro h2 em{font-style:italic;color:inherit}
/* A marca grande já está na página: no menu, o cabeçalho mostra só o sigilo */
body:has(#menu:not([hidden])) #home .brand div,body:has(#menu:not([hidden])) #home>div{opacity:0;transition:opacity .4s}
body:has(#menu:not([hidden]))>header{background:linear-gradient(180deg,#09070dcc,#09070d00);border-bottom-color:transparent}
/* No menu, Coleção, Regras, Som e Opções estão nos cartões; o cabeçalho fica com as moedas e a conta. */
body:has(#menu:not([hidden])) .actions :is(#collection,#help,#sound,#settings){display:none}
/* Rodapé e legenda */
#menu .menuFoot{font:400 15px var(--e-body);color:var(--e-smoke)}
#menu .menuFoot span:before{content:none}#menu .menuFoot span+span:before{content:'·';margin-right:16px;color:#6f6278}#menu .menuFoot{gap:16px}
#menu #record{font:400 14px var(--e-body);letter-spacing:0;font-variant-numeric:tabular-nums}
#menu .ledBoard{border-color:#3a2a1acc;box-shadow:inset 0 0 0 3px #120c08,inset 0 2px 10px #000,0 18px 40px -14px #000}
/* Telas médias e celular */
@media(max-width:1180px) and (min-width:761px){.heroArt{background-position:100% 10%}.heroLoop{left:100%;top:10%;translate:-100% -10%}}
@media(max-width:760px){
 .heroArt{inset:0;background-position:62% 8%;background-size:auto 92vh;opacity:.62}
 .heroLoop{left:62%;top:8%;height:92vh;translate:-62% -8%}
 .heroVeil{background:linear-gradient(180deg,#09070d66,#09070dd9 46%,var(--e-night) 70%)}
 .heroMark{font-size:clamp(60px,19vw,96px)}
 #menu .hubIntro small{font-size:19px}
 #menu .hubIntro h2{font-size:19px}
 body:has(#menu:not([hidden])) #home>div{opacity:1}
}
/* Sem movimento: o vídeo da Ravena não aparece */
@media(prefers-reduced-motion:reduce){.heroLoop{display:none}}
.reduced .heroLoop{display:none}