/* 
* Combined animations.css
* Contains elements from rain.css and seedling.css to eliminate duplicates
* KORRIGIERT: Alte Raindrop styles entfernt (werden jetzt direkt in rain-effects.js erstellt)
*/

/* ===== SEEDLING ELEMENT STYLES - KORRIGIERT ===== */
.container.reveal-seedling .seedling-element {
    opacity: 1;
    /* KEINE Positionierungs-Styles hier! */
}

.seedling-element {
    width: 120px;
    height: 150px;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* DEFAULT: zentriert */
    transform-origin: center bottom;
}

/* Seedling im Container - ÜBERSCHREIBT justify-content */
.seedling-element.in-container {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    justify-content: flex-end !important; /* ÜBERSCHREIBT center */
}

/* Seedling ist klickbar - KEINE Animation! */
.seedling-element.clickable {
    cursor: pointer;
    pointer-events: auto !important;
}

/* Neue Klasse für wartenden Zustand */
.seedling-element.waiting-for-scroll {
    pointer-events: none !important;
    cursor: default !important;
}

/* Seedling wurde geklickt */
.seedling-element.clicked {
    cursor: default;
}

/* Seedling growth classes */
.seedling-element.growing .seedling-glow {
    animation: stronger-glow 2s forwards;
}

@keyframes stronger-glow {
    0% {
        opacity: 0.2;
        background: radial-gradient(ellipse at center, rgba(149, 242, 186, 0.4) 0%, transparent 70%);
    }
    100% {
        opacity: 0.6;
        background: radial-gradient(ellipse at center, rgba(149, 242, 186, 0.8) 0%, rgba(37, 213, 103, 0.2) 60%, transparent 80%);
    }
}

/* Animation for light pulses */
@keyframes light-pulse {
    0% { opacity: 0.1; }
    50% { opacity: 0.3; }
    100% { opacity: 0.1; }
}

/* Size adjustments for SVG in grown state */
.seedling-element.growing svg {
    transform: scale(1.15);
    filter: drop-shadow(0 0 10px rgba(76, 175, 80, 0.5));
}

/* SVG Container */
.seedling-svg-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.seedling-svg-container svg {
    width: 100px;
    height: 120px;
    filter: drop-shadow(0 0 5px rgba(76, 175, 80, 0.3));
    transition: all 3s ease;
}

/* Seedling glow background */
.seedling-glow {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(ellipse at center, rgba(149, 242, 186, 0.4) 0%, transparent 70%);
    opacity: 0;
    animation: light-pulse 4s infinite;
}

/* ===== FLOWER ANIMATIONS ===== */
/* Beibehaltung der original growing-flower Animation für Kompatibilität */
#flower.growing-flower {
    animation: grow-flower 2s forwards !important;
    opacity: 1 !important;
}

@keyframes grow-flower {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    75% { transform: scale(1.3); }
    100% { transform: scale(1.5); opacity: 1 !important; }
}

/* Growing flower animation - NUN AN ORT UND STELLE */
#flower.blooming-flower {
    animation: bloom-flower 3s forwards !important;
    opacity: 1 !important;
    transform-origin: center bottom;
    visibility: visible !important;
}

@keyframes bloom-flower {
    0% { transform: scale(1); opacity: 1 !important; }
    40% { transform: scale(1.4); opacity: 1 !important; }
    70% { transform: scale(1.6); opacity: 1 !important; }
    100% { transform: scale(1.8); opacity: 1 !important; }
}

#flower-glow.blooming-glow {
    animation: bloom-glow 3s forwards !important;
    opacity: 0.5 !important;
    visibility: visible !important;
}

@keyframes bloom-glow {
    0% { r: 15; opacity: 0.3 !important; }
    50% { r: 25; opacity: 0.6 !important; }
    100% { r: 35; opacity: 0.8 !important; }
}

