/* ==========================================================
   SOBE RITUAL MODAL
========================================================== */

.ritual-modal{ position:fixed; inset:0; width:100%; height:100vh; opacity:0; visibility:hidden; z-index:99999; transition: opacity .55s ease, visibility .55s ease; overflow:hidden; pointer-events:none; }

.ritual-modal.active{ opacity:1; visibility:visible; pointer-events:auto; }

body.modal-open{

    overflow:hidden;

}

.modal-topbar{

    position:sticky;
    top:0;

    z-index:100;

    background:rgba(8,8,8,.82);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.06);

}
/* ==========================================================
   OVERLAY
========================================================== */

.ritual-modal-overlay{

    position:absolute;
    inset:0;

    background:rgba(8,8,8,.78);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

}

/* ==========================================================
   CONTAINER
========================================================== */

.ritual-modal-container{

    position:relative;

    width:100%;
    height:100%;

    overflow:hidden;

    z-index:2;

}

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

.ritual-modal-content{

    position:relative;

    width:100%;
    height:100vh;

    overflow-y:auto;

    overflow-x:hidden;

    overscroll-behavior:contain;
    
    -webkit-overflow-scrolling:touch;
    
    

}

.ritual-modal-content::-webkit-scrollbar{

    width:6px;

}

.ritual-modal-content::-webkit-scrollbar-track{

    background:transparent;

}

.ritual-modal-content::-webkit-scrollbar-thumb{

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

    border-radius:20px;

}

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

.ritual-modal-close{

    position:fixed;

    top:15px;
    right:42px;

    width:54px;
    height:54px;

    border:none;

    background:none;

    cursor:pointer;

    z-index:999;

}

.ritual-modal-close span{

    position:absolute;

    left:50%;
    top:50%;

    width:22px;
    height:1px;

    background:#fff;

    transition:.4s;

}

.ritual-modal-close span:first-child{

    transform:
    translate(-50%,-50%)
    rotate(45deg);

}

.ritual-modal-close span:last-child{

    transform:
    translate(-50%,-50%)
    rotate(-45deg);

}

.ritual-modal-close:hover span:first-child{

    transform:
    translate(-50%,-50%)
    rotate(135deg);

}

.ritual-modal-close:hover span:last-child{

    transform:
    translate(-50%,-50%)
    rotate(45deg);

}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

.ritual-modal h1{

    margin:0;

    font-family:"Cormorant Garamond",serif;

    font-weight:500;

}

.ritual-modal h2{

    margin:0;

    font-family:"Cormorant Garamond",serif;

    font-weight:500;

}

.ritual-modal p{

    margin:0;

    line-height:1.9;

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

}

.ritual-modal img{

    display:block;

    max-width:100%;

}

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

.modal-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:1px 40px 100px;

}

.modal-hero-inner{

    width:100%;

    max-width:1450px;

    margin:auto;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.modal-number{

    display:block;

    margin-bottom:22px;

    font-size:12px;

    letter-spacing:8px;

    text-transform:uppercase;

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

}

.modal-title{

    font-size:clamp(70px,9vw,140px);

    line-height:.92;

    letter-spacing:3px;

    color:#fff;

}

.modal-subtitle{

    width:min(620px,92%);

    margin-top:28px;

    font-size:18px;

    line-height:1.9;

    letter-spacing:.4px;

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

}

.modal-product{

    position:relative;

    margin-top:90px;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:540px;

}

#modal-product-image{

    width:100%;

    max-width:390px;

    object-fit:contain;

    user-select:none;

    pointer-events:none;

}

.modal-scroll{

    margin-top:80px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:18px;

}

.modal-scroll span{

    font-size:11px;

    letter-spacing:4px;

    text-transform:uppercase;

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

}

.scroll-line{

    width:1px;

    height:75px;

    background:linear-gradient(

        rgba(255,255,255,.72),

        rgba(255,255,255,0)

    );

}

.modal-product::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        rgba(255,255,255,.06),

        transparent 70%

    );

    filter:blur(20px);

    z-index:-1;

}

.modal-hero::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:220px;

    background:linear-gradient(

        transparent,

        rgba(0,0,0,.35)

    );

    pointer-events:none;

}

/* ==========================================================
   THE STORY
========================================================== */

.modal-story{

    position:relative;

    padding:180px 40px;

}

.modal-container{

    width:100%;

    max-width:1100px;

    margin:0 auto;

}

