/* Candle Animation Styles - Memory Candle */
/* Five distinct flame animations for digital memorial candles */
/* Includes candle body structure and flame animations */

/* ============================================ */
/* Candle Body Structure (Shared)              */
/* ============================================ */

.candle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.candle-container.clickable-candle {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.candle-container.clickable-candle:hover {
    transform: translateY(-4px);
}

.candle {
    position: relative;
    width: 30px;
    height: 60px;
    background: linear-gradient(to bottom, #ffffff 0%, #f0e68c 50%, #daa520 100%);
    border-radius: 4px 4px 0 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.candle::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: #8b4513;
    border-radius: 50%;
}

.candle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="%23654321"><polygon points="50,15 20,65 80,65"/><polygon points="50,85 80,35 20,35"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.4;
    z-index: 1;
}

.candle-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rz-text-color);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}

.candle-name:hover {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    position: relative;
    z-index: 10;
}

/* ============================================ */
/* Flame Animations                            */
/* ============================================ */

/* Animation Style 1 - Classic Flicker (Default) */
.flame-1 {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 40px;
    background: radial-gradient(ellipse at center, #fffacd 0%, #ffd700 20%, #ff8c00 60%, #ff6347 90%, transparent 100%);
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    animation: flicker1 2s infinite ease-in-out;
    filter: blur(1.5px);
}

@keyframes flicker1 {
    0%, 100% { 
        transform: translateX(-50%) scale(1, 1); 
        opacity: 1; 
    }
    25% { 
        transform: translateX(-50%) scale(0.95, 0.98); 
        opacity: 0.9; 
    }
    50% { 
        transform: translateX(-50%) scale(0.92, 0.95); 
        opacity: 0.85; 
    }
    75% { 
        transform: translateX(-50%) scale(0.98, 1.02); 
        opacity: 0.95; 
    }
}

/* Animation Style 2 - Gentle Sway */
.flame-2 {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 45px;
    background: radial-gradient(ellipse at center, #fffacd 0%, #ffd700 25%, #ff8c00 60%, #ff4500 90%, transparent 100%);
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    animation: sway2 3s infinite ease-in-out;
    filter: blur(1.5px);
}

@keyframes sway2 {
    0%, 100% { 
        transform: translateX(-50%) rotate(-12deg); 
    }
    25% {
        transform: translateX(-50%) rotate(-6deg);
    }
    50% { 
        transform: translateX(-50%) rotate(12deg); 
    }
    75% {
        transform: translateX(-50%) rotate(6deg);
    }
}

/* Animation Style 3 - Intense Flicker */
.flame-3 {
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 42px;
    background: radial-gradient(ellipse at center, #fff 0%, #ffff00 15%, #ffaa00 45%, #ff6600 75%, transparent 100%);
    border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
    animation: intense3 1.5s infinite ease-in-out;
    filter: blur(0.8px);
}

@keyframes intense3 {
    0% { 
        transform: translateX(-50%) scale(1, 1); 
        opacity: 1; 
    }
    10% { 
        transform: translateX(-50%) scale(0.7, 0.75); 
        opacity: 0.7; 
    }
    15% { 
        transform: translateX(-50%) scale(1.1, 1.15); 
        opacity: 1; 
    }
    25% { 
        transform: translateX(-50%) scale(0.8, 0.7); 
        opacity: 0.75; 
    }
    35% { 
        transform: translateX(-50%) scale(1.05, 1.2); 
        opacity: 0.95; 
    }
    45% { 
        transform: translateX(-50%) scale(0.75, 0.8); 
        opacity: 0.8; 
    }
    55% { 
        transform: translateX(-50%) scale(1.15, 1.1); 
        opacity: 1; 
    }
    65% { 
        transform: translateX(-50%) scale(0.85, 0.9); 
        opacity: 0.85; 
    }
    80% { 
        transform: translateX(-50%) scale(1.1, 1.05); 
        opacity: 0.95; 
    }
    90% { 
        transform: translateX(-50%) scale(0.9, 0.95); 
        opacity: 0.9; 
    }
    100% { 
        transform: translateX(-50%) scale(1, 1); 
        opacity: 1; 
    }
}

/* Animation Style 4 - Tall Flame */
.flame-4 {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 50px;
    background: radial-gradient(ellipse at center, #ffffff 0%, #fff59d 20%, #ffb74d 50%, #ff7043 80%, transparent 100%);
    border-radius: 50% 50% 50% 50% / 75% 75% 25% 25%;
    animation: tall4 2.5s infinite ease-in-out;
    filter: blur(1.2px);
}

@keyframes tall4 {
    0%, 100% { 
        transform: translateX(-50%) scaleY(1) scaleX(1); 
        opacity: 1;
    }
    50% { 
        transform: translateX(-50%) scaleY(1.6) scaleX(0.85); 
        opacity: 0.95;
    }
}

/* Animation Style 5 - Warm Glow */
.flame-5 {
    position: absolute;
    top: -42px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 38px;
    background: radial-gradient(ellipse at center, #fffde7 0%, #ffeb3b 30%, #ff9800 60%, #ff5722 85%, transparent 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: glow5 3.5s infinite ease-in-out;
    filter: blur(2px);
}

@keyframes glow5 {
    0%, 100% { 
        transform: translateX(-50%) scale(1);
        filter: drop-shadow(0 0 8px rgba(255, 165, 0, 0.6)) brightness(1) blur(2px); 
        opacity: 0.9;
    }
    50% { 
        transform: translateX(-50%) scale(1.15);
        filter: drop-shadow(0 0 25px rgba(255, 200, 0, 1)) brightness(1.6) blur(2px); 
        opacity: 1;
    }
}

/* Flame Inner Glow Effect */
.flame-1::after,
.flame-2::after,
.flame-3::after,
.flame-4::after,
.flame-5::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
    border-radius: 50%;
    animation: innerGlow 2s infinite ease-in-out;
}

@keyframes innerGlow {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

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

@media (prefers-color-scheme: dark) {
    .candle-name {
        color: #e0e0e0;
    }
}