/* ========================================================================
   SHAIYA ADDICTED — SAFE AMBIENT EFFECTS
   ========================================================================
   ВАЖНО:
   - не меняет .page, body, content, header, footer и их z-index;
   - не использует ::before / ::after на структурных элементах сайта;
   - не влияет на размеры/позиции блоков;
   - все эффекты находятся в отдельном фиксированном контейнере;
   - pointer-events: none — клики не блокируются.
   ======================================================================== */

.site-atmosphere {
    position: fixed;
    inset: 58px 0 0 0;

    z-index: 20;

    overflow: hidden;

    pointer-events: none;
    user-select: none;

    contain: strict;
}


/* ------------------------------------------------------------------------
   LEFT FOG
   ------------------------------------------------------------------------ */

.site-atmosphere__fog-left {
    position: absolute;

    left: -380px;
    top: 4%;

    width: 920px;
    height: 92%;

    opacity: .62;

    background:
        radial-gradient(
            ellipse 480px 220px at 48% 24%,
            rgba(129, 168, 197, .24) 0%,
            rgba(92, 128, 154, .11) 42%,
            transparent 74%
        ),
        radial-gradient(
            ellipse 620px 260px at 48% 63%,
            rgba(104, 140, 166, .18) 0%,
            rgba(80, 109, 132, .075) 45%,
            transparent 75%
        );

    filter: blur(30px);

    transform: translate3d(-28px, 0, 0);

    will-change: transform;
    backface-visibility: hidden;

    animation:
        shaiyaAtmosphereLeft 32s
        linear
        infinite
        alternate;
}


/* ------------------------------------------------------------------------
   RIGHT FOG
   ------------------------------------------------------------------------ */

.site-atmosphere__fog-right {
    position: absolute;

    right: -390px;
    top: 2%;

    width: 940px;
    height: 94%;

    opacity: .52;

    background:
        radial-gradient(
            ellipse 500px 230px at 50% 25%,
            rgba(191, 151, 96, .20) 0%,
            rgba(145, 108, 68, .085) 43%,
            transparent 74%
        ),
        radial-gradient(
            ellipse 640px 270px at 50% 67%,
            rgba(151, 129, 99, .15) 0%,
            rgba(108, 93, 77, .055) 46%,
            transparent 76%
        );

    filter: blur(34px);

    transform: translate3d(30px, 0, 0);

    will-change: transform;
    backface-visibility: hidden;

    animation:
        shaiyaAtmosphereRight 43s
        linear
        infinite
        alternate;
}


/* ------------------------------------------------------------------------
   GOLD DUST — ONLY NEAR EDGES
   ------------------------------------------------------------------------ */

.site-atmosphere__dust-left,
.site-atmosphere__dust-right {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 18vw;
    min-width: 220px;
    max-width: 390px;

    opacity: .48;

    will-change: transform;
    backface-visibility: hidden;

    animation:
        shaiyaAtmosphereDust 22s
        linear
        infinite
        alternate;
}

.site-atmosphere__dust-left {
    left: 0;

    background:
        radial-gradient(circle 1.2px at 19% 18%, rgba(235,207,125,.85) 0 1.2px, transparent 1.8px),
        radial-gradient(circle 1px at 42% 34%, rgba(226,195,113,.62) 0 1px, transparent 1.7px),
        radial-gradient(circle 1.3px at 29% 57%, rgba(233,205,130,.73) 0 1.3px, transparent 1.9px),
        radial-gradient(circle 1px at 67% 72%, rgba(221,190,108,.52) 0 1px, transparent 1.7px),
        radial-gradient(circle 1px at 37% 87%, rgba(230,202,121,.62) 0 1px, transparent 1.7px);
}

.site-atmosphere__dust-right {
    right: 0;

    background:
        radial-gradient(circle 1px at 72% 14%, rgba(235,205,120,.58) 0 1px, transparent 1.7px),
        radial-gradient(circle 1.3px at 48% 29%, rgba(239,210,128,.78) 0 1.3px, transparent 1.9px),
        radial-gradient(circle 1px at 76% 48%, rgba(228,197,113,.58) 0 1px, transparent 1.7px),
        radial-gradient(circle 1.2px at 39% 68%, rgba(233,203,122,.70) 0 1.2px, transparent 1.8px),
        radial-gradient(circle 1px at 64% 86%, rgba(223,191,108,.52) 0 1px, transparent 1.7px);
}


/* ------------------------------------------------------------------------
   SMOOTH GPU-FRIENDLY ANIMATION
   ONLY TRANSFORM IS ANIMATED
   ------------------------------------------------------------------------ */

@keyframes shaiyaAtmosphereLeft {
    from {
        transform: translate3d(-28px, 3px, 0);
    }

    to {
        transform: translate3d(32px, -4px, 0);
    }
}

@keyframes shaiyaAtmosphereRight {
    from {
        transform: translate3d(30px, -3px, 0);
    }

    to {
        transform: translate3d(-32px, 4px, 0);
    }
}

