@import url('https://fonts.cdnfonts.com/css/canela-text-trial');
@import url('https://fonts.cdnfonts.com/css/special-elite');
@import url('https://fonts.cdnfonts.com/css/ibm-plex-mono-3');
@import url('https://fonts.cdnfonts.com/css/neue-haas-grotesk-display-pro');

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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Canela Text Trial", serif;
    background:#000;
    color:#fff;
    overflow-x:hidden;
    overflow-y:auto;
}

/*=========================================
    FOOTER
=========================================*/

.footer{

    position:relative;

    width:100%;

    padding:70px 60px 45px;

    z-index:5;

}

.footer-divider{

    width:100%;
    height:1px;

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

    margin-bottom:35px;

}

.footer-content{

    display:flex;

    justify-content:space-between;
    align-items:center;

    gap:20px;

}

.footer-left,
.footer-center,
.footer-right{

    font-family:'IBM Plex Mono', monospace;

    font-size:.75rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:rgba(255,255,255,.45);

    transition:.35s;

}

.footer-content div:hover{

    color:rgba(255,255,255,.8);

}

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

@media(max-width:768px){

    .footer{

        padding:50px 30px 35px;

    }

    .footer-content{

        flex-direction:column;

        gap:18px;

        text-align:center;

    }

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

.hero{

    position:relative;

    z-index:3;

    margin-bottom:-8vh;


    height:100vh;

    background:none;

}

.site-background {
    position: fixed;
    inset: 0;

    background: url("https://res.cloudinary.com/dzjksvbi/image/upload/hero-bg.jpg") center center no-repeat;
    background-size: cover;

    z-index: -10;

    will-change: transform;
    transform: translateY(0);
}
/* ==========================================
   HEADER
========================================== */

header{
    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:90px;

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:9999;

    transition:transform .4s ease;

    transform:translateY(0);
}

header.hide{
    transform:translateY(-120%);
}

.navbar{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:120px;
}

.navbar a{
    position:relative;

    text-decoration:none;
    color:#F5F5F5;

    font-size:10px;
    font-weight:300;

    transition:opacity .35s;
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
}

.navbar a:hover{
    opacity:.65;
}

.navbar a::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-8px;

    width:0;
    height:1px;

    background:#fff;

    transform:translateX(-50%);

    transition:.35s;

}

.navbar a:hover::after{

    width:100%;

}


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

.hero-content{
    position:absolute;
    inset:0;
   top: 2%;
}


/* ==========================================
   05
========================================== */

.hero-number{

    position:absolute;

    left:50%;
    top: 35%;

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

    width: 150px;

    opacity:.95;

    z-index:1;

    filter:drop-shadow(0 0 12px rgba(255,255,255,.08));

}


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

.logo{

    position:absolute;

    left:50%;
    top:55%;

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

    text-align:center;

    z-index:2;

}

.logo div{

    font-size: 3rem;
    font-weight:300;

    line-height:.82;
    letter-spacing:1px;

}


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

.tagline{

    position:absolute;

    left:50%;
    top: 64%;

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

    white-space:nowrap;

    font-family: 'IBM Plex Mono Thin', sans-serif;

    font-size: 0.7rem;

    text-shadow:0 0 10px rgba(255,255,255,.15);

}


/* ==========================================
   BUTTON
========================================== */

.explore-btn{

    position:absolute;

    left:50%;
    top:76%;

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

    width: 257.4px;
    height: 70.356px;

    border:1px solid rgba(255,255,255,.75);
    border-radius:999px;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#fff;
    text-decoration:none;

    font-size: 23px;
    font-weight:100;

    transition:
        background .35s,
        color .35s,
        transform .35s,
        box-shadow .35s;

}

.explore-btn:hover{

    background:#fff;
    color:#000;

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

    box-shadow:0 10px 25px rgba(255,255,255,.18);

}


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

@keyframes fadeUp{

    from{
        opacity:0;
        margin-top:35px;
    }

    to{
        opacity:1;
        margin-top:0;
    }

}

.navbar a{

    opacity:0;
    animation:fadeUp .8s forwards;

}

.navbar a:nth-child(1){
    animation-delay:.1s;
}

.navbar a:nth-child(2){
    animation-delay:.2s;
}

.navbar a:nth-child(3){
    animation-delay:.3s;
}

.navbar a:nth-child(4){
    animation-delay:.4s;
}

.hero-number{

    opacity:0;
    animation:fadeUp 1s .45s forwards;

}

.logo{

    opacity:0;
    animation:fadeUp 1s .7s forwards;

}

.tagline{

    opacity:0;
    animation:fadeUp 1s .95s forwards;

}

.explore-btn{

    opacity:0;
    animation:fadeUp 1s 1.2s forwards;

}


/* ==========================================
   SCROLLED HEADER
========================================== */

