/*
 * ==========================================================
 * KOSMODRIFT · DESKTOP ATMOSPHERE V3
 *
 * Всё визуальное изменение LIVE / WEATHER находится
 * ТОЛЬКО внутри desktop media query.
 * ==========================================================
 */


.kdb-weather-scene-v3 {
    display: none;
}


@media (min-width: 821px) {

    /*
     * ======================================================
     * 1. СТАРЫЕ ГЛОБАЛЬНЫЕ ОСАДКИ
     * ======================================================
     *
     * site.js продолжает получать погоду, температуру,
     * ветер и data-weather, но старый canvas больше
     * визуально не рисует дождь/ветер/метель по экрану.
     */

    html body #weather-canvas {
        display: none !important;
    }


    /*
     * Legacy snow canvas is controlled only by data-weather-visual="snow".
     */

    #kdb-permanent-snow-v3 {
        position: fixed;

        inset: 0;

        z-index: 30;

        display: none;

        width: 100%;
        height: 100%;

        pointer-events: none;

        opacity: .48;
    }

    body[data-weather-visual="snow"] #kdb-permanent-snow-v3 {
        display: block;
    }


    /*
     * ======================================================
     * 2. WEATHER TOWER
     * ======================================================
     */

    html body
    .hero--single-banner
    .weather-tower.weather-tower--on-banner.weather-tower--v8 {

        width: 176px !important;
        height: 304px !important;

        box-sizing: border-box !important;

        padding:
            15px
            12px
            10px !important;

        overflow: hidden !important;

        border-color:
            rgba(
                103,
                211,
                247,
                .62
            ) !important;

        background:
            linear-gradient(
                180deg,
                rgba(
                    4,
                    39,
                    57,
                    .965
                ),
                rgba(
                    2,
                    20,
                    33,
                    .985
                )
            ) !important;

        box-shadow:
            0
            20px
            48px
            rgba(
                0,
                18,
                31,
                .28
            ),
            inset
            0
            0
            36px
            rgba(
                38,
                184,
                229,
                .08
            ) !important;
    }


    html body
    .hero--single-banner
    .weather-tower--v8
    small {

        font-size: 9px !important;

        letter-spacing: .07em !important;
    }


    /*
     * Старый ✣ / ромб убираем ТОЛЬКО на ПК.
     */

    html body
    .hero--single-banner
    .weather-tower--v8
    #weather-symbol {

        display: none !important;
    }


    html body
    .hero--single-banner
    .weather-tower--v8
    #weather-temperature {

        font-size: 47px !important;

        line-height: .93 !important;
    }


    html body
    .hero--single-banner
    .weather-tower--v8
    #weather-label {

        margin-top: 4px !important;

        font-size: 12px !important;
    }


    html body
    .hero--single-banner
    .weather-tower--v8
    #track-clock {

        font-size: 43px !important;

        line-height: .94 !important;
    }


    html body
    .hero--single-banner
    .weather-tower--v8
    #track-date {

        margin-top: 4px !important;

        font-size: 7.5px !important;
    }


    html body
    .hero--single-banner
    .weather-tower--v8
    hr {

        margin:
            10px
            4px !important;
    }


    /*
     * ======================================================
     * 3. НОВАЯ ПОГОДНАЯ СЦЕНА
     * ======================================================
     */

    .weather-tower
    .kdb-weather-scene-v3 {

        position: relative;

        display: block;

        width: 100%;
        height: 58px;

        flex:
            0
            0
            58px;

        margin:
            5px
            0
            2px;

        overflow: hidden;

        pointer-events: none;
    }


    /*
     * СОЛНЦЕ
     */

    .kdb-weather-sun-v3 {

        position: absolute;

        left: 50%;
        top: 50%;

        display: none;

        width: 29px;
        height: 29px;

        transform:
            translate(
                -50%,
                -50%
            );

        border-radius: 50%;

        background:
            radial-gradient(
                circle at 36% 34%,
                #fffde9 0 10%,
                #ffed9c 23%,
                #ffcc5c 57%,
                #eaa12b 100%
            );

        box-shadow:
            0
            0
            9px
            rgba(
                255,
                232,
                153,
                .95
            ),
            0
            0
            24px
            rgba(
                255,
                188,
                58,
                .48
            );
    }


    .kdb-weather-sun-v3::before {

        content: "";

        position: absolute;

        inset: -13px;

        border-radius: 50%;

        background:
            repeating-conic-gradient(
                from 0deg,
                rgba(
                    255,
                    226,
                    124,
                    .90
                )
                0deg
                4deg,

                transparent
                4deg
                45deg
            );

        -webkit-mask:
            radial-gradient(
                circle,
                transparent
                0
                54%,

                #000
                56%
            );

        mask:
            radial-gradient(
                circle,
                transparent
                0
                54%,

                #000
                56%
            );

        animation:
            kdb-sun-spin-v3
            24s
            linear
            infinite;
    }


    @keyframes kdb-sun-spin-v3 {

        to {
            transform:
                rotate(
                    360deg
                );
        }
    }


    /*
     * ОБЛАКО
     */

    .kdb-weather-cloud-v3 {

        position: absolute;

        left: 50%;
        top: 53%;

        display: none;

        width: 62px;
        height: 20px;

        transform:
            translate(
                -50%,
                -50%
            );

        border-radius:
            18px;

        background:
            linear-gradient(
                180deg,
                #f5fcff
                0%,

                #c3dce6
                58%,

                #8faeb9
                100%
            );

        box-shadow:
            0
            6px
            10px
            rgba(
                0,
                0,
                0,
                .25
            );
    }


    .kdb-weather-cloud-v3::before,
    .kdb-weather-cloud-v3::after {

        content: "";

        position: absolute;

        border-radius: 50%;

        background: inherit;
    }


    .kdb-weather-cloud-v3::before {

        left: 10px;
        top: -17px;

        width: 33px;
        height: 33px;
    }


    .kdb-weather-cloud-v3::after {

        right: 8px;
        top: -11px;

        width: 26px;
        height: 26px;
    }


    /*
     * ДОЖДЬ
     */

    .kdb-weather-rain-layer-v3 {

        position: absolute;

        inset: 0;

        display: none;

        overflow: hidden;
    }


    .kdb-weather-rain-v3 {

        position: absolute;

        top: 31px;

        width: 2px;
        height: 15px;

        border-radius: 2px;

        background:
            linear-gradient(
                180deg,
                transparent,
                rgba(
                    157,
                    226,
                    250,
                    .95
                )
            );

        transform:
            rotate(
                11deg
            );

        animation:
            kdb-rain-v3
            .70s
            linear
            infinite;
    }


    @keyframes kdb-rain-v3 {

        from {
            transform:
                translateY(
                    -12px
                )
                translateX(
                    -3px
                )
                rotate(
                    11deg
                );

            opacity: 0;
        }

        18% {
            opacity: .95;
        }

        to {
            transform:
                translateY(
                    41px
                )
                translateX(
                    7px
                )
                rotate(
                    11deg
                );

            opacity: 0;
        }
    }


    /*
     * СНЕГ ВНУТРИ ПОГОДНОГО БЛОКА
     */

    .kdb-weather-snow-layer-v3 {

        position: absolute;

        inset: 0;

        display: none;

        overflow: hidden;
    }


    .kdb-weather-flake-v3 {

        position: absolute;

        top: 27px;

        width: 4px;
        height: 4px;

        border-radius: 50%;

        background:
            #fff;

        box-shadow:
            0
            0
            5px
            rgba(
                255,
                255,
                255,
                .7
            );

        animation:
            kdb-weather-flake-v3
            1.8s
            linear
            infinite;
    }


    @keyframes kdb-weather-flake-v3 {

        from {
            transform:
                translate(
                    -3px,
                    -8px
                );

            opacity: 0;
        }

        18% {
            opacity: .95;
        }

        to {
            transform:
                translate(
                    9px,
                    38px
                );

            opacity: .1;
        }
    }


    /*
     * ВЕТЕР
     */

    .kdb-weather-wind-layer-v3 {

        position: absolute;

        inset: 0;

        display: none;

        overflow: hidden;
    }


    .kdb-weather-wind-v3 {

        position: absolute;

        left: -70px;

        height: 2px;

        border-radius: 999px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(
                    198,
                    237,
                    250,
                    .9
                ),
                transparent
            );

        animation:
            kdb-weather-wind-v3
            1.45s
            ease-in-out
            infinite;
    }


    @keyframes kdb-weather-wind-v3 {

        from {
            transform:
                translateX(
                    0
                );

            opacity: 0;
        }

        25% {
            opacity: .9;
        }

        to {
            transform:
                translateX(
                    220px
                );

            opacity: 0;
        }
    }


    /*
     * ТУМАН
     */

    .kdb-weather-fog-layer-v3 {

        position: absolute;

        inset: 0;

        display: none;
    }


    .kdb-weather-fog-v3 {

        position: absolute;

        left: 12px;

        width: 125px;
        height: 2px;

        border-radius: 999px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(
                    216,
                    240,
                    248,
                    .68
                ),
                transparent
            );

        animation:
            kdb-weather-fog-v3
            3s
            ease-in-out
            infinite
            alternate;
    }


    @keyframes kdb-weather-fog-v3 {

        from {
            transform:
                translateX(
                    -8px
                );

            opacity: .35;
        }

        to {
            transform:
                translateX(
                    8px
                );

            opacity: .82;
        }
    }


    /*
     * МОЛНИЯ
     */

    .kdb-weather-lightning-v3 {

        position: absolute;

        left: 52%;
        top: 32px;

        display: none;

        width: 11px;
        height: 22px;

        transform:
            translateX(
                -50%
            );

        background:
            #fff0a3;

        clip-path:
            polygon(
                55% 0,
                100% 0,
                68% 40%,
                100% 40%,
                18% 100%,
                40% 56%,
                7% 56%
            );

        filter:
            drop-shadow(
                0
                0
                5px
                rgba(
                    255,
                    229,
                    98,
                    .88
                )
            );

        animation:
            kdb-lightning-v3
            2.8s
            steps(1)
            infinite;
    }


    @keyframes kdb-lightning-v3 {

        0%,
        84%,
        88%,
        100% {
            opacity: 0;
        }

        85%,
        87% {
            opacity: 1;
        }
    }


    /*
     * WEATHER STATES
     */

    .kdb-weather-scene-v3.is-clear
    .kdb-weather-sun-v3,

    .kdb-weather-scene-v3.is-clouds
    .kdb-weather-sun-v3,

    .kdb-weather-scene-v3.is-clouds
    .kdb-weather-cloud-v3,

    .kdb-weather-scene-v3.is-rain
    .kdb-weather-cloud-v3,

    .kdb-weather-scene-v3.is-rain
    .kdb-weather-rain-layer-v3,

    .kdb-weather-scene-v3.is-snow
    .kdb-weather-cloud-v3,

    .kdb-weather-scene-v3.is-snow
    .kdb-weather-snow-layer-v3,

    .kdb-weather-scene-v3.is-wind
    .kdb-weather-cloud-v3,

    .kdb-weather-scene-v3.is-wind
    .kdb-weather-wind-layer-v3,

    .kdb-weather-scene-v3.is-storm
    .kdb-weather-cloud-v3,

    .kdb-weather-scene-v3.is-storm
    .kdb-weather-rain-layer-v3,

    .kdb-weather-scene-v3.is-storm
    .kdb-weather-lightning-v3 {

        display: block;
    }


    .kdb-weather-scene-v3.is-clouds
    .kdb-weather-sun-v3 {

        left: 38%;
        top: 38%;
    }


    .kdb-weather-scene-v3.is-clouds
    .kdb-weather-cloud-v3 {

        left: 59%;
        top: 61%;
    }


    .kdb-weather-scene-v3.is-clouds
    .kdb-weather-cloud-v3,

    .kdb-weather-scene-v3.is-rain
    .kdb-weather-cloud-v3,

    .kdb-weather-scene-v3.is-storm
    .kdb-weather-cloud-v3 {

        filter:
            brightness(
                .74
            )
            saturate(
                .72
            );
    }


    /*
     * ======================================================
     * 4. МЕЖДУ ЭТАПАМИ
     * ======================================================
     *
     * active:false из существующего LIVE API.
     */

    body.kdb-stage-idle-v3
    #kdb-live-v18 {

        display: none !important;

        visibility: hidden !important;

        pointer-events: none !important;
    }


    #pilots.kdb-stage-idle-card-v3 {

        position: relative !important;

        overflow: hidden !important;
    }

    /* The live renderer leaves its empty shell in #pilots.  Keeping it in the
       layout pushed the placeholder beneath an invisible block. */
    #pilots.kdb-stage-idle-card-v3 > :not(.kdb-stage-idle-overlay-v3) {
        display: none !important;
    }



    .kdb-stage-idle-overlay-v3 {

        position: absolute;
        inset: 0;

        min-height: 0;

        z-index: 500;

        box-sizing: border-box;

        display: grid;

        place-items: center;

        overflow: hidden;

        padding: 26px;

        border:
            1px
            solid
            rgba(
                84,
                207,
                247,
                .30
            );

        background:
            radial-gradient(
                circle at 79% 14%,
                rgba(
                    47,
                    195,
                    239,
                    .15
                ),
                transparent
                31%
            ),
            linear-gradient(
                135deg,
                #071f2e
                0%,

                #03131e
                60%,

                #062a3b
                100%
            );

        color:
            #fff;

        text-align: center;
    }

    /* The idle card owns the whole LIVE tile, not only the content area left
       below the dormant renderer. */
    #pilots.kdb-stage-idle-card-v3 .kdb-stage-idle-overlay-v3 {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }


    /* The large circle competed with the headline.  Keep a restrained
       championship-style watermark instead. */
    .kdb-stage-idle-overlay-v3::before {
        content: "NEXT STAGE";
        position: absolute;
        left: 50%;
        bottom: 17px;
        z-index: 1;
        color: rgba(77, 206, 247, .055);
        font-family: var(--display, Oswald, sans-serif);
        font-size: clamp(48px, 5.5vw, 82px);
        font-style: italic;
        font-weight: 700;
        letter-spacing: -.045em;
        line-height: .8;
        white-space: nowrap;
        transform: translateX(-50%);
        pointer-events: none;
    }


    .kdb-stage-idle-overlay-v3::after { content: none; }


    .kdb-stage-idle-overlay-v3__inner {

        position: relative;

        z-index: 2;

        width:
            min(
                610px,
                calc(
                    100%
                    -
                    36px
                )
            );
    }


    .kdb-stage-idle-overlay-v3__kicker {

        display: block;

        margin-bottom: 8px;

        color:
            #4dcef7;

        font-size: 9px;
        font-weight: 900;

        letter-spacing: .18em;

        text-transform: uppercase;
    }


    .kdb-stage-idle-overlay-v3__title {

        display: block;

        color: #fff;

        font-family:
            var(
                --display,
                Oswald,
                sans-serif
            );

        font-size:
            clamp(
                32px,
                3.7vw,
                53px
            );

        font-style: italic;
        font-weight: 600;

        line-height: .94;

        text-transform: uppercase;
    }


    .kdb-stage-idle-overlay-v3__line {

        display: block;

        width: 78px;
        height: 3px;

        margin:
            16px
            auto
            13px;

        background:
            linear-gradient(
                90deg,
                #1aafe4,
                #61d5fa
            );

        transform:
            skewX(
                -20deg
            );
    }


    .kdb-stage-idle-overlay-v3__text {
        color:
            #84a5b2;

        font-size: 10px;

        line-height: 1.55;

        letter-spacing: .045em;

        text-transform: uppercase;
    }

    .kdb-stage-idle-overlay-v3__footer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        max-width: 440px;
        margin: 0 auto;
    }

    .kdb-stage-idle-overlay-v3__slashes {
        flex: 0 0 auto;
        color: rgba(77, 206, 247, .82);
        font-family: var(--display, Oswald, sans-serif);
        font-size: 29px;
        font-style: italic;
        letter-spacing: -4px;
        line-height: 1;
    }

}


/* Desktop keeps the full weather tower on the hero. Mobile uses the
 * compact weather row injected into the upper LIVE block. */

html body .hero--single-banner .weather-tower.weather-tower--on-banner.weather-tower--v8 {
    display: flex !important;
}

@media (max-width: 819px) {
    html body .hero--single-banner .weather-tower.weather-tower--on-banner.weather-tower--v8 {
        display: none !important;
    }
}