/*=============================================================
    FIREPOP PRELOADER
    Version : 2.0 Premium Franchise Edition
    Part 1
==============================================================*/


/*=============================================================
    ROOT VARIABLES
==============================================================*/

:root{

    --bg:#050505;

    --red:#ff3d2e;
    --orange:#ff7b28;

    --purple:#8a2eff;

    --gold:#d4af37;

    --white:#ffffff;

    --grey:#bdbdbd;

}



/*=============================================================
    RESET
==============================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    background:var(--bg);

    font-family:'Poppins',sans-serif;

    color:white;

}



/*=============================================================
    PRELOADER
==============================================================*/

#preloader{

    position:fixed;

    inset:0;

    z-index:99999;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    background:
        radial-gradient(circle at center,
        #111111 0%,
        #070707 40%,
        #040404 100%);

    transition:

        opacity 1.2s ease,

        visibility 1.2s ease;

}



/* removed by JS */

#preloader.hide{

    opacity:0;

    visibility:hidden;

}



/*=============================================================
    LOADER
==============================================================*/

.loader{

    position:relative;

    width:100%;

    max-width:1100px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    z-index:100;

}



/*=============================================================
    BACKGROUND GLOWS
==============================================================*/

.background-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    pointer-events:none;

    opacity:.25;

    animation:ambientGlow 8s ease-in-out infinite;

}



.glow-left{

    width:420px;

    height:420px;

    background:rgba(255,61,46,.35);

    left:-120px;

    top:30%;

}



.glow-right{

    width:420px;

    height:420px;

    background:rgba(138,46,255,.30);

    right:-120px;

    bottom:15%;

}



/*=============================================================
    BOWL LOGO
==============================================================*/

.logo-container{

    position:relative;

    width:240px;

    height:240px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:0px;

}



.bowl-logo{

    width:190px;

    opacity:0;

    transform:

        scale(.82)

        rotate(-3deg);

    filter:

        brightness(.15)

        blur(2px)

        drop-shadow(0 0 0 transparent);

}



/* JS adds this */

.bowl-logo.show{

    opacity:1;

    transform:

        scale(1)

        rotate(0deg);

    filter:

        brightness(1)

        blur(0)

        drop-shadow(0 0 20px rgba(255,70,30,.35))

        drop-shadow(0 0 35px rgba(138,46,255,.20));

    transition:

        all 1.2s cubic-bezier(.2,.8,.2,1);

}



/*=============================================================
    STEAM
==============================================================*/

.steam{

    position:absolute;

    left:50%;

    top:-5px;

    width:130px;

    height:150px;

    transform:translateX(-50%);

    pointer-events:none;

}



.steam span{

    position:absolute;

    bottom:5px;

    width:18px;

    height:90px;

    opacity:0;

    border-radius:100px;

    filter:blur(10px);

    background:

        linear-gradient(

            to top,

            rgba(255,255,255,.08),

            rgba(255,255,255,.60),

            rgba(255,255,255,0)

        );

}



/* left */

.steam span:nth-child(1){

    left:18px;

}



/* middle */

.steam span:nth-child(2){

    left:55px;

}



/* right */

.steam span:nth-child(3){

    right:18px;

}



/* JS adds this */

.steam.active span:nth-child(1){

    animation:

        steamRise1 3.2s infinite ease-in-out;

}



.steam.active span:nth-child(2){

    animation:

        steamRise2 3.6s infinite ease-in-out;

    animation-delay:.6s;

}



.steam.active span:nth-child(3){

    animation:

        steamRise3 3.0s infinite ease-in-out;

    animation-delay:1s;

}



/*=============================================================
    EMBERS
==============================================================*/

#embers{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:5;

}



/*=============================================================
    FUTURE EMBER PARTICLES
==============================================================*/

.ember{

    position:absolute;

    width:4px;

    height:4px;

    border-radius:50%;

    background:var(--orange);

    opacity:0;

    filter:blur(1px);

}



/*=============================================================
    WEBSITE
==============================================================*/

#website{

    min-height:100vh;

    opacity:0;

    transition:opacity 1.2s ease;

    background:#050505;

}



#website.show{

    opacity:1;

}



/*=============================================================
    HERO
==============================================================*/

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-logo{

    display:block;

    width:500px;

    max-width:90%;

    height:auto;

    margin:30px auto;

    object-fit:contain;

}


/*=============================================================
    ANIMATIONS
==============================================================*/

