html,
body {
    overflow: hidden;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

body {
    overflow: auto;
    background: url("https://www.pixelstalk.net/wp-content/uploads/images5/Aesthetic-Space-Wallpaper-1080p.jpg") no-repeat;
    background-size: cover;
}

.hitung-mundur {
    color: white;
    display: flex;
    width: fit-content;
    gap: 50px;
    font-family: 'Orbitron';
    margin: auto;
    margin-top: 25vh;
    font-size: 40px;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
}

p {
    margin: 0 0;
    position: absolute;
    font: 16px Verdana;
    color: #eee;
    height: 25px;
    top: calc(100vh - 30px);
    text-shadow: 0 0 2px white;
}

p a {
    text-decoration: none;
    color: #aaa;
}

span {
    font-size: 11px;
}

p>a:first-of-type {
    font-size: 20px;
}

body {
    overflow: hidden;
}

.kartu-ulang-tahun {
    width: 250px;
    height: 300px;
    position: absolute;
    align-self: center;
    display: flex;
    transform-style: preserve-3d;
    perspective: 800px;
    display: none;
}

.kartu-ulang-tahun::after {
    content: "";
    background: linear-gradient(-45deg, blue, yellow, red);
    width: 250px;
    height: 300px;
    position: absolute;
    align-self: center;
    display: flex;
    transform-style: preserve-3d;
    perspective: 800px;
    scale: 1.04;
}

.kartu-ulang-tahun>#kata-kata {
    justify-items: center;
    width: 250px;
    height: 300px;
    background-color: white;
    border: transparent solid .25em;
    font-family: cursive;
    position: absolute;
    transform: scale(1) translateZ(1px);
}

.kartu-ulang-tahun>#gambar {
    width: 250px;
    height: 300px;
    background-color: white;
    border: transparent solid .25em;
    font-family: cursive;
    position: absolute;
    transform: scale(1) translateZ(-1px) rotateY(180deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.kartu-ulang-tahun>div>h1 {
    font-size: 1.5em;
    margin-top: 25px;
    height: fit-content;
    width: fit-content;
    border: green solid .01em;
}

.kartu-ulang-tahun>div>p {
    height: fit-content;
    width: fit-content;
    position: absolute;
    left: 12.5px;
    top: 75px;
    color: black;
    font-family: cursive;
}

.kartu-ulang-tahun>#gambar>#g1 {
    width: 67.5%;
    height: fit-content;
    position: absolute;
}

.kartu-ulang-tahun>#gambar>button {
    position: absolute;
    border: none;
    border-radius: 5px;
    width: fit-content;
    height: fit-content;
    border: none;
    background-color: transparent;
    color: white;
}

/* .line{
    position: absolute;
    background-color: red;
    width: 10em;
    height: .1em;
    margin-top: 19.6em;
}
.line1{
    position: absolute;
    background-color: red;
    width: 10em;
    height: .1em;
    margin-top: 17.6em;
}
.line2{
    position: absolute;
    background-color: red;
    width: 10em;
    height: .1em;
    margin-top: 15.6em;
} */
.cake {
    position: absolute;
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    transform: rotateX(-25deg) rotateY(45deg);
    /* animation: boy 5s infinite linear; */
}

@keyframes boy {
    0% {
        rotate: y 0deg;
    }

    100% {
        rotate: y 360deg;
    }
}

.top_cake {
    transform-style: preserve-3d;
    display: none;
    width: fit-content;
    height: fit-content;
    justify-content: center;
    margin-top: -60em;
}

@keyframes tes {
    0% {
        margin-top: -20em;
    }

    100% {
        margin-top: -4em;
    }
}

.mid_cake {
    transform-style: preserve-3d;
    display: none;
    width: fit-content;
    height: fit-content;
    justify-content: center;
    margin-top: -60em
}

.bot_cake {
    transform-style: preserve-3d;
    display: none;
    width: fit-content;
    height: fit-content;
    justify-content: center;
    margin-top: -60em;
}

.top_cake>.cover {
    width: 4em;
    height: 4em;
    position: absolute;
}

.mid_cake>.cover {
    width: 5.5em;
    height: 5.5em;
    position: absolute;
}

.bot_cake>.cover {
    width: 7em;
    height: 7em;
    position: absolute;
    transform: sca;
}

