/* ============================================================
   We4Cleaning — Animations
   Framer Motion-style animations with pure CSS
   ============================================================ */

/* --- Reveal on Scroll (triggered by IntersectionObserver) --- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* Stagger delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* --- Float animation --- */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.animate-float {
    animation: float 5s ease-in-out infinite;
}

.animate-float-slow {
    animation: float 7s ease-in-out infinite;
}

.animate-float-delay {
    animation: float 5s ease-in-out 1s infinite;
}

/* --- Pulse glow --- */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(13, 148, 136, 0.2);
    }
    50% {
        box-shadow: 0 0 40px rgba(13, 148, 136, 0.4);
    }
}

.animate-pulse-glow {
    animation: pulseGlow 3s ease-in-out infinite;
}

/* --- Gradient shift --- */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradientShift 4s ease infinite;
}

/* --- Slide in from sides --- */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Fade in --- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- Particle / Dot rotation --- */
@keyframes orbit {
    from { transform: rotate(0deg) translateX(120px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}

.animate-orbit {
    animation: orbit 20s linear infinite;
}

/* --- Counter animation --- */
@keyframes countUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Shimmer loading effect --- */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg,
        var(--bg-card) 25%,
        var(--bg-elevated) 50%,
        var(--bg-card) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

/* --- Hero background particles --- */
@keyframes particleFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    25% { transform: translate(50px, -80px) scale(1.2); opacity: 0.6; }
    50% { transform: translate(-30px, -150px) scale(0.8); opacity: 0.4; }
    75% { transform: translate(80px, -50px) scale(1.1); opacity: 0.5; }
}

@keyframes particleFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
    33% { transform: translate(-60px, -100px) scale(1.3); opacity: 0.5; }
    66% { transform: translate(40px, -120px) scale(0.9); opacity: 0.3; }
}

.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.particle-1 {
    width: 6px;
    height: 6px;
    background: var(--primary);
    animation: particleFloat1 12s ease-in-out infinite;
}

.particle-2 {
    width: 4px;
    height: 4px;
    background: var(--accent);
    animation: particleFloat2 15s ease-in-out infinite;
}

.particle-3 {
    width: 8px;
    height: 8px;
    background: var(--secondary);
    animation: particleFloat1 18s ease-in-out infinite;
    animation-delay: -5s;
}

/* --- Ripple button effect --- */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* --- Page transition --- */
.page-enter {
    animation: fadeInScale 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- Typewriter --- */
@keyframes blink {
    0%, 50% { border-color: var(--primary); }
    51%, 100% { border-color: transparent; }
}

.typewriter-cursor {
    border-right: 2px solid var(--primary);
    animation: blink 0.8s step-end infinite;
    padding-right: 2px;
}

/* --- Hero gradient orbs --- */
.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    opacity: 0.2;
}

.orb-primary {
    background: var(--primary);
    width: 400px;
    height: 400px;
    animation: float 8s ease-in-out infinite;
}

.orb-accent {
    background: var(--accent);
    width: 300px;
    height: 300px;
    animation: float 10s ease-in-out infinite;
    animation-delay: -3s;
}

.orb-warm {
    background: var(--secondary);
    width: 250px;
    height: 250px;
    animation: float 12s ease-in-out infinite;
    animation-delay: -6s;
}