@keyframes ambientGlow{

    0%{

        transform:
            scale(1);

        opacity:.18;

    }

    50%{

        transform:
            scale(1.18);

        opacity:.35;

    }

    100%{

        transform:
            scale(1);

        opacity:.18;

    }

}



/*--------------------------------------------------------------
    STEAM
--------------------------------------------------------------*/

@keyframes steamRise1{

    0%{

        opacity:0;

        transform:
            translateY(0)
            translateX(0)
            scale(.6);

    }

    20%{

        opacity:.65;

    }

    100%{

        opacity:0;

        transform:
            translateY(-115px)
            translateX(-12px)
            scale(1.8);

    }

}



@keyframes steamRise2{

    0%{

        opacity:0;

        transform:
            translateY(0)
            scale(.6);

    }

    25%{

        opacity:.8;

    }

    100%{

        opacity:0;

        transform:
            translateY(-130px)
            translateX(10px)
            scale(2);

    }

}



@keyframes steamRise3{

    0%{

        opacity:0;

        transform:
            translateY(0)
            scale(.7);

    }

    20%{

        opacity:.65;

    }

    100%{

        opacity:0;

        transform:
            translateY(-120px)
            translateX(16px)
            scale(1.7);

    }

}

/*=============================================================
    PART 2
    FIREPOP SVG LETTERS
==============================================================*/

.firepop-logo{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:10px;

    margin-top:0px;
    margin-bottom:25px;

    overflow:visible;

    min-height:110px;

}


/*--------------------------------------------------------------
    SVG LETTERS
--------------------------------------------------------------

.letter{

    position:relative;

    width:auto;
    height:82px;

    opacity:0;

    transform:
        translateY(18px)
        scale(.82);

    filter:

        brightness(.08)

        saturate(.2)

        contrast(.8)

        blur(1.6px)

        drop-shadow(0 0 0 rgba(0,0,0,0));

    transform-origin:center bottom;

    transition:

        transform .45s cubic-bezier(.18,.85,.25,1),

        opacity .35s ease,

        filter .45s ease;

}
*/

.letter{

    position:relative;

    display:flex;

    align-items:flex-end;

    justify-content:center;

    width:auto;

    height:82px;

    opacity:0;

    transform:
        translateY(18px)
        scale(.82);

    transition:
        transform .45s cubic-bezier(.18,.85,.25,1),
        opacity .35s ease,
        filter .45s ease;

}

.letter img{

    display:block;

    height:100%;

    width:auto;

    user-select:none;

    pointer-events:none;

}

/*=============================================================
    FIRE LETTERS
==============================================================*/

.letter.fire.active{

    opacity:1;

    transform:

        translateY(0)

        scale(1);

    filter:

        brightness(1.15)

        saturate(1.25)

        contrast(1.05)

        blur(0)

        drop-shadow(0 0 6px rgba(255,255,255,.35))

        drop-shadow(0 0 14px rgba(255,61,46,.85))

        drop-shadow(0 0 34px rgba(255,110,35,.70))

        drop-shadow(0 0 60px rgba(255,61,46,.40));

}



/*=============================================================
    POP LETTERS
==============================================================*/

.letter.pop.active{

    opacity:1;

    transform:

        translateY(0)

        scale(1);

    filter:

        brightness(1.12)

        saturate(1.35)

        contrast(1.08)

        blur(0)

        drop-shadow(0 0 8px rgba(255,255,255,.45))

        drop-shadow(0 0 18px rgba(138,46,255,.90))

        drop-shadow(0 0 40px rgba(178,77,255,.75))

        drop-shadow(0 0 70px rgba(138,46,255,.45));

}



/*=============================================================
    ACRYLIC FINISH
==============================================================*/

.letter::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:0;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.40),

            rgba(255,255,255,.12),

            rgba(255,255,255,0)

        );

    mix-blend-mode:screen;

}



.letter.active::after{

    animation:

        acrylicFlash .7s ease forwards;

}



/*=============================================================
    HEAT SHIMMER
==============================================================*/

.heat-wave{

    position:absolute;

    left:-220px;

    top:-30px;

    width:90px;

    height:150px;

    opacity:0;

    pointer-events:none;

    z-index:50;

    transform:skewX(-18deg);

    background:

        linear-gradient(

            90deg,

            rgba(255,255,255,0),

            rgba(255,180,70,.18),

            rgba(255,255,255,.85),

            rgba(255,180,70,.22),

            rgba(255,255,255,0)

        );

    filter:

        blur(8px);

}