.top_cake>.side {
    background-color: wheat;
    width: 4em;
    height: 2em;
    position: absolute;
}

.mid_cake>.side {
    width: 5.5em;
    height: 2em;
    position: absolute;
}

.bot_cake>.side {
    width: 7em;
    height: 2em;
    position: absolute;
}

.cake> :not(.candle) .side {
    background: linear-gradient(to bottom, wheat 20%, brown 70%);
}

.cake> :not(.candle) .cover {
    background: radial-gradient(blanchedalmond 50%, wheat);
}

#front {
    transform: translateZ(5em) rotateX(0deg);
}

#left {
    transform: translateX(-50%) rotateY(-90deg);
}

#right {
    transform: translateX(50%) rotateY(90deg);
}

#back {
    transform: translateZ(-50px) rotateY(180deg);
}

#top {
    transform: translateY(-50%) rotateX(90deg);
}

#bottom {
    background: brown;
    transform: translateY(0%) rotateX(-90deg);
}

.top_cake>#front {
    transform: translateZ(2em) rotateX(0deg);
}

.top_cake>#back {
    transform: translateZ(-2em) rotateY(180deg);
}

.top_cake>#bottom {
    transform: translateY(0%) rotateX(-90deg);
}

.mid_cake>#front {
    transform: translateZ(2.75em) rotateX(0deg);
}

.mid_cake>#back {
    transform: translateZ(-2.75em) rotateY(180deg);
}

.mid_cake>#bottom {
    transform: translateY(-13.5%) rotateX(-90deg);
}

.bot_cake>#front {
    transform: translateZ(3.5em) rotateX(0deg);
}

.bot_cake>#back {
    transform: translateZ(-3.5em) rotateY(180deg);
}

.bot_cake>#bottom {
    transform: translateY(-21.5%) rotateX(-90deg);
}


#text-container {
    align-items: center;
    align-self: center;
    justify-content: center;
    position: absolute;
    font-weight: bold;
    text-align: center;
    padding: 20px;
}

.word {
    display: inline-block;
    margin: 0 15px;
    white-space: nowrap;
}

