/* Sparkles Animation Enhanced Plugin Styles */

#sparkles-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 9999 !important;
    mix-blend-mode: screen;
}

/* Ensure canvas doesn't interfere with page content */
body {
    position: relative;
}

/* Enhanced admin panel styles */
.sparkles-admin-panel {
    max-width: 900px;
}

.sparkles-admin-panel .form-table th {
    width: 220px;
    vertical-align: top;
    padding-top: 15px;
}

.sparkles-admin-panel input[type="range"] {
    width: 300px;
    margin-right: 10px;
}

.sparkles-admin-panel output {
    display: inline-block;
    min-width: 40px;
    font-weight: bold;
    color: #0073aa;
}

.sparkles-admin-panel .description {
    font-style: italic;
    color: #666;
    margin-top: 5px;
    max-width: 500px;
}

.sparkles-admin-panel h2 {
    border-bottom: 2px solid #0073aa;
    padding-bottom: 10px;
    color: #0073aa;
    margin-top: 30px;
}

.sparkles-admin-panel h2:first-of-type {
    margin-top: 0;
}

/* Shape selection grid */
.sparkles-shapes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    max-width: 600px;
    margin: 10px 0;
}

.sparkles-shapes-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sparkles-shapes-grid label:hover {
    background-color: #f0f8ff;
    border-color: #0073aa;
}

.sparkles-shapes-grid input[type="checkbox"]:checked + span {
    font-weight: bold;
    color: #0073aa;
}

/* Preview area styles */
#sparkles-preview {
    cursor: crosshair;
    transition: background-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

#sparkles-preview:hover {
    background-color: #2c2c2c !important;
}

/* Enhanced sparkle shapes for CSS fallback */
.sparkle-shape-star {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.sparkle-shape-circle {
    border-radius: 50%;
}

.sparkle-shape-diamond {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.sparkle-shape-heart {
    clip-path: path("M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z");
}

.sparkle-shape-triangle {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.sparkle-shape-plus {
    clip-path: polygon(40% 0%, 60% 0%, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0% 60%, 0% 40%, 40% 40%);
}

.sparkle-shape-hexagon {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* Gradient classes for fallback */
.sparkle-gradient-rainbow {
    background: linear-gradient(45deg, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #4B0082, #9400D3);
}

.sparkle-gradient-sunset {
    background: linear-gradient(45deg, #FF6B35, #F7931E, #FFD23F, #FF6B6B, #C44569);
}

.sparkle-gradient-ocean {
    background: linear-gradient(45deg, #667db6, #0082c8, #0052d4, #00b4db, #0083b0);
}

.sparkle-gradient-fire {
    background: linear-gradient(45deg, #FF4E50, #FC913A, #F9D423, #FF6B35, #E55D87);
}

.sparkle-gradient-forest {
    background: linear-gradient(45deg, #134E5E, #71B280, #8FBC8F, #228B22, #006400);
}

.sparkle-gradient-galaxy {
    background: linear-gradient(45deg, #2C1810, #8E44AD, #3498DB, #E74C3C, #F39C12);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #sparkles-canvas {
        /* Reduce performance impact on mobile */
        will-change: transform;
    }
    
    .sparkles-admin-panel .form-table th {
        width: 150px;
    }
    
    .sparkles-admin-panel input[type="range"] {
        width: 200px;
    }
    
    .sparkles-shapes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Performance optimizations */
#sparkles-canvas {
    will-change: contents;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Accessibility - respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    #sparkles-canvas {
        display: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    #sparkles-canvas {
        mix-blend-mode: normal;
        opacity: 0.8;
    }
}

/* Print styles - hide sparkles when printing */
@media print {
    #sparkles-canvas {
        display: none !important;
    }
}

/* Enhanced animation keyframes */
@keyframes sparkle-burst-enhanced {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
        filter: brightness(1);
    }
    25% {
        transform: scale(0.5) rotate(90deg);
        opacity: 0.8;
        filter: brightness(1.5);
    }
    50% {
        transform: scale(1) rotate(180deg);
        opacity: 1;
        filter: brightness(2);
    }
    75% {
        transform: scale(0.8) rotate(270deg);
        opacity: 0.6;
        filter: brightness(1.2);
    }
    100% {
        transform: scale(0) rotate(360deg);
        opacity: 0;
        filter: brightness(1);
    }
}

@keyframes sparkle-glow-enhanced {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 5px currentColor);
    }
    33% {
        filter: brightness(1.3) drop-shadow(0 0 10px currentColor);
    }
    66% {
        filter: brightness(1.6) drop-shadow(0 0 15px currentColor);
    }
}

@keyframes sparkle-ambient {
    0% {
        transform: scale(0) rotate(0deg) translateY(0);
        opacity: 0;
    }
    20% {
        transform: scale(0.6) rotate(72deg) translateY(-10px);
        opacity: 0.8;
    }
    50% {
        transform: scale(1) rotate(180deg) translateY(-20px);
        opacity: 1;
    }
    80% {
        transform: scale(0.4) rotate(288deg) translateY(-30px);
        opacity: 0.4;
    }
    100% {
        transform: scale(0) rotate(360deg) translateY(-40px);
        opacity: 0;
    }
}

/* Fallback sparkle classes for different shapes */
.sparkle-fallback {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    width: 20px;
    height: 20px;
    animation: sparkle-burst-enhanced 1.5s ease-out forwards;
}

.sparkle-fallback.ambient {
    animation: sparkle-ambient 3s ease-out forwards;
}

.sparkle-fallback.star {
    background: radial-gradient(circle, currentColor 0%, transparent 70%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.sparkle-fallback.circle {
    background: radial-gradient(circle, currentColor 0%, transparent 70%);
    border-radius: 50%;
}

.sparkle-fallback.diamond {
    background: linear-gradient(45deg, currentColor 0%, transparent 70%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Loading state for enhanced version */
.sparkles-loading-enhanced {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 30px;
    border-radius: 15px;
    font-family: Arial, sans-serif;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.sparkles-loading-enhanced h3 {
    margin: 0 0 15px 0;
    color: #FFD700;
}

.sparkles-loading-enhanced::after {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid #fff;
    border-radius: 50%;
    border-top-color: #FFD700;
    animation: spin-enhanced 1s linear infinite;
    margin-top: 15px;
}

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

/* Admin panel enhancements */
.sparkles-feature-highlight {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
}

.sparkles-feature-highlight h3 {
    margin-top: 0;
    color: #FFD700;
}

.sparkles-feature-highlight ul {
    margin: 10px 0;
    padding-left: 20px;
}

.sparkles-feature-highlight li {
    margin: 8px 0;
}