/* ============================================================
   GREENEYE ECOPACK - Animations
   ============================================================
   Scroll-triggered animations and micro-interactions
   ============================================================ */

/* ============================================================
   1. SCROLL REVEAL ANIMATIONS (Intersection Observer)
   ============================================================ */

[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].visible {
    opacity: 1;
    transform: translateY(0);
}

[data-animate="fade-up"] {
    transform: translateY(40px);
}

[data-animate="fade-up"].visible {
    transform: translateY(0);
}

[data-animate="fade-right"] {
    transform: translateX(-40px);
}

[data-animate="fade-right"].visible {
    transform: translateX(0);
}

[data-animate="fade-left"] {
    transform: translateX(40px);
}

[data-animate="fade-left"].visible {
    transform: translateX(0);
}

[data-animate="zoom-in"] {
    transform: scale(0.95);
}

[data-animate="zoom-in"].visible {
    transform: scale(1);
}

/* Stagger children */
[data-stagger] > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-stagger].visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-stagger].visible > *:nth-child(2) { transition-delay: 0.10s; }
[data-stagger].visible > *:nth-child(3) { transition-delay: 0.15s; }
[data-stagger].visible > *:nth-child(4) { transition-delay: 0.20s; }
[data-stagger].visible > *:nth-child(5) { transition-delay: 0.25s; }
[data-stagger].visible > *:nth-child(6) { transition-delay: 0.30s; }
[data-stagger].visible > *:nth-child(7) { transition-delay: 0.35s; }
[data-stagger].visible > *:nth-child(8) { transition-delay: 0.40s; }
[data-stagger].visible > *:nth-child(9) { transition-delay: 0.45s; }
[data-stagger].visible > *:nth-child(10) { transition-delay: 0.50s; }

[data-stagger].visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   2. COUNTER ANIMATION (for stats)
   ============================================================ */

.counter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   3. PULSE ANIMATION (WhatsApp float)
   ============================================================ */

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.whatsapp-float {
    animation: pulse 2s ease-in-out infinite;
}

.whatsapp-float:hover {
    animation: none;
}

/* ============================================================
   4. FADE IN (for page load)
   ============================================================ */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.6s ease forwards;
}

/* ============================================================
   5. SLIDE IN (for mobile menu)
   ============================================================ */

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.slide-in-right {
    animation: slideInRight 0.3s ease forwards;
}

/* ============================================================
   6. SPINNER (loading state)
   ============================================================ */

@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ============================================================
   7. TOAST NOTIFICATION
   ============================================================ */

@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.toast {
    animation: slideDown 0.4s ease forwards;
}

/* ============================================================
   8. HOVER EFFECTS (utility)
   ============================================================ */

.hover-lift {
    transition: transform var(--transition), box-shadow var(--transition);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.hover-grow {
    transition: transform var(--transition);
}

.hover-grow:hover {
    transform: scale(1.05);
}

.hover-underline {
    position: relative;
}

.hover-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width var(--transition);
}

.hover-underline:hover::after {
    width: 100%;
}