/* ─────────────────────────────────────────────────────────────────────────────
   MOVETAIN DYNAMIC SKY & ATMOSPHERE LAYER (3 BALANCED STATES)
   • Day: Radiant blurred sunspot on the RIGHT (top: 9%, right: 19%)
   • Sunset: Warm golden-amber blurred sunspot on the LEFT (top: 18%, left: 20%)
   • Night: Coaxial crescent moon on the RIGHT, smooth meteor falling on the LEFT
   • Micro star dots (1-1.8px, NO blur, subtle twinkle)
   ───────────────────────────────────────────────────────────────────────────── */

.landing-banner-wrap {
    position: relative !important;
}

.banner-sky-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    user-select: none;
    z-index: 2;
}

/* Atmosphere color tint layers */
.sky-tint-base {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: opacity 1.6s ease-in-out, background 1.6s ease-in-out;
}

/* ─── 1. NIGHT MODE (21:30 - 05:30) ─────────────────────────────────────────── */
.banner-sky-overlay.sky-night .sky-tint-base {
    background: linear-gradient(180deg, 
        rgba(3, 8, 20, 0.35) 0%, 
        rgba(5, 12, 30, 0.18) 50%, 
        transparent 100%
    );
    mix-blend-mode: multiply;
}

/* ─── 2. DAYLIGHT MODE (07:00 - 18:30) ───────────────────────────────────────── */
.banner-sky-overlay.sky-day .sky-tint-base {
    background: linear-gradient(180deg, 
        rgba(30, 115, 215, 0.22) 0%, 
        rgba(80, 170, 255, 0.18) 45%, 
        rgba(190, 230, 255, 0.1) 75%, 
        transparent 100%
    );
    mix-blend-mode: screen;
}

/* ─── 3. BEAUTIFUL GOLDEN SUNSET (18:30 - 21:30 & 05:30 - 07:00) ─────────────── */
/* Warm sunset gradient spreading from the top-left edge across the sky */
.banner-sky-overlay.sky-sunset .sky-tint-base {
    background: 
        radial-gradient(ellipse 95% 80% at 0% 0%, 
            rgba(255, 160, 55, 0.44) 0%, 
            rgba(255, 130, 45, 0.28) 32%, 
            rgba(255, 95, 30, 0.12) 58%, 
            transparent 80%
        ),
        linear-gradient(90deg, 
            rgba(255, 145, 45, 0.25) 0%, 
            rgba(255, 170, 70, 0.15) 24%, 
            rgba(255, 195, 100, 0.07) 44%, 
            transparent 65%
        );
    mix-blend-mode: screen;
}

/* ─── RADIANT BLURRED SUNSPOT (ON OPPOSITE SIDES FOR DAY & SUNSET) ──────────── */
.sky-sun-spot {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: all 1.8s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
    mix-blend-mode: screen;
}

/* Day: Radiant white-gold sunspot on the RIGHT (higher and further right) */
.banner-sky-overlay.sky-day .sky-sun-spot {
    top: 2%;
    right: 9%;
    left: auto;
    width: 140px;
    height: 140px;
    opacity: 0.95;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(255, 248, 215, 0.72) 18%, 
        rgba(255, 225, 150, 0.35) 42%, 
        rgba(255, 195, 100, 0.1) 68%, 
        transparent 85%
    );
    filter: blur(10px);
}

/* Sunset: Elevated to the very top-left ("практически в самый верх") */
.banner-sky-overlay.sky-sunset .sky-sun-spot {
    top: -15px;
    left: -20px;
    right: auto;
    width: 175px;
    height: 175px;
    opacity: 0.98;
    background: radial-gradient(circle at 45% 45%, 
        rgba(255, 250, 225, 0.98) 0%, 
        rgba(255, 190, 85, 0.75) 24%, 
        rgba(255, 130, 40, 0.38) 50%, 
        rgba(255, 75, 20, 0.09) 74%, 
        transparent 88%
    );
    filter: blur(18px);
}

/* Night: Sunspot is hidden */
.banner-sky-overlay.sky-night .sky-sun-spot {
    opacity: 0;
}

