/* ======================================================
   SOBE — Sense of Beauty
====================================================== */

:root{

--bg:#090909;
--white:#ffffff;
--text:#d5d5d5;
--line:rgba(255,255,255,.08);

--serif:"Cormorant Garamond",serif;
--sans:"Inter",sans-serif;

--ease:cubic-bezier(.22,1,.36,1);

}

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

html{
scroll-behavior:smooth;
}

body{

background:var(--bg);
color:#fff;
font-family:var(--sans);

overflow-x:hidden;

-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;
color:inherit;

}

section{

position:relative;

}

.container{

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

}

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

#loader{

position:fixed;
inset:0;

background:#050505;

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

z-index:99999;

overflow:hidden;

}

.loader-logo{

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

}

.loader-logo img{

width:220px;
height:auto;

opacity:0;

transform:scale(.88);

will-change:transform,opacity;

}

.grain{

position:fixed;

inset:0;

pointer-events:none;

opacity:.06;

z-index:100;

background-image:url("../images/noise.png");

background-repeat:repeat;

mix-blend-mode:soft-light;

}

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

.navbar{

position:fixed;

top:0;
left:0;

width:100%;

padding:32px 60px;

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

z-index:9999;

transition:
transform .55s cubic-bezier(.22,1,.36,1),
background .45s ease,
backdrop-filter .45s ease,
padding .45s ease,
border-color .45s ease;

background:transparent;

border-bottom:1px solid transparent;

}

.navbar.scrolled{

background:

rgba(10,10,10,.45);

backdrop-filter:

blur(22px)

saturate(180%);

}

.navbar.hide{

transform:translateY(-120%);

}

.logo{

display:flex;
align-items:center;

z-index:100;

}

.logo a{

display:flex;
align-items:center;

}

.logo img{

height:38px;
width:auto;

display:block;

transition:.4s ease;

}

.navbar.scrolled .logo{

letter-spacing:6px;

transform:scale(.92);

}

.navbar.scrolled .logo img{

height:32px;

}

.desktop-nav{

display:flex;

gap:45px;

}

.desktop-nav a{

font-size:13px;

letter-spacing:3px;

text-transform:uppercase;

opacity:.75;

transition:.35s;

}

.desktop-nav a:hover{

opacity:1;

}

nav a{

position:relative;

transition:.35s;

}

nav a::after{

content:"";

position:absolute;

left:0;
bottom:-8px;

width:0;

height:1px;

background:white;

transition:.35s;

}

nav a:hover::after{

width:100%;

}

.hero{

height:100vh;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

position:relative;

margin-top:0;


}

.hero-video{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

}

.mobile-video{

    display:none;

}

.desktop-video{

    display:block;

}


.video-wrapper{

position:absolute;

inset:0;

overflow:hidden;

z-index:-3;

}

.video-wrapper video{

width:100%;

height:100%;

object-fit:cover;

transform:scale(1.08);


}

.overlay{

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

rgba(0,0,0,.45),

rgba(0,0,0,.55)

);

z-index:-2;

}

.hero-content{

max-width:900px;

padding:20px;

z-index:2;

}

.subtitle{

letter-spacing:8px;

font-size:13px;

text-transform:uppercase;

margin-bottom:20px;

color:#d8d8d8;

}

.hero h1{

font-family:var(--serif);

font-size:clamp(70px,10vw,150px);

font-weight:300;

line-height:.92;

margin-bottom:35px;

}

.description{

max-width:520px;

margin:auto;

font-size:18px;

line-height:1.9;

color:#d2d2d2;

}

.discover{

margin-top:315px;

display:inline-flex;

align-items:center;

justify-content:center;

width:170px;

height:56px;

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

backdrop-filter:blur(20px);

transition:.45s var(--ease);

letter-spacing:3px;

text-transform:uppercase;

font-size:12px;

}

.discover:hover{

background:white;

color:black;

transform:translateY(-4px);

}

.scroll-indicator{

position:absolute;

bottom:95px;

left:50%;

transform:translateX(-50%);

font-size:24px;

opacity:.75;

animation:float 2.5s infinite;

}

@keyframes float{

0%{

transform:translate(-50%,0);

}

50%{

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

}

100%{

transform:translate(-50%,0);

}

}

.reveal{
opacity:0;
transform:translateY(80px);
}


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

.about{

padding:180px 0;

background:#090909;

position:relative;

}

