/* ===========================================================================
   ÉTER — sistema de design

   Uma folha só, compartilhada pelo site e pelo painel, para que os dois
   nunca saiam de sintonia. A paleta vem do logotipo: violeta profundo com
   brilho magenta, prata polida no texto e ouro velho só nos acentos.

   Quem for criar um tema novo do Éter herda daqui e sobrescreve o que quiser.
   =========================================================================== */

:root {
    /* --- Fundos: preto com fundo de tinta roxa, nunca cinza neutro ------- */
    --eter-void:        #07040D;   /* fora da caixa, o mais escuro */
    --eter-bg:          #0B0714;   /* fundo da página */
    --eter-bg-soft:     #100A1C;   /* campos e áreas rebaixadas */
    --eter-panel:       #150E26;   /* caixas */
    --eter-panel-2:     #1C1333;   /* caixa sobre caixa */
    --eter-panel-3:     #241945;   /* estado ativo / hover */

    /* --- Linhas ---------------------------------------------------------- */
    --eter-line:        #2C1F4D;
    --eter-line-soft:   #1F1637;
    --eter-line-strong: #4A3480;

    /* --- Violeta: a cor da marca ----------------------------------------- */
    --eter-violet-900:  #3B1E70;
    --eter-violet-800:  #4C2590;
    --eter-violet-700:  #5B2CB0;
    --eter-violet:      #7C3AED;   /* primária */
    --eter-violet-400:  #A855F7;
    --eter-violet-300:  #C084FC;
    --eter-magenta:     #D946EF;   /* o brilho das rachaduras do logo */

    /* --- Prata: títulos e texto forte ------------------------------------ */
    --eter-silver:      #E9E7F2;
    --eter-silver-2:    #CFCBE0;
    --eter-silver-3:    #A9A3C0;

    /* --- Ouro: moldura e acento, com parcimônia -------------------------- */
    --eter-gold:        #C9A227;
    --eter-gold-2:      #E3C05A;
    --eter-gold-dim:    rgba(201, 162, 39, .16);

    /* --- Texto ----------------------------------------------------------- */
    --eter-text:        #E9E7F2;
    --eter-muted:       #9C94B8;
    --eter-dim:         #6E668C;

    /* --- Sinais ---------------------------------------------------------- */
    --eter-ok:          #3FD168;
    --eter-bad:         #F04E4E;
    --eter-warn:        #E0A93B;
    --eter-info:        #6BA8FF;

    /* --- Véus e brilhos -------------------------------------------------- */
    --eter-violet-dim:  rgba(124, 58, 237, .14);
    --eter-violet-veil: rgba(124, 58, 237, .30);
    --eter-glow:        0 0 24px rgba(168, 85, 247, .35);
    --eter-glow-soft:   0 0 14px rgba(168, 85, 247, .20);

    /* --- Gradientes recorrentes ------------------------------------------ */
    --eter-grad-violet: linear-gradient(135deg, #7C3AED 0%, #A855F7 55%, #D946EF 100%);
    --eter-grad-panel:  linear-gradient(180deg, #180F2C 0%, #120C21 100%);
    --eter-grad-gold:   linear-gradient(135deg, #8A6D18 0%, #C9A227 45%, #E3C05A 100%);
    --eter-grad-line:   linear-gradient(90deg, transparent, var(--eter-line-strong), transparent);

    /* --- Sombras --------------------------------------------------------- */
    --eter-shadow:      0 20px 46px -26px rgba(0, 0, 0, .95);
    --eter-shadow-lift: 0 26px 60px -30px rgba(124, 58, 237, .55);

    /* --- Formas ---------------------------------------------------------- */
    --eter-radius:      14px;
    --eter-radius-sm:   9px;
    --eter-radius-lg:   20px;

    /* --- Tipografia ------------------------------------------------------ */
    --eter-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --eter-display: "Cinzel", "Trajan Pro", Georgia, serif;

    /* --- Ritmo ----------------------------------------------------------- */
    --eter-wrap: 1240px;
}

/* ---------------------------------------------------------------------------
   Peças que site e painel repetem. Ficam aqui para não divergirem.
   --------------------------------------------------------------------------- */

/* Filete decorativo: a linha fina que separa seções sem pesar */
.eter-rule {
    height: 1px;
    background: var(--eter-grad-line);
    border: 0;
    margin: 28px 0;
}

/* Borda em gradiente — usada nas molduras douradas do layout */
.eter-framed {
    position: relative;
    background: var(--eter-panel);
    border-radius: var(--eter-radius);
}

.eter-framed::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: var(--eter-grad-gold);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Pontinho de status */
.eter-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--eter-bad);
    box-shadow: 0 0 0 3px rgba(240, 78, 78, .16);
    flex-shrink: 0;
}

.eter-dot.is-on {
    background: var(--eter-ok);
    box-shadow: 0 0 0 3px rgba(63, 209, 104, .18);
}

/* Rolagem discreta, no tom da paleta */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--eter-line-strong) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--eter-line);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--eter-line-strong); background-clip: content-box; }

