/* =====================================================================
   Estilos compartilhados de laboratório (Home, Admin/Lab e Landing)
   - Joia da Biblioteca (brilho mágico verde, central no topo da área)
   - Óculo de Previsão (janela art nouveau com ciclo dia/noite)
   ===================================================================== */

/* ===================== JOIA DA BIBLIOTECA ===========================
   Substitui o antigo ícone de livro. Fica central no topo da área para
   se alinhar à joia da prateleira mais alta da estante desenhada.        */
.lab-biblioteca-artifact {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Brilho/raios verdes "acendendo" no topo, sobre a joia já existente na arte de fundo.
   Não há pedra desenhada aqui — apenas o efeito de luz. */
.biblioteca-jewel {
    position: absolute;
    left: 50%;
    top: 4%;
    transform: translateX(-50%) scale(1);
    width: 30%;
    aspect-ratio: 1 / 1;
    pointer-events: none;
    transition: transform 0.35s ease;
}

.biblioteca-jewel__halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 185%;
    height: 185%;
    transform: translate(-50%, -50%) scale(0.9);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 255, 204, 0.65) 0%, rgba(0, 204, 163, 0.30) 40%, transparent 70%);
    pointer-events: none;
    /* Intensidade "ociosa" agora equivale ao antigo estado selecionado */
    animation: biblioteca-jewel-pulse 2s ease-in-out infinite;
}

/* Raios verdes irradiando da joia (cunhas que giram lentamente) */
.biblioteca-jewel__rays {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 230%;
    height: 230%;
    transform: translate(-50%, -50%) rotate(0deg);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.30;
    background: conic-gradient(from 0deg,
        transparent 0deg, rgba(0, 255, 204, 0.30) 7deg, transparent 14deg,
        transparent 30deg, rgba(0, 255, 204, 0.30) 37deg, transparent 44deg,
        transparent 60deg, rgba(0, 255, 204, 0.30) 67deg, transparent 74deg,
        transparent 90deg, rgba(0, 255, 204, 0.30) 97deg, transparent 104deg,
        transparent 120deg, rgba(0, 255, 204, 0.30) 127deg, transparent 134deg,
        transparent 150deg, rgba(0, 255, 204, 0.30) 157deg, transparent 164deg,
        transparent 180deg, rgba(0, 255, 204, 0.30) 187deg, transparent 194deg,
        transparent 210deg, rgba(0, 255, 204, 0.30) 217deg, transparent 224deg,
        transparent 240deg, rgba(0, 255, 204, 0.30) 247deg, transparent 254deg,
        transparent 270deg, rgba(0, 255, 204, 0.30) 277deg, transparent 284deg,
        transparent 300deg, rgba(0, 255, 204, 0.30) 307deg, transparent 314deg,
        transparent 330deg, rgba(0, 255, 204, 0.30) 337deg, transparent 344deg);
    -webkit-mask: radial-gradient(circle, #000 0%, #000 28%, transparent 68%);
    mask: radial-gradient(circle, #000 0%, #000 28%, transparent 68%);
    /* Intensidade "ociosa" equivale ao antigo estado selecionado */
    opacity: 0.7;
    animation: biblioteca-rays-spin 9s linear infinite;
}

@keyframes biblioteca-rays-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes biblioteca-jewel-pulse {
    0%, 100% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.9); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.12); }
}

/* Ao passar o mouse: dobra o brilho (joia maior + halo mais forte + raios plenos) */
.lab-zone--biblioteca:hover .biblioteca-jewel {
    transform: translateX(-50%) scale(1.35);
}
.lab-zone--biblioteca:hover .biblioteca-jewel__halo {
    filter: brightness(1.6) saturate(1.2);
    animation: biblioteca-jewel-pulse 1.2s ease-in-out infinite;
}
.lab-zone--biblioteca:hover .biblioteca-jewel__rays {
    opacity: 1;
    filter: brightness(1.5);
    animation: biblioteca-rays-spin 5.5s linear infinite;
}

