/* =====================================================
   MOKSH — GARDEN CLOUD SYSTEM
   Phase B: Static Layer Foundation
   ===================================================== */

.garden-weather-clouds {
    position: absolute;
    inset: 0;
    z-index: 2;

    pointer-events: none;
    overflow: hidden;

    opacity: 0;
    visibility: hidden;
}

.garden-weather-clouds.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Cloud layer containers */

.garden-cloud-layer {
    position: absolute;
    inset: 0;

    pointer-events: none;
    overflow: hidden;

    opacity: 1;
}

/* Incoming layer remains available for crossfade */

.garden-cloud-layer-incoming {
    opacity: 0;
}

/* Individual image-based cloud */

.garden-cloud-image {
    position: absolute;

    display: block;
    width: auto;
    height: auto;
    max-width: none;

    pointer-events: none;
    user-select: none;
}

/* =====================================================
   Phase D: Continuous Cloud Movement
   ===================================================== */

.garden-cloud-image {
    will-change: transform;
}

/* Distant clouds */

.garden-cloud-distant {
    animation: gardenCloudDriftFade 180s linear infinite;
}

@keyframes gardenCloudDriftFade {
    0% {
        transform: translateX(-18%);
        opacity: 0;
    }

    15% {
        opacity: 0.38;
    }

    75% {
        opacity: 0.38;
    }

    100% {
        transform: translateX(118%);
        opacity: 0;
    }
}

/* Foreground clouds */

.garden-cloud-foreground {
    animation: gardenCloudDriftForeground 110s linear infinite;
}

/* Continuous traversal */

@keyframes gardenCloudDriftDistant {
    from {
        transform: translateX(-12%);
    }

    to {
        transform: translateX(112%);
    }
}

@keyframes gardenCloudDriftMidground {
    from {
        transform: translateX(-18%);
    }

    to {
        transform: translateX(118%);
    }
}

@keyframes gardenCloudDriftForeground {
    from {
        transform: translateX(-24%);
    }

    to {
        transform: translateX(124%);
    }
}

/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
    .garden-cloud-image {
        animation: none;
    }
}

/* =====================================================
   Phase E: Midground Cloud Fade Movement
   ===================================================== */

/* Midground cloud 1 — fade movement */

.garden-cloud-layer-current
.garden-cloud-midground:nth-child(2) {
    animation: gardenCloudMidgroundFade 150s linear infinite;
}

/* Midground cloud 2 — fade movement + subtle scaling */

.garden-cloud-layer-current
.garden-cloud-midground:nth-child(3) {
    animation: gardenCloudMidgroundFadeScale 165s ease-in-out infinite;
}

/* Midground cloud without scaling */

@keyframes gardenCloudMidgroundFade {
    0% {
        transform: translateX(-18%);
        opacity: 0;
    }

    15% {
        opacity: 0.32;
    }

    75% {
        opacity: 0.32;
    }

    100% {
        transform: translateX(118%);
        opacity: 0;
    }
}

/* Midground cloud with subtle scaling */

@keyframes gardenCloudMidgroundFadeScale {
    0% {
        transform: translateX(-18%) scale(1);
        opacity: 0;
    }

    15% {
        opacity: 0.28;
    }

    50% {
        transform: translateX(50%) scale(1.04);
        opacity: 0.28;
    }

    75% {
        opacity: 0.28;
    }

    100% {
        transform: translateX(118%) scale(1);
        opacity: 0;
    }
}