.section-label{

    display:block;

    margin-bottom:28px;

    font-size:12px;

    letter-spacing:6px;

    text-transform:uppercase;

    color:#c8a96b;

}

.story-title{

    max-width:760px;

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(42px,5vw,76px);

    font-weight:500;

    line-height:1.08;

    color:#fff;

}

.story-text{

    max-width:720px;

    margin-top:42px;

    font-size:19px;

    line-height:2;

    letter-spacing:.3px;

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

}

.modal-story::before{

    content:"";

    position:absolute;

    left:80px;

    top:180px;

    width:1px;

    height:180px;

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

}

.modal-story::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    width:1px;

    height:120px;

    background:linear-gradient(

        rgba(255,255,255,.16),

        transparent

    );

    transform:translateX(-50%);

}

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

.modal-notes{

    position:relative;

    padding:260px 60px;

}

.notes-grid{

    margin-top:70px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:60px;

}

.note-item{

    position:relative;

    padding-top:32px;

}

.note-item::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;

    height:1px;

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

}

.note-label{

    display:block;

    margin-bottom:18px;

    font-size:11px;

    letter-spacing:5px;

    text-transform:uppercase;

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

}

.note-item h3{

    font-family:"Cormorant Garamond",serif;

    font-size:40px;

    font-weight:500;

    line-height:1.15;

    color:#fff;

}

.note-description{

    margin-top:18px;

    font-size:16px;

    line-height:1.9;

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

}

.modal-notes::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    width:1px;

    height:120px;

    background:linear-gradient(

        rgba(255,255,255,.16),

        transparent

    );

    transform:translateX(-50%);

}

/* ==========================================================
   AVAILABLE IN
========================================================== */

.modal-products{

    position:relative;

    padding:180px 40px;

}

.modal-product-list{

    margin-top:70px;

    display:flex;

    flex-direction:column;

}

.modal-product-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:34px 0;

    border-top:1px solid rgba(255,255,255,.08);

    transition:.35s ease;

}

.modal-product-item:last-child{

    border-bottom:1px solid rgba(255,255,255,.08);

}

.product-name{

    font-family:"Cormorant Garamond",serif;

    font-size:42px;

    font-weight:500;

    color:#fff;

}

.product-size{

    font-size:13px;

    letter-spacing:3px;

    text-transform:uppercase;

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

}

.modal-product-item:hover{

    padding-left:18px;

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

}

.modal-product-item.active{

    padding-left:28px;

}

.modal-product-item.active::before{

    content:"";

    position:absolute;

    left:-24px;

    top:50%;

    width:12px;

    height:1px;

    background:#fff;

}

.modal-product-item{

    position:relative;

}

/* ==========================================================
   THE RITUAL
========================================================== */

.modal-ritual{

    position:relative;

    padding:180px 40px 220px;

}

.ritual-steps{

    margin-top:70px;

    display:flex;

    flex-direction:column;

    gap:90px;

}

.ritual-step{

    display:grid;

    grid-template-columns:120px 1fr;

    align-items:flex-start;

    gap:40px;

}

.ritual-number{

    font-family:"Cormorant Garamond",serif;

    font-size:90px;

    line-height:.9;

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

}

.ritual-heading{

    font-family:"Cormorant Garamond",serif;

    font-size:42px;

    font-weight:500;

    color:#fff;

    margin-bottom:14px;

}

.ritual-description{

    max-width:640px;

    font-size:17px;

    line-height:2;

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

}

.modal-ritual::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:70px;

    width:1px;

    height:100px;

    transform:translateX(-50%);

    background:linear-gradient(

        rgba(255,255,255,.18),

        transparent

    );

}



/* ==========================================================
   RESPONSIVE FINE TUNING
========================================================== */

*{
    -webkit-tap-highlight-color:transparent;
}

html{

    scroll-behavior:smooth;

}

body.modal-open{

    overflow:hidden;
    height:100vh;

}

.modal-product img{

    width:100%;
    height:auto;
    display:block;

}

.modal-progress{

    position:fixed;

    right:48px;

    top:50%;

    transform:translateY(-50%);

    display:flex;

    flex-direction:column;

    gap:24px;

    z-index:999;

}

.progress-item{

    position:relative;

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

    font-size:11px;

    letter-spacing:.25em;

    transition:.35s;

    cursor:pointer;

}

