html,
body {
margin: 0;
width: 100%;
height: 100%;
}

body {
background: #000;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
}

main {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.logo {
display: flex;
align-items: center;
justify-content: center;
gap: 0.04em;

font-size: clamp(100px, 25vw, 320px);
font-weight: 900;
line-height: 0.8;
letter-spacing: -0.08em;

}

.letter {
    display: inline-block;
    position: relative;

    --burn-progress: 0;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    transition: filter 0.15s ease;

    opacity: calc(1 - (pow(var(--burn-progress), 0.7) * 0.92));
}

/* N + I */
.letter {
color: #fff;
}

/* F */
.letter.fire {
color: #e00000;
}
/* -------------------------
ACTIVE BURNING
------------------------- */

.letter.burning {
    animation: shake 1.5s ease-in-out infinite;

    filter:
        drop-shadow(0 0 3px rgba(255, 180, 50, 0.95))
        drop-shadow(0 0 8px rgba(255, 80, 0, 0.85))
        drop-shadow(0 0 18px rgba(255, 30, 0, 0.55));
}

/* -------------------------
BURNT OUT
------------------------- */

.letter.burned {
opacity: 0.05;
filter: none;
animation: none;
}

/* -------------------------
SLOW SHAKE
------------------------- */

@keyframes shake {
0%,
100% {
transform: translate(0, 0) rotate(0deg);
}

25% {
    transform: translate(-0.5px, 0.4px) rotate(-0.15deg);
}

50% {
    transform: translate(0.5px, -0.3px) rotate(0.15deg);
}

75% {
    transform: translate(-0.3px, -0.4px) rotate(-0.1deg);
}

}

/* =========================
FLAME
========================= */

.letter.burning::before,
.letter.burning::after {
content: "";
position: absolute;
left: 50%;
bottom: 3%;
pointer-events: none;
z-index: -1;

transform-origin: bottom center;

}

/* Outer flame */
.letter.burning::before {
width: 150%;
height: 170%;

background:
    radial-gradient(
        ellipse at 50% 75%,
        rgba(255, 210, 60, 0.95) 0%,
        rgba(255, 110, 0, 0.9) 30%,
        rgba(255, 35, 0, 0.65) 55%,
        rgba(255, 0, 0, 0) 75%
    );

filter: blur(2px);

clip-path: polygon(
    50% 100%,
    25% 82%,
    18% 62%,
    27% 70%,
    25% 43%,
    39% 58%,
    43% 28%,
    51% 52%,
    65% 18%,
    63% 51%,
    82% 38%,
    76% 67%,
    88% 61%,
    78% 86%
);

animation:
    flame-flicker 0.55s ease-in-out infinite alternate,
    flame-sway 1.1s ease-in-out infinite alternate;

}

/* Hot inner flame */
.letter.burning::after {
width: 76%;
height: 110%;

background:
    radial-gradient(
        ellipse at 50% 70%,
        #fff7a0 0%,
        #ffd83d 25%,
        #ff7b00 55%,
        rgba(255, 40, 0, 0) 75%
    );

filter: blur(1px);

clip-path: polygon(
    50% 100%,
    28% 78%,
    35% 57%,
    43% 66%,
    42% 38%,
    54% 57%,
    64% 28%,
    62% 60%,
    76% 53%,
    68% 81%
);

animation:
    flame-flicker-inner 0.32s ease-in-out infinite alternate;

}

/* Outer flame movement */
@keyframes flame-flicker {
0% {
transform: translateX(-50%) scaleX(0.85) scaleY(0.9);
opacity: 0.75;
}

35% {
    transform: translateX(-50%) scaleX(1.05) scaleY(1.08);
    opacity: 0.95;
}

70% {
    transform: translateX(-50%) scaleX(0.9) scaleY(1.15);
    opacity: 0.8;
}

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

}

/* Flame leans around */
@keyframes flame-sway {
0% {
rotate: -3deg;
}

100% {
    rotate: 4deg;
}

}

/* Inner flame flickers faster */
@keyframes flame-flicker-inner {
0% {
transform: translateX(-50%) scale(0.8, 0.9);
opacity: 0.75;
}

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

100% {
    transform: translateX(-50%) scale(0.9, 1.15);
    opacity: 0.85;
}

}