/**
 * Animated Backgrounds CSS
 * Simple Site Builder - 9 Visually Distinct Animation Presets
 *
 * Categories:
 * - Particles: Stardust, Bubbles, Confetti
 * - Waves: Ocean
 * - Gradients: Aurora, Gradient Shift, Mesh
 * - Geometric: Hexagons, Grid Pulse
 */

/* ========================================
   Base Container Styles
   ======================================== */

.animated-bg-container,
.animated-bg,
.animated-bg-waves,
.animated-bg-aurora,
.animated-bg-gradient-shift,
.animated-bg-mesh,
.animated-bg-hexagons,
.animated-bg-grid-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.animated-bg-waves {
    bottom: 0;
    top: auto;
}

/* ========================================
   Base Particle Styles
   ======================================== */

.animated-bg-particle {
    position: absolute;
    border-radius: 50%;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* ========================================
   Particle Shapes
   ======================================== */

.particle-circle {
    border-radius: 50%;
}

.particle-square {
    border-radius: 2px;
}

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

/* ========================================
   Blend Modes
   ======================================== */

.blend-overlay { mix-blend-mode: overlay; }
.blend-screen { mix-blend-mode: screen; }
.blend-lighten { mix-blend-mode: lighten; }
.blend-multiply { mix-blend-mode: multiply; }
.blend-color-dodge { mix-blend-mode: color-dodge; }
.blend-soft-light { mix-blend-mode: soft-light; }

/* ========================================
   STARDUST - Twinkling Stars
   ======================================== */

.preset-stardust .animated-bg-particle {
    mix-blend-mode: screen;
    box-shadow: 0 0 4px currentColor;
}

/* ========================================
   BUBBLES - Rising Spheres
   ======================================== */

.preset-bubbles .animated-bg-particle {
    mix-blend-mode: overlay;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3) 0%, transparent 50%);
}

/* ========================================
   CONFETTI - Mixed Rotating Shapes
   ======================================== */

.preset-confetti .animated-bg-particle {
    mix-blend-mode: normal;
}

/* ========================================
   OCEAN - Flowing SVG Waves
   ======================================== */

.animated-bg-waves path {
    mix-blend-mode: overlay;
}

/* ========================================
   AURORA - Vertical Color Bands
   ======================================== */

.aurora-band {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* ========================================
   GRADIENT SHIFT - Rotating Conic Gradient
   ======================================== */

.animated-bg-gradient-shift {
    will-change: transform;
    backface-visibility: hidden;
}

/* ========================================
   MESH - Soft Color Blobs
   ======================================== */

.mesh-blob {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* ========================================
   HEXAGONS - Floating Outlines
   ======================================== */

.animated-bg-hexagons svg {
    width: 100%;
    height: 100%;
}

.animated-bg-hexagons polygon {
    will-change: transform, opacity;
}

/* ========================================
   GRID PULSE - Dot Matrix
   ======================================== */

.grid-pulse-dot {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* ========================================
   Common Animation Keyframes
   ======================================== */

/* Floating upward motion */
@keyframes float-up {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% { opacity: 0.7; }
    90% { opacity: 0.7; }
    100% {
        transform: translateY(-100vh) translateX(20vw);
        opacity: 0;
    }
}

/* Gentle drift */
@keyframes drift {
    0% { transform: translate(0, 0); }
    25% { transform: translate(10px, -10px); }
    50% { transform: translate(20px, -5px); }
    75% { transform: translate(10px, -15px); }
    100% { transform: translate(0, -20px); }
}

/* Twinkle effect (for stardust) */
@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Pulse effect */
@keyframes pulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Bubble rise and scale */
@keyframes bubble-rise {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }
    10% { opacity: 0.15; }
    50% {
        transform: translateY(-50vh) scale(1);
        opacity: 0.15;
    }
    90% { opacity: 0.15; }
    100% {
        transform: translateY(-100vh) scale(1.2);
        opacity: 0;
    }
}

/* Horizontal wave motion */
@keyframes wave-horizontal {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-25%); }
}

