body.theme-dark {
    background: #000;
    color: #FFD700;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
    cursor: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 3L20 10.5L13.5 13.5L10.5 20L4.5 3Z" fill="%23FFD700" stroke="black" stroke-width="1.5" stroke-linejoin="round"/></svg>'), auto;
}


.main-content-layer {
    position: relative;
    z-index: 5;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-container {
    text-align: center;
    margin-top: 3vh;
    margin-bottom: 0;
    z-index: 15;
    position: relative;
    text-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

.main-title {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-weight: 700;
    color: #FFDF00;
    letter-spacing: 2px;
    margin-bottom: 0;
}

.sub-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fcebbb;
    letter-spacing: 1px;
}

.centerpiece-wrapper {
    position: relative;
    margin-top: -2vh;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 78vh;
    width: 100%;
    max-width: 640px;
}

.centerpiece-img {
    height: 85vh;
    object-fit: contain;
    mix-blend-mode: screen;
}

#flames-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.flame-spot {
    position: absolute;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    cursor: url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="8" fill="%23FFD700" stroke="%23FFFFFF" stroke-width="2" opacity="0.8"/><circle cx="12" cy="12" r="4" fill="%23FFFFFF"/></svg>') 12 12, pointer;
    z-index: 20;
}

/* === SPECTACULAR OIL LAMP FLAME ===
   A multi-layer flame with inner white core, golden middle and orange fringe */
.realistic-flame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -95%);
    width: 20px;
    height: 44px;
    pointer-events: none;
    transform-origin: bottom center;
    z-index: 200;
    opacity: 1;
}

/* Outer glow shell */
.realistic-flame::before {
    content: '';
    position: absolute;
    inset: -8px -12px;
    background: radial-gradient(ellipse at 50% 80%, rgba(255, 100, 0, 0.7) 0%, rgba(255, 50, 0, 0.4) 40%, transparent 75%);
    border-radius: 50%;
    animation: outerGlow 0.3s infinite alternate ease-in-out;
    z-index: 1;
}