/* ─── SUNSET OPTICAL REFRACTION & SHIMMERING FLARES ────────────────────────────── */
.sky-refraction-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.8s ease-in-out;
    mix-blend-mode: screen;
    overflow: hidden;
    z-index: 2;
}

.banner-sky-overlay.sky-sunset .sky-refraction-wrap {
    opacity: 1;
}

/* Origin exactly at the center of the setting sun (-20px + 85px = 65px, -15px + 85px = 70px) */
.sky-flares-origin {
    position: absolute;
    top: 70px;
    left: 65px;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Soft shimmering crepuscular fan of warm light beams from sun center */
.sky-flare-fan {
    position: absolute;
    top: -200px;
    left: -200px;
    width: 750px;
    height: 750px;
    transform-origin: 200px 200px;
    background: conic-gradient(
        from 95deg at 200px 200px,
        transparent 0deg,
        rgba(255, 220, 150, 0.12) 8deg,
        transparent 16deg,
        rgba(255, 235, 170, 0.18) 26deg,
        rgba(255, 190, 100, 0.04) 34deg,
        transparent 42deg,
        rgba(255, 220, 150, 0.14) 52deg,
        transparent 62deg,
        rgba(255, 200, 120, 0.09) 72deg,
        transparent 85deg
    );
    filter: blur(10px);
    animation: fan-shimmer 7.2s ease-in-out infinite alternate;
}

@keyframes fan-shimmer {
    0%   { opacity: 0.55; transform: rotate(0deg) scale(0.97); }
    50%  { opacity: 0.85; transform: rotate(1.2deg) scale(1.02); }
    100% { opacity: 0.60; transform: rotate(-0.8deg) scale(0.99); }
}

/* Beams container with radial mask that softly fades out the center (completely dissolves the "пучок") */
.sky-flare-beams-group {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    -webkit-mask-image: radial-gradient(circle at 0 0, 
        transparent 0px, 
        transparent 45px, 
        rgba(0, 0, 0, 0.3) 80px, 
        rgba(0, 0, 0, 0.8) 120px, 
        #000000 160px
    );
    mask-image: radial-gradient(circle at 0 0, 
        transparent 0px, 
        transparent 45px, 
        rgba(0, 0, 0, 0.3) 80px, 
        rgba(0, 0, 0, 0.8) 120px, 
        #000000 160px
    );
}

/* Shimmering sun rays radiating from the sun, softly blurred and diffused */
.sky-flare-beam {
    position: absolute;
    top: -4px;
    left: 0;
    height: 8px;
    border-radius: 4px;
    transform-origin: 0 50%;
    filter: blur(5px);
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 245, 0.35) 20%, 
        rgba(255, 220, 140, 0.6) 40%, 
        rgba(255, 165, 65, 0.22) 70%, 
        rgba(255, 110, 30, 0.05) 88%, 
        transparent 100%
    );
    box-shadow: 0 0 16px rgba(255, 195, 85, 0.45);
}

.sky-beam-1 {
    width: 340px;
    animation: flare-shimmer-1 4.4s ease-in-out infinite alternate;
}

.sky-beam-2 {
    width: 460px;
    height: 10px;
    top: -5px;
    filter: blur(6px);
    animation: flare-shimmer-2 5.8s ease-in-out infinite alternate;
}

.sky-beam-3 {
    width: 390px;
    height: 8px;
    animation: flare-shimmer-3 6.6s ease-in-out infinite alternate;
}

.sky-beam-4 {
    width: 310px;
    height: 7px;
    animation: flare-shimmer-4 5.2s ease-in-out infinite alternate;
}

.sky-beam-5 {
    width: 250px;
    height: 6px;
    animation: flare-shimmer-5 7.4s ease-in-out infinite alternate;
}

/* Soft glowing central bloom in the sun core */
.sky-flare-core {
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 140px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(255, 252, 235, 0.88) 0%, 
        rgba(255, 215, 115, 0.45) 35%, 
        rgba(255, 160, 50, 0.12) 65%, 
        transparent 80%
    );
    filter: blur(16px);
    pointer-events: none;
}

