/* ====================================================
   Top Hero Banner - Layered Motion (calm, no ghosting)

   Rules that keep it clean:
   1. The logo area (centre, ~32%-68% of the width) is NEVER
      covered by any moving layer - it stays perfectly sharp.
   2. Every moving layer is masked with a hard horizontal limit,
      so it can only ever show its own region (globe / flag).
   3. Layers scale from their outer edge, so no seams appear.
   4. Motion is very slow with tiny amplitude.
   ==================================================== */

.banner-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1024 / 327;
    overflow: hidden;
    background: #ffffff;
    isolation: isolate;
}

.banner-stage .top-banner-img,
.banner-stage .banner-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

/* --- Globe (left): slow "zoom-in" drift. Only x < 30% is visible --- */
.banner-layer--globe {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 20%, transparent 29%);
            mask-image: linear-gradient(to right, #000 0%, #000 20%, transparent 29%);
    transform-origin: 0% 55%;
    animation: globeDrift 20s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes globeDrift {
    0%   { transform: scale(1) translate3d(0, 0, 0); }
    100% { transform: scale(1.075) translate3d(0, -5px, 0); }
}

/* --- Flag & sky (right): gentle ripple. Only x > 72% is visible --- */
.banner-layer--flag {
    -webkit-mask-image: linear-gradient(to right, transparent 70%, #000 78%, #000 100%);
            mask-image: linear-gradient(to right, transparent 70%, #000 78%, #000 100%);
    filter: url(#bannerFlagWave);
    transform-origin: 100% 0%;
    animation: flagDrift 18s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes flagDrift {
    0%   { transform: scale(1) translate3d(0, 0, 0); }
    100% { transform: scale(1.05) translate3d(0, 4px, 0); }
}

/* --- Light: soft sun glow, kept strictly inside the globe area --- */
.banner-glow {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    mix-blend-mode: screen;
}

.banner-glow--sun {
    left: 22%;
    top: 22%;
    width: 14%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 244, 214, 0.4) 30%, rgba(255, 244, 214, 0) 70%);
    animation: sunBreath 7s ease-in-out infinite;
}

@keyframes sunBreath {
    0%, 100% { opacity: 0.25; transform: translate(-50%, -50%) scale(0.9); }
    50%      { opacity: 0.85; transform: translate(-50%, -50%) scale(1.15); }
}

/* --- Warm sunset glow over the city, right side only --- */
.banner-glow--sunset {
    left: 87%;
    top: 74%;
    width: 22%;
    aspect-ratio: 1.8;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, rgba(255, 214, 140, 0.6) 0%, rgba(255, 214, 140, 0) 70%);
    animation: sunsetBreath 9s ease-in-out infinite;
    animation-delay: -5s;
}

@keyframes sunsetBreath {
    0%, 100% { opacity: 0.08; }
    50%      { opacity: 0.6; }
}

/* --- Network nodes on the globe: very quiet twinkle --- */
.banner-node {
    position: absolute;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.9), 0 0 12px 4px rgba(150, 205, 255, 0.55);
    opacity: 0;
    pointer-events: none;
    animation: nodeTwinkle 4s ease-in-out infinite;
}

@keyframes nodeTwinkle {
    0%, 100% { opacity: 0; transform: scale(0.6); }
    50%      { opacity: 1; transform: scale(1.15); }
}

/* --- Respect users who prefer reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .banner-layer--globe,
    .banner-layer--flag,
    .banner-glow,
    .banner-node {
        animation: none !important;
    }
    .banner-layer--flag { filter: none; }
    .banner-node { display: none; }
}