/* Main flame body */
.realistic-flame::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 44px;
    background:
        radial-gradient(ellipse 40% 30% at 50% 85%, #fff 0%, transparent 100%),
        radial-gradient(ellipse 60% 60% at 50% 70%, #FFE566 0%, #FF8800 55%, #FF3300 80%, transparent 100%);
    border-radius: 55% 55% 15% 15% / 65% 65% 35% 35%;
    filter: drop-shadow(0 0 10px #FF8800) drop-shadow(0 -8px 20px #FFDD00);
    animation: coreFlicker 0.11s infinite alternate ease-in-out;
    z-index: 2;
}

@keyframes coreFlicker {
    0% {
        transform: translateX(-50%) scaleX(0.95) scaleY(1.02) skewX(1.5deg);
        filter: drop-shadow(0 0 12px #FF8800) drop-shadow(0 -10px 25px #FFEE00) brightness(1);
    }

    33% {
        transform: translateX(-50%) scaleX(1.05) scaleY(0.97) skewX(-2deg);
        filter: drop-shadow(0 0 8px #FF6600) drop-shadow(0 -6px 18px #FFCC00) brightness(1.1);
    }

    66% {
        transform: translateX(-50%) scaleX(0.92) scaleY(1.05) skewX(1deg);
        filter: drop-shadow(0 0 15px #FF9900) drop-shadow(0 -12px 30px #FFEE00) brightness(0.95);
    }

    100% {
        transform: translateX(-50%) scaleX(1.03) scaleY(0.96) skewX(-1.5deg);
        filter: drop-shadow(0 0 10px #FF7700) drop-shadow(0 -9px 22px #FFDD00) brightness(1.05);
    }
}

@keyframes outerGlow {
    0% {
        transform: scale(0.9) translateY(2px);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.15) translateY(-2px);
        opacity: 1;
    }
}

/* Float-up embers from the lit flame */
.realistic-flame .ember {
    position: absolute;
    bottom: 30px;
    left: 50%;
    width: 3px;
    height: 3px;
    background: #FFE566;
    border-radius: 50%;
    animation: floatEmber 1.2s ease-out forwards;
    pointer-events: none;
    z-index: 3;
}

@keyframes floatEmber {
    0% {
        transform: translate(-50%, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(calc(-50% + var(--ex, 0px)), -40px) scale(0);
        opacity: 0;
    }
}

/* === SPECTACULAR FLOATING TAPER CANDLE ===
   A gorgeous renaissance-style torch with wax gradient, ring decoration and trail sparks */
#floating-candle {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    top: 110vh;
    left: 110vw;
    width: 10px;
    height: 115px;
    transform: translateX(-50%);
    transition: top 1s cubic-bezier(0.22, 1, 0.36, 1), left 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
    filter: drop-shadow(0 0 14px rgba(255, 180, 40, 0.85));
}

/* Candle body: slim wax taper */
#floating-candle::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 115px;
    background:
        linear-gradient(180deg,
            #fffef2 0%,
            #fff8d0 8%,
            #FFE87A 18%,
            #F5C842 35%,
            #D4A017 55%,
            #9B6700 80%,
            #6B3F00 100%);
    border-radius: 3px 3px 2px 2px;
    box-shadow: inset -2px 0 5px rgba(0, 0, 0, 0.3), inset 1px 0 4px rgba(255, 255, 220, 0.5), 0 0 8px rgba(255, 150, 0, 0.4);
}

/* Flame on top of the slim taper candle */
#floating-candle::after {
    content: '';
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 32px;
    background:
        radial-gradient(ellipse 35% 25% at 50% 85%, #fff 0%, transparent 100%),
        radial-gradient(ellipse 55% 55% at 50% 72%, #FFE87A 0%, #FF8800 50%, #FF3300 80%, transparent 100%);
    border-radius: 55% 55% 15% 15% / 65% 65% 35% 35%;
    filter: drop-shadow(0 0 8px #FF8800) drop-shadow(0 -6px 16px #FFDD00);
    animation: candleFlicker 0.12s infinite alternate ease-in-out;
    z-index: 2;
}

@keyframes candleFlicker {
    0% {
        transform: translateX(-50%) scaleX(0.9) scaleY(1.04) skewX(2deg);
    }

    50% {
        transform: translateX(-50%) scaleX(1.1) scaleY(0.94) skewX(-2.5deg);
    }

    100% {
        transform: translateX(-50%) scaleX(0.94) scaleY(1.02) skewX(1.5deg);
    }
}

.fade-out {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

#particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.spark-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    animation: orbitSpin 1s cubic-bezier(0.5, 0, 0.3, 1) forwards;
}

.spark {
    position: absolute;
    top: -30px;
    left: -4px;
    width: 8px;
    height: 8px;
    background: #FFF;
    border-radius: 50%;
    box-shadow: 0 0 10px #FFDF00, 0 0 20px #FFA500;
    animation: sparkScale 1s cubic-bezier(0.5, 0, 0.3, 1) forwards;
}

@keyframes orbitSpin {
    0% {
        transform: rotate(-180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes sparkScale {
    0% {
        transform: scale(0);
        opacity: 0;
        top: -30px;
    }

    15% {
        transform: scale(1);
        opacity: 1;
        top: -25px;
    }

    85% {
        transform: scale(1);
        opacity: 1;
        top: -15px;
    }

    100% {
        transform: scale(3);
        opacity: 0;
        top: -20px;
        box-shadow: 0 0 40px #FFF, 0 0 80px #FFDF00;
    }
}

@keyframes lightUpFlash {
    0% {
        transform: translate(-50%, -90%) scale(1);
        filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.3));
    }

    40% {
        transform: translate(-50%, -90%) scale(1.8);
        filter: drop-shadow(0 0 60px rgba(255, 255, 255, 1)) brightness(2);
    }

    100% {
        transform: translate(-50%, -90%) scale(1);
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
    }
}

.lighting-up {
    animation: lightUpFlash 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

@keyframes focusPulse {
    0% {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
        transform: translate(-50%, -50%) scale(1.2);
    }

    100% {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
        transform: translate(-50%, -50%) scale(1);
    }
}

.focus-ring {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
}

.keyboard-focus .focus-ring {
    opacity: 1;
    animation: focusPulse 1.5s infinite;
}

/* === CINEMATIC OVERHAUL STYLES === */
.god-rays {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 223, 0, 0.1) 10deg, transparent 20deg, transparent 40deg, rgba(255, 223, 0, 0.15) 50deg, transparent 60deg, transparent 90deg, rgba(255, 223, 0, 0.1) 100deg, transparent 110deg, transparent 150deg, rgba(255, 223, 0, 0.2) 160deg, transparent 170deg, transparent 200deg, rgba(255, 223, 0, 0.1) 210deg, transparent 220deg, transparent 260deg, rgba(255, 223, 0, 0.15) 270deg, transparent 280deg, transparent 310deg, rgba(255, 223, 0, 0.1) 320deg, transparent 330deg, transparent 360deg);
    mix-blend-mode: screen;
    z-index: 1;
    animation: rotateRays 30s linear infinite;
    pointer-events: none;
    mask-image: radial-gradient(circle, black 20%, transparent 60%);
    -webkit-mask-image: radial-gradient(circle, black 20%, transparent 60%);
}

@keyframes rotateRays {
    100% {
        transform: rotate(360deg);
    }
}

.shockwave-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 20;
}

.shockwave-ring {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 4px solid rgba(255, 2df, 0, 0.8);
    box-shadow: 0 0 50px rgba(255, 255, 255, 1), inset 0 0 50px rgba(255, 215, 0, 1);
    animation: blastWave 2.5s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
    opacity: 0;
}

@keyframes blastWave {
    0% {
        width: 10px;
        height: 10px;
        opacity: 1;
        border-width: 20px;
    }

    100% {
        width: 250vw;
        height: 250vw;
        opacity: 0;
        border-width: 0px;
    }
}

#fountain-particles {
    position: absolute;
    top: 20%;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 25;
}

.fountain-spark {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #FFF;
    border-radius: 50%;
    box-shadow: 0 0 15px #FFDF00, 0 0 30px #FFA500;
    opacity: 0;
    animation: fountainErupt 2.5s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}

@keyframes fountainErupt {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(1.5);
        opacity: 0;
    }
}

.cinematic-text-reveal {
    animation: epicTextEnter 3s cubic-bezier(0.2, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: scale(0.8);
}

@keyframes epicTextEnter {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(50px);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0px);
    }
}