.letter {
    font-size: 5em;
    display: inline-block;
    position: relative;
    opacity: 0;
    background: linear-gradient(180deg, var(--letter-color-1) 0%, var(--letter-color-2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 var(--glow-1, 20px) var(--letter-color-1)) drop-shadow(0 0 var(--glow-2, 40px) var(--letter-color-2)) drop-shadow(0 0 var(--glow-3, 60px) var(--letter-color-1));
}

.spark {
    position: fixed;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
}

.steam-particle {
    position: fixed;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
}

.container {
    display: none;
    align-items: center;
    align-self: center;
    justify-content: center;
    position: absolute;
    font-weight: bold;
    text-align: center;
    max-width: 80%;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

#typewriter-text {
    line-height: 1.6;
    color: #FFF;
    word-wrap: break-word;
    white-space: pre-wrap;
    min-height: 40px;
}

.word-anim {
    margin-inline: 0.5em;
    display: inline-block;
    white-space: nowrap;
}

.cursor {
    display: inline-block;
    width: 2px;
    height: 2.4em;
    background-color: #667eea;
    margin-left: 2px;
    animation: blink 0.8s infinite;
    vertical-align: text-bottom;
}

@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

.letter-anim {
    font-size: 2em;
    display: inline-block;
    opacity: 0;
    animation: slideIn 0.3s forwards;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.tree-container {
    display: none;
    width: fit-content;
    height: fit-content;
    align-items: center;
    align-self: center;
    justify-content: center;
    position: absolute;
    margin-top: 8em;
}

.tree-model {
    width: 10em;
    height: 10em;
    background: brown;
    transform-origin: bottom;
    clip-path: polygon(44.80% 100.0%, 44.6820% 99.0%, 44.5680% 98.0%, 44.4580% 97.0%, 44.3520% 96.0%, 44.250% 95.0%, 44.1520% 94.0%, 44.0580% 93.0%, 43.9680% 92.0%, 43.8820% 91.0%, 43.80% 90.0%, 43.7220% 89.0%, 43.6480% 88.0%, 43.5780% 87.0%, 43.5120% 86.0%, 43.450% 85.0%, 43.3920% 84.0%, 43.3380% 83.0%, 43.2880% 82.0%, 43.2420% 81.0%, 43.20% 80.0%, 43.1620% 79.0%, 43.1280% 78.0%, 43.0980% 77.0%, 43.0720% 76.0%, 43.050% 75.0%, 43.0320% 74.0%, 43.0180% 73.0%, 43.0080% 72.0%, 43.0020% 71.0%, 43.0% 70.0%, 43.0020% 69.0%, 43.0080% 68.0%, 43.0180% 67.0%, 43.0320% 66.0%, 43.050% 65.0%, 43.0720% 64.0%, 43.0980% 63.0%, 43.1280% 62.0%, 43.1620% 61.0%, 43.20% 60.0%, 43.2420% 59.0%, 43.2880% 58.0%, 43.3380% 57.0%, 43.3920% 56.0%, 43.450% 55.0%, 43.5120% 54.0%, 43.5780% 53.0%, 43.6480% 52.0%, 43.7220% 51.0%, 43.80% 50.0%, 43.8820% 49.0%, 43.9680% 48.0%, 44.0580% 47.0%, 44.1520% 46.0%, 44.250% 45.0%, 44.3520% 44.0%, 44.4580% 43.0%, 44.5680% 42.0%, 44.6820% 41.0%, 44.80% 40.0%, 44.9220% 39.0%, 45.0480% 38.0%, 45.1780% 37.0%, 45.3120% 36.0%, 45.450% 35.0%, 45.5920% 34.0%, 45.7380% 33.0%, 45.8880% 32.0%, 46.0420% 31.0%, 46.20% 30.0%, 46.3620% 29.0%, 46.5280% 28.0%, 46.6980% 27.0%, 46.8720% 26.0%, 47.050% 25.0%, 47.2320% 24.0%, 47.4180% 23.0%, 47.6080% 22.0%, 47.8020% 21.0%, 48.00% 20.0%, 48.2020% 19.0%, 48.4080% 18.0%, 48.6180% 17.0%, 48.8320% 16.0%, 49.050% 15.0%, 49.2720% 14.0%, 49.4980% 13.0%, 49.7280% 12.0%, 49.9620% 11.0%, 50.20% 10.0%, 50.4420% 9.0%, 50.6880% 8.0%, 50.9380% 7.0%, 51.1920% 6.0%, 51.450% 5.0%, 51.7120% 4.0%, 51.9780% 3.0%, 52.2480% 2.0%, 52.5220% 1.0%, 52.80% 0.0%, 52.97999555555555555555555556% -1.0%, 52.79999555555555555555555556% 0.0%, 52.624440% 1.0%, 52.45332888888888888888888889% 2.0%, 52.28666222222222222222222222% 3.0%, 52.124440% 4.0%, 51.96666222222222222222222222% 5.0%, 51.81332888888888888888888889% 6.0%, 51.664440% 7.0%, 51.51999555555555555555555556% 8.0%, 51.37999555555555555555555556% 9.0%, 51.244440% 10.0%, 51.11332888888888888888888889% 11.0%, 50.98666222222222222222222222% 12.0%, 50.864440% 13.0%, 50.74666222222222222222222222% 14.0%, 50.63332888888888888888888889% 15.0%, 50.524440% 16.0%, 50.41999555555555555555555556% 17.0%, 50.31999555555555555555555556% 18.0%, 50.224440% 19.0%, 50.13332888888888888888888889% 20.0%, 50.04666222222222222222222222% 21.0%, 49.964440% 22.0%, 49.88666222222222222222222222% 23.0%, 49.81332888888888888888888889% 24.0%, 49.744440% 25.0%, 49.67999555555555555555555556% 26.0%, 49.61999555555555555555555556% 27.0%, 49.564440% 28.0%, 49.51332888888888888888888889% 29.0%, 49.46666222222222222222222222% 30.0%, 49.424440% 31.0%, 49.38666222222222222222222222% 32.0%, 49.35332888888888888888888889% 33.0%, 49.324440% 34.0%, 49.29999555555555555555555556% 35.0%, 49.27999555555555555555555556% 36.0%, 49.264440% 37.0%, 49.25332888888888888888888889% 38.0%, 49.24666222222222222222222222% 39.0%, 49.244440% 40.0%, 49.24666222222222222222222222% 41.0%, 49.25332888888888888888888889% 42.0%, 49.264440% 43.0%, 49.27999555555555555555555556% 44.0%, 49.29999555555555555555555556% 45.0%, 49.324440% 46.0%, 49.35332888888888888888888889% 47.0%, 49.38666222222222222222222222% 48.0%, 49.424440% 49.0%, 49.46666222222222222222222222% 50.0%, 49.51332888888888888888888889% 51.0%, 49.564440% 52.0%, 49.61999555555555555555555556% 53.0%, 49.67999555555555555555555556% 54.0%, 49.744440% 55.0%, 49.81332888888888888888888889% 56.0%, 49.88666222222222222222222222% 57.0%, 49.964440% 58.0%, 50.04666222222222222222222222% 59.0%, 50.13332888888888888888888889% 60.0%, 50.224440% 61.0%, 50.31999555555555555555555556% 62.0%, 50.41999555555555555555555556% 63.0%, 50.524440% 64.0%, 50.63332888888888888888888889% 65.0%, 50.74666222222222222222222222% 66.0%, 50.864440% 67.0%, 50.98666222222222222222222222% 68.0%, 51.11332888888888888888888889% 69.0%, 51.244440% 70.0%, 51.37999555555555555555555556% 71.0%, 51.51999555555555555555555556% 72.0%, 51.664440% 73.0%, 51.81332888888888888888888889% 74.0%, 51.96666222222222222222222222% 75.0%, 52.124440% 76.0%, 52.28666222222222222222222222% 77.0%, 52.45332888888888888888888889% 78.0%, 52.624440% 79.0%, 52.79999555555555555555555556% 80.0%, 52.97999555555555555555555556% 81.0%, 53.164440% 82.0%, 53.35332888888888888888888889% 83.0%, 53.54666222222222222222222222% 84.0%, 53.744440% 85.0%, 53.94666222222222222222222222% 86.0%, 54.15332888888888888888888889% 87.0%, 54.364440% 88.0%, 54.57999555555555555555555556% 89.0%, 54.79999555555555555555555556% 90.0%, 55.024440% 91.0%, 55.25332888888888888888888889% 92.0%, 55.48666222222222222222222222% 93.0%, 55.724440% 94.0%, 55.96666222222222222222222222% 95.0%, 56.21332888888888888888888889% 96.0%, 56.464440% 97.0%, 56.71999555555555555555555556% 98.0%, 56.97999555555555555555555556% 99.0%, 57.244440% 100.0%);
    /* animation: tes12 3s forwards linear; */
}

#tree-body {
    scale: 2.4 3;
}

#tree-branch-1 {
    position: absolute;
    margin-left: -1em;
    margin-top: -15em;
    transform: rotateZ(60deg);
    scale: 1.1 1.1;
}