/* ========================================
   Performance & Mobile Optimizations
   ======================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .animated-bg-particle,
    .animated-bg-waves path,
    .aurora-band,
    .animated-bg-gradient-shift,
    .mesh-blob,
    .animated-bg-hexagons polygon,
    .grid-pulse-dot {
        animation: none !important;
        opacity: 0.3 !important;
    }
}

/* Mobile optimizations - reduce particle count */
@media (max-width: 768px) {
    /* Hide every 3rd particle on tablets */
    .animated-bg-particle:nth-child(3n) {
        display: none;
    }

    /* Reduce grid pulse dots */
    .grid-pulse-dot:nth-child(3n),
    .grid-pulse-dot:nth-child(3n+1) {
        display: none;
    }

    /* Reduce mesh blobs */
    .mesh-blob:nth-child(n+3) {
        display: none;
    }

    /* Reduce aurora bands */
    .aurora-band:nth-child(n+3) {
        display: none;
    }
}

@media (max-width: 480px) {
    /* Hide 2 out of 3 particles on mobile */
    .animated-bg-particle:nth-child(3n),
    .animated-bg-particle:nth-child(3n+1) {
        display: none;
    }

    /* Reduce animation complexity */
    .animated-bg-particle {
        animation-duration: 30s !important;
    }

    /* Simplify mesh */
    .mesh-blob:nth-child(n+2) {
        display: none;
    }

    /* Simplify hexagons */
    .animated-bg-hexagons polygon:nth-child(n+5) {
        display: none;
    }
}

/* ========================================
   GPU Acceleration Hints
   ======================================== */