.about-grid{

display:grid;

grid-template-columns:1.2fr 1fr;

gap:120px;

align-items:start;

}

.section-tag{

display:inline-block;

font-size:12px;

letter-spacing:6px;

opacity:.6;

margin-bottom:30px;

color:#c8a96b;

}

.about-title{

font-family:var(--serif);

font-size:clamp(58px,7vw,110px);

font-weight:300;

line-height:.9;

letter-spacing:-2px;

}

.about-line{

width:100px;

height:1px;

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

margin-top:60px;

}

.about-right{

padding-top:80px;

}

.about-right .lead{

font-size:34px;

line-height:1.3;

font-family:var(--serif);

margin-bottom:50px;

color:white;

}

.about-right p{

font-size:18px;

line-height:2;

color:#bcbcbc;

margin-bottom:35px;

max-width:520px;

}

.about::before{

content:"";

position:absolute;

left:50%;

top:0;

width:1px;

height:120px;

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

transform:translateX(-50%);

display:none;

}

/*==============================
 Manifesto
==============================*/

.manifesto{

background:#090909;

position:relative;

overflow:hidden;

}

.manifesto-wrapper {
    max-width: 1300px;
    margin: auto;
    margin-top: 180px;
    margin-bottom: -110px;
}

.manifesto-line{

font-family:var(--serif);

font-size:clamp(42px,6vw,66px);

font-weight:300;

line-height:1.25;

letter-spacing:-2px;

margin:90px 0;

opacity:.12;

transition:.5s;

text-align: center;

}

.manifesto-line:hover{

opacity:1;

padding-left:40px;

}

.manifesto::before{

content:"";

position:absolute;

width:900px;

height:900px;

border-radius:50%;

background:

radial-gradient(circle,
rgba(255,255,255,.05),
transparent 70%);

top:50%;

left:50%;

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

pointer-events:none;

}

.manifesto::after{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:1px;

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

}

/*=========================
 Philosophy
=========================*/

.philosophy{

padding:180px 0;

background:#090909;

}

.philosophy-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:120px;

}

.philosophy-left{

position:sticky;

top:140px;

height:max-content;

}

.philosophy-left h2{

font-family:var(--serif);

font-size:clamp(58px,6vw,110px);

font-weight:300;

line-height:.92;

margin-top:25px;

}

.philosophy-right{

display:flex;

flex-direction:column;

gap:120px;

}

.philosophy-item{

padding-bottom:70px;

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

transition:.5s;

}

.philosophy-item span{

font-size:13px;

letter-spacing:4px;

opacity:.45;

}

.philosophy-item h3{

font-family:var(--serif);

font-size:52px;

font-weight:300;

margin:18px 0;

color:#c8a96b;

}

.philosophy-item p{

font-size:18px;

line-height:2;

color:#bdbdbd;

max-width:420px;

}

.philosophy-item:hover{

padding-left:35px;

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

}

.philosophy-item h3{

transition:.5s;

}

.philosophy-item:hover h3{

letter-spacing:2px;

}

.philosophy-left::after{

content:"";

display:block;

width:100px;

height:1px;

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

margin-top:45px;

}

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

.collection{

position:relative;

text-align:center;

overflow:hidden;

background:#090909;

padding: 50px 0;

}


.collection .container{

position:relative;

z-index:5;

}

.collection-overlay{

position:absolute;

inset:0;

background:
radial-gradient(circle at center,
rgba(255,255,255,.05),
transparent 70%);

pointer-events:none;

}

.collection-title{

font-family:var(--serif);

font-size:clamp(72px,9vw,170px);

font-weight:300;

line-height:.9;

margin:35px 0;

}

.collection-text{

max-width:620px;

margin:auto;

font-size:20px;

line-height:2;

color:#bfbfbf;

}

.collection-button{

display:inline-flex;

justify-content:center;

align-items:center;

margin-top:70px;

width:210px;

height:64px;

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

letter-spacing:4px;

text-transform:uppercase;

font-size:12px;

transition:.45s;

backdrop-filter:blur(16px);

}

.collection-button:hover{

background:white;

color:black;

transform:translateY(-6px);

}

.collection::before{


position:absolute;

left:50%;

top:50%;

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

font-size:24vw;

font-family:var(--serif);

color:white;

opacity:.025;

letter-spacing:25px;

white-space:nowrap;

pointer-events:none;

}

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

.menu-toggle{

display:none;

width:42px;
height:42px;

border:none;
background:none;

position:relative;

cursor:pointer;

z-index:10000;

}