#tree-branch-2 {
    position: absolute;
    margin-left: 0em;
    margin-top: -17em;
    transform: rotateZ(-45deg) rotateY(180deg);
    scale: 1.1 1.1;
}

#tree-branch-3 {
    position: absolute;
    margin-left: -.7em;
    margin-top: -22em;
    transform: rotateZ(40deg);
    scale: .75 .75;
}

#tree-branch-4 {
    position: absolute;
    margin-left: -.6em;
    margin-top: -24em;
    transform: rotateZ(-35deg) rotateY(180deg);
    scale: .7 .7;
}

.star-constellation {
    display: none;
    align-items: center;
    align-self: center;
    justify-content: center;
    align-content: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    scale: 1;
    background: linear-gradient(to bottom, #0a1628 0%, #1a3a52 50%, #0a1628 100%);
}

.star-constellation > #background {
    position: absolute;
    justify-self: center;
    align-self: center;
    scale: 0.5;
    background: url("https://www.creativefabrica.com/wp-content/uploads/2023/01/31/Taurus-zodiac-sign-Star-constellation-Graphics-59532827-1.png") no-repeat;
    background-size: cover;
    width: 60em;
    height: 35em;
    position: absolute;
    display: none;
}

.star-container {
    scale: 1;
    display: none;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s infinite;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

.star-model {
    justify-self: center;
    align-self: center;
    transform-origin: center;
    position: absolute;
    width: 20em;
    height: 20em;
    border-radius: 50%;
    scale: .1;
    opacity: 0;
}

.light {
    justify-self: center;
    transform-origin: center;
    position: absolute;
    z-index: 0;
    width: 20em;
    height: 20em;
    border-radius: 50%;
    background: radial-gradient(white 0%, #ABD0F2 2%, transparent 20%);
    scale: 1;
}

.light::after {
    content: "";
    justify-self: center;
    transform-origin: center;
    position: absolute;
    z-index: 0;
    width: 20em;
    height: 20em;
    border-radius: 50%;
    filter: blur(30px);
    background: radial-gradient(#58A1D1 0%, transparent 30%);
    scale: 1;
}

.light::before {
    content: "";
    justify-self: center;
    transform-origin: center;
    position: absolute;
    z-index: 0;
    width: 20em;
    height: 20em;
    border-radius: 50%;
    filter: blur(80px);
    background: radial-gradient(#58A1D1 0%, transparent 50%);
    scale: 1;
}

.star-model::after {
    content: "";
    justify-self: center;
    align-self: center;
    transform-origin: center;
    position: absolute;
    width: 20em;
    height: 20em;
    clip-path: polygon(14.65% 14.65%,
            49.59% 49%,
            50% 0%,
            50.41% 49%,
            85.35% 14.65%,
            51% 49.59%,
            100% 50%,
            51% 50.41%,
            85.35% 85.35%,
            50.41% 51%,
            50% 100%,
            49.59% 51%,
            14.65% 85.35%,
            49% 50.41%,
            0% 50%,
            49% 49.59%);
    filter: blur(5px);
    background: radial-gradient(white 0%, #013468 80%);
    opacity: .9;
}

#star-1 {
    margin-top: -14.5em;
    margin-left: -10.8em;
    scale: .15;
    animation: star-on 1s 7s linear forwards;
}

#star-2 {
    margin-top: -8.4em;
    margin-left: -15.6em;
    animation: star-on 1s 5.5s linear forwards;
}

#star-3 {
    margin-top: -6.6em;
    margin-left: -2.25em;
    animation: star-on 1s 5.5s linear forwards;
}

#star-4 {
    margin-top: -2.9em;
    margin-left: -1.1em;
    scale: .07;
    animation: star-on 1s 5s linear forwards;
}

#star-5 {
    margin-top: -1em;
    margin-left: -1.7em;
    scale: .07;
    animation: star-on 1s 4.5s linear forwards;
}

