/**
 * Washington Home Improvements - Tool Showcase Animations
 * Weed Eater & Front Loader Animations with Particles
 */

/* ========================================
   WEED EATER - SHAKE ANIMATION (MORE DRAMATIC)
   ======================================== */

.weedeater-shake {
    animation: weedEaterShake 0.15s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes weedEaterShake {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-2px, -1px) rotate(-0.5deg);
    }
    50% {
        transform: translate(2px, 1px) rotate(0.5deg);
    }
    75% {
        transform: translate(-1px, 1px) rotate(-0.3deg);
    }
}

/* ========================================
   GREEN GRASS PARTICLES (NO BOX, JUST DOTS)
   ======================================== */

.grass-particles {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 1px;
    pointer-events: none;
    z-index: 10;
    background: transparent !important;
    border: none !important;
}

/* Spawn ONLY dots flying upward */
.grass-particles {
    animation: spawnGrassDotsOnly 0.15s linear infinite;
}

@keyframes spawnGrassDotsOnly {
    0% {
        box-shadow:
            0 0 0 2px #7CB342,
            -12px -10px 0 2px #8BC34A,
            12px -8px 0 2px #9CCC65,
            -18px -20px 0 3px #7CB342,
            18px -18px 0 2px #8BC34A,
            -24px -30px 0 2px #9CCC65,
            24px -35px 0 2px #7CB342,
            -30px -45px 0 2px #8BC34A,
            30px -50px 0 2px #9CCC65,
            -36px -60px 0 2px rgba(124, 179, 66, 0.8),
            36px -65px 0 2px rgba(139, 195, 74, 0.7),
            -42px -75px 0 2px rgba(156, 204, 101, 0.5),
            42px -80px 0 2px rgba(124, 179, 66, 0.3);
    }
    100% {
        box-shadow:
            2px -5px 0 2px rgba(124, 179, 66, 0.9),
            -14px -15px 0 2px rgba(139, 195, 74, 0.85),
            14px -13px 0 2px rgba(156, 204, 101, 0.8),
            -20px -25px 0 3px rgba(124, 179, 66, 0.75),
            20px -23px 0 2px rgba(139, 195, 74, 0.7),
            -26px -35px 0 2px rgba(156, 204, 101, 0.65),
            26px -40px 0 2px rgba(124, 179, 66, 0.6),
            -32px -50px 0 2px rgba(139, 195, 74, 0.5),
            32px -55px 0 2px rgba(156, 204, 101, 0.4),
            -38px -65px 0 2px rgba(124, 179, 66, 0.3),
            38px -70px 0 2px rgba(139, 195, 74, 0.2),
            -44px -80px 0 2px rgba(156, 204, 101, 0.15),
            44px -85px 0 2px rgba(124, 179, 66, 0.1);
    }
}

/* ========================================
   FRONT LOADER - ROCK BACK AND FORTH (DIGGING)
   ======================================== */

.frontloader-drive-in {
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
    animation: frontLoaderDigging 3s ease-in-out infinite;
}

@keyframes frontLoaderDigging {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }
    20% {
        transform: translateX(-25px) rotate(-2deg);
    }
    40% {
        transform: translateX(20px) rotate(2deg);
    }
    60% {
        transform: translateX(-20px) rotate(-1.5deg);
    }
    80% {
        transform: translateX(15px) rotate(1.5deg);
    }
}

/* ========================================
   BROWN DIRT PARTICLES (MANY FALLING CHUNKS)
   ======================================== */

.dirt-particles {
    position: absolute;
    top: 20%;
    left: 35%;
    width: 1px;
    height: 1px;
    pointer-events: none;
    z-index: 10;
    background: transparent !important;
    border: none !important;
}

/* Spawn MANY dirt chunks continuously */
.dirt-particles {
    animation: spawnDirtChunks 0.3s linear infinite;
}