.menu-toggle span{

position:absolute;

left:8px;

width:26px;
height:2px;

background:white;

transition:.35s;

}

.menu-toggle span:first-child{

top:15px;

}

.menu-toggle span:last-child{

top:24px;

}

.menu-toggle.active span:first-child{

transform:rotate(45deg);

top:20px;

}

.menu-toggle.active span:last-child{

transform:rotate(-45deg);

top:20px;

}

.mobile-menu{

position:fixed;

top:0;
right:0;

width:100%;
height:100vh;

background:#080808;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

transform:translateX(100%);

transition:.6s cubic-bezier(.22,1,.36,1);

z-index:9998;

}

.mobile-menu.active{

transform:translateX(0);

}

.mobile-nav{

display:flex;

flex-direction:column;

gap:28px;

text-align:center;

}

.mobile-nav a{

font-family:var(--serif);

font-size:42px;

font-weight:300;

}

.mobile-info{

position:absolute;

bottom:90px;

text-align:center;

opacity:.5;

}

body.menu-open{

overflow:hidden;

}

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

.footer{

padding:140px 7vw 60px;

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

background:#050505;

}

.footer-inner{

display:grid;

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

gap:80px;

align-items:start;

}

.footer-brand img{

height:34px;

width:auto;

margin-bottom:24px;

opacity:.95;

}

.footer-tagline{

font-size:15px;

line-height:1.9;

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

max-width:320px;

}

.footer-links{

display:flex;

flex-direction:column;

gap:18px;

align-items: center;

}

.footer-links a{

font-size:13px;

letter-spacing:2px;

text-transform:uppercase;

opacity:.65;

transition:.35s;

}

.footer-links a:hover{

opacity:1;

padding-left:8px;

}

.footer-contact{

display:flex;

justify-content:flex-end;

}

.footer-contact a{

font-size:15px;

opacity:.65;

transition:.35s;

}

.footer-contact a:hover{

opacity:1;

}

.footer-bottom{

margin-top:90px;

padding-top:30px;

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

display:flex;

justify-content:space-between;

align-items:center;

font-size:12px;

letter-spacing:1px;

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

}

.signature-marquee{
    position:relative;
    width:100%;
    overflow:hidden;
    padding:42px 0;

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

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.015),
            rgba(255,255,255,.03)
        );

    mask-image:linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );

    -webkit-mask-image:linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );
}

.signature-marquee::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.04),
            transparent
        );

    transform:translateX(-100%);
    animation:marqueeShine 10s linear infinite;

    pointer-events:none;
}

.signature-marquee::before{
    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:700px;
    height:140px;

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

    background:
        radial-gradient(
            circle,
            rgba(200,169,107,.08),
            transparent 70%
        );

    pointer-events:none;
}

.signature-track{
    display:flex;
    width:max-content;
}

.signature-group{
    display:flex;
    align-items:center;
    gap:40px;
    flex-shrink:0;
}

.signature-group span{
    white-space:nowrap;

    font-family:"Gilroy",sans-serif;
    font-size:13px;
    font-weight:500;

    letter-spacing:.45em;
    text-transform:lowercase;

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

    text-shadow:
        0 0 14px rgba(200,169,107,.06);

    transition:.4s;
}

.signature-group span:nth-child(1),
.signature-group span:nth-child(3),
.signature-group span:nth-child(5),
.signature-group span:nth-child(7){

    color:#c8a96b;

    opacity:.8;

    text-shadow:
        0 0 8px rgba(200,169,107,.4),
        0 0 20px rgba(200,169,107,.15);

    animation:goldPulse 4s infinite ease-in-out;
}

.catalogue-modal{

    position:fixed;
    inset:0;

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

    background:#000000;

    backdrop-filter:blur(20px);

    opacity:0;
    visibility:hidden;

    transition:.5s;

    z-index:99999;
}

.catalogue-modal.active{

    opacity:1;
    visibility:visible;
}

#catalogueBook{

    width:min(1300px,90vw);
    height:min(850px,88vh);

    filter:
        drop-shadow(
            0 50px 100px rgba(0,0,0,.65)
        );

    z-index:2;
}

.catalogue-page{

    background:#000000;
    overflow:hidden;
}

.catalogue-page img{

    width:100%;
    height:100%;

    object-fit:cover;
    display:block;
}

.catalogue-modal::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:1200px;
    height:800px;

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

    background:
        radial-gradient(
            circle,
            rgba(200,169,107,.08),
            transparent 70%
        );

    pointer-events:none;
}