@keyframes flare-shimmer-1 {
    0%   { opacity: 0.35; transform: rotate(11deg) scaleX(0.92); }
    50%  { opacity: 0.75; transform: rotate(13deg) scaleX(1.05); }
    100% { opacity: 0.40; transform: rotate(12deg) scaleX(0.96); }
}

@keyframes flare-shimmer-2 {
    0%   { opacity: 0.80; transform: rotate(25.5deg) scaleX(1.06); }
    50%  { opacity: 0.35; transform: rotate(27deg) scaleX(0.93); }
    100% { opacity: 0.88; transform: rotate(25deg) scaleX(1.08); }
}

@keyframes flare-shimmer-3 {
    0%   { opacity: 0.25; transform: rotate(38deg) scaleX(0.90); }
    50%  { opacity: 0.70; transform: rotate(40deg) scaleX(1.07); }
    100% { opacity: 0.30; transform: rotate(39deg) scaleX(0.95); }
}

@keyframes flare-shimmer-4 {
    0%   { opacity: 0.50; transform: rotate(52deg) scaleX(1.03); }
    50%  { opacity: 0.20; transform: rotate(50deg) scaleX(0.92); }
    100% { opacity: 0.55; transform: rotate(53deg) scaleX(1.05); }
}

@keyframes flare-shimmer-5 {
    0%   { opacity: 0.30; transform: rotate(65deg) scaleX(0.92); }
    50%  { opacity: 0.65; transform: rotate(63.5deg) scaleX(1.06); }
    100% { opacity: 0.25; transform: rotate(66deg) scaleX(0.96); }
}

/* Atmospheric diffraction halo ring centered at sun center */
.sky-flare-halo {
    position: absolute;
    top: -100px;
    left: -100px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 145, 0.16);
    background: radial-gradient(circle, 
        transparent 72%, 
        rgba(255, 190, 105, 0.08) 86%, 
        transparent 100%
    );
    filter: blur(2px);
    animation: halo-breathe 6.8s ease-in-out infinite alternate;
}

@keyframes halo-breathe {
    0%   { transform: scale(0.96); opacity: 0.45; }
    50%  { transform: scale(1.04); opacity: 0.85; }
    100% { transform: scale(0.98); opacity: 0.55; }
}

/* Shimmering lens flare glints & bokeh orbs along main optical axis (~26°) */
.sky-flare-orb {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.sky-orb-1 {
    left: 78px;
    top: 38px;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle, rgba(255, 245, 205, 0.65) 0%, rgba(255, 190, 95, 0.22) 50%, transparent 100%);
    filter: blur(1.4px);
    animation: orb-shimmer-1 4.6s ease-in-out infinite alternate;
}

.sky-orb-2 {
    left: 146px;
    top: 71px;
    width: 24px;
    height: 24px;
    background: radial-gradient(circle, rgba(255, 215, 145, 0.35) 0%, rgba(255, 155, 75, 0.1) 60%, transparent 100%);
    border: 1px solid rgba(255, 225, 155, 0.18);
    filter: blur(2px);
    animation: orb-shimmer-2 5.9s ease-in-out infinite alternate;
}

.sky-orb-3 {
    left: 218px;
    top: 106px;
    width: 36px;
    height: 36px;
    background: radial-gradient(circle, rgba(255, 195, 115, 0.2) 0%, rgba(255, 135, 55, 0.05) 70%, transparent 100%);
    filter: blur(3px);
    animation: orb-shimmer-1 7.1s ease-in-out infinite alternate;
}

.sky-orb-4 {
    left: 290px;
    top: 141px;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(255, 255, 235, 0.8) 0%, rgba(255, 205, 115, 0.25) 60%, transparent 100%);
    filter: blur(0.8px);
    animation: orb-shimmer-2 3.8s ease-in-out infinite alternate;
}