@keyframes shaiyaAtmosphereDust {
    from {
        transform: translate3d(0, 10px, 0);
    }

    to {
        transform: translate3d(2px, -18px, 0);
    }
}


/* ------------------------------------------------------------------------
   OPTIONAL — слабее / сильнее
   ------------------------------------------------------------------------

   Если туман слишком слабый:
   .site-atmosphere__fog-left  { opacity: .75; }
   .site-atmosphere__fog-right { opacity: .65; }

   Если туман слишком сильный:
   .site-atmosphere__fog-left  { opacity: .45; }
   .site-atmosphere__fog-right { opacity: .38; }

   ------------------------------------------------------------------------ */


@media (prefers-reduced-motion: reduce) {
    .site-atmosphere__fog-left,
    .site-atmosphere__fog-right,
    .site-atmosphere__dust-left,
    .site-atmosphere__dust-right {
        animation: none;
    }
}

/* ========================================================================
   REAL SPARK PARTICLES — V5
   ========================================================================
   В отличие от прошлых версий это НЕ radial-gradient.
   JS создаёт настоящие DOM-частицы, поэтому эффект будет явно виден.
   ======================================================================== */

/* Старые декоративные точки убираем, чтобы не мешали */
.site-atmosphere__dust-left,
.site-atmosphere__dust-right {
    display: none !important;
}

/* Контейнер настоящих искр */
.site-sparks {
    position: absolute;
    inset: 0;
    overflow: hidden;

    pointer-events: none;
    user-select: none;
}

/* Одна искра */
.site-spark {
    position: absolute;

    left: var(--x);
    top: calc(100% + 30px);

    width: var(--size);
    height: var(--size);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #fff7c9 0%,
            #ffe49a 24%,
            #e9aa3e 55%,
            rgba(220, 126, 28, .45) 74%,
            transparent 100%
        );

    box-shadow:
        0 0 4px rgba(255, 220, 133, .95),
        0 0 10px rgba(238, 166, 57, .60),
        0 0 18px rgba(219, 119, 27, .24);

    opacity: 0;

    transform: translate3d(0, 0, 0);

    will-change: transform, opacity;

    animation:
        siteRealSparkRise
        var(--duration)
        linear
        var(--delay)
        infinite;
}

/* Небольшой хвост */
.site-spark::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 1px;
    height: var(--tail);

    transform:
        translate(-50%, 0);

    transform-origin:
        top center;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 232, 157, .88),
            rgba(232, 156, 48, .30),
            transparent
        );

    filter:
        blur(.2px);

    opacity: .78;
}

/* Часть искр крупнее */
.site-spark--bright {
    box-shadow:
        0 0 5px rgba(255, 236, 169, 1),
        0 0 13px rgba(242, 176, 68, .75),
        0 0 24px rgba(222, 118, 24, .34);
}

/* Левая/правая частица чуть уводится в сторону */
.site-spark--left {
    --drift: 34px;
}

.site-spark--right {
    --drift: -34px;
}

@keyframes siteRealSparkRise {
    0% {
        opacity: 0;

        transform:
            translate3d(0, 0, 0)
            scale(.72);
    }

    8% {
        opacity: .92;
    }

    52% {
        opacity: .82;

        transform:
            translate3d(
                calc(var(--drift) * .48),
                -48vh,
                0
            )
            scale(1);
    }

    88% {
        opacity: .55;
    }

    100% {
        opacity: 0;

        transform:
            translate3d(
                var(--drift),
                -105vh,
                0
            )
            scale(.82);
    }
}

/* На меньших экранах чуть спокойнее */
@media (max-width: 1250px) {
    .site-spark {
        opacity: .86;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-spark {
        display: none !important;
    }
}

/* ========================================================================
   V6 — SUBTLE CENTER SPARKS
   ========================================================================
   В центре искр меньше, они мельче и тусклее, чтобы не мешать тексту.
   ======================================================================== */

.site-spark--center {
    box-shadow:
        0 0 3px rgba(255, 220, 133, .55),
        0 0 7px rgba(238, 166, 57, .28);

    animation-name: siteCenterSparkRise !important;
}

.site-spark--center::after {
    opacity: .42;
}

.site-spark--center.site-spark--bright {
    box-shadow:
        0 0 4px rgba(255, 232, 165, .68),
        0 0 9px rgba(241, 177, 67, .36);
}

@keyframes siteCenterSparkRise {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(.7);
    }

    12% {
        opacity: .28;
    }

    55% {
        opacity: .22;
        transform:
            translate3d(
                calc(var(--drift) * .45),
                -42vh,
                0
            )
            scale(.95);
    }

    88% {
        opacity: .12;
    }

    100% {
        opacity: 0;
        transform:
            translate3d(
                var(--drift),
                -92vh,
                0
            )
            scale(.75);
    }
}