.catalogue-counter{

    position:absolute;

    top:55px;
    left:60px;

    color:#fff;

    letter-spacing:.35em;

    z-index:100;
    
    display:none;
}

.catalogue-section{

    padding:180px 40px;
    text-align:center;
}

.catalogue-content{

    max-width:700px;
    margin:auto;
}

.catalogue-label{

    display:block;
    margin-bottom:20px;

    letter-spacing:.4em;
    font-size:12px;
    color:#c8a96b;
}

.catalogue-btn{

    margin-top:50px;
    padding:18px 36px;

    background:none;
    border:1px solid rgba(255,255,255,.15);

    color:#fff;
    cursor:pointer;

    transition:.4s;
}

.catalogue-btn:hover{

    border-color:#c8a96b;

    background:
        rgba(200,169,107,.08);
}

.catalogue-close{

    position:absolute;

    top:40px;
    right:50px;

    width:52px;
    height:52px;

    border:none;
    background:none;

    color:#fff;
    font-size:32px;

    cursor:pointer;

    z-index:100;
}

.book-showcase{

    position:relative;

    padding:220px 0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}

.book-wrapper{

    position:relative;

    width:760px;

    height:500px;

    perspective:2200px;

    cursor:pointer;

    transform-style:preserve-3d;

}

.book-cover{

    position:absolute;

    inset:0;

    border-radius:10px;

    overflow:hidden;

    background:#111;

    transform-style:preserve-3d;

    box-shadow:

        0 45px 120px rgba(0,0,0,.55),

        0 10px 25px rgba(0,0,0,.25),

        inset 0 0 0 1px rgba(255,255,255,.04);

}

.book-cover img{

    width:100%;
    height:100%;

    object-fit:cover;
}



.book-wrapper:hover .book{

    transform:

        rotateY(-10deg)

        rotateX(2deg)

        translateZ(45px)

        scale(1.03);

}

.book-shadow{

    position:absolute;

    left:50%;

    bottom:-40px;

    width:65%;

    height:42px;

    border-radius:50%;

    background:

        rgba(0,0,0,.55);

    filter:blur(32px);

    transform:

        translateX(-50%);

    transition:.8s;

}

.book-wrapper:hover .book-shadow{

    width:55%;

    filter:blur(40px);

}

.book-light{

    position:absolute;

    inset:-40%;

    background:

        linear-gradient(

            115deg,

            transparent 35%,

            rgba(200,169,107,.18) 50%,

            transparent 65%

        );

    transform:

        translateX(-150%)

        rotate(20deg);

    transition:1.2s;

    pointer-events:none;
}

.book-wrapper:hover .book-light{

    transform:

        translateX(170%)

        rotate(20deg);
}

.book-cover::after{

    content:"";

    position:absolute;

    right:-8px;

    top:0;

    width:8px;

    height:100%;

    background:

        linear-gradient(

            to right,

            #b08b4d,

            #f0ddb0,

            #a97f38

        );

    transform:

        rotateY(90deg);

    transform-origin:left;
}

.book-pages{

    position:absolute;

    top:5px;

    bottom:5px;

    right:-14px;

    width:16px;

    border-radius:0 8px 8px 0;

    background:

        repeating-linear-gradient(

            to bottom,

            #fcfaf5 0,

            #fcfaf5 1px,

            #ebe5d8 1px,

            #ebe5d8 2px

        );

    box-shadow:

        inset -2px 0 4px rgba(0,0,0,.12),

        inset 2px 0 2px rgba(255,255,255,.45);

}

.book-wrapper:hover .book-pages{

    width:18px;

}

.book-spine{

    position:absolute;

    left:-12px;

    top:0;

    width:14px;

    height:100%;

    border-radius:8px 0 0 8px;

    background:

        linear-gradient(

            to right,

            #050505,

            #2c2c2c,

            #0d0d0d

        );

    box-shadow:

        inset -1px 0 2px rgba(255,255,255,.06);

}

.book-spine::after{

    position:absolute;

    left:50%;

    top:50%;

    transform:

        translate(-50%,-50%)

        rotate(90deg);

    white-space:nowrap;

    font-size:9px;

    letter-spacing:.45em;

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

}

