/* ============================================================================
   HERO FUTURISTA - fundo decorativo em CSS puro (v2)
   ----------------------------------------------------------------------------
   Efeito garantido sem depender de transform 3D:
     1. base espacial (mistura do tema com quase-preto)
     2. piso em grade que desliza na diagonal
     3. aurora conica girando
     4. brilho de horizonte na base
     5. veu de contraste sobre o texto
   Especificidade elevada (section.hero) para vencer a regra base do app.css.
   ========================================================================== */

section.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        /* 5. veu de contraste (topo da pilha) */
        linear-gradient(100deg, rgba(3, 5, 14, .74) 0%, rgba(3, 5, 14, .38) 44%, rgba(3, 5, 14, .06) 74%),
        /* 4. brilho de horizonte */
        radial-gradient(78% 46% at 50% 116%, color-mix(in srgb, var(--c-secondary) 62%, #ffffff) 0%, transparent 62%),
        /* 3. brilho secundario no canto superior direito */
        radial-gradient(52% 44% at 88% 4%, color-mix(in srgb, var(--c-accent) 34%, transparent) 0%, transparent 66%),
        /* 1. base espacial derivada do tema */
        linear-gradient(148deg,
            color-mix(in srgb, var(--c-primary) 18%, #03040e) 0%,
            color-mix(in srgb, var(--c-primary) 54%, #05061a) 46%,
            color-mix(in srgb, var(--c-secondary) 34%, #06081e) 100%);
    box-shadow:
        0 34px 80px -26px color-mix(in srgb, var(--c-primary) 70%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* 2. piso em grade deslizando (sem transform: sempre visivel) */
section.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px 56px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px 56px);
    background-position: 0 0, 0 0;
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .85) 26%, rgba(0, 0, 0, .25) 58%, transparent 84%);
    mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .85) 26%, rgba(0, 0, 0, .25) 58%, transparent 84%);
    opacity: .85;
    animation: heroGrid 16s linear infinite;
    pointer-events: none;
}

@keyframes heroGrid {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 56px 56px, 56px 56px; }
}

/* 3. aurora conica girando */
section.hero::after {
    content: "";
    position: absolute;
    inset: -50%;
    z-index: -2;
    background: conic-gradient(from 190deg at 50% 46%,
        transparent 0deg,
        color-mix(in srgb, var(--c-secondary) 55%, transparent) 62deg,
        transparent 132deg,
        color-mix(in srgb, var(--c-accent) 42%, transparent) 208deg,
        transparent 300deg);
    filter: blur(72px);
    opacity: .72;
    animation: heroAurora 30s linear infinite;
    pointer-events: none;
}

@keyframes heroAurora {
    from { transform: rotate(0turn); }
    to   { transform: rotate(1turn); }
}

/* 4. linha de horizonte luminosa na base do hero */
section.hero .hero__grid::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 10px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--c-secondary) 85%, #ffffff) 30%,
        color-mix(in srgb, var(--c-accent) 80%, #ffffff) 58%,
        transparent);
    filter: blur(1.5px);
    opacity: .75;
    pointer-events: none;
}

/* Brilho pulsante atras das capas */
section.hero .hero__glow {
    background: radial-gradient(circle at 50% 50%,
        color-mix(in srgb, var(--c-accent) 46%, #ffffff) 0%,
        color-mix(in srgb, var(--c-secondary) 30%, transparent) 44%,
        transparent 70%);
    filter: blur(18px);
    opacity: .75;
    animation: heroGlow 8s ease-in-out infinite;
}

@keyframes heroGlow {
    0%, 100% { transform: scale(.9); opacity: .55; }
    50%      { transform: scale(1.1); opacity: .85; }
}

/* Fundo suave da pagina inicial, fora do hero */
body.store-home::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(680px 340px at 8% 2%, color-mix(in srgb, var(--c-primary) 11%, transparent), transparent 62%),
        radial-gradient(760px 380px at 94% 16%, color-mix(in srgb, var(--c-secondary) 10%, transparent), transparent 64%);
}

/* Telas pequenas: menos custo de renderizacao */
@media (max-width: 780px) {
    section.hero::before {
        opacity: .5;
        background-image:
            repeating-linear-gradient(90deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px 42px),
            repeating-linear-gradient(0deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px 42px);
    }

    section.hero::after {
        filter: blur(46px);
        opacity: .55;
    }
}

/* Acessibilidade: sem animacao para quem prefere movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    section.hero::before,
    section.hero::after,
    section.hero .hero__glow {
        animation: none !important;
    }
}