/* ============================================================
   Algorithmia — Sistema de cena SVG (vetorial, full-screen)
   Núcleo reutilizável: SVG raiz full-bleed + camadas de parallax
   + safe-zone + atmosfera, animando só transform/opacity.
   ============================================================ */

/* Raiz da cena: ocupa a tela inteira; slice = cobre e corta o excesso. */
.cena-svg {
    display: block;
    width: 100vw; height: 100vh; height: 100dvh;
    position: relative;
    background: var(--bg);
}
/* Wrapper que posiciona a cena e o conteúdo HTML sobreposto. */
.cena-palco {
    position: relative;
    width: 100%; min-height: 100dvh;
    overflow: hidden;
}
.cena-palco > svg.cena-svg { position: absolute; inset: 0; z-index: 0; }

/* Camadas: grupos <g> empilhados (ordem = profundidade). O parallax/câmera é
   aplicado por transform via JS (cena.js); aqui só estados declarativos. */
.cena-camada { will-change: transform; }

/* Brilho da lua/auras: pulso lento (declarativo, fora da main thread). */
.cena-lua { animation: cenaLuaPulso 6s ease-in-out infinite alternate; transform-origin: center; }
@keyframes cenaLuaPulso { from { opacity: .85; } to { opacity: 1; } }

/* Feixes de luz: leve oscilação. */
.cena-feixe { animation: cenaFeixe 9s ease-in-out infinite alternate; transform-origin: top center; opacity: .5; }
@keyframes cenaFeixe { from { transform: skewX(-2deg) scaleY(.98); opacity: .35; } to { transform: skewX(2deg) scaleY(1.02); opacity: .55; } }

/* Névoa: a camada texturizada é transladada (não animamos o filtro por frame). */
.cena-nevoa { opacity: .5; animation: cenaNevoa 26s linear infinite; }
@keyframes cenaNevoa { from { transform: translateX(0); } to { transform: translateX(-160px); } }

/* Nuvens à deriva lenta (ambiente). */
.cena-nuvens { animation: cenaNuvens 90s ease-in-out infinite alternate; }
@keyframes cenaNuvens { from { transform: translateX(0); } to { transform: translateX(60px); } }

/* ---------- Conteúdo HTML sobre o SVG (safe-zone central) ---------- */
.cena-safe {
    position: relative; z-index: 2;
    min-height: 100dvh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 1rem;
    padding: calc(env(safe-area-inset-top, 0px) + 2rem)
             clamp(1rem, 6vw, 5rem)
             calc(env(safe-area-inset-bottom, 0px) + 2rem);
}
.cena-safe .cena-logo { width: clamp(96px, 16vh, 180px); height: auto;
    filter: drop-shadow(0 0 22px rgba(124,92,255,.7)); animation: cenaEntra .9s cubic-bezier(.2,.8,.3,1.2) both; }
.cena-safe .cena-logo-marca { width: min(92vw, 720px); max-width: 720px; }
.cena-safe .cena-logo-marca .logo-marca-hero { width: 100%; height: auto; display: block; }
.cena-safe .cena-titulo {
    font-family: var(--titulo); font-weight: 700; line-height: 1;
    font-size: clamp(2.6rem, 9vw, 6rem); margin: .2rem 0 0;
    background: linear-gradient(90deg, var(--primaria-2), var(--xp));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: 0 4px 30px rgba(124,92,255,.35);
    animation: cenaEntra .9s cubic-bezier(.2,.8,.3,1.2) .15s both;
}
.cena-safe .cena-sub {
    color: var(--texto); opacity: .92; max-width: 40ch; font-size: clamp(1rem, 2.4vw, 1.2rem);
    line-height: 1.5; margin: .4rem auto 0; text-shadow: 0 2px 10px rgba(0,0,0,.7);
    animation: cenaEntra .9s ease .3s both;
}
.cena-safe .cena-acoes { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center;
    margin-top: 1.2rem; animation: cenaEntra .9s ease .45s both; }
.cena-safe .seta-rolar { position: absolute; bottom: calc(env(safe-area-inset-bottom,0px) + 1rem);
    left: 50%; transform: translateX(-50%); color: var(--texto-fraco); font-size: 1.4rem;
    animation: cenaSeta 1.8s ease-in-out infinite; }
@keyframes cenaEntra { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes cenaSeta { 0%,100% { transform: translateX(-50%) translateY(0); opacity: .5; } 50% { transform: translateX(-50%) translateY(7px); opacity: 1; } }

/* ---------- Splash cinemático (push-in por CSS) ---------- */
.splash-inicio .splash-conteudo { position: relative; z-index: 2; }

/* ---------- Acessibilidade: movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
    .splash-cena-img, .splash-particulas { animation: none; }
    .cena-lua, .cena-feixe, .cena-nevoa, .cena-nuvens,
    .cena-safe .cena-logo, .cena-safe .cena-titulo, .cena-safe .cena-sub,
    .cena-safe .cena-acoes, .cena-safe .seta-rolar { animation: none; }
    .cena-camada { will-change: auto; }
}