.progress-item::before{

    content:"";

    position:absolute;

    left:-18px;

    top:50%;

    width:6px;

    height:6px;

    border-radius:50%;

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

    transform:translateY(-50%);

    transition:.35s;

}

.progress-item.active{

    color:#fff;

}

.progress-item.active::before{

    width:10px;

    height:10px;

    background:#fff;

}

/* ==========================================================
   COLLECTION NAVIGATION
========================================================== */

.modal-collection-nav{

    width:min(1280px,90%);
    margin:0 auto;

    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;

    gap:48px;

    padding-bottom:40px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.collection-nav-btn{

    display:flex;
    align-items:center;
    gap:20px;

    background:none;
    border:none;

    color:#fff;

    cursor:pointer;

    padding:0;

    transition:.35s ease;
    
    transform: translateY(10px);

}

.collection-nav-btn:hover{

    opacity:.65;

}

.collection-nav-btn:last-child{

    justify-content:flex-end;

}

.nav-arrow{

    font-size:34px;
    font-weight:200;

    line-height:1;

    transition:.35s;

}

.collection-nav-btn:hover .nav-arrow{

    transform:translateX(-4px);

}

.collection-nav-btn:last-child:hover .nav-arrow{

    transform:translateX(4px);

}

.nav-info{

    display:flex;
    flex-direction:column;
    gap:6px;

}

.nav-info small{

    font-size:10px;

    letter-spacing:.35em;

    text-transform:uppercase;

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

}

.nav-info strong{

    font-size:18px;

    font-weight:300;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.modal-collection-counter{

    display:flex;
    align-items:center;
    gap:12px;

    font-size:14px;

    letter-spacing:.30em;

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

}

.modal-collection-counter .divider{

    opacity:.35;

}

@media(min-width:1600px){

    #modal-product-image{

        max-width:430px;

    }

}

@media(min-width:1700px){

    .modal-title{

        font-size:160px;

    }

    .story-title{

        font-size:82px;

    }

    .note-item h3{

        font-size:46px;

    }

    .product-name{

        font-size:48px;

    }
    
    .story-text,
.ritual-description,
.note-description{

    overflow-wrap:break-word;
    word-break:normal;

}

.modal-product{

    overflow:hidden;

}

.modal-product img{

    object-fit:contain;

}

.progress-line{

    position:absolute;

    right:-20px;

    top:0;

    bottom:0;

    width:1px;

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

}

.progress-fill{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:0;

    background:#fff;

    transition:height .35s ease;

}

}



@media(max-width:991px){
    
    .modal-collection-nav{

    width:calc(100% - 48px);

    margin:0 auto;

    display:grid;

    grid-template-columns:1fr auto 1fr;

    grid-template-areas:

        "prev counter next";

    gap:20px;

    padding-bottom:28px;
    padding-top: 20px;

}

.collection-nav-btn{

    gap:10px;
    transform: translateY(10px);
}

.collection-nav-btn:first-child{

    grid-area:prev;

    justify-content:flex-start;

}

.collection-nav-btn:last-child{

    grid-area:next;

    justify-content:flex-end;

}

.modal-collection-counter{

    grid-area:counter;

    font-size:11px;

    letter-spacing:.25em;

}

.nav-arrow{

    font-size:22px;

}

.nav-info small{

    display:none;

}

.nav-info strong{

    font-size:11px;

    line-height:1.3;

    max-width:80px;

}

   .modal-progress{
        right:18px;
        top:50%;
        transform:translateY(-50%);
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:14px;
    }

     .progress-item{

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

        width:16px;

        font-size:0;
        
        left:15px;

    }


    .progress-item::before{

        content:"";

        width:7px;
        height:7px;

        border-radius:50%;

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

        margin-top:8px;

        transition:.3s;
    }

    .progress-item.active{

        font-size:9px;

        line-height:1;

        text-align:center;

        color:#fff;
        
        left:12px;

    }

    .progress-item.active::before{

        width:10px;
        height:10px;

        background:#fff;
    }



    
    .modal-story{

        padding:120px 30px;

    }

    .story-title{

        font-size:48px;

    }

    .story-text{

        margin-top:28px;

        font-size:17px;

        line-height:1.9;

    }

    .modal-story::before{

        display:none;

    }
    
    .modal-notes{

        padding:120px 30px;

    }

    .notes-grid{

        gap:40px;

    }

    .note-item h3{

        font-size:32px;

    }
    
     .modal-products{

        padding:120px 30px;

    }

    .product-name{

        font-size:34px;

    }
    
    .modal-ritual{

        padding:120px 30px 160px;

    }

    .ritual-step{

        grid-template-columns:90px 1fr;

        gap:30px;

    }

    .ritual-number{

        font-size:70px;

    }

    .ritual-heading{

        font-size:34px;

    }
    
    .modal-container{

        width:100%;

    }

    .section-label{

        letter-spacing:5px;

    }

.modal-hero{

        min-height:100svh;

        padding-top:25px;

    }

    .modal-title{

        letter-spacing:1px;

    }

    .modal-subtitle{

        width:100%;

    }

    .story-title{

        width:100%;

    }

    .story-text{

        width:100%;

    }

    .modal-product{

        min-height:300px;

        margin-top:55px;

    }

    #modal-product-image{

        max-width:220px;

    }

    .modal-scroll{

        margin-top:45px;

    }

    .scroll-line{

        height:45px;

    }

    .ritual-modal-close{

        width:46px;

        height:35px;

        top:1px;

        right:12px;

    }

    .ritual-modal-close span{

        width:18px;

    }
}