/* ===== Brilhos mágicos por toda a área — surgem ao passar o mouse ===== */
.biblioteca-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.lab-zone--biblioteca:hover .biblioteca-sparkles {
    opacity: 1;
}
.biblioteca-spark {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #d6fff4 0%, #00ffcc 45%, transparent 72%);
    box-shadow: 0 0 6px rgba(0, 255, 204, 0.85);
    opacity: 0;
    transform: scale(0);
}
.lab-zone--biblioteca:hover .biblioteca-spark {
    animation: biblioteca-spark-twinkle 1.9s ease-in-out infinite;
}
@keyframes biblioteca-spark-twinkle {
    0%, 100% { opacity: 0; transform: scale(0) translateY(0); }
    40%      { opacity: 1; transform: scale(1.15) translateY(-4px); }
    70%      { opacity: 0.5; transform: scale(0.9) translateY(-9px); }
}

/* Na landing (laboratório adormecido) o brilho fica apenas tênue e estático */
.lab-container--dormant .biblioteca-jewel__halo,
.lab-container--dormant .biblioteca-jewel__rays {
    animation: none;
    opacity: 0.14;
}

/* ===================== ÓCULO DE PREVISÃO ============================
   Janela circular com céu, astros, nuvens, estrelas e chuva de mana.
   O ciclo dia/noite é controlado por lab-celestial.js (is-day/is-night). */
.lab-celestial-anchor {
    /* O óculo é circular: força proporção 1:1 sobre o .lab-art-anchor */
    aspect-ratio: 1 / 1;
}

.lab-celestial-window {
    --mint: #85E3CC;
    --mint-dark: #00CCA3;
    --gold-light: #FDE3AC;
    --gold-mid: #FEA579;
    --gold-dark: #F76851;
    --deep: #01181A;
    --stone: #03494A;
    --ivory: #FAFAFA;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    filter: drop-shadow(0 0 26px rgba(133, 227, 204, 0.18));
}

.lab-celestial-window .oraculo-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* --- Animações contínuas --- */
@keyframes oraculo-float {
    0%, 100% { transform: translateY(0px); }
    50%      { transform: translateY(-8px); }
}

@keyframes oraculo-drift {
    from { transform: translateX(200px); }
    to   { transform: translateX(-400px); }
}

@keyframes oraculo-twinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50%      { opacity: 1;   transform: scale(1.2); }
}

@keyframes oraculo-mana-rain {
    0%   { transform: translateY(-50px) rotate(20deg); opacity: 0; }
    50%  { opacity: 0.6; }
    100% { transform: translateY(350px) rotate(20deg); opacity: 0; }
}

.lab-celestial-window .celestial-bodies { animation: oraculo-float 8s ease-in-out infinite; }
.lab-celestial-window .cloud-1 { animation: oraculo-drift 18s linear infinite; }
.lab-celestial-window .cloud-2 { animation: oraculo-drift 25s linear infinite 5s; }
.lab-celestial-window .cloud-3 { animation: oraculo-drift 20s linear infinite 12s; }

.lab-celestial-window .star-1 { animation: oraculo-twinkle 3s ease-in-out infinite; }
.lab-celestial-window .star-2 { animation: oraculo-twinkle 4s ease-in-out infinite 1s; }
.lab-celestial-window .star-3 { animation: oraculo-twinkle 2.5s ease-in-out infinite 2s; }

.lab-celestial-window .rain-1 { animation: oraculo-mana-rain 2s linear infinite; }
.lab-celestial-window .rain-2 { animation: oraculo-mana-rain 2.5s linear infinite 0.5s; }
.lab-celestial-window .rain-3 { animation: oraculo-mana-rain 1.8s linear infinite 1.2s; }

/* --- Transições dia/noite --- */
.lab-celestial-window .sky-night,
.lab-celestial-window .sun-shape,
.lab-celestial-window .moon-shape,
.lab-celestial-window .night-fx {
    transition: opacity 3s ease-in-out;
}

.lab-celestial-window.is-day .sky-night { opacity: 0; }
.lab-celestial-window.is-day .sun-shape { opacity: 1; }
.lab-celestial-window.is-day .moon-shape { opacity: 0; }
.lab-celestial-window.is-day .night-fx { opacity: 0; }

