/* ===== Sky Particles: drifting clouds + twinkling sparkles ===== */

.sky-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
}

.sky-particles .cloud-layer,
.sky-particles .sparkle-layer {
    position: absolute;
    inset: 0;
}

/* === Clouds: soft white puffs that drift across the sky === */
.cloud {
    position: absolute;
    width: 180px;
    height: 60px;
    border-radius: 999px;
    background: radial-gradient(
        ellipse at 30% 60%,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 255, 255, 0.55) 35%,
        rgba(255, 255, 255, 0)    75%
    );
    filter: blur(1px) drop-shadow(0 4px 14px rgba(255, 255, 255, 0.25));
    animation: cloudDrift linear infinite;
    will-change: transform;
}

.cloud::before,
.cloud::after {
    content: "";
    position: absolute;
    background: inherit;
    border-radius: 999px;
}

.cloud::before {
    width: 100px;
    height: 100px;
    top: -40px;
    left: 32px;
}

.cloud::after {
    width: 78px;
    height: 78px;
    top: -28px;
    left: 96px;
}

@keyframes cloudDrift {
    0%   { transform: translateX(-300px) translateY(0); }
    50%  { transform: translateX(50vw)   translateY(-12px); }
    100% { transform: translateX(115vw)  translateY(0); }
}

/* === Sparkles: bright twinkling stars === */
.sparkle {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent, #E1D95A);
    box-shadow:
        0 0 10px rgba(255, 255, 255, 1),
        0 0 18px var(--accent, #E1D95A),
        0 0 30px rgba(225, 217, 90, 0.85);
    opacity: 0;
    animation: sparkleTwinkle ease-in-out infinite;
    will-change: transform, opacity;
}

.sparkle.blue {
    background: #ffffff;
    box-shadow:
        0 0 10px rgba(255, 255, 255, 1),
        0 0 20px var(--primary, #BFD4FF),
        0 0 34px rgba(191, 212, 255, 0.9);
}

.sparkle.large { width: 11px; height: 11px; }

@keyframes sparkleTwinkle {
    0%, 100% { opacity: 0.15; transform: scale(0.6); }
    50%      { opacity: 1;    transform: scale(1.25); }
}

@keyframes sparkleDrift {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(var(--drift-x, 20px), var(--drift-y, -40px)); }
}

@media (prefers-reduced-motion: reduce) {
    .cloud, .sparkle { animation-duration: 0s !important; opacity: 0.6 !important; }
}

@media (max-width: 768px) {
    .cloud { width: 130px; height: 44px; }
    .cloud::before { width: 76px; height: 76px; left: 24px; top: -32px; }
    .cloud::after  { width: 56px; height: 56px; left: 70px; top: -22px; }
}