header{

    transition:
        background .35s,
        backdrop-filter .35s,
        padding .35s;

}



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

@media (max-width:900px){

    .navbar{

        gap:45px;

    }

    .navbar a{

        font-size:15px;

    }

    .hero-number{

        width:280px;

    }

    .logo{

        top:58%;

    }

    .logo div{

        font-size:3.4rem;

    }

    .tagline{

        top:74%;

        font-size:2.2rem;

    }

    .explore-btn{

        top:89%;

        width:170px;
        height:48px;

        font-size:16px;

    }

}

@media (max-width:600px){

    header{

        top:28px;

    }

    .navbar{

        gap:22px;
        flex-wrap:wrap;

    }

    .navbar a{

        font-size:13px;

    }

    .hero-number{

        width:210px;

    }

    .logo{

        top:57%;

    }

    .logo div{

        font-size:2.5rem;

    }

    .tagline{

        top:72%;

        font-size:1.6rem;

    }

    .explore-btn{

        top:86%;

        width:150px;
        height:45px;

        font-size:14px;

    }

}

@keyframes float{

    0%{
        transform:translate(-50%,-50%) translateY(0px);
    }

    50%{
        transform:translate(-50%,-50%) translateY(-8px);
    }

    100%{
        transform:translate(-50%,-50%) translateY(0px);
    }

}

.hero-number{

    animation:
        fadeUp 1s .45s forwards,
        float 8s ease-in-out infinite 1.4s;

}





@keyframes buttonGlow{

    0%,100%{

        box-shadow:0 0 0 rgba(255,255,255,0);

    }

    50%{

        box-shadow:0 0 20px rgba(255,255,255,.18);

    }

}

.explore-btn{

    animation:
        fadeUp 1s 1.2s forwards,
        buttonGlow 6s ease-in-out infinite 2s;

}

.navbar:hover a{

    opacity:.35;

}

.navbar a:hover{

    opacity:1 !important;

}

.logo div{

    transition:
        letter-spacing .5s,
        transform .5s;

}

.logo:hover div{

    letter-spacing:8px;

    transform:translateY(-2px);

}

body{

    animation:intro 2.5s;

}

@keyframes intro{

    from{

        opacity:0;

        filter:blur(10px);

    }

    to{

        opacity:1;

        filter:blur(0);

    }

}

.hero-content{

    animation:breathe 12s ease-in-out infinite;

}

@keyframes breathe{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.006);

    }

}

/* ==========================================================
   PERFUME SECTIONS
========================================================== */

.perfume-section{
    position:relative;
    height:100vh;
    min-height:100vh;
    overflow:hidden;
}
.perfume-section:first-of-type{
    margin-top:0;
}







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

.perfume-bg{

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 1;

}


/* ==========================================================
   TITLE
========================================================== */

.perfume-title{

    position: absolute;

    top: 120px;
    left: 50%;

    transform: translateX(-50%);

    font-family: "Canela Text Trial", serif;

    font-size: 10rem;

    font-weight: 400;

    letter-spacing: -4px;

    line-height: .9;

    color: #F8F8F8;

    z-index: 2;

    white-space: nowrap;

}


/* ==========================================================
   BOTTLE
========================================================== */

.perfume-bottle{

    position: absolute;

    left: 50%;
    top: 70%;

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

    width: 600px;

    height: auto;

    z-index: 5;

}


/* ==========================================================
   NOTES
========================================================== */

.perfume-notes{

    position: absolute;

    left: 33%;

    top: 67%;

    transform: translateY(-50%);

    z-index: 6;

}

.perfume-notes p{

    margin: 0 0 2px;

    font-family: "Canela Text Trial", serif;

    font-size: 2rem;

    font-weight: 300;

    color: rgba(255,255,255,.82);

}


/* ==========================================================
   RATINGS
========================================================== */

.perfume-ratings{

    position: absolute;

    right: 37%;

    top: 67%;

    transform: translateY(-50%);

    text-align: right;

    z-index: 6;

}

.perfume-ratings p{

    margin: 0 0 2px;

    font-family: "Canela Text Trial", serif;

    font-size: 2rem;

    font-weight: 300;

    color: rgba(255,255,255,.82);

}


/* ==========================================================
   BUTTON
========================================================== */

.shop-btn{

    position: absolute;

    left: 50%;

    top:90%;

    transform: translateX(-50%);

    width: 210px;

    height: 58px;

    display: flex;

    justify-content: center;

    align-items: center;

    border: 1px solid rgba(255,255,255,.75);

    border-radius: 999px;

    color: #fff;

    text-decoration: none;

    font-family: "Canela Text Trial", serif;

    font-size: 1rem;

    letter-spacing: .08em;

    background: transparent;

    z-index: 10;

    animation:
        shopButtonGlow 7s ease-in-out infinite;

        position:relative;

    overflow:hidden;
    opacity:1 !important;
    visibility:visible !important;
        
}