@media(max-width:767px){
    
    .modal-collection-nav{

    width:calc(100% - 48px);

    margin:0 auto;

    display:grid;

    grid-template-columns:1fr auto 1fr;

    grid-template-areas:

        "prev counter next";

    gap:20px;

    padding-bottom:28px;
    padding-top: 20px;

}

.collection-nav-btn{

    gap:10px;
    transform: translateY(10px);

}

.collection-nav-btn:first-child{

    grid-area:prev;

    justify-content:flex-start;

}

.collection-nav-btn:last-child{

    grid-area:next;

    justify-content:flex-end;

}

.modal-collection-counter{

    grid-area:counter;

    font-size:11px;

    letter-spacing:.25em;

}

.nav-arrow{

    font-size:22px;

}

.nav-info small{

    display:none;

}

.nav-info strong{

    font-size:11px;

    line-height:1.3;

    max-width:80px;

}
    
    .modal-progress{
        right:18px;
        top:50%;
        transform:translateY(-50%);
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:14px;
    }

   .progress-item{

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

        width:16px;

        font-size:0;
        
        left:15px;

    }


    .progress-item::before{

        content:"";

        width:7px;
        height:7px;

        border-radius:50%;

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

        margin-top:8px;

        transition:.3s;
    }


    .progress-item.active{

        font-size:9px;

        line-height:1;

        text-align:center;

        color:#fff;
        
        left:12px;

    }
    .progress-item.active::before{

        width:10px;
        height:10px;

        background:#fff;
    }



    .modal-story{

        padding:90px 24px;

    }

    .story-title{

        font-size:38px;

        line-height:1.15;

    }

    .story-text{

        margin-top:22px;

        font-size:15px;

        line-height:1.9;

    }

    .section-label{

        margin-bottom:20px;

        letter-spacing:4px;

        font-size:11px;

    }
    
     .modal-notes{

        padding:90px 24px;

    }

    .notes-grid{

        grid-template-columns:1fr;

        gap:45px;

        margin-top:45px;

    }

    .note-item{

        padding-top:22px;

    }

    .note-item h3{

        font-size:30px;

    }

    .note-description{

        font-size:15px;

    }
    
    .modal-products{

        padding:90px 24px;

    }

    .modal-product-item{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

        padding:22px 0;

    }

    .product-name{

        font-size:28px;

    }

    .product-size{

        font-size:11px;

    }
    
     .modal-ritual{

        padding:90px 24px 120px;

    }

    .ritual-step{

        grid-template-columns:1fr;

        gap:14px;

    }

    .ritual-number{

        font-size:54px;

    }

    .ritual-heading{

        font-size:28px;

        margin-bottom:10px;

    }

    .ritual-description{

        font-size:15px;

        line-height:1.9;

    }


}

@keyframes pulseDot{

    0%{

        transform:translateY(-50%) scale(.4);

        opacity:.2;

    }

    60%{

        transform:translateY(-50%) scale(1.4);

        opacity:1;

    }

    100%{

        transform:translateY(-50%) scale(1);

        opacity:1;

    }

}

@keyframes fadeLabel{

    from{

        opacity:0;

        transform:translateX(12px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}