/* Atmosfera sombria — névoa, luar, morcegos */

.ag-atmosphere {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.ag-dark .ag-vignette {
    background:
        radial-gradient(ellipse 90% 70% at 50% 45%, transparent 25%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0.92) 100%);
    opacity: 1;
}

.ag-dark .ag-scanlines {
    opacity: 0.55;
    mix-blend-mode: multiply;
}

/* Névoa */
.ag-fog {
    position: absolute;
    width: 140%;
    height: 55%;
    left: -20%;
    border-radius: 50%;
    filter: blur(48px);
    opacity: 0;
    animation: agFogDrift 28s ease-in-out infinite;
}

.ag-fog--1 {
    bottom: -8%;
    background: radial-gradient(ellipse at 30% 80%, rgba(18, 12, 28, 0.75), transparent 68%);
    animation-duration: 32s;
}

.ag-fog--2 {
    top: 15%;
    background: radial-gradient(ellipse at 70% 40%, rgba(8, 10, 18, 0.65), transparent 62%);
    animation-delay: -8s;
    animation-duration: 38s;
}

.ag-fog--3 {
    bottom: 20%;
    left: -10%;
    height: 40%;
    background: radial-gradient(ellipse at 50% 50%, rgba(30, 18, 45, 0.35), transparent 70%);
    animation-delay: -14s;
    animation-duration: 44s;
    filter: blur(64px);
}

@keyframes agFogDrift {
    0%, 100% {
        opacity: 0.35;
        transform: translateX(0) translateY(0);
    }
    33% {
        opacity: 0.55;
        transform: translateX(4%) translateY(-2%);
    }
    66% {
        opacity: 0.42;
        transform: translateX(-3%) translateY(1%);
    }
}

.ag-mist-pulse {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(12, 8, 22, 0.5), transparent 55%);
    animation: agMistPulse 9s ease-in-out infinite;
}

@keyframes agMistPulse {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 0.55; }
}

/* Luar fraco atrás da névoa */
.ag-void-moon {
    position: absolute;
    top: 6%;
    right: 12%;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(200, 210, 230, 0.12), rgba(80, 90, 120, 0.04) 45%, transparent 70%);
    box-shadow:
        0 0 40px rgba(120, 140, 180, 0.08),
        0 0 90px rgba(60, 50, 90, 0.12);
    animation: agMoonPulse 12s ease-in-out infinite;
}

@keyframes agMoonPulse {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.04); }
}

/* Relâmpago raro */
.ag-lightning {
    position: absolute;
    inset: 0;
    background: rgba(180, 190, 220, 0.07);
    opacity: 0;
    animation: agLightningFlash 0.35s ease-out forwards;
}

@keyframes agLightningFlash {
    0% { opacity: 0; }
    12% { opacity: 1; }
    100% { opacity: 0; }
}

/* Poeira / partículas */
.ag-dust {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(140, 150, 170, 0.35);
    box-shadow: 0 0 6px rgba(100, 110, 140, 0.2);
    animation: agDustFloat var(--dust-dur, 14s) linear infinite;
    animation-delay: var(--dust-delay, 0s);
    opacity: 0;
}

@keyframes agDustFloat {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.5);
    }
    15% { opacity: 0.6; }
    85% { opacity: 0.35; }
    100% {
        opacity: 0;
        transform: translate(var(--dust-x, 40px), var(--dust-y, -120px)) scale(1);
    }
}

/* Morcegos */
.ag-bats-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.ag-bat {
    position: fixed;
    top: var(--bat-y, 30vh);
    left: 0;
    width: var(--bat-size, 28px);
    height: calc(var(--bat-size, 28px) * 0.45);
    color: #050508;
    opacity: 0;
    transform: translateX(var(--bat-start, -80px));
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 12px rgba(20, 15, 35, 0.6));
    animation:
        agBatFly var(--bat-dur, 5s) linear var(--bat-delay, 0s) forwards,
        agBatFade var(--bat-dur, 5s) ease-in-out var(--bat-delay, 0s) forwards;
    will-change: transform, opacity;
}