.shop-btn::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transform:skewX(-20deg);

}

.shop-btn:hover::before{

    animation:buttonShine .9s ease;

}

@keyframes buttonShine{

    to{

        left:180%;

    }

}
.shop-btn:hover{

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

    border-color:rgba(255,255,255,.75);

    transform:translateX(-50%) translateY(-4px) scale(1.02);

    box-shadow:0 12px 28px rgba(255,255,255,.12);

}
@keyframes shopButtonGlow{

    0%,100%{

        box-shadow:
        0 0 0 rgba(255,255,255,0);

    }

    50%{

        box-shadow:
        0 0 14px rgba(255,255,255,.08);

    }

}

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

@media (max-width: 1200px){

    .perfume-title{

        font-size: 8rem;

    }

    .perfume-bottle{

        width: 280px;

    }

    .perfume-notes{

        left: 12%;

    }

    .perfume-ratings{

        right: 12%;

    }

}


@media (max-width: 768px){

    .perfume-section{

        height: auto;

        min-height: 100vh;

        padding: 120px 0 100px;

    }

    .perfume-title{

        position: relative;

        top: auto;
        left: auto;

        transform: none;

        text-align: center;

        font-size: 4.5rem;

        margin-bottom: 40px;

    }

    .perfume-bottle{

        position: relative;

        left: auto;
        top: auto;

        transform: none;

        display: block;

        width: 230px;

        margin: 0 auto;

    }

    .perfume-notes,
    .perfume-ratings{

        position: relative;

        left: auto;
        right: auto;
        top: auto;

        transform: none;

        text-align: center;

        margin-top: 40px;

    }

    .shop-btn{

        position: relative;

        left: auto;
        bottom: auto;

        transform: none;

        margin: 60px auto 0;

    }

}
/* ==========================================================
   MOBILE RESPONSIVE PASS — preserves the desktop layout
   ========================================================== */

@media (max-width: 768px){
    :root{
        --mobile-pad: 20px;
    }

    html,
    body{
        width:100%;
        min-width:0;
        overflow-x:hidden;
    }

    .site-background{
        background-position:center center;
        background-size:cover;
        transform:none !important;
    }

    header,
    header.header{
        height:auto;
        min-height:72px;
        top:0;
        padding:18px var(--mobile-pad);
        align-items:flex-start;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }

    .navbar{
        width:min(330px, 100%);
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:14px 28px;
        justify-items:center;
        align-items:center;
    }

    .navbar a{
        font-size:10px !important;
        line-height:1;
        white-space:nowrap;
        letter-spacing:0;
    }

    .navbar a::after{
        bottom:-6px;
    }

    .hero{
        height:100svh;
        min-height:620px;
        margin-bottom:0;
    }

    .hero-content{
        inset:0;
        top:0;
        width:100%;
        height:100%;
        animation:none;
    }

    .hero-number{
        top:31%;
        width:clamp(105px, 31vw, 150px);
    }

    .logo{
        top:49%;
        width:100%;
        padding:0 20px;
    }

    .logo div{
        font-size:clamp(2.25rem, 11vw, 3.25rem) !important;
        line-height:.82;
        letter-spacing:.5px;
    }

    .tagline{
        top:64%;
        width:100%;
        padding:0 12px;
        text-align:center;
        white-space:normal;
        font-size:clamp(.68rem, 3vw, .9rem) !important;
        letter-spacing:.04em;
        line-height:1.5;
    }

    .explore-btn{
        top:76%;
        width:min(210px, 62vw);
        height:52px;
        font-size:clamp(.9rem, 4vw, 1.05rem) !important;
    }

    .logo:hover div{
        letter-spacing:.5px;
        transform:none;
    }

    .navbar:hover a{
        opacity:1;
    }

    .footer{
        padding:44px 20px 28px;
    }

    .footer-divider{
        margin-bottom:24px;
    }

    .footer-content{
        flex-direction:column;
        gap:12px;
        text-align:center;
    }

    .footer-left,
    .footer-center,
    .footer-right{
        max-width:100%;
        font-size:.58rem;
        line-height:1.5;
        letter-spacing:.14em;
    }
}

@media (max-width: 420px){
    header,
    header.header{
        padding-left:14px;
        padding-right:14px;
    }

    .navbar{
        gap:13px 18px;
    }

    .navbar a{
        font-size:9px !important;
    }

    .hero{
        min-height:560px;
    }

    .hero-number{
        top:30%;
    }

    .logo{
        top:48%;
    }

    .tagline{
        top:63%;
    }

    .explore-btn{
        top:75%;
        width:190px;
        height:49px;
    }
}

@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}