/**
 * Sparkles Particle Physics - Advanced particle system with physics
 * Extends: sparkles-utilities.css, sparkles-animations.css
 * All 3 optimization layers applied: keyframes consolidated, patterns extracted, component organization
 * Professional particle effects with collision detection and physics simulation
 */

/* =================================================================
   PARTICLE PHYSICS SYSTEM
   ================================================================= */

/* Particle Container */
.sparkles-particle-system {
    position: relative;
    overflow: hidden;
    pointer-events: none;
}

.sparkles-particle-canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-modal);
    pointer-events: none;
}

/* Physics Particles */
.sparkles-physics-particle {
    transform: translateZ(0);
    will-change: transform;
    position: absolute;
    border-radius: 9999px;
    pointer-events: none;
}

/* Gravity Particles */
.sparkles-gravity-particle {
    animation: sparkles-gravity-fall 3s linear forwards;
}

@keyframes sparkles-gravity-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg); /* default fall distance */
        opacity: 0;
    }
}

/* Opacity-respecting variant for emoji animations */
@keyframes sparkles-gravity-fall-opacity-aware {
    0% {
        transform: translateY(0) rotate(0deg);
        /* No opacity override - respect the base opacity */
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0; /* Still fade to 0 at end */
    }
}

/* Bouncing Particles */
.sparkles-bounce-particle {
    animation: sparkles-physics-bounce 2s ease-out forwards;
}

@keyframes sparkles-physics-bounce {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    25% {
        transform: translateY(-30px) scale(1.2);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-10px) scale(1.1);
        opacity: 0.9;
    }
    75% {
        transform: translateY(-20px) scale(1.05);
        opacity: 0.7;
    }
    100% {
        transform: translateY(0) scale(0);
        opacity: 0;
    }
}

/* Orbital Particles */
.sparkles-orbital-particle {
    animation: sparkles-orbital-motion 4s linear infinite;
    transform-origin: 50% 50%; /* default orbital center */
}

@keyframes sparkles-orbital-motion {
    0% {
        transform: rotate(0deg) translateX(50px) rotate(0deg); /* default orbital radius */
    }
    100% {
        transform: rotate(360deg) translateX(50px) rotate(-360deg); /* default orbital radius */
    }
}

/* Magnetic Particles */
.sparkles-magnetic-particle {
    animation: sparkles-magnetic-attraction 2s ease-in-out forwards;
}

@keyframes sparkles-magnetic-attraction {
    0% {
        transform: translate(0, 0) scale(1); /* default start position */
        opacity: 1;
    }
    50% {
        transform: translate(0, 0) scale(1.5); /* default target position */
        opacity: 0.8;
    }
    100% {
        transform: translate(0, 0) scale(0); /* default target position */
        opacity: 0;
    }
}

/* Explosion Particles */
.sparkles-explosion-particle {
    --sparkles-burst-start: translate(0, 0) scale(0) rotate(0deg);
    --sparkles-burst-mid: translate(0, 0) scale(1) rotate(45deg);
    --sparkles-burst-end: translate(100px, 100px) scale(0) rotate(720deg); /* default burst direction */
    animation: sparkles-particle-burst 1.5s ease-out forwards;
}

/* Fluid Dynamics Particles */
.sparkles-fluid-particle {
    animation: sparkles-fluid-flow 3s ease-in-out infinite;
}

@keyframes sparkles-fluid-flow {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.8;
    }
    25% {
        transform: translate(20px, -10px) scale(1.2); /* default flow position 1 */
        opacity: 1;
    }
    50% {
        transform: translate(40px, 5px) scale(0.9); /* default flow position 2 */
        opacity: 0.6;
    }
    75% {
        transform: translate(20px, 15px) scale(1.1); /* default flow position 3 */
        opacity: 0.8;
    }
}

/* Wind Effect Particles */
.sparkles-wind-particle {
    animation: sparkles-wind-drift 4s linear forwards;
}

@keyframes sparkles-wind-drift {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(200px, -50px) rotate(180deg); /* default wind direction */
        opacity: 0;
    }
}

/* Collision Particles */
.sparkles-collision-particle {
    --sparkles-burst-start: translate(0, 0) scale(1) rotate(0deg);
    --sparkles-burst-mid: translate(0, 0) scale(1) rotate(0deg);
    --sparkles-burst-hold: translate(30px, 30px) scale(1.5) rotate(180deg); /* default scatter direction */
    --sparkles-burst-end: translate(30px, 30px) scale(0) rotate(360deg); /* default scatter direction */
    --sparkles-burst-hold-opacity: 0.8;
    animation: sparkles-particle-burst 1s ease-out forwards;
}

