/* Explain: Adds atmospheric effects like red steam and ember glow. */
/* ==========================================================================
   CZERWONA PARA / PARA OGNIA — warstwa atmosferyczna
   Ciepły żar i czerwona mgła unoszące się z dołu strony oraz delikatne,
   rozmyte smugi światła wewnątrz sekcji. Bez dosłownych grafik — tylko
   temperatura, para i światło.
   ========================================================================== */

:root {
    --steam-red: 180, 44, 38;    /* czerwona para */
    --steam-ember: 214, 96, 48;  /* żar ognia */
    --steam-haze: 120, 32, 30;   /* głęboka mgła */
}

/* Rozgrzana para bijąca z dolnej krawędzi ekranu */
body {
    background-image:
        radial-gradient(120% 70% at 50% 122%, rgba(var(--steam-ember), 0.11), transparent 60%),
        radial-gradient(85% 55% at 8% 112%, rgba(var(--steam-red), 0.08), transparent 62%),
        radial-gradient(85% 55% at 92% 112%, rgba(var(--steam-red), 0.08), transparent 62%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Miękkie smugi pary wewnątrz sekcji i paneli (dekoracyjne) */
.steam-veil {
    position: relative;
    isolation: isolate;
}

.steam-veil::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(45% 45% at 16% 18%, rgba(var(--steam-red), 0.14), transparent 70%),
        radial-gradient(50% 50% at 84% 82%, rgba(var(--steam-ember), 0.14), transparent 70%);
    filter: blur(38px);
}

/* Rozgrzane cięcie w tonacji czerwonej pary */
.dragon-seam--steam {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--steam-red), 0.35) 34%,
        rgba(var(--steam-ember), 0.75) 50%,
        rgba(var(--steam-red), 0.35) 66%,
        transparent
    );
}

.dragon-seam--steam::after {
    background: rgb(var(--steam-ember));
    box-shadow: 0 0 22px 6px rgba(var(--steam-red), 0.55);
}

/* Powolne unoszenie się pary */
@media (prefers-reduced-motion: no-preference) {
    .steam-veil::before {
        animation: steam-drift 20s ease-in-out infinite alternate;
    }
}

@keyframes steam-drift {
    from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
    to   { transform: translate3d(1.5%, -3%, 0) scale(1.08); opacity: 1; }
}