@keyframes orb-shimmer-1 {
    0%   { opacity: 0.30; transform: translate(-50%, -50%) scale(0.88); }
    100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes orb-shimmer-2 {
    0%   { opacity: 0.75; transform: translate(-50%, -50%) scale(1.08); }
    100% { opacity: 0.25; transform: translate(-50%, -50%) scale(0.90); }
}

/* ─── COAXIAL CRESCENT MOON (NIGHT ONLY, ON THE RIGHT) ───────────────────────── */
.sky-moon-wrap {
    position: absolute;
    top: 9%;
    right: 17%;
    width: 26px;
    height: 26px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 3;
}

.banner-sky-overlay.sky-night .sky-moon-wrap {
    opacity: 0.96;
}

.sky-moon-svg {
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 0 6px rgba(220, 240, 255, 0.75)) drop-shadow(0 0 16px rgba(160, 205, 255, 0.4));
}

/* ─── TINY STAR DOTS (1px - 1.8px, NO BLUR) ─────────────────────────────────── */
.sky-stars-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 1.5s ease;
}

.banner-sky-overlay.sky-day .sky-stars-layer {
    opacity: 0;
}

.banner-sky-overlay.sky-sunset .sky-stars-layer {
    opacity: 0.35;
}

.banner-sky-overlay.sky-night .sky-stars-layer {
    opacity: 1;
}

/* Pure crisp micro dot: 1px to 1.8px, NO blur, NO shadow */
.sky-star-dot {
    position: absolute;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: none !important;
    filter: none !important;
    pointer-events: none;
    animation: starTwinkleDot infinite ease-in-out;
}

@keyframes starTwinkleDot {
    0%, 100% {
        opacity: 0.15;
    }
    50% {
        opacity: 0.95;
    }
}

/* ─── BUTTERY SMOOTH METEOR (GPU-ACCELERATED, FALLS DOWNWARDS ON THE LEFT) ───── */
/* Strictly in 1st quadrant on the LEFT (top 4%..16%, left 8%..26%) */
.sky-shooting-star {
    position: absolute;
    top: 4%;
    left: 8%;
    width: 48px;
    height: 1.5px;
    background: linear-gradient(to right, 
        transparent 0%, 
        rgba(215, 235, 255, 0.3) 40%, 
        rgba(255, 255, 255, 0.8) 75%, 
        #FFFFFF 100%
    );
    border-radius: 1px;
    box-shadow: none !important;
    filter: none !important;
    transform-origin: left center;
    transform: translate3d(0, 0, 0) rotate(32deg);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    will-change: transform, opacity;
}

.banner-sky-overlay.sky-night .sky-shooting-star {
    animation: meteorFallDown 16s infinite cubic-bezier(0.2, 0.1, 0.25, 1);
    animation-delay: 2.2s;
}

/* Falls DOWN and to the right (+x and +y), fades out smoothly */
@keyframes meteorFallDown {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(32deg);
    }
    0.8% {
        opacity: 0.35;
    }
    1.6% {
        opacity: 1;
        transform: translate3d(24px, 15px, 0) rotate(32deg);
    }
    2.8% {
        opacity: 0.75;
        transform: translate3d(48px, 30px, 0) rotate(32deg);
    }
    4.4% {
        opacity: 0.3;
        transform: translate3d(72px, 45px, 0) rotate(32deg);
    }
    6.0% {
        opacity: 0.05;
        transform: translate3d(90px, 56px, 0) rotate(32deg);
    }
    7.0% {
        opacity: 0;
        transform: translate3d(98px, 61px, 0) rotate(32deg);
    }
    100% {
        opacity: 0;
        transform: translate3d(98px, 61px, 0) rotate(32deg);
    }
}

/* ─── INTERACTIVE SKY MOOD PILL BUTTON ───────────────────────────────────────── */
.sky-mood-pill {
    position: absolute;
    bottom: 10px;
    right: 12px;
    z-index: 5;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    background: rgba(10, 16, 32, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--font-mono, monospace);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: all 0.22s ease;
}

.sky-mood-pill:hover {
    background: rgba(20, 28, 52, 0.85);
    border-color: rgba(186, 155, 255, 0.45);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.sky-mood-pill:active {
    transform: translateY(0);
}

.sky-mood-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    color: currentColor;
    flex-shrink: 0;
}

.sky-mood-icon svg {
    width: 13px;
    height: 13px;
    display: block;
}

.sky-mood-time {
    color: rgba(255, 255, 255, 0.55);
    font-weight: normal;
    margin-left: 2px;
}