/* ================================
   Ambient Top Strip
================================ */



.ambient-strip {
    position: relative;
    height: clamp(90px, 12vw, 150px);
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 45%, rgba(90,169,255,0.22), transparent 28%),
        radial-gradient(circle at 78% 30%, rgba(255,60,180,0.20), transparent 30%),
        linear-gradient(180deg, #090d16 0%, #0b1020 100%);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(90,169,255,0.22);
    box-shadow:
        inset 0 -18px 36px rgba(0,0,0,0.25),
        0 0 24px rgba(90,169,255,0.08);
}

/* soft glow blobs */
.ambient-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(40px);
    opacity: 0.28;
    pointer-events: none;
}

.ambient-glow-left {
    width: 240px;
    height: 120px;
    left: 4%;
    top: 14px;
    background: rgba(90,169,255,0.18);
}

.ambient-glow-right {
    width: 260px;
    height: 140px;
    right: 8%;
    top: 0;
    background: rgba(255,60,180,0.16);
}

/* layered stars */
.star-layer {
    position: absolute;
    inset: 0;
    background-repeat: repeat;
    pointer-events: none;
    opacity: 0.9;
}

/* far background stars */
.star-layer-back {
    background-image:
        radial-gradient(circle, rgba(120,180,255,0.60) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255,110,210,0.45) 1px, transparent 1.5px);
    background-size: 130px 70px, 180px 90px;
    background-position: 0 0, 40px 25px;
    animation: driftStarsBack 32s linear infinite;
    opacity: 0.35;
}

/* middle stars */
.star-layer-mid {
    background-image:
        radial-gradient(circle, rgba(160,210,255,0.95) 1.2px, transparent 1.8px),
        radial-gradient(circle, rgba(255,120,220,0.75) 1.2px, transparent 1.8px);
    background-size: 95px 55px, 150px 80px;
    background-position: 0 0, 25px 18px;
    animation: driftStarsMid 22s linear infinite;
    opacity: 0.55;
}

/* near “sparkle” layer */
.star-layer-front {
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.95) 1.4px, transparent 2px),
        radial-gradient(circle, rgba(90,169,255,0.85) 1.5px, transparent 2.1px),
        radial-gradient(circle, rgba(255,80,190,0.85) 1.5px, transparent 2.1px);
    background-size: 160px 90px, 220px 110px, 200px 100px;
    background-position: 10px 0, 70px 20px, 120px 30px;
    animation: driftStarsFront 16s linear infinite;
    opacity: 0.5;
}

@keyframes driftStarsBack {
    from { transform: translateX(0); }
    to   { transform: translateX(-80px); }
}

@keyframes driftStarsMid {
    from { transform: translateX(0); }
    to   { transform: translateX(-120px); }
}

@keyframes driftStarsFront {
    from { transform: translateX(0); }
    to   { transform: translateX(-160px); }
}

/* Pull hero closer to the ambient strip */
.ambient-strip + .hero {
    min-height: 50vh;
    padding-top: clamp(42px, 6vw, 72px);
}