/* JS adds this */

.heat-wave.run{

    animation:

        heatTravel 1.8s cubic-bezier(.2,.8,.2,1) forwards;

}



/*=============================================================
    IGNITION FLASH
==============================================================*/

.letter.ignite{

    animation:

        igniteFlash .35s ease-out;

}



/*=============================================================
    WHOLE LOGO PULSE
==============================================================*/

.firepop-logo.pulse{

    animation:

        logoPulse .7s ease;

}



/*=============================================================
    PREMIUM FLOAT
==============================================================*/

.firepop-logo.finished{

    animation:

        logoFloat 5s ease-in-out infinite;

}



/*=============================================================
    ANIMATIONS
==============================================================*/

@keyframes heatTravel{

    0%{

        opacity:0;

        left:-220px;

    }

    5%{

        opacity:1;

    }

    100%{

        opacity:0;

        left:760px;

    }

}



@keyframes igniteFlash{

    0%{

        transform:

            scale(.72)

            translateY(18px);

    }

    40%{

        transform:

            scale(1.14)

            translateY(-3px);

    }

    100%{

        transform:

            scale(1);

    }

}



@keyframes acrylicFlash{

    0%{

        opacity:0;

    }

    35%{

        opacity:.9;

    }

    100%{

        opacity:0;

    }

}



@keyframes logoPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.04);

    }

    100%{

        transform:scale(1);

    }

}



@keyframes logoFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-3px);

    }

    100%{

        transform:translateY(0px);

    }

}

/*=============================================================
    PART 3
    PREMIUM FINISHING
==============================================================*/


/*=============================================================
    KOREAN
==============================================================*/

.korean{

    margin-top:8px;

    font-family:'Noto Sans KR',sans-serif;

    font-size:30px;

    font-weight:500;

    letter-spacing:6px;

    color:#F2F2F2;

    opacity:0;

    transform:translateY(15px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}



.korean.show{

    opacity:1;

    transform:translateY(0);

}



/*=============================================================
    TAGLINE
==============================================================*/

.tagline{

    margin-top:14px;

    color:#BEBEBE;

    font-size:17px;

    letter-spacing:4px;

    font-weight:300;

    opacity:0;

    transform:translateY(10px);

    transition:all .8s ease;

}



.tagline.show{

    opacity:1;

    transform:translateY(0);

}



/*=============================================================
    LOADING BAR
==============================================================*/

.loading{

    margin-top:38px;

    width:260px;

}



.loading-bar{

    height:4px;

    width:100%;

    border-radius:20px;

    overflow:hidden;

    background:rgba(255,255,255,.08);

}



.loading-bar span{

    display:block;

    width:0;

    height:100%;

    border-radius:20px;

    background:

    linear-gradient(

        90deg,

        var(--red),

        var(--orange),

        var(--purple)

    );

}



/* JS */

.loading-bar span.run{

    animation:

        loadingProgress 4.8s linear forwards;

}



/*=============================================================
    BOWL BREATHING GLOW
==============================================================*/

.bowl-logo.breathe{

    animation:

        bowlBreathing 2.8s ease-in-out infinite;

}



@keyframes bowlBreathing{

    0%{

        filter:

        brightness(.9)

        drop-shadow(0 0 8px rgba(255,61,46,.15))

        drop-shadow(0 0 15px rgba(138,46,255,.12));

    }

    50%{

        filter:

        brightness(1.08)

        drop-shadow(0 0 18px rgba(255,61,46,.45))

        drop-shadow(0 0 32px rgba(138,46,255,.25));

    }

    100%{

        filter:

        brightness(.9)

        drop-shadow(0 0 8px rgba(255,61,46,.15))

        drop-shadow(0 0 15px rgba(138,46,255,.12));

    }

}



/*=============================================================
    EMBERS
==============================================================*/

.ember{

    position:absolute;

    bottom:-20px;

    width:5px;

    height:5px;

    border-radius:50%;

    opacity:0;

}



.ember.orange{

    background:#FF7A28;

}



.ember.red{

    background:#FF3D2E;

}



.ember.white{

    background:#FFFFFF;

}



.ember.run{

    animation:

        emberRise 3s linear forwards;

}



@keyframes emberRise{

    0%{

        opacity:0;

        transform:

            translateY(0)

            scale(.5);

    }

    20%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:

            translateY(-280px)

            translateX(40px)

            scale(1.6);

    }

}