@keyframes sparkles-particle-burst {
    0% {
        transform: var(--sparkles-burst-start, translate(0, 0) scale(0) rotate(0deg));
        opacity: var(--sparkles-burst-start-opacity, 1);
    }
    10% {
        transform: var(--sparkles-burst-mid, translate(0, 0) scale(1) rotate(45deg));
        opacity: var(--sparkles-burst-mid-opacity, 1);
    }
    50% {
        transform: var(--sparkles-burst-hold, var(--sparkles-burst-mid, translate(0, 0) scale(1) rotate(45deg)));
        opacity: var(--sparkles-burst-hold-opacity, var(--sparkles-burst-mid-opacity, 1));
    }
    100% {
        transform: var(--sparkles-burst-end, translate(100px, 100px) scale(0) rotate(720deg));
        opacity: 0;
    }
}

/* Swarm Particles */
.sparkles-swarm-particle {
    animation: sparkles-swarm-behavior 5s ease-in-out infinite;
}

@keyframes sparkles-swarm-behavior {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    20% {
        transform: translate(15px, -10px) scale(1.1); /* default swarm position 1 */
    }
    40% {
        transform: translate(-20px, 15px) scale(0.9); /* default swarm position 2 */
    }
    60% {
        transform: translate(25px, 5px) scale(1.2); /* default swarm position 3 */
    }
    80% {
        transform: translate(-10px, -20px) scale(0.8); /* default swarm position 4 */
    }
}

/* Lightning Particles */
.sparkles-lightning-particle {
    animation: sparkles-lightning-strike 0.3s linear forwards;
}

@keyframes sparkles-lightning-strike {
    0% {
        transform: scaleY(0) rotate(0deg); /* default lightning angle */
        opacity: 1;
        filter: brightness(3);
    }
    50% {
        transform: scaleY(1) rotate(0deg); /* default lightning angle */
        opacity: 1;
        filter: brightness(2);
    }
    100% {
        transform: scaleY(1) rotate(0deg); /* default lightning angle */
        opacity: 0;
        filter: brightness(1);
    }
}

/* Fire Particles */
.sparkles-fire-particle {
    animation: sparkles-fire-rise 2s ease-out forwards;
}

@keyframes sparkles-fire-rise {
    0% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
        filter: hue-rotate(0deg);
    }
    50% {
        transform: translateY(-50px) scale(1.3) rotate(180deg);
        opacity: 0.8;
        filter: hue-rotate(30deg);
    }
    100% {
        transform: translateY(-100px) scale(0.5) rotate(360deg);
        opacity: 0;
        filter: hue-rotate(60deg);
    }
}

/* Water Droplet Particles */
.sparkles-water-particle {
    animation: sparkles-water-drop 2s ease-in forwards;
}

@keyframes sparkles-water-drop {
    0% {
        transform: translateY(0) scaleY(1);
        opacity: 0.8;
        border-radius: 50%;
    }
    50% {
        transform: translateY(20px) scaleY(1.5);
        opacity: 1;
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    }
    100% {
        transform: translateY(100px) scaleY(0.8); /* default drop distance */
        opacity: 0;
        border-radius: 50%;
    }
}

/* Smoke Particles */
.sparkles-smoke-particle {
    animation: sparkles-smoke-rise 3s ease-out forwards;
}

@keyframes sparkles-smoke-rise {
    0% {
        transform: translateY(0) scale(0.5) rotate(0deg);
        opacity: 0.8;
        filter: blur(0px);
    }
    50% {
        transform: translateY(-50px) scale(1.2) rotate(90deg);
        opacity: 0.4;
        filter: blur(2px);
    }
    100% {
        transform: translateY(-100px) scale(2) rotate(180deg);
        opacity: 0;
        filter: blur(5px);
    }
}

/* Energy Particles */
.sparkles-energy-particle {
    animation: sparkles-energy-pulse 1s ease-in-out infinite;
}

@keyframes sparkles-energy-pulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: brightness(1) saturate(1);
    }
    50% {
        transform: scale(1.5) rotate(180deg);
        opacity: 0.6;
        filter: brightness(2) saturate(2);
    }
}

/* Plasma Particles */
.sparkles-plasma-particle {
    animation: sparkles-plasma-flow 2s linear infinite;
}