/* Flower overlay für die Effekte um die Blume */
.flower-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Glow-Effekt um die Blume */
.floating-flower-glow {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(
        circle, 
        rgba(255, 217, 0, 0.7) 0%, 
        rgba(255, 182, 45, 0.5) 30%, 
        rgba(255, 152, 18, 0.3) 60%, 
        transparent 80%
    );
    transform: translate(-50%, -50%);
    opacity: 0.5;
    will-change: transform, width, height, opacity;
    filter: blur(5px);
}

/* ===== OPTIMIZED PARTICLE EFFECTS ===== */
/* Pollen Partikel - Performance optimiert mit Hardware-Beschleunigung */
.pollen-particle {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;    
    /* Optimierte GPU-beschleunigte Properties */
    will-change: transform, opacity;
    transform: translate3d(var(--start-x), var(--start-y), 0);
    backface-visibility: hidden;
    
    /* Vereinfachter Glow-Effekt - nur ein Shadow */
    background: radial-gradient(circle, 
        rgba(149, 242, 186, 1) 0%, 
        rgba(95, 242, 186, 0.6) 60%, 
        transparent 100%);
    
    /* Reduzierter Box-Shadow für bessere Performance */
    box-shadow: 0 0 8px rgba(149, 242, 186, 0.7);
    
    /* Einfacheres Pulsieren */
    animation: pollen-pulse-optimized 1.2s ease-in-out infinite alternate;
}

/* Optimierte Drift Animation - direkte transform-Werte */
.pollen-particle.pollen-drift {
    animation: pollen-drift-optimized 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards, 
               pollen-pulse-optimized 1.2s ease-in-out infinite alternate;
    animation-delay: var(--delay, 0s);
}

/* Hardware-beschleunigte Drift Animation - ORGANISCHER */
@keyframes pollen-drift-optimized {
    0% {
        opacity: 0;
        transform: translate3d(var(--start-x), var(--start-y), 0) scale(0.1);
    }
    3% {
        opacity: 0.6;
        transform: translate3d(var(--start-x), var(--start-y), 0) scale(0.8);
    }
    8% {
        opacity: 1;
        transform: translate3d(var(--start-x), var(--start-y), 0) scale(1);
    }
    15% {
        opacity: 1;
        transform: translate3d(
            calc(var(--start-x) + (var(--end-x) - var(--start-x)) * 0.1), 
            calc(var(--start-y) + (var(--end-y) - var(--start-y)) * 0.05), 
            0
        ) scale(1);
    }
    25% {
        opacity: 1;
        transform: translate3d(
            calc(var(--start-x) + (var(--end-x) - var(--start-x)) * 0.25), 
            calc(var(--start-y) + (var(--end-y) - var(--start-y)) * 0.15), 
            0
        ) scale(0.95);
    }
    50% {
        opacity: 0.9;
        transform: translate3d(
            calc(var(--start-x) + (var(--end-x) - var(--start-x)) * 0.6), 
            calc(var(--start-y) + (var(--end-y) - var(--start-y)) * 0.4), 
            0
        ) scale(0.85);
    }
    75% {
        opacity: 0.7;
        transform: translate3d(
            calc(var(--start-x) + (var(--end-x) - var(--start-x)) * 0.85), 
            calc(var(--start-y) + (var(--end-y) - var(--start-y)) * 0.7), 
            0
        ) scale(0.7);
    }
    90% {
        opacity: 0.4;
        transform: translate3d(
            calc(var(--start-x) + (var(--end-x) - var(--start-x)) * 0.95), 
            calc(var(--start-y) + (var(--end-y) - var(--start-y)) * 0.9), 
            0
        ) scale(0.5);
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--end-x), var(--end-y), 0) scale(0.2);
    }
}

/* Optimiertes Pulsieren - weniger rechenintensiv */
@keyframes pollen-pulse-optimized {
    0% { 
        filter: brightness(1);
    }
    100% { 
        filter: brightness(1.3);
    }
}

/* Vereinfachte Größenvarianten */
.pollen-particle.small {
    width: 5px;
    height: 5px;
}

.pollen-particle.medium {
    width: 7px;
    height: 7px;
}

.pollen-particle.large {
    width: 9px;
    height: 9px;
}