/* 
 * embers.css
 * Styling for floating ember particles
 */

/* Ember container */
.ember-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow clicking through */
    z-index: 9999; /* Ensure it's above all elements */
    overflow: hidden;
}

/* Individual ember particle */
.ember {
    position: absolute;
    border-radius: 50%;
    background-color: #ff8800;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    z-index: 9999;
}

/* Small ember */
.ember-small {
    width: 3px;
    height: 3px;
    filter: blur(1px);
    box-shadow: 0 0 8px 3px rgba(255, 136, 0, 0.7);
}

/* Medium ember */
.ember-medium {
    width: 5px;
    height: 5px;
    filter: blur(1.5px);
    box-shadow: 0 0 10px 4px rgba(255, 136, 0, 0.8);
}

/* Large ember */
.ember-large {
    width: 8px;
    height: 8px;
    filter: blur(2px);
    box-shadow: 0 0 15px 6px rgba(255, 136, 0, 0.9);
}

/* Hot spot embers */
.ember-hotspot {
    background: radial-gradient(circle at center, #ffffff 0%, #ffdd00 20%, #ff8800 60%, #ff6600 100%);
    box-shadow: 
        0 0 15px 5px rgba(255, 255, 255, 0.8),
        0 0 25px 10px rgba(255, 136, 0, 0.6);
}

/* Flicker animations */
@keyframes flicker {
    0% { box-shadow: 0 0 8px 3px rgba(255, 136, 0, 0.7); }
    10% { box-shadow: 0 0 12px 5px rgba(255, 180, 0, 0.9); }
    20% { box-shadow: 0 0 6px 2px rgba(255, 136, 0, 0.6); }
    30% { box-shadow: 0 0 10px 4px rgba(255, 160, 0, 0.8); }
    40% { box-shadow: 0 0 14px 6px rgba(255, 200, 0, 1.0); }
    50% { box-shadow: 0 0 7px 3px rgba(255, 136, 0, 0.7); }
    60% { box-shadow: 0 0 11px 5px rgba(255, 170, 0, 0.9); }
    70% { box-shadow: 0 0 5px 2px rgba(255, 136, 0, 0.5); }
    80% { box-shadow: 0 0 9px 4px rgba(255, 150, 0, 0.7); }
    90% { box-shadow: 0 0 13px 6px rgba(255, 190, 0, 0.9); }
    100% { box-shadow: 0 0 8px 3px rgba(255, 136, 0, 0.7); }
}

/* Hot spot flicker animation - more intense */
@keyframes hotspotFlicker {
    0% { 
        box-shadow: 
            0 0 15px 5px rgba(255, 255, 255, 0.8),
            0 0 25px 10px rgba(255, 136, 0, 0.6); 
    }
    25% { 
        box-shadow: 
            0 0 20px 8px rgba(255, 255, 255, 0.9),
            0 0 30px 15px rgba(255, 170, 0, 0.7); 
    }
    50% { 
        box-shadow: 
            0 0 12px 4px rgba(255, 255, 255, 0.7),
            0 0 20px 8px rgba(255, 120, 0, 0.5); 
    }
    75% { 
        box-shadow: 
            0 0 18px 7px rgba(255, 255, 255, 0.9),
            0 0 28px 12px rgba(255, 150, 0, 0.7); 
    }
    100% { 
        box-shadow: 
            0 0 15px 5px rgba(255, 255, 255, 0.8),
            0 0 25px 10px rgba(255, 136, 0, 0.6); 
    }
}

/* Path animations - each ember will use one of these paths */
@keyframes path1 {
    0% { transform: translate(0, 0); opacity: 0; }
    5% { opacity: 0.6; }
    15% { transform: translate(10px, -15vh); opacity: 0.8; }
    30% { transform: translate(-15px, -30vh); opacity: 1; }
    45% { transform: translate(5px, -45vh); opacity: 0.9; }
    60% { transform: translate(-10px, -60vh); opacity: 0.8; }
    75% { transform: translate(15px, -75vh); opacity: 0.7; }
    90% { transform: translate(-5px, -90vh); opacity: 0.5; }
    100% { transform: translate(0, -110vh); opacity: 0; }
}

@keyframes path2 {
    0% { transform: translate(0, 0); opacity: 0; }
    5% { opacity: 0.6; }
    15% { transform: translate(-20px, -15vh); opacity: 0.8; }
    30% { transform: translate(10px, -30vh); opacity: 1; }
    45% { transform: translate(-5px, -45vh); opacity: 0.9; }
    60% { transform: translate(15px, -60vh); opacity: 0.8; }
    75% { transform: translate(-10px, -75vh); opacity: 0.7; }
    90% { transform: translate(5px, -90vh); opacity: 0.5; }
    100% { transform: translate(0, -110vh); opacity: 0; }
}

@keyframes path3 {
    0% { transform: translate(0, 0); opacity: 0; }
    5% { opacity: 0.6; }
    15% { transform: translate(15px, -15vh); opacity: 0.8; }
    30% { transform: translate(-5px, -30vh); opacity: 1; }
    45% { transform: translate(20px, -45vh); opacity: 0.9; }
    60% { transform: translate(-15px, -60vh); opacity: 0.8; }
    75% { transform: translate(10px, -75vh); opacity: 0.7; }
    90% { transform: translate(-20px, -90vh); opacity: 0.5; }
    100% { transform: translate(0, -110vh); opacity: 0; }
}

@keyframes path4 {
    0% { transform: translate(0, 0); opacity: 0; }
    5% { opacity: 0.6; }
    15% { transform: translate(-10px, -15vh); opacity: 0.8; }
    30% { transform: translate(20px, -30vh); opacity: 1; }
    45% { transform: translate(-15px, -45vh); opacity: 0.9; }
    60% { transform: translate(5px, -60vh); opacity: 0.8; }
    75% { transform: translate(-20px, -75vh); opacity: 0.7; }
    90% { transform: translate(15px, -90vh); opacity: 0.5; }
    100% { transform: translate(0, -110vh); opacity: 0; }
}

/* Path assignments */
.path1 {
    animation: 
        path1 var(--duration, 15s) linear forwards,
        flicker var(--flicker-duration, 2s) ease-in-out infinite;
}

.path2 {
    animation: 
        path2 var(--duration, 15s) linear forwards,
        flicker var(--flicker-duration, 2s) ease-in-out infinite;
}

.path3 {
    animation: 
        path3 var(--duration, 15s) linear forwards,
        flicker var(--flicker-duration, 2s) ease-in-out infinite;
}

.path4 {
    animation: 
        path4 var(--duration, 15s) linear forwards,
        flicker var(--flicker-duration, 2s) ease-in-out infinite;
}

/* Hotspot specific animations */
.ember-hotspot.path1, .ember-hotspot.path2, .ember-hotspot.path3, .ember-hotspot.path4 {
    animation-name: path1, hotspotFlicker;
}

.ember-hotspot.path2 {
    animation-name: path2, hotspotFlicker;
}

.ember-hotspot.path3 {
    animation-name: path3, hotspotFlicker;
}

.ember-hotspot.path4 {
    animation-name: path4, hotspotFlicker;
}

/* Reduce effects for better performance on mobile/low-end devices */
@media (prefers-reduced-motion), (max-width: 768px) {
    .ember-container {
        display: block; /* Still show embers but with reduced effects */
    }
    
    .path1, .path2, .path3, .path4 {
        animation-duration: 20s, 3s; /* Slower animations */
    }
}