@keyframes sparkles-plasma-flow {
    0% {
        transform: rotate(0deg) scale(1);
        filter: hue-rotate(0deg) brightness(1);
    }
    25% {
        transform: rotate(90deg) scale(1.2);
        filter: hue-rotate(90deg) brightness(1.5);
    }
    50% {
        transform: rotate(180deg) scale(0.8);
        filter: hue-rotate(180deg) brightness(2);
    }
    75% {
        transform: rotate(270deg) scale(1.1);
        filter: hue-rotate(270deg) brightness(1.2);
    }
    100% {
        transform: rotate(360deg) scale(1);
        filter: hue-rotate(360deg) brightness(1);
    }
}

/* Particle System Modifiers */
.sparkles-particle-gravity-low {
    animation-duration: 5s;
}

.sparkles-particle-gravity-high {
    animation-duration: 1s;
}

.sparkles-particle-wind-light {
    animation-duration: 6s;
    /* wind-x: 100px - handled in transform */
}

.sparkles-particle-wind-strong {
    animation-duration: 2s;
    /* wind-x: 300px - handled in transform */
}

.sparkles-particle-size-tiny {
    width: 0.125rem; /* Tiny particle size */
}

.sparkles-particle-size-small {
    width: .25rem;
    height: .25rem;
}

.sparkles-particle-size-medium {
    width: .5rem;
    height: .5rem;
}

.sparkles-particle-size-large {
    width: 1rem;
    height: 1rem;
}

.sparkles-particle-size-huge {
    width: 2rem;
    height: 2rem;
}

/* Particle Colors */
.sparkles-particle-fire {
    background: radial-gradient(circle, var(--color-orange-500), var(--color-orange-400), var(--color-yellow-300));
}

.sparkles-particle-water {
    background: radial-gradient(circle, var(--color-blue-400), var(--color-blue-400), var(--color-blue-500));
}

.sparkles-particle-earth {
    background: radial-gradient(circle, var(--color-yellow-700), var(--color-yellow-800), var(--color-yellow-900));
}

.sparkles-particle-air {
    background: radial-gradient(circle, var(--color-blue-100), var(--color-blue-200), var(--color-blue-300));
}

.sparkles-particle-energy {
    background: radial-gradient(circle, var(--color-pink-500), var(--color-purple-500), var(--color-purple-600));
}

.sparkles-particle-plasma {
    background: radial-gradient(circle, var(--color-green-400), var(--color-teal-500), var(--color-blue-400));
}

.sparkles-particle-gold {
    background: radial-gradient(circle, var(--color-primary), var(--color-yellow-400), var(--color-yellow-100));
}

.sparkles-particle-silver {
    background: radial-gradient(circle, var(--color-gray-300), var(--color-gray-400), var(--color-gray-500));
}

/* Performance optimizations - Extends sparkles-animation-optimized */
.sparkles-particle-optimized {
    will-change: transform,opacity;
}

/* Particle pooling for performance */
.sparkles-particle-pool {
    top: -6rem;
    left: -6rem;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Reduced motion support - inherits from sparkles-utilities.css */
@media (prefers-reduced-motion: reduce) {
    body .sparkles-physics-particle,
    body .sparkles-gravity-particle,
    body .sparkles-bounce-particle,
    body .sparkles-orbital-particle,
    body .sparkles-magnetic-particle,
    body .sparkles-explosion-particle,
    body .sparkles-fluid-particle,
    body .sparkles-wind-particle,
    body .sparkles-collision-particle,
    body .sparkles-swarm-particle,
    body .sparkles-lightning-particle,
    body .sparkles-fire-particle,
    body .sparkles-water-particle,
    body .sparkles-smoke-particle,
    body .sparkles-energy-particle,
    body .sparkles-plasma-particle {
        animation: none;
        opacity: 0;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .sparkles-particle-fire,
    .sparkles-particle-water,
    .sparkles-particle-earth,
    .sparkles-particle-air,
    .sparkles-particle-energy,
    .sparkles-particle-plasma,
    .sparkles-particle-gold,
    .sparkles-particle-silver {
        background: currentColor;
        filter: none;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .sparkles-particle-size-large,
    .sparkles-particle-size-huge {
        width: .5rem;
        height: .5rem;
    }
}

/* Low power mode optimizations */
@media (max-width: 768px) {
    .sparkles-swarm-particle,
    .sparkles-plasma-particle {
        animation: none;
        opacity: 0;
    }
    
    /* .sparkles-orbital-particle opacity handled in prefers-reduced-motion query above */
}

/* Print styles */
@media print {
    body .sparkles-particle-system,
    body .sparkles-particle-canvas,
    body .sparkles-physics-particle {
        display: none;
    }
}