.ag-bat--sudden {
    animation:
        agBatFly var(--bat-dur, 4s) cubic-bezier(0.25, 0.1, 0.2, 1) var(--bat-delay, 0s) forwards,
        agBatFadeSudden var(--bat-dur, 4s) ease-out var(--bat-delay, 0s) forwards;
}

.ag-bat--fast {
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.95)) blur(0.3px);
}

.ag-bat--left .ag-bat__svg {
    transform: scaleX(-1);
}

.ag-bat__svg {
    display: block;
    width: 100%;
    height: 100%;
    animation: agBatWing var(--wing-dur, 0.14s) ease-in-out infinite alternate;
    transform-origin: center center;
}

.ag-bat__svg path {
    fill: currentColor;
}

@keyframes agBatWing {
    from { transform: scaleY(1) scaleX(1); }
    to { transform: scaleY(0.62) scaleX(1.12); }
}

.ag-bat--left .ag-bat__svg {
    animation-name: agBatWingLeft;
}

@keyframes agBatWingLeft {
    from { transform: scaleX(-1) scaleY(1); }
    to { transform: scaleX(-1.12) scaleY(0.62); }
}

@keyframes agBatFly {
    0% {
        transform: translateX(var(--bat-start)) translateY(0) rotate(var(--bat-rot0, -8deg));
    }
    25% {
        transform: translateX(calc(var(--bat-start) + (var(--bat-end) - var(--bat-start)) * 0.25)) translateY(var(--bat-wobble, 30px)) rotate(var(--bat-rot1, 4deg));
    }
    50% {
        transform: translateX(calc(var(--bat-start) + (var(--bat-end) - var(--bat-start)) * 0.5)) translateY(calc(var(--bat-wobble, 30px) * -0.55)) rotate(var(--bat-rot0, -8deg));
    }
    75% {
        transform: translateX(calc(var(--bat-start) + (var(--bat-end) - var(--bat-start)) * 0.75)) translateY(calc(var(--bat-wobble, 30px) * 0.35)) rotate(var(--bat-rot1, 4deg));
    }
    100% {
        transform: translateX(var(--bat-end)) translateY(0) rotate(var(--bat-rot0, -8deg));
    }
}

@keyframes agBatFade {
    0% { opacity: 0; }
    8% { opacity: 0.85; }
    88% { opacity: 0.75; }
    100% { opacity: 0; }
}

@keyframes agBatFadeSudden {
    0% { opacity: 0; transform: scale(0.3); }
    6% { opacity: 0.95; }
    92% { opacity: 0.8; }
    100% { opacity: 0; }
}

/* Escurecimento súbito ocasional */
.ag-dark-pulse {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    animation: agDarkPulse 1.8s ease-out forwards;
}

@keyframes agDarkPulse {
    0% { opacity: 0; }
    20% { opacity: 0.45; }
    100% { opacity: 0; }
}

.ag-dark.ag-page {
    background:
        radial-gradient(ellipse 50% 40% at 85% 8%, rgba(40, 25, 60, 0.18), transparent 55%),
        radial-gradient(ellipse 45% 35% at 10% 90%, rgba(15, 10, 25, 0.22), transparent 50%),
        radial-gradient(ellipse 70% 50% at 50% -15%, rgba(30, 35, 55, 0.12), transparent 55%),
        #020203;
}

@media (max-width: 600px) {
    .ag-void-moon {
        width: 48px;
        height: 48px;
        right: 8%;
        opacity: 0.6;
    }

    .ag-fog {
        filter: blur(36px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ag-fog,
    .ag-mist-pulse,
    .ag-void-moon,
    .ag-bat,
    .ag-dust {
        animation: none !important;
    }

    .ag-fog { opacity: 0.3; }
    .ag-bats-layer { display: none; }
}