/* aa-particles.css - Campaign Particle Effects
 * Part of WrittenExpressions Design System
 * 
 * Dependencies: aa-variables.css
 * 
 * Purpose: Animated particle effects for seasonal campaigns
 * - Falling hearts (Valentine's, romantic occasions)
 * - Falling snowflakes (Winter, Christmas)
 * - Rising confetti (Celebrations, sales)
 * 
 * Used on: Home, Products (when campaign is active)
 */

/* =============================================================================
   PARTICLE CONTAINER
   ============================================================================= */

.particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* =============================================================================
   HEARTS PARTICLE EFFECT
   ============================================================================= */

.particle-heart {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0.8;
    animation: fall-heart linear infinite; /* Infinite loop - each heart continuously falls */
    pointer-events: none;
}

.particle-heart::before {
    content: "\2764\FE0F"; /* Red heart emoji */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

@keyframes fall-heart {
    0% {
        top: 0%;
        transform: translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        top: 100%;
        transform: translateX(var(--drift)) rotate(360deg);
        opacity: 0;
    }
}

/* =============================================================================
   SNOWFLAKES PARTICLE EFFECT
   ============================================================================= */

.particle-snowflake {
    position: absolute;
    color: white;
    font-size: 1.2rem;
    opacity: 0.9;
    animation: fall-snowflake linear infinite; /* Infinite loop - each snowflake continuously falls */
    pointer-events: none;
}

.particle-snowflake::before {
    content: "\2744\FE0F"; /* Snowflake emoji */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

@keyframes fall-snowflake {
    0% {
        top: -10%;
        transform: translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.9;
    }
    90% {
        opacity: 0.9;
    }
    100% {
        top: 110%;
        transform: translateX(var(--drift)) rotate(360deg);
        opacity: 0;
    }
}

/* =============================================================================
   CONFETTI PARTICLE EFFECT
   ============================================================================= */

.particle-confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    animation: rise-confetti linear infinite; /* Infinite loop - each confetti continuously rises */
    pointer-events: none;
}

@keyframes rise-confetti {
    0% {
        bottom: -10%;
        transform: translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        bottom: 110%;
        transform: translateX(var(--drift)) rotate(720deg);
        opacity: 0;
    }
}

/* =============================================================================
   CLOVERS PARTICLE EFFECT (St. Patrick's Day)
   ============================================================================= */

.particle-clover {
    position: absolute;
    font-size: 1.4rem;
    opacity: 0.85;
    animation: fall-clover linear infinite;
    pointer-events: none;
}

.particle-clover::before {
    content: "\1F340"; /* Four-leaf clover emoji 🍀 */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

@keyframes fall-clover {
    0% {
        top: -10%;
        transform: translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.85;
    }
    90% {
        opacity: 0.85;
    }
    100% {
        top: 110%;
        transform: translateX(var(--drift)) rotate(540deg);
        opacity: 0;
    }
}

/* =============================================================================
   EASTER EGGS PARTICLE EFFECT (Easter)
   ============================================================================= */

.particle-egg {
    position: absolute;
    font-size: 1.6rem;
    opacity: 0.9;
    animation: fall-egg linear infinite;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.particle-egg::before {
    content: "🥚"; /* Egg emoji */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    display: inline-block;
    /* Pastel color overlay applied inline via custom property */
    filter: var(--egg-color-filter, none);
}

/* Pastel color filters for eggs */
.particle-egg.pastel-pink::before {
    filter: hue-rotate(330deg) saturate(0.6) brightness(1.2);
}

.particle-egg.pastel-blue::before {
    filter: hue-rotate(200deg) saturate(0.5) brightness(1.3);
}

.particle-egg.pastel-yellow::before {
    filter: hue-rotate(50deg) saturate(0.7) brightness(1.1);
}

.particle-egg.pastel-green::before {
    filter: hue-rotate(100deg) saturate(0.5) brightness(1.2);
}

.particle-egg.pastel-purple::before {
    filter: hue-rotate(270deg) saturate(0.5) brightness(1.2);
}

.particle-egg.pastel-peach::before {
    filter: hue-rotate(20deg) saturate(0.6) brightness(1.15);
}

.particle-egg.pastel-lavender::before {
    filter: hue-rotate(280deg) saturate(0.4) brightness(1.25);
}

.particle-egg.pastel-mint::before {
    filter: hue-rotate(140deg) saturate(0.45) brightness(1.3);
}

@keyframes fall-egg {
    0% {
        top: -10%;
        transform: translateX(0) rotate(-15deg) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 0.9;
        transform: translateX(calc(var(--drift) * 0.2)) rotate(0deg) scale(1);
    }
    50% {
        transform: translateX(calc(var(--drift) * 0.5)) rotate(10deg) scale(1);
    }
    90% {
        opacity: 0.9;
    }
    100% {
        top: 110%;
        transform: translateX(var(--drift)) rotate(25deg) scale(0.9);
        opacity: 0;
    }
}

/* =============================================================================
   FLOWERS PARTICLE EFFECT (Mother's Day, Spring)
   ============================================================================= */

.particle-flower {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0.85;
    animation: fall-flower linear infinite;
    pointer-events: none;
}

/* Base fallback: cherry blossom */
.particle-flower::before {
    content: "\1F338"; /* 🌸 cherry blossom */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

.particle-flower.flower-cherry::before {
    content: "\1F338"; /* 🌸 cherry blossom */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

.particle-flower.flower-hibiscus::before {
    content: "\1F33A"; /* 🌺 hibiscus */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

.particle-flower.flower-sunflower::before {
    content: "\1F33B"; /* 🌻 sunflower */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

.particle-flower.flower-tulip::before {
    content: "\1F337"; /* 🌷 tulip */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

.particle-flower.flower-blossom::before {
    content: "\1F33C"; /* 🌼 white/yellow flower */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

.particle-flower.flower-rose::before {
    content: "\1F339"; /* 🌹 rose */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

.particle-flower.flower-bouquet::before {
    content: "\1F490"; /* 💐 bouquet */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

@keyframes fall-flower {
    0% {
        top: -10%;
        transform: translateX(0) rotate(0deg) scale(0.85);
        opacity: 0;
    }
    10% {
        opacity: 0.85;
        transform: translateX(calc(var(--drift) * 0.1)) rotate(30deg) scale(1);
    }
    50% {
        transform: translateX(calc(var(--drift) * 0.5)) rotate(180deg) scale(1.1);
    }
    90% {
        opacity: 0.85;
    }
    100% {
        top: 110%;
        transform: translateX(var(--drift)) rotate(360deg) scale(0.9);
        opacity: 0;
    }
}

/* =============================================================================
   TIES PARTICLE EFFECT (Father's Day)
   ============================================================================= */

.particle-tie {
    position: absolute;
    font-size: 1.7rem;
    opacity: 0.9;
    animation: fall-tie linear infinite;
    pointer-events: none;
}

.particle-tie::before {
    content: "\1F454"; /* 👔 necktie */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    display: inline-block;
}

/* Color variants via hue-rotate — one tie emoji, many colors */
.particle-tie.tie-red::before    { filter: none; }                                          /* classic red    */
.particle-tie.tie-blue::before   { filter: hue-rotate(200deg) saturate(1.2); }              /* royal blue     */
.particle-tie.tie-green::before  { filter: hue-rotate(120deg) saturate(1.1); }              /* forest green   */
.particle-tie.tie-purple::before { filter: hue-rotate(270deg) saturate(1.1); }              /* purple         */
.particle-tie.tie-gold::before   { filter: hue-rotate(45deg) saturate(1.4) brightness(1.1);} /* golden yellow  */
.particle-tie.tie-navy::before   { filter: hue-rotate(220deg) saturate(0.9) brightness(0.8);} /* navy blue     */

@keyframes fall-tie {
    0% {
        top: -10%;
        transform: translateX(0) rotate(-20deg);
        opacity: 0;
    }
    10% {
        opacity: 0.9;
    }
    25% {
        transform: translateX(calc(var(--drift) * 0.25)) rotate(12deg);
    }
    50% {
        transform: translateX(calc(var(--drift) * 0.5)) rotate(-15deg);
    }
    75% {
        transform: translateX(calc(var(--drift) * 0.75)) rotate(10deg);
    }
    90% {
        opacity: 0.9;
    }
    100% {
        top: 110%;
        transform: translateX(var(--drift)) rotate(-20deg);
        opacity: 0;
    }
}

/* =============================================================================
   FIREWORKS PARTICLE EFFECT (4th of July / Independence Day)
   =============================================================================
   Two-phase animation per particle:
     1. RISE  — a small glowing dot (the rocket) launches from the bottom and
                accelerates toward a random apex in the upper viewport.
     2. BURST — at the apex the dot vanishes and 8 spark-rays explode outward
                radially, then fade to transparent as they travel outward.
   Colors are driven by --fw-rgb (set per color class).
   Height is driven by --fw-height (set inline from Blazor per particle).
   ============================================================================= */

.particle-firework {
    position: absolute;
    bottom: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    pointer-events: none;
    animation: firework-rise-burst linear infinite;
    animation-duration: var(--fw-duration, 3s);
    animation-delay: var(--fw-delay, 0s);
    /* Start invisible; animation keyframes control all visibility */
    background-color: rgba(var(--fw-rgb), 0);
    box-shadow:
        0 0 0 1px rgba(var(--fw-rgb), 0),
        0 0 0 1px rgba(var(--fw-rgb), 0),
        0 0 0 1px rgba(var(--fw-rgb), 0),
        0 0 0 1px rgba(var(--fw-rgb), 0),
        0 0 0 1px rgba(var(--fw-rgb), 0),
        0 0 0 1px rgba(var(--fw-rgb), 0),
        0 0 0 1px rgba(var(--fw-rgb), 0),
        0 0 0 1px rgba(var(--fw-rgb), 0);
    filter: brightness(1.4);
}

/* Secondary burst — 12 smaller sparks fire from the same apex while primary sparks are still travelling */
.particle-firework::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    pointer-events: none;
    background-color: rgba(var(--fw-rgb), 0);
    box-shadow:
         0px  -6px 0 2px rgba(var(--fw-rgb), 0),
         3px  -5px 0 2px rgba(var(--fw-rgb), 0),
         5px  -3px 0 2px rgba(var(--fw-rgb), 0),
         6px   0px 0 2px rgba(var(--fw-rgb), 0),
         5px   3px 0 2px rgba(var(--fw-rgb), 0),
         3px   5px 0 2px rgba(var(--fw-rgb), 0),
         0px   6px 0 2px rgba(var(--fw-rgb), 0),
        -3px   5px 0 2px rgba(var(--fw-rgb), 0),
        -5px   3px 0 2px rgba(var(--fw-rgb), 0),
        -6px   0px 0 2px rgba(var(--fw-rgb), 0),
        -5px  -3px 0 2px rgba(var(--fw-rgb), 0),
        -3px  -5px 0 2px rgba(var(--fw-rgb), 0);
    animation: firework-secondary-burst linear infinite;
    animation-duration: var(--fw-duration, 3s);
    animation-delay: var(--fw-delay, 0s);
}

/* Patriotic palette: red, white, blue + gold and silver accents */
.firework-red    { --fw-rgb: 220,  38,  38; }
.firework-white  { --fw-rgb: 248, 250, 252; }
.firework-blue   { --fw-rgb:  37,  99, 235; }
.firework-gold   { --fw-rgb: 251, 191,  36; }
.firework-silver { --fw-rgb: 148, 163, 184; }

@keyframes firework-rise-burst {

    /* ── PHASE 1: Rocket launches, fades in while accelerating upward ── */
    0% {
        transform: translateY(0) scaleY(2);
        background-color: rgba(var(--fw-rgb), 0);
        box-shadow:
            0 0 0 1px rgba(var(--fw-rgb), 0),
            0 0 0 1px rgba(var(--fw-rgb), 0),
            0 0 0 1px rgba(var(--fw-rgb), 0),
            0 0 0 1px rgba(var(--fw-rgb), 0),
            0 0 0 1px rgba(var(--fw-rgb), 0),
            0 0 0 1px rgba(var(--fw-rgb), 0),
            0 0 0 1px rgba(var(--fw-rgb), 0),
            0 0 0 1px rgba(var(--fw-rgb), 0);
        animation-timing-function: ease-in;
    }

    /* Rocket is fully visible, still rising */
    8% {
        transform: translateY(calc(var(--fw-height, -55vh) * 0.05)) scaleY(1.8);
        background-color: rgba(var(--fw-rgb), 0.9);
        box-shadow:
            0 0 0 1px rgba(var(--fw-rgb), 0),
            0 0 0 1px rgba(var(--fw-rgb), 0),
            0 0 0 1px rgba(var(--fw-rgb), 0),
            0 0 0 1px rgba(var(--fw-rgb), 0),
            0 0 0 1px rgba(var(--fw-rgb), 0),
            0 0 0 1px rgba(var(--fw-rgb), 0),
            0 0 0 1px rgba(var(--fw-rgb), 0),
            0 0 0 1px rgba(var(--fw-rgb), 0);
        animation-timing-function: ease-in;
    }

    /* ── AT APEX: rocket peaks, ready to explode ── */
    47% {
        transform: translateY(var(--fw-height, -55vh)) scaleY(1);
        background-color: rgba(var(--fw-rgb), 1);
        box-shadow:
            0 0 0 1px rgba(var(--fw-rgb), 0),
            0 0 0 1px rgba(var(--fw-rgb), 0),
            0 0 0 1px rgba(var(--fw-rgb), 0),
            0 0 0 1px rgba(var(--fw-rgb), 0),
            0 0 0 1px rgba(var(--fw-rgb), 0),
            0 0 0 1px rgba(var(--fw-rgb), 0),
            0 0 0 1px rgba(var(--fw-rgb), 0),
            0 0 0 1px rgba(var(--fw-rgb), 0);
    }

    /* ── EXPLOSION: rocket dot vanishes, 8 radial sparks appear ── */
    53% {
        transform: translateY(var(--fw-height, -55vh)) scaleY(1);
        background-color: rgba(var(--fw-rgb), 0);
        box-shadow:
             0px  -12px 0 4px rgba(var(--fw-rgb), 1),
             9px   -9px 0 4px rgba(var(--fw-rgb), 1),
            12px    0px 0 4px rgba(var(--fw-rgb), 1),
             9px    9px 0 4px rgba(var(--fw-rgb), 1),
             0px   12px 0 4px rgba(var(--fw-rgb), 1),
            -9px    9px 0 4px rgba(var(--fw-rgb), 1),
           -12px    0px 0 4px rgba(var(--fw-rgb), 1),
            -9px   -9px 0 4px rgba(var(--fw-rgb), 1);
        animation-timing-function: ease-out;
    }

    /* ── BURST FADES: sparks fly outward and fade to nothing ── */
    80% {
        transform: translateY(var(--fw-height, -55vh)) scaleY(1);
        background-color: rgba(var(--fw-rgb), 0);
        box-shadow:
             0px  -80px 3px 0px rgba(var(--fw-rgb), 0),
            57px  -57px 3px 0px rgba(var(--fw-rgb), 0),
            80px    0px 3px 0px rgba(var(--fw-rgb), 0),
            57px   57px 3px 0px rgba(var(--fw-rgb), 0),
             0px   80px 3px 0px rgba(var(--fw-rgb), 0),
           -57px   57px 3px 0px rgba(var(--fw-rgb), 0),
           -80px    0px 3px 0px rgba(var(--fw-rgb), 0),
           -57px  -57px 3px 0px rgba(var(--fw-rgb), 0);
    }

    /* ── INVISIBLE HOLD: gap between launches (sparks collapsed, nothing visible) ── */
    81%, 96% {
        transform: translateY(var(--fw-height, -55vh));
        background-color: rgba(var(--fw-rgb), 0);
        box-shadow:
            0 0 0 0px rgba(var(--fw-rgb), 0),
            0 0 0 0px rgba(var(--fw-rgb), 0),
            0 0 0 0px rgba(var(--fw-rgb), 0),
            0 0 0 0px rgba(var(--fw-rgb), 0),
            0 0 0 0px rgba(var(--fw-rgb), 0),
            0 0 0 0px rgba(var(--fw-rgb), 0),
            0 0 0 0px rgba(var(--fw-rgb), 0),
            0 0 0 0px rgba(var(--fw-rgb), 0);
    }

    /* ── RESET: snap back to launch position while fully invisible ── */
    97%, 100% {
        transform: translateY(0) scaleY(2);
        background-color: rgba(var(--fw-rgb), 0);
        box-shadow:
            0 0 0 0px rgba(var(--fw-rgb), 0),
            0 0 0 0px rgba(var(--fw-rgb), 0),
            0 0 0 0px rgba(var(--fw-rgb), 0),
            0 0 0 0px rgba(var(--fw-rgb), 0),
            0 0 0 0px rgba(var(--fw-rgb), 0),
            0 0 0 0px rgba(var(--fw-rgb), 0),
            0 0 0 0px rgba(var(--fw-rgb), 0),
            0 0 0 0px rgba(var(--fw-rgb), 0);
    }
}

@keyframes firework-secondary-burst {

    /* ── Invisible during rise and primary burst ── */
    0%, 62% {
        box-shadow:
             0px  -6px 0 2px rgba(var(--fw-rgb), 0),
             3px  -5px 0 2px rgba(var(--fw-rgb), 0),
             5px  -3px 0 2px rgba(var(--fw-rgb), 0),
             6px   0px 0 2px rgba(var(--fw-rgb), 0),
             5px   3px 0 2px rgba(var(--fw-rgb), 0),
             3px   5px 0 2px rgba(var(--fw-rgb), 0),
             0px   6px 0 2px rgba(var(--fw-rgb), 0),
            -3px   5px 0 2px rgba(var(--fw-rgb), 0),
            -5px   3px 0 2px rgba(var(--fw-rgb), 0),
            -6px   0px 0 2px rgba(var(--fw-rgb), 0),
            -5px  -3px 0 2px rgba(var(--fw-rgb), 0),
            -3px  -5px 0 2px rgba(var(--fw-rgb), 0);
    }

    /* ── SECONDARY EXPLOSION: 12 smaller sparks appear, offset 15° from primary ring ── */
    63% {
        box-shadow:
             0px  -6px 0 2px rgba(var(--fw-rgb), 1),
             3px  -5px 0 2px rgba(var(--fw-rgb), 1),
             5px  -3px 0 2px rgba(var(--fw-rgb), 1),
             6px   0px 0 2px rgba(var(--fw-rgb), 1),
             5px   3px 0 2px rgba(var(--fw-rgb), 1),
             3px   5px 0 2px rgba(var(--fw-rgb), 1),
             0px   6px 0 2px rgba(var(--fw-rgb), 1),
            -3px   5px 0 2px rgba(var(--fw-rgb), 1),
            -5px   3px 0 2px rgba(var(--fw-rgb), 1),
            -6px   0px 0 2px rgba(var(--fw-rgb), 1),
            -5px  -3px 0 2px rgba(var(--fw-rgb), 1),
            -3px  -5px 0 2px rgba(var(--fw-rgb), 1);
        animation-timing-function: ease-out;
    }

    /* ── SECONDARY FADES: sparks expand outward and vanish ── */
    74% {
        box-shadow:
             0px  -35px 2px 0px rgba(var(--fw-rgb), 0),
            18px  -30px 2px 0px rgba(var(--fw-rgb), 0),
            30px  -18px 2px 0px rgba(var(--fw-rgb), 0),
            35px    0px 2px 0px rgba(var(--fw-rgb), 0),
            30px   18px 2px 0px rgba(var(--fw-rgb), 0),
            18px   30px 2px 0px rgba(var(--fw-rgb), 0),
             0px   35px 2px 0px rgba(var(--fw-rgb), 0),
           -18px   30px 2px 0px rgba(var(--fw-rgb), 0),
           -30px   18px 2px 0px rgba(var(--fw-rgb), 0),
           -35px    0px 2px 0px rgba(var(--fw-rgb), 0),
           -30px  -18px 2px 0px rgba(var(--fw-rgb), 0),
           -18px  -30px 2px 0px rgba(var(--fw-rgb), 0);
    }

    /* ── Invisible hold until cycle resets ── */
    75%, 100% {
        box-shadow:
             0px  -6px 0 2px rgba(var(--fw-rgb), 0),
             3px  -5px 0 2px rgba(var(--fw-rgb), 0),
             5px  -3px 0 2px rgba(var(--fw-rgb), 0),
             6px   0px 0 2px rgba(var(--fw-rgb), 0),
             5px   3px 0 2px rgba(var(--fw-rgb), 0),
             3px   5px 0 2px rgba(var(--fw-rgb), 0),
             0px   6px 0 2px rgba(var(--fw-rgb), 0),
            -3px   5px 0 2px rgba(var(--fw-rgb), 0),
            -5px   3px 0 2px rgba(var(--fw-rgb), 0),
            -6px   0px 0 2px rgba(var(--fw-rgb), 0),
            -5px  -3px 0 2px rgba(var(--fw-rgb), 0),
            -3px  -5px 0 2px rgba(var(--fw-rgb), 0);
    }
}

/* =============================================================================
   AUTUMN LEAVES PARTICLE EFFECT (Thanksgiving / Harvest)
   =============================================================================
   Two-phase animation per leaf:
     1. FLUTTER  — leaf falls with a realistic sinusoidal left/right sway,
                   gently rotating as it descends through the upper viewport.
     2. WIND GUST — at ~45% the leaf is "caught" by an invisible gust; it
                   sweeps hard in the --drift direction, tilts dramatically,
                   and accelerates off-screen.
   ::after trail — during the gust phase, ghost-dot motion-blur streaks appear
                   behind the leaf using the same box-shadow spark trick used
                   by the fireworks.  The parent hue-rotate filter is inherited
                   automatically, so trail dots always match the leaf color.
   Colors driven by hue-rotate utility classes (amber/crimson/gold/russet/bronze).
   Leaf type (maple 🍁 / autumn 🍂 / wheat 🌾) set per element via class.
   ============================================================================= */

.particle-leaf {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0;
    animation: leaf-harvest-fall linear infinite;
    pointer-events: none;
}

/* ── Leaf type variants ── */
.particle-leaf::before {
    content: "\1F341"; /* 🍁 maple leaf — default */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    display: inline-block;
}

.particle-leaf.leaf-maple::before {
    content: "\1F341"; /* 🍁 maple leaf */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

.particle-leaf.leaf-fall::before {
    content: "\1F342"; /* 🍂 autumn leaf */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

.particle-leaf.leaf-wheat::before {
    content: "\1F33E"; /* 🌾 wheat / harvest */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

/* ── Warm autumn color palette via hue-rotate ── */
.particle-leaf.leaf-amber   { filter: none; }                                                  /* natural amber   */
.particle-leaf.leaf-crimson { filter: hue-rotate(340deg) saturate(1.4); }                      /* deep crimson    */
.particle-leaf.leaf-gold    { filter: hue-rotate(35deg)  saturate(1.5) brightness(1.1); }      /* harvest gold    */
.particle-leaf.leaf-russet  { filter: hue-rotate(15deg)  saturate(0.9) brightness(0.8); }      /* russet brown    */
.particle-leaf.leaf-bronze  { filter: hue-rotate(25deg)  saturate(0.85) brightness(0.85); }    /* bronze          */

/* ── Wind-gust motion trail (box-shadow sparks, same trick as fireworks) ── */
/* Appears only during the gust phase; color inherited via parent hue-rotate  */
.particle-leaf::after {
    content: '';
    position: absolute;
    top: 30%;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    pointer-events: none;
    /* All trail dots invisible at rest */
    box-shadow:
         -10px  -2px 3px 2px rgba(180, 100, 20, 0),
         -20px   1px 3px 2px rgba(180, 100, 20, 0),
         -30px  -1px 3px 1px rgba(180, 100, 20, 0),
         -42px   2px 2px 1px rgba(180, 100, 20, 0),
         -55px   0px 2px 1px rgba(180, 100, 20, 0),
         -70px  -2px 2px 0px rgba(180, 100, 20, 0);
    animation: leaf-gust-trail linear infinite;
    animation-duration: var(--leaf-duration, 6s);
    animation-delay: var(--leaf-delay, 0s);
}

@keyframes leaf-harvest-fall {

    /* ── Phase 1 start: fade in, leaf enters from top ── */
    0% {
        top: -8%;
        transform: translateX(0) rotate(0deg) scale(0.75);
        opacity: 0;
        animation-timing-function: ease-in;
    }

    5% {
        opacity: 0.9;
        transform: translateX(-18px) rotate(-22deg) scale(1);
    }

    /* ── Flutter: sinusoidal left/right sway as leaf descends ── */
    15% {
        top: 12%;
        transform: translateX(22px) rotate(18deg) scale(1);
        animation-timing-function: ease-in-out;
    }

    25% {
        top: 22%;
        transform: translateX(-28px) rotate(-30deg) scale(1.05);
    }

    35% {
        top: 32%;
        transform: translateX(26px) rotate(22deg) scale(1);
    }

    /* ── Phase 2: wind gust begins — leaf starts to be swept sideways ── */
    45% {
        top: 42%;
        transform: translateX(calc(var(--drift, 60px) * 0.3)) rotate(-8deg) scale(0.95);
        opacity: 0.9;
        animation-timing-function: ease-in;
    }

    /* ── Full gust: swept hard, dramatic tilt ── */
    60% {
        top: 58%;
        transform: translateX(calc(var(--drift, 60px) * 1.4)) rotate(195deg) scale(0.82);
        opacity: 0.75;
        animation-timing-function: ease-out;
    }

    /* ── Phase 3: settle — tumbles and fades ── */
    78% {
        top: 76%;
        transform: translateX(calc(var(--drift, 60px) * 1.8)) rotate(250deg) scale(0.72);
        opacity: 0.45;
    }

    90% {
        top: 92%;
        transform: translateX(calc(var(--drift, 60px) * 2.0)) rotate(300deg) scale(0.65);
        opacity: 0;
    }

    /* ── Reset: invisible snap back to top before next cycle ── */
    91%, 100% {
        top: -8%;
        transform: translateX(0) rotate(0deg) scale(0.75);
        opacity: 0;
    }
}

@keyframes leaf-gust-trail {

    /* ── Invisible during flutter phase ── */
    0%, 42% {
        box-shadow:
             -10px  -2px 3px 2px rgba(180, 100, 20, 0),
             -20px   1px 3px 2px rgba(180, 100, 20, 0),
             -30px  -1px 3px 1px rgba(180, 100, 20, 0),
             -42px   2px 2px 1px rgba(180, 100, 20, 0),
             -55px   0px 2px 1px rgba(180, 100, 20, 0),
             -70px  -2px 2px 0px rgba(180, 100, 20, 0);
    }

    /* ── Trail blazes during gust sweep ── */
    50% {
        box-shadow:
             -10px  -2px 3px 2px rgba(180, 100, 20, 0.70),
             -20px   1px 3px 2px rgba(180, 100, 20, 0.55),
             -30px  -1px 3px 1px rgba(180, 100, 20, 0.40),
             -42px   2px 2px 1px rgba(180, 100, 20, 0.28),
             -55px   0px 2px 1px rgba(180, 100, 20, 0.15),
             -70px  -2px 2px 0px rgba(180, 100, 20, 0.05);
    }

    /* ── Trail fades as gust ends ── */
    68% {
        box-shadow:
             -10px  -2px 3px 2px rgba(180, 100, 20, 0),
             -20px   1px 3px 2px rgba(180, 100, 20, 0),
             -30px  -1px 3px 1px rgba(180, 100, 20, 0),
             -42px   2px 2px 1px rgba(180, 100, 20, 0),
             -55px   0px 2px 1px rgba(180, 100, 20, 0),
             -70px  -2px 2px 0px rgba(180, 100, 20, 0);
    }

    /* ── Stay invisible through reset ── */
    69%, 100% {
        box-shadow:
             -10px  -2px 3px 2px rgba(180, 100, 20, 0),
             -20px   1px 3px 2px rgba(180, 100, 20, 0),
             -30px  -1px 3px 1px rgba(180, 100, 20, 0),
             -42px   2px 2px 1px rgba(180, 100, 20, 0),
             -55px   0px 2px 1px rgba(180, 100, 20, 0),
             -70px  -2px 2px 0px rgba(180, 100, 20, 0);
    }
}

/* =============================================================================
   INTENSITY VARIATIONS
   ============================================================================= */

/* Intensity affects particle count only - duration is set inline per particle */
/* This allows for natural speed variation between individual particles */

/* =============================================================================
   ACCESSIBILITY: REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .particles-container {
        display: none;
    }
}