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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

    background:#000;

    color:#fff;


    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC";


    overflow:hidden;

}







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


.bg{


    position:fixed;


    inset:0;



    background-size:cover;


    background-position:center;



    opacity:0;



    transition:1.2s ease;



    filter:

    brightness(.55)

    contrast(1.08);



    z-index:1;


}




.bg.active{


    opacity:1;


}








/* ================= SCENE ================= */


.scene{


    position:fixed;


    inset:0;



    display:flex;



    flex-direction:column;



    align-items:center;



    justify-content:center;



    text-align:center;



    opacity:0;



    transform:

    translateY(12px);



    transition:

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



    pointer-events:none;



    z-index:2;


}





.scene.active{


    opacity:1;



    transform:

    translateY(0);



    pointer-events:auto;


}








/* ================= TEXT ================= */


.scene h1{


    font-size:70px;



    font-weight:600;



    letter-spacing:-1px;


}





.scene p{


    font-size:16px;



    opacity:.45;



    margin-top:10px;



    letter-spacing:.5px;


}







/* ================= HOME ================= */


.scene[data-state="home"]{


    justify-content:flex-start;



    padding-top:61.8vh;


}



.scene[data-state="home"] h1{


    transform:

    translateY(-20px);


}








/* ================= NAV LIQUID GLASS ================= */


.nav{


    position:fixed;



    top:18px;



    left:50%;



    transform:

    translateX(-50%);



    display:flex;



    align-items:center;



    gap:64px;



    padding:

    14px 26px;



    border-radius:999px;



    background:

    linear-gradient(

    to bottom,

    rgba(255,255,255,.14),

    rgba(255,255,255,.08)

    );



    backdrop-filter:

    blur(52px);



    border:

    1px solid rgba(255,255,255,.18);



    box-shadow:

    0 6px 20px rgba(0,0,0,.25);



    z-index:9999;


}








/* ================= NAV ITEM ================= */


.nav-item{


    display:flex;



    flex-direction:column;



    align-items:center;



    cursor:pointer;



    opacity:.55;



    transition:.25s ease;



    position:relative;


}





.nav-item span{


    font-size:15px;


}





.nav-item small{


    font-size:11px;



    opacity:.4;


}





.nav-item.active{


    opacity:1;



    transform:

    translateY(-1px);


}





.nav-item.active::after{


    content:"";



    position:absolute;



    bottom:-6px;



    width:18px;



    height:2px;



    background:white;



    border-radius:2px;



    opacity:.6;


}







/* ================= DROPDOWN ================= */


.nav-group{


    position:relative;


}



.dropdown{


    position:absolute;



    top:54px;



    left:50%;



    transform:

    translateX(-50%);



    display:flex;



    gap:22px;



    padding:

    16px 20px;



    background:

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



    backdrop-filter:

    blur(54px);



    border:

    1px solid rgba(255,255,255,.12);



    border-radius:16px;



    opacity:0;



    pointer-events:none;



    transition:.22s ease;



    z-index:9999;


}



.nav-group.open .dropdown{


    opacity:1;



    pointer-events:auto;


}





.drop-item{


    font-size:13px;



    opacity:.75;



    transition:.2s ease;


}

.drop-item{

    text-decoration:none;

    color:white;

    display:block;

}





.drop-item:hover{


    opacity:1;



    transform:

    translateY(-1px);


}

/* ================================================= */
/* =============== FLAGSHIP EXPERIENCE ============= */
/* ================================================= */


.flagship-scene{

    pointer-events:none;

}



.flagship-scene.active{

    pointer-events:auto;

}







/* ================= FLAGSHIP SCROLL ================= */


.flagship-scroll{


    width:100%;


    height:100vh;



    overflow-y:auto;



    -webkit-overflow-scrolling:touch;


}



.flagship-scroll::-webkit-scrollbar{


    display:none;


}







/* ================= SECTION ================= */


.flagship-section{


    position:relative;



    width:100%;



    min-height:100vh;



    display:flex;



    align-items:center;



    justify-content:center;



    overflow:hidden;


}







/* ================= IMAGE MOTION ================= */


.flagship-section img{


    position:absolute;



    inset:0;



    width:100%;



    height:100%;



    object-fit:cover;



    filter:

    brightness(.55)

    contrast(1.08);



    transform:scale(1.03);



    transition:

    transform 1.4s ease;



    z-index:1;


}



.flagship-section.active img{


    transform:scale(1);


}







/* ================= IMAGE BLEND ================= */


.flagship-section::after{


    content:"";



    position:absolute;



    inset:0;



    background:


    linear-gradient(

    to bottom,

    transparent 55%,

    rgba(0,0,0,.45)

    );



    z-index:1;


}







/* ================= CONTENT ================= */


.flagship-content{


    position:absolute;



    z-index:2;



    max-width:520px;



    opacity:0;



    transform:

    translateY(20px);



    transition:


    opacity .9s ease,

    transform .9s ease;


}





.flagship-section.active .flagship-content{


    opacity:1;



    transform:

    translateY(0);


}







.flagship-content h1{


    font-size:70px;



    font-weight:600;



    letter-spacing:-1px;



    line-height:1.15;


}





.flagship-content p{


    margin-top:12px;



    font-size:16px;



    opacity:.5;



    letter-spacing:.5px;


}





.flagship-content span{


    display:block;



    margin-top:18px;



    font-size:15px;



    line-height:1.8;



    opacity:.55;


}







/* ================= TEXT POSITION ================= */


.flagship-left{


    left:9%;



    bottom:12%;



    text-align:left;


}





.flagship-right{


    right:9%;



    bottom:12%;



    text-align:left;


}





.flagship-center{


    left:50%;



    bottom:15%;



    transform:

    translateX(-50%);



    text-align:center;


}







.flagship-section.active .flagship-center{


    transform:

    translateX(-50%)

    translateY(0);


}







/* ================= MOBILE ================= */


@media(max-width:768px){



.flagship-content{


    left:8%;


    right:8%;


    bottom:12%;



    max-width:none;



    text-align:left;


}




.flagship-content h1{


    font-size:42px;


}





.flagship-content p{


    font-size:14px;


}





.flagship-content span{


    font-size:13px;


}



}

/* ================= NAV LINK ================= */


.nav a{

    color:white;

    text-decoration:none;

}

/* ================= PRODUCT NAV LINK ================= */


.nav-item a{

    display:flex;

    flex-direction:column;

    align-items:center;

    color:white;

    text-decoration:none;

}

/* ================================================= */
/* ================= ABOUT EXPERIENCE ============= */
/* ================================================= */

.about-scene{
    pointer-events:none;
    background:#000;
}

.about-scene.active{
    pointer-events:auto;
}

.about-scroll{
    width:100%;
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.about-scroll::-webkit-scrollbar{
    display:none;
    width:0;
    height:0;
}

.about-section{
    position:relative;
    width:100%;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transform:translateY(30px);
    transition:opacity 1.1s cubic-bezier(.2,.8,.2,1), transform 1.1s cubic-bezier(.2,.8,.2,1);
}

.about-section img{
    width:100%;
    height:100%;
    object-fit:contain;
    background:#000;
    filter:none;
}

.about-section.active{
    opacity:1;
    transform:translateY(0);
}