#star-6 {
    margin-top: -.4em;
    margin-left: .1em;
    scale: .07;
    animation: star-on 1s 4.25s linear forwards;
}

#star-7 {
    margin-top: 1.5em;
    margin-left: -4.9em;
    animation: star-on 1s 4.5s linear forwards;
}

#star-8 {
    margin-top: 2em;
    margin-left: .8em;
    animation: star-on 1s 3.5s linear forwards;
}

#star-9 {
    margin-top: 6.9em;
    margin-left: 5.3em;
    scale: .15;
    animation: star-on 1s 2.5s linear forwards;
}

#star-10 {
    margin-top: 7.8em;
    margin-left: 14.2em;
    scale: .07;
    animation: star-on 1s 1.5s linear forwards;
}

#star-11 {
    margin-top: 11.6em;
    margin-left: 15.5em;
    animation: star-on 1s linear forwards;
}
@keyframes star-on {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
.line-model{
    justify-self: center;
    align-self: center;
    width: .05em;
    height: 5em;
    background-color: white;
    opacity: .7;
    filter: blur(.7px);
    position: absolute;
    transform-origin: bottom;
    margin-top: -15em;
    transform: scaleY(0);
}
#line-1{
    rotate: -20deg;
    height: 1em;
    margin-top: 9.6em;
    margin-left: 15.2em;
    animation: line-anim 1s 1s linear forwards;
}
#line-2{
    rotate: -85deg;
    height: 3.4em;
    margin-top: 4.5em;
    margin-left: 13.3em;
    animation: line-anim 1s 2s linear forwards;
}
#line-3{
    rotate: -42deg;
    height: 2em;
    margin-top: 3.9em;
    margin-left: 4.6em;
    animation: line-anim 1s 3s linear forwards;
}
#line-4{
    rotate: -17deg;
    height: .4em;
    margin-top: .6em;
    margin-left: .5em;
    animation: line-anim 1s 4s linear forwards;
}
#line-5{
    rotate: -86deg;
    height: 2em;
    margin-top: .23em;
    margin-left: -.1em;
    animation: line-anim 1s 4s linear forwards;
}
#line-6{
    rotate: -76deg;
    height: .4em;
    margin-top: -1.1em;
    margin-left: -.5em;
    animation: line-anim .5s 4.5s linear forwards;
}
#line-7{
    rotate: 25deg;
    height: .4em;
    margin-top: -2em;
    margin-left: -1.53em;
    animation: line-anim .5s 5s linear forwards;
}
#line-8{
    rotate: -47deg;
    height: 6em;
    margin-top: -5.4em;
    margin-left: -5.9em;
    animation: line-anim 1s 5s linear forwards;
}
#line-9{
    rotate: -19deg;
    height: 1.1em;
    margin-top: -4.7em;
    margin-left: -1.4em;
    animation: line-anim 1s 5.5s linear forwards;
}
#line-10{
    rotate: -48deg;
    height: 4.7em;
    margin-top: -12em;
    margin-left: -2.8em;
    animation: line-anim 1s 6.5s linear forwards;
}




@keyframes line-anim {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

@keyframes tes12 {
    from {
        background: linear-gradient(to bottom, transparent 100%, brown);
    }

    to {
        background: linear-gradient(to bottom, transparent 0%, brown);
    }
}








.candle {
    transform-style: preserve-3d;
    width: fit-content;
    height: fit-content;
    justify-content: center;
    display: none;
    margin-top: -8em;
    transform: scale3d(0.15, 0.4, 0.15);
}

.candle .side {
    width: 2em;
    height: 5em;
    background: linear-gradient(to bottom, wheat, blanchedalmond, white);
    position: absolute;
}

.candle .cover {
    position: absolute;
    background-color: wheat;
    width: 6.25em;
    height: 6.25em;
    margin-top: -3.15em;
    transform: rotateX(90deg) rotateZ(18deg);
    clip-path: polygon(50% 0%,
            79.39% 9.55%,
            97.55% 34.55%,
            97.55% 65.45%,
            79.39% 90.45%,
            50% 100%,
            20.61% 90.45%,
            2.45% 65.45%,
            2.45% 34.55%,
            20.61% 9.55%);
}


.fire-container {
    display: none;
    position: absolute;
    width: 300px;
    height: 400px;
    cursor: pointer;
    transform-style: preserve-3d;
    margin-top: -6em;
    transform: scale3d(0.1, 0.1, 0.1);
}

.fire-wrapper {
    filter: contrast(1.2) brightness(1.1);
}

/* Base glow */
.fire-base {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scale(0, 0);
    width: 180px;
    height: 40px;
    background: radial-gradient(ellipse at center,
            rgba(255, 100, 0, 0.8) 0%,
            rgba(255, 60, 0, 0.4) 50%,
            transparent 100%);
    filter: blur(15px);
    opacity: 0;
}

.flame {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform-origin: bottom center;
    mix-blend-mode: screen;
    transform-style: preserve-3d;
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
}

/* Main flame body - Deep red/orange base */
.flame-layer1 {
    width: 140px;
    height: 280px;
    background: linear-gradient(to top,
            rgba(180, 30, 0, 0.9) 0%,
            rgba(220, 50, 0, 0.8) 20%,
            rgba(255, 80, 0, 0.7) 45%,
            rgba(255, 120, 0, 0.5) 70%,
            rgba(255, 180, 0, 0.2) 90%,
            transparent 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    filter: blur(8px);
}

/* Secondary flame - Bright orange */
.flame-layer2 {
    width: 110px;
    height: 240px;
    background: linear-gradient(to top,
            rgba(255, 60, 0, 1) 0%,
            rgba(255, 100, 0, 0.9) 25%,
            rgba(255, 140, 0, 0.8) 50%,
            rgba(255, 180, 30, 0.6) 75%,
            rgba(255, 220, 80, 0.3) 95%,
            transparent 100%);
    border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
    filter: blur(5px);
}

/* Inner flame - Yellow-orange */
.flame-layer3 {
    width: 80px;
    height: 200px;
    background: linear-gradient(to top,
            rgba(255, 120, 0, 1) 0%,
            rgba(255, 160, 30, 1) 30%,
            rgba(255, 200, 60, 0.9) 60%,
            rgba(255, 230, 120, 0.6) 85%,
            rgba(255, 255, 200, 0.2) 100%);
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    filter: blur(3px);
}

/* Hot core - Bright yellow-white */
.flame-core {
    width: 45px;
    height: 140px;
    background: linear-gradient(to top,
            rgba(255, 180, 50, 1) 0%,
            rgba(255, 220, 100, 1) 35%,
            rgba(255, 245, 150, 0.95) 65%,
            rgba(255, 255, 220, 0.7) 90%,
            transparent 100%);
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    filter: blur(1px);
    box-shadow:
        0 0 30px rgba(255, 200, 100, 0.6),
        0 0 60px rgba(255, 150, 50, 0.3);
}

/* Realistic flame tip */
.flame-tip {
    width: 20px;
    height: 60px;
    background: linear-gradient(to top,
            rgba(255, 230, 150, 0.8) 0%,
            rgba(255, 245, 200, 0.6) 50%,
            transparent 100%);
    border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
    filter: blur(2px);
    bottom: 140px;
}

/* Embers/sparks */
.ember {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #ff6600;
    border-radius: 50%;
    bottom: 0;
    left: 50%;
    opacity: 0;
    box-shadow: 0 0 8px #ff4400;
}

/* Smoke effect */
.smoke {
    position: absolute;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle,
            rgba(80, 80, 80, 0.3) 0%,
            transparent 70%);
    border-radius: 50%;
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    filter: blur(8px);
}

/* ===== BURNING STATE ===== */
.fire-container.burning .fire-base {
    animation: baseGlow 2s ease-in-out infinite;
}

.fire-container.burning .flame-layer1 {
    animation: flame1 1.8s ease-in-out infinite;
}

.fire-container.burning .flame-layer2 {
    animation: flame2 1.4s ease-in-out infinite;
}

.fire-container.burning .flame-layer3 {
    animation: flame3 1s ease-in-out infinite;
}

.fire-container.burning .flame-core {
    animation: flameCore 0.7s ease-in-out infinite;
}

.fire-container.burning .flame-tip {
    animation: flameTip 0.5s ease-in-out infinite;
}

/* ===== IGNITING STATE ===== */
.fire-container.igniting .fire-base {
    animation: igniteBase 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.fire-container.igniting .flame-layer1 {
    animation: igniteFlame 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.fire-container.igniting .flame-layer2 {
    animation: igniteFlame 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}

.fire-container.igniting .flame-layer3 {
    animation: igniteFlame 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

.fire-container.igniting .flame-core {
    animation: igniteFlame 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

.fire-container.igniting .flame-tip {
    animation: igniteFlame 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}

/* ===== EXTINGUISHING STATE ===== */
.fire-container.extinguishing .fire-base {
    animation: extinguishBase 0.8s ease-out forwards;
}

.fire-container.extinguishing .flame-layer1 {
    animation: extinguish1 0.8s ease-out forwards;
}

.fire-container.extinguishing .flame-layer2 {
    animation: extinguish2 0.7s ease-out 0.05s forwards;
}

.fire-container.extinguishing .flame-layer3 {
    animation: extinguish3 0.6s ease-out 0.1s forwards;
}

.fire-container.extinguishing .flame-core {
    animation: extinguishCore 0.5s ease-out 0.15s forwards;
}

.fire-container.extinguishing .flame-tip {
    animation: extinguishTip 0.4s ease-out 0.2s forwards;
}

/* ===== BURNING ANIMATIONS ===== */
@keyframes baseGlow {

    0%,
    100% {
        transform: translateX(-50%) scale(1, 1);
        opacity: 0.8;
    }

    50% {
        transform: translateX(-50%) scale(1.1, 0.9);
        opacity: 1;
    }
}

@keyframes flame1 {

    0%,
    100% {
        transform: translateX(-50%) scaleX(1) scaleY(1) rotate(-1deg);
        opacity: 1;
    }

    25% {
        transform: translateX(-50%) scaleX(1.05) scaleY(0.95) rotate(2deg);
    }

    50% {
        transform: translateX(-50%) scaleX(0.95) scaleY(1.05) rotate(-2deg);
    }

    75% {
        transform: translateX(-50%) scaleX(1.02) scaleY(0.98) rotate(1.5deg);
    }
}

@keyframes flame2 {

    0%,
    100% {
        transform: translateX(-50%) scaleX(1) scaleY(1) rotate(2deg);
        opacity: 1;
    }

    33% {
        transform: translateX(-50%) scaleX(1.04) scaleY(0.96) rotate(-1deg);
    }

    66% {
        transform: translateX(-50%) scaleX(0.96) scaleY(1.04) rotate(2deg);
    }
}

@keyframes flame3 {

    0%,
    100% {
        transform: translateX(-50%) scaleX(1) scaleY(1) rotate(-1.5deg);
        opacity: 1;
    }

    50% {
        transform: translateX(-50%) scaleX(1.06) scaleY(0.94) rotate(1.5deg);
    }
}

@keyframes flameCore {

    0%,
    100% {
        transform: translateX(-50%) scaleX(1) scaleY(1);
        opacity: 1;
    }

    50% {
        transform: translateX(-50%) scaleX(1.1) scaleY(0.9);
        opacity: 0.85;
    }
}

@keyframes flameTip {

    0%,
    100% {
        transform: translateX(-50%) scaleY(1) rotate(-3deg);
        opacity: 0.7;
    }

    50% {
        transform: translateX(-50%) scaleY(1.15) rotate(3deg);
        opacity: 0.9;
    }
}

/* ===== IGNITE ANIMATIONS - Grow from bottom ===== */
@keyframes igniteBase {
    from {
        transform: translateX(-50%) scale(0, 0);
        opacity: 0;
    }

    to {
        transform: translateX(-50%) scale(1, 1);
        opacity: 0.8;
    }
}

@keyframes igniteFlame {
    from {
        transform: translateX(-50%) scaleY(0);
        opacity: 0;
    }

    to {
        transform: translateX(-50%) scaleY(1);
        opacity: 1;
    }
}

/* ===== EXTINGUISH ANIMATIONS - Shrink from top to bottom ===== */
@keyframes extinguishBase {
    0% {
        opacity: 0.8;
        transform: translateX(-50%) scale(1, 1);
    }

    60% {
        opacity: 0.3;
        transform: translateX(-50%) scale(0.7, 0.5);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scale(0.3, 0.1);
    }
}

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

    30% {
        opacity: 0.8;
        transform: translateX(-50%) scale(0.9, 0.7);
    }

    70% {
        opacity: 0.3;
        transform: translateX(-50%) scale(0.5, 0.3);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scale(0.2, 0.1);
    }
}

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

    40% {
        opacity: 0.7;
        transform: translateX(-50%) scale(0.8, 0.6);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scale(0.2, 0.1);
    }
}

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

    50% {
        opacity: 0.6;
        transform: translateX(-50%) scale(0.7, 0.5);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scale(0.15, 0.05);
    }
}

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

    60% {
        opacity: 0.4;
        transform: translateX(-50%) scale(0.5, 0.3);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scale(0.1, 0.05);
    }
}

@keyframes extinguishTip {
    0% {
        opacity: 0.7;
        transform: translateX(-50%) scale(1, 1);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scale(0, 0);
    }
}

/* ===== PARTICLE ANIMATIONS ===== */
@keyframes emberRise {
    0% {
        bottom: 20px;
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    100% {
        bottom: 350px;
        opacity: 0;
        transform: translateX(var(--drift)) scale(0.3);
    }
}

@keyframes smokeRise {
    0% {
        bottom: 200px;
        opacity: 0;
        transform: translateX(-50%) scale(0.5);
    }

    50% {
        opacity: 0.4;
    }

    100% {
        bottom: 400px;
        opacity: 0;
        transform: translateX(calc(-50% + var(--smoke-drift))) scale(2);
    }
}

.ember.active {
    animation: emberRise var(--duration) ease-out forwards;
}

.smoke.active {
    animation: smokeRise var(--smoke-duration) ease-out forwards;
}

/* Click hint */
.fire-container::after {
    content: 'Click to turn off';
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-family: Arial, sans-serif;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s;
}

.fire-container:hover::after {
    opacity: 1;
}

.fire-container.off::after,
.fire-container.extinguishing::after {
    content: 'Click to turn on';
}

.fire-container.igniting::after {
    content: 'Igniting...';
}