/* Seleção de texto */
::selection {
    background: var(--eter-violet-veil);
    color: #fff;
}

/* Foco visível — acessibilidade não é opcional */
:focus-visible {
    outline: 2px solid var(--eter-violet-400);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Movimento — o vocabulário de animação do Éter.

   Todos os keyframes ficam aqui para que site e painel usem os mesmos gestos.
   Regra: nada pisca, nada salta. O Éter respira, pulsa e flutua.
   --------------------------------------------------------------------------- */

/* Respiração do brilho — usado no logo e nos títulos */
@keyframes eter-breathe {
    0%, 100% { opacity: .55; filter: blur(22px); }
    50%      { opacity: 1;   filter: blur(30px); }
}

/* Flutuação lenta — cards em destaque e o herói */
@keyframes eter-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* Giro do círculo arcano */
@keyframes eter-spin      { to { transform: rotate(360deg); } }
@keyframes eter-spin-back { to { transform: rotate(-360deg); } }

/* Névoa arcana deslizando ao fundo */
@keyframes eter-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    33%  { transform: translate3d(3%, -2%, 0) scale(1.06); }
    66%  { transform: translate3d(-2%, 3%, 0) scale(1.03); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* Faísca subindo — as brasas do fundo */
@keyframes eter-ember {
    0%   { transform: translateY(0) scale(.6); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: .5; }
    100% { transform: translateY(-100vh) scale(1); opacity: 0; }
}

/* Varredura de energia — passa por cima de botões e cards no hover */
@keyframes eter-sweep {
    0%   { transform: translateX(-120%) skewX(-18deg); }
    100% { transform: translateX(220%)  skewX(-18deg); }
}

/* Raio da rachadura — o traço se desenha e some */
@keyframes eter-crackle {
    0%       { stroke-dashoffset: 200; opacity: 0; }
    18%      { opacity: 1; }
    45%      { stroke-dashoffset: 0; opacity: .9; }
    60%      { opacity: .15; }
    72%      { opacity: .8; }
    100%     { stroke-dashoffset: 0; opacity: 0; }
}

/* Pulso de anel — o eco que sai de um ponto */
@keyframes eter-ring {
    0%   { transform: scale(.7); opacity: .7; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* Entrada: surge de baixo com desfoque */
@keyframes eter-rise {
    from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
    to   { opacity: 1; transform: none;             filter: blur(0); }
}

/* Brilho correndo em uma borda */
@keyframes eter-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Utilitários de revelação: o JS só troca a classe .is-visible */
.eter-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.16, .84, .44, 1),
                transform .7s cubic-bezier(.16, .84, .44, 1);
    will-change: opacity, transform;
}

.eter-reveal.is-visible {
    opacity: 1;
    transform: none;
}

.eter-reveal[data-delay="1"] { transition-delay: .08s; }
.eter-reveal[data-delay="2"] { transition-delay: .16s; }
.eter-reveal[data-delay="3"] { transition-delay: .24s; }
.eter-reveal[data-delay="4"] { transition-delay: .32s; }
.eter-reveal[data-delay="5"] { transition-delay: .40s; }

/* Quem pediu menos movimento, recebe menos movimento.
   Tudo continua legível e no lugar — só para de se mexer. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .eter-reveal { opacity: 1 !important; transform: none !important; }
}