@keyframes spawnDirtChunks {
    0% {
        box-shadow:
            0 0 0 2px #8B4513,
            -15px 10px 0 2px #A0522D,
            15px 8px 0 2px #CD853F,
            -22px 25px 0 2px #8B4513,
            22px 22px 0 2px #A0522D,
            -30px 40px 0 2px #CD853F,
            30px 45px 0 2px #8B4513,
            -38px 60px 0 2px #A0522D,
            38px 65px 0 2px #CD853F,
            -45px 80px 0 2px rgba(139, 69, 19, 0.9),
            45px 85px 0 2px rgba(160, 82, 45, 0.8),
            -52px 100px 0 2px rgba(205, 133, 63, 0.7),
            52px 105px 0 2px rgba(139, 69, 19, 0.6),
            -58px 120px 0 2px rgba(160, 82, 45, 0.5),
            58px 125px 0 2px rgba(205, 133, 63, 0.4),
            -64px 140px 0 2px rgba(139, 69, 19, 0.3),
            64px 145px 0 2px rgba(160, 82, 45, 0.2);
    }
    100% {
        box-shadow:
            -5px 12px 0 2px rgba(139, 69, 19, 0.95),
            -18px 18px 0 2px rgba(160, 82, 45, 0.9),
            18px 15px 0 2px rgba(205, 133, 63, 0.9),
            -25px 32px 0 2px rgba(139, 69, 19, 0.85),
            25px 30px 0 2px rgba(160, 82, 45, 0.85),
            -33px 48px 0 2px rgba(205, 133, 63, 0.8),
            33px 52px 0 2px rgba(139, 69, 19, 0.8),
            -41px 68px 0 2px rgba(160, 82, 45, 0.7),
            41px 72px 0 2px rgba(205, 133, 63, 0.7),
            -48px 88px 0 2px rgba(139, 69, 19, 0.6),
            48px 92px 0 2px rgba(160, 82, 45, 0.55),
            -55px 108px 0 2px rgba(205, 133, 63, 0.45),
            55px 112px 0 2px rgba(139, 69, 19, 0.4),
            -61px 128px 0 2px rgba(160, 82, 45, 0.3),
            61px 132px 0 2px rgba(205, 133, 63, 0.25),
            -67px 148px 0 2px rgba(139, 69, 19, 0.15),
            67px 152px 0 2px rgba(160, 82, 45, 0.1);
    }
}

/* ========================================
   SCROLL TRIGGER ANIMATIONS (REMOVED - Always animate)
   ======================================== */

/* Animations now always run - no scroll trigger needed */

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 968px) {
    .weedeater-shake {
        animation-duration: 0.12s;
    }

    .grass-particles {
        width: 80px;
        height: 80px;
    }

    .dirt-particles {
        width: 120px;
        height: 120px;
    }

    .frontloader-drive-in {
        transform: translateX(-250px);
    }

    @keyframes frontLoaderDriveIn {
        0% {
            opacity: 0;
            transform: translateX(-250px);
        }
        60% {
            opacity: 1;
            transform: translateX(15px);
        }
        75% {
            transform: translateX(-8px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
}

@media (max-width: 640px) {
    .weedeater-shake {
        animation-duration: 0.15s;
    }

    .grass-particles,
    .dirt-particles {
        display: none;
    }

    .frontloader-drive-in {
        animation-duration: 2s;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

.weedeater-shake,
.frontloader-drive-in {
    will-change: transform;
}

.grass-particles,
.dirt-particles {
    will-change: box-shadow, opacity;
}

/* ========================================
   FORCE SEO SECTIONS TO SHOW
   ======================================== */

.seo-content-section,
.power-cta-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 100 !important;
    transform: none !important;
}

.seo-content-section .container,
.power-cta-section .container {
    display: block !important;
    visibility: visible !important;
}

/* Force all children visible too */
.seo-content-section *,
.power-cta-section * {
    opacity: 1 !important;
    transform: none !important;
}

/* Override any scroll-reveal hiding */
.seo-content-section [data-scroll-reveal],
.power-cta-section [data-scroll-reveal] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}