.lab-celestial-window.is-night .sky-night { opacity: 1; }
.lab-celestial-window.is-night .sun-shape { opacity: 0; }
.lab-celestial-window.is-night .moon-shape { opacity: 1; }
.lab-celestial-window.is-night .night-fx { opacity: 1; }

/* --- Borboleta de mana (asas em CSS; trajetória controlada via JS) --- */
.lab-celestial-window .butterfly-wing {
    transform-origin: 12px 12px;
    animation: oraculo-flap 0.15s infinite alternate ease-in-out;
}
.lab-celestial-window .wing-right { animation-delay: 0.05s; }

@keyframes oraculo-flap {
    from { transform: scaleX(1) rotateY(0deg); }
    to   { transform: scaleX(0.2) rotateY(40deg); }
}

/* Quando pousa no vidro, as asas pausam */
.lab-celestial-window .oraculo-butterfly.paused .butterfly-wing {
    animation-play-state: paused;
    transform: scaleX(0.8);
}

/* No laboratório adormecido (landing) as animações ficam mais discretas */
.lab-container--dormant .lab-celestial-window {
    filter: drop-shadow(0 0 14px rgba(133, 227, 204, 0.10));
}

/* ===================== LOADER INICIAL DO LABORATÓRIO =================
   Evita o "pulo" dos itens: enquanto as posições salvas não são aplicadas,
   os artefatos ficam invisíveis e mostramos um spinner. Ao concluir o boot,
   a classe .is-loading é removida e tudo aparece com um fade suave.        */
.lab-mandala-anchor,
.lab-joia-anchor,
.lab-art-anchor,
.lab-zone-shell {
    transition: opacity 0.6s ease;
}

.lab-container.is-loading .lab-mandala-anchor,
.lab-container.is-loading .lab-joia-anchor,
.lab-container.is-loading .lab-art-anchor,
.lab-container.is-loading .lab-zone-shell {
    opacity: 0 !important;
}

.lab-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 25;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
}

.lab-container.is-loading .lab-loader {
    opacity: 1;
}

.lab-loader__ring {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 3px solid rgba(0, 255, 204, 0.18);
    border-top-color: rgba(0, 255, 204, 0.9);
    box-shadow: 0 0 18px rgba(0, 204, 163, 0.35);
    animation: lab-loader-spin 0.9s linear infinite;
}

@keyframes lab-loader-spin {
    to { transform: rotate(360deg); }
}

/* =====================================================================
   EFEITO "SANDUÍCHE" — brilho atrás do item, item no meio, pontos na frente
   ===================================================================== */

/* ----- Éter ----- */
.lab-ether-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.lab-ether-glow--back { z-index: 1; }   /* atrás do frasco */
.lab-ether-glow--front { z-index: 3; }  /* pontos orbitando à frente */
.lab-ether-frasco-svg { position: relative; z-index: 2; } /* o frasco no meio */

/* Núcleo do Éter agora é um brilho suave e difuso (inspirado na joia da biblioteca),
   ficando atrás do frasco para não esconder a arte. */
.ether-halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 74px;
    height: 74px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 255, 204, 0.30) 0%, rgba(0, 204, 163, 0.12) 45%, transparent 72%);
    filter: blur(4px);
    pointer-events: none;
    animation: ether-halo-pulse 3.4s ease-in-out infinite;
}
@keyframes ether-halo-pulse {
    0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.85); }
    50%      { opacity: 0.80; transform: translate(-50%, -50%) scale(1.18); }
}

/* ----- Incubadora ----- */
.lab-incubadora-svg { position: relative; z-index: 2; }      /* a arte no meio */
.incubadora-glow-wrap--back { z-index: 1; }                  /* brilho verde atrás */
.incubadora-glow-wrap--front { z-index: 3; }                 /* partículas à frente */
/* Recentraliza o brilho sobre o item (estava deslocado/alto). Seletor mais específico
   para vencer a regra inline das views sem precisar editá-las. */
.lab-incubadora-artifact .incubadora-glow {
    left: 17%;
    top: 30%;
    width: 82%;
    height: 74%;
}

/* Na landing (laboratório adormecido) o halo do Éter fica estático/apagado */
.lab-container--dormant .ether-halo {
    animation: none;
    opacity: 0.18;
}