.animated-bg-container,
.animated-bg-particle,
.animated-bg-waves,
.animated-bg-aurora,
.animated-bg-gradient-shift,
.animated-bg-mesh,
.animated-bg-hexagons,
.animated-bg-grid-pulse {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Force hardware acceleration for smooth animations */
@supports (will-change: transform) {
    .animated-bg-particle,
    .aurora-band,
    .mesh-blob,
    .grid-pulse-dot {
        will-change: transform, opacity;
    }
}

/* ========================================
   Theme Color Integration
   ======================================== */

/* CSS custom properties for theme colors (set via JavaScript) */
.animated-bg-container {
    --color-primary: #3B82F6;
    --color-secondary: #10B981;
    --color-accent: #F59E0B;
    --color-neutral: #9CA3AF;
}

/* Color utility classes */
.particle-primary { background-color: var(--color-primary); }
.particle-secondary { background-color: var(--color-secondary); }
.particle-accent { background-color: var(--color-accent); }
.particle-neutral { background-color: var(--color-neutral); }

/* ========================================
   Accessibility
   ======================================== */

/* Ensure content stays above background */
.has-animated-background {
    position: relative;
    z-index: 1;
}

.has-animated-background > *:not(.animated-bg-container):not(.animated-bg-waves):not(.animated-bg-aurora):not(.animated-bg-gradient-shift):not(.animated-bg-mesh):not(.animated-bg-hexagons):not(.animated-bg-grid-pulse) {
    position: relative;
    z-index: 2;
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    .animated-bg-container,
    .animated-bg-waves,
    .animated-bg-aurora,
    .animated-bg-gradient-shift,
    .animated-bg-mesh,
    .animated-bg-hexagons,
    .animated-bg-grid-pulse {
        display: none !important;
    }
}

/* ========================================
   Dark Mode Support
   ======================================== */

@media (prefers-color-scheme: dark) {
    .animated-bg-particle {
        opacity: 0.8;
    }

    .preset-stardust .animated-bg-particle {
        opacity: 1;
    }

    .aurora-band {
        opacity: 0.5;
    }
}

/* ========================================
   Loading State
   ======================================== */

.animated-bg-loading {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.animated-bg-loaded {
    opacity: 1;
}

/* ========================================
   Preview Thumbnail Styles
   ======================================== */

.preset-thumbnail {
    position: relative;
    width: 100%;
    height: 60px;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: #1a1a2e;
}

.preset-thumbnail.bg-light {
    background-color: #f3f4f6;
}

.preset-thumbnail .animated-bg-container {
    transform: scale(0.5);
    transform-origin: center center;
}

/* Reduce particles for thumbnails */
.preset-thumbnail .animated-bg-particle:nth-child(n+10) {
    display: none;
}

/* ========================================
   Animation Type Specific Thumbnails
   ======================================== */

/* Stardust thumbnail - starfield preview */
.preset-thumbnail.preset-stardust {
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 100%);
}

/* Bubbles thumbnail - underwater feel */
.preset-thumbnail.preset-bubbles {
    background: linear-gradient(180deg, #1e3a5f 0%, #0d1b2a 100%);
}

/* Confetti thumbnail - festive */
.preset-thumbnail.preset-confetti {
    background: linear-gradient(135deg, #2d1b4e 0%, #1a1a2e 100%);
}

/* Ocean thumbnail - wave colors */
.preset-thumbnail.preset-ocean {
    background: linear-gradient(180deg, #0077b6 0%, #023e8a 100%);
}

/* Aurora thumbnail - northern lights */
.preset-thumbnail.preset-aurora {
    background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);
}

/* Gradient Shift thumbnail */
.preset-thumbnail.preset-gradient-shift {
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
}

/* Mesh thumbnail - organic */
.preset-thumbnail.preset-mesh {
    background: linear-gradient(135deg, #1f1f1f 0%, #2a2a2a 100%);
}

/* Hexagons thumbnail - tech feel */
.preset-thumbnail.preset-hexagons {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
}

/* Grid Pulse thumbnail - matrix */
.preset-thumbnail.preset-grid-pulse {
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
}

/* ========================================
   FOREGROUND IMAGE ANIMATIONS
   ======================================== */

/* Float Animation - Gentle Up/Down Movement */
@keyframes foreground-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

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

/* Hover Tilt Effect - 3D Perspective Tilt */
.hover-tilt {
    transition: transform 0.3s ease;
    transform-style: preserve-3d;
}

.hover-tilt:hover {
    transform: perspective(1000px) rotateY(5deg) rotateX(5deg);
}

/* Zoom on Hover - Subtle Scale Effect */
/* Note: hover:scale-105 is Tailwind but we add a smooth version */
.foreground-image-container img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Foreground Image Container Styles */
.foreground-image-container {
    transition: all 0.3s ease;
}

/* Foreground Image Placeholder */
.foreground-image-placeholder {
    border: 2px dashed rgba(255, 255, 255, 0.3);
    transition: border-color 0.3s ease;
}

.foreground-image-placeholder:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

/* ========================================
   SVG MASK PICKER
   ======================================== */

/* Mask Picker Grid - 6 columns for 31 items (None + 30 masks) */
.mask-picker-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    max-height: 320px;
    overflow-y: auto;
    padding: 0.25rem;
}

/* Individual Mask Thumbnail */
.mask-thumbnail {
    aspect-ratio: 1;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    background-color: #f3f4f6;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mask-thumbnail:hover {
    border-color: var(--primary-color, #3b82f6);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mask-thumbnail.selected,
.mask-thumbnail.border-primary {
    border-color: var(--primary-color, #3b82f6);
    background-color: #dbeafe;
}

.mask-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

/* Scrollbar styling for mask picker */
.mask-picker-grid::-webkit-scrollbar {
    width: 6px;
}

.mask-picker-grid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.mask-picker-grid::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.mask-picker-grid::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* ========================================
   SVG MASK PREVIEW STYLES
   ======================================== */

/* Mask preview container in modal */
#fg-mask-preview-container img {
    transition: all 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .mask-picker-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}