/* ============================================
   SCENE - soare, nori, iarba, particule
   Animatii subtile, lente, in fundal
   ============================================ */

/* ----- SOARE ----- */
.sun {
    position: fixed;
    top: 5%;
    right: 8%;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle,
        var(--sun) 40%,
        rgba(255, 213, 79, 0.3) 70%,
        transparent 100%);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
    /* Fara pulsare agresiva - doar un glow static */
    filter: drop-shadow(0 0 30px rgba(255, 213, 79, 0.4));
}

/* ----- NORI ----- */
.cloud {
    position: fixed;
    background: white;
    border-radius: 100px;
    opacity: 0.85;
    z-index: 1;
    pointer-events: none;
    filter: blur(0.5px);
    animation: cloudDrift 120s linear infinite;
}
.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    background: white;
    border-radius: 50%;
}
.cloud--1 {
    width: 100px; height: 30px;
    top: 15%; left: -120px;
    animation-duration: 140s;
}
.cloud--1::before { width: 50px; height: 50px; top: -25px; left: 15px; }
.cloud--1::after  { width: 35px; height: 35px; top: -18px; right: 15px; }

.cloud--2 {
    width: 140px; height: 40px;
    top: 25%; left: -160px;
    animation-duration: 180s;
    animation-delay: -60s;
}
.cloud--2::before { width: 70px; height: 70px; top: -35px; left: 20px; }
.cloud--2::after  { width: 45px; height: 45px; top: -20px; right: 20px; }

@keyframes cloudDrift {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 250px)); }
}

/* ----- IARBA SVG FUNDAL ----- */
.grass-field {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 160px;
    z-index: 2;
    pointer-events: none;
}
.grass-field svg {
    width: 100%;
    height: 100%;
    display: block;
}
/* Doar firele din strat 1 si 2 se leagana - lent si subtil */
.grass-blade {
    transform-origin: bottom center;
    animation: grassSway 5s ease-in-out infinite;
}
@keyframes grassSway {
    0%, 100% { transform: rotate(-1.5deg); }
    50%      { transform: rotate(1.5deg); }
}

/* ----- PARTICULE POLEN (mult mai putine, mai lente) ----- */
.particle {
    position: fixed;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 200, 0.7);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 0 6px rgba(255, 255, 150, 0.5);
    animation: particleFloat 25s linear infinite;
    opacity: 0;
}
@keyframes particleFloat {
    0%   { transform: translate(0, 100vh); opacity: 0; }
    10%  { opacity: 0.6; }
    90%  { opacity: 0.6; }
    100% { transform: translate(80px, -50px); opacity: 0; }
}

@media (max-width: 600px) {
    .sun { width: 80px; height: 80px; }
    .grass-field { height: 120px; }
}