.cover-shine{

    position:absolute;

    inset:-180%;

    background:

        linear-gradient(

            120deg,

            transparent 42%,

            rgba(255,255,255,.08) 48%,

            rgba(255,255,255,.42) 50%,

            rgba(255,255,255,.08) 52%,

            transparent 60%

        );

    transform:

        translateX(-180%)

        rotate(22deg);

}

.book-wrapper:hover .cover-shine{

    animation:

        coverSweep

        1.8s ease;

}

.book{

    position:relative;

    width:100%;
    height:100%;

    transform-style:preserve-3d;

    transform:

        rotateY(-22deg)

        rotateX(7deg);

    transition:

        transform 1s cubic-bezier(.19,1,.22,1);

}

.book-info{

    margin-top:80px;

    text-align:center;

    max-width:620px;

}

.book-stack{

    position:absolute;

    inset:0;

    overflow:hidden;

    border-radius:10px;

    box-shadow:

        0 20px 55px rgba(0,0,0,.25),

        0 8px 18px rgba(0,0,0,.15);
}

.book-stack img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}

.book-stack::after{

    content:"";

    position:absolute;

    right:-12px;

    top:5px;

    bottom:5px;

    width:16px;

    border-radius:0 8px 8px 0;

     background:

    repeating-linear-gradient(

        to bottom,

        #f7f2ea 0px,
        #f7f2ea 2px,

        #ece4d6 2px,
        #ece4d6 4px

    );

}

.stack-2{

    transform:

        translate(16px,-12px)

        rotate(3deg);


filter:
        brightness(.78)
        saturate(.8)
        contrast(.95);

    z-index:-1;

}

.stack-3{

    transform:
        translate(32px,-24px)
        rotate(6deg);

    filter:
        brightness(.58)
        saturate(.65)
        contrast(.92);

    z-index:-2;

}

.book-wrapper:hover .stack-2{

    transform:

        translate(20px,-18px)

        rotate(6deg);

}

.book-wrapper:hover .stack-3{

    transform:

        translate(40px,-34px)

        rotate(9deg);

}



.book-glow{

    position:absolute;

    inset:-140px;

    background:

        radial-gradient(

            circle,

            rgba(202,170,108,.20),

            transparent 72%

        );

    filter:blur(90px);

    animation:

        glowPulse 8s ease-in-out infinite;

}

.book-back{

    position:absolute;

    inset:0;

    border-radius:10px;

    background:#171717;

    z-index:-1;

}

.back-one{

    transform:

        translate(10px,-8px)

        rotate(3deg);

    opacity:.55;

}

.back-two{

    transform:

        translate(20px,-16px)

        rotate(6deg);

    opacity:.3;

}



.book-background-word{

    position:absolute;

    left:50%;

    top:50%;

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

    font-size:240px;

    font-weight:700;

    letter-spacing:.28em;

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

    pointer-events:none;

    user-select:none;

    white-space:nowrap;

}

@keyframes glowPulse{

    0%,100%{

        opacity:.45;

        transform:scale(1);

    }

    50%{

        opacity:.9;

        transform:scale(1.12);

    }

}



@keyframes coverSweep{

    from{

        transform:

            translateX(-180%)

            rotate(22deg);

    }

    to{

        transform:

            translateX(180%)

            rotate(22deg);

    }

}

@keyframes goldPulse{

    0%,100%{
        opacity:.45;
    }

    50%{
        opacity:1;
    }
}

@keyframes marqueeShine{

    to{
        transform:translateX(100%);
    }
}

@keyframes floatingBook{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

}

@media(max-width:768px){

    .signature-marquee{
        padding:30px 0;
    }

    .signature-group{
        gap:28px;
    }

    .signature-group span{
        font-size:11px;
        letter-spacing:.35em;
    }
    
     #catalogueBook{

        width:100vw;
        height:78vh;
    }

    .catalogue-close{

        top:20px;
        right:20px;
    }

    .catalogue-counter{

        top:35px;
        left:25px;
        display:none;
    }
    
    .book-wrapper {
    position: relative;
    width: 360px;
    height: 500px;
    perspective: 2200px;
    cursor: pointer;
    transform-style: preserve-3d;
}

.manifesto-wrapper {
    max-width: 1300px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: -240px;
}

.manifesto-line{

font-family:var(--serif);

font-size:clamp(42px,6vw,66px);

font-weight:300;

line-height:1.25;

letter-spacing:-2px;

margin:90px 0;

opacity:.12;

transition:.5s;

text-align: center;

}

.manifesto-line:hover{

opacity:1;

padding-left:40px;

}
    
}