/*=============================================================
    HEAT DISTORTION PLACEHOLDER
==============================================================*/

.heat-wave{

    mix-blend-mode:screen;

    will-change:

        transform,

        opacity;

}



/*=============================================================
    PAGE FADE
==============================================================*/

.fade-out{

    animation:

        pageFade 1.2s ease forwards;

}



@keyframes pageFade{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}



/*=============================================================
    LOADING BAR
==============================================================*/

@keyframes loadingProgress{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}



/*=============================================================
    RESPONSIVE
==============================================================*/

@media(max-width:992px){

.firepop-logo{

gap:8px;

}

.letter{

height:65px;

}

.logo-container{

width:200px;
height:200px;

}

.bowl-logo{

width:165px;

}

}



@media(max-width:768px){

.logo-container{

width:170px;
height:170px;

}

.bowl-logo{

width:140px;

}

.letter{

height:48px;

}

.firepop-logo{

gap:5px;

}

.korean{

font-size:22px;

letter-spacing:4px;

}

.tagline{

font-size:13px;

letter-spacing:2px;

}

.loading{

width:180px;

}

}



@media(max-width:480px){

.letter{

height:34px;

}

.firepop-logo{

gap:3px;

}

.korean{

font-size:18px;

}

.tagline{

font-size:11px;

}

.logo-container{

width:140px;
height:140px;

}

.bowl-logo{

width:120px;

}

}



/*=============================================================
    PERFORMANCE
==============================================================*/

.logo-container,
.firepop-logo,
.letter,
.bowl-logo,
.heat-wave{

will-change:

transform,

opacity,

filter;

backface-visibility:hidden;

transform-style:preserve-3d;

}

/*==========================================
    LETTER STATES
==========================================*/

.letter{

    position:relative;

    overflow:visible;

}


/* warm acrylic */

.letter.warming{

    filter:

        brightness(.35)

        saturate(.8)

        blur(.6px);

}


/* backlight turns on */

.letter.backlit::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:8px;

    z-index:-1;

    opacity:1;

}


/* FIRE */

.letter.fire.backlit::before{

    background:

        radial-gradient(circle,

        rgba(255,61,46,.9),

        rgba(255,61,46,.18),

        transparent 70%);

}


/* POP */

.letter.pop.backlit::before{

    background:

        radial-gradient(circle,

        rgba(138,46,255,.9),

        rgba(138,46,255,.20),

        transparent 70%);

}

/*==============================================
    ENERGY SOURCE
==============================================*/

.energy-source{

    position:absolute;

    width:14px;

    height:14px;

    border-radius:50%;

    left:50%;

    top:46%;

    transform:translate(-50%,-50%);

    background:#FFD86A;

    opacity:0;

    filter:

        blur(2px)

        drop-shadow(0 0 10px #FF7A28)

        drop-shadow(0 0 22px #FF3D2E);

}

.energy-source.active{

    opacity:1;

}



.energy-orb{

    position:absolute;

    width:10px;

    height:10px;

    border-radius:50%;

    background:white;

    pointer-events:none;

    z-index:999;

    filter:

        blur(.5px)

        drop-shadow(0 0 8px #FF7A28)

        drop-shadow(0 0 16px #FF3D2E);

}


/*====================================================
    ACRYLIC REFLECTION
====================================================*/

.letter{

    overflow:hidden;

}



.letter::after{

    content:"";

    position:absolute;

    top:-20%;

    left:-160%;

    width:70%;

    height:150%;

    transform:skewX(-22deg);

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.85),

        transparent

    );

    opacity:0;

}



.letter.shine::after{

    animation:shineSweep .7s ease;

}



@keyframes shineSweep{

    from{

        left:-160%;

        opacity:.2;

    }

    25%{

        opacity:.9;

    }

    to{

        left:180%;

        opacity:0;

    }

}

/*=====================================================
    NAVBAR
======================================================*/

#navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:82px;

    display:flex;

    align-items:center;

    padding-left:40px;

    z-index:999;

    opacity:0;

    transition:opacity .8s ease;

}



#navbar.show{

    opacity:1;

}



.navbar-logo{

    width:70px;

    height:70px;

}



#navbarLogo{

    width:100%;

    opacity:0;

}
#brand{

    display:flex;

    align-items:center;

}



.brand-logo{

    display:flex;

    align-items:center;

    gap:12px;

}



.nav-bowl{

    width:52px;

    height:auto;

}



.nav-logo{

    width:180px;

    height:auto;

}