/* ===========================================================
   VIONE — Luxury landing
   Palette: ink black / champagne gold / ivory + warm greys
   Fonts: Cormorant Garamond (display) · Jost (ui/body)
   =========================================================== */

:root{
  --ink:#0a0908;
  --ink-2:#12100e;
  --ivory:#ece7dd;
  --ivory-dim:#a8a297;
  --gold:#c4a368;
  --gold-soft:#d8c39a;
  --line:rgba(236,231,221,.14);
  --ease:cubic-bezier(.7,0,.2,1);
  --pad:clamp(1.25rem,4vw,4rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--ink);
  color:var(--ivory);
  font-family:'Jost',sans-serif;
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  cursor:none;
}
@media (max-width:900px){ body{cursor:auto} }

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:none}
::selection{background:var(--gold);color:var(--ink)}

h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:400;line-height:1.02;letter-spacing:-.01em}

.eyebrow,.panel__eyebrow,.journey__eyebrow,.vstack__eyebrow{
  font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:400;
}

/* ===== Preloader ===== */
.preloader{position:fixed;inset:0;z-index:1000;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem}
.preloader__inner{display:flex;align-items:baseline;gap:1rem}
.preloader__name{font-family:'Cormorant Garamond',serif;font-size:clamp(2.5rem,8vw,5rem);letter-spacing:.2em;color:var(--ivory)}
.preloader__count{font-size:.9rem;letter-spacing:.2em;color:var(--gold)}
.preloader__bar{width:min(280px,60vw);height:1px;background:var(--line);overflow:hidden}
.preloader__bar span{display:block;height:100%;width:0;background:var(--gold)}
.preloader.is-done{opacity:0;visibility:hidden;transition:opacity .8s var(--ease),visibility .8s}

/* ===== Cursor ===== */
.cursor{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--gold);pointer-events:none;z-index:999;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),background .3s,opacity .3s;mix-blend-mode:difference}
.cursor.is-hover{width:54px;height:54px;background:var(--ivory)}
@media (max-width:900px){ .cursor{display:none} }

/* ===== Header ===== */
.header{position:fixed;top:0;left:0;width:100%;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:1.4rem var(--pad);mix-blend-mode:difference}
.header__logo{font-family:'Cormorant Garamond',serif;font-size:1.7rem;letter-spacing:.28em;padding-left:.28em;color:#fff}
.header__menu{display:flex;align-items:center;gap:.7rem;letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;color:#fff}
.header__menu-lines{display:inline-flex;flex-direction:column;gap:5px;width:24px}
.header__menu-lines i{display:block;height:1px;background:#fff;transition:transform .4s var(--ease)}
.header__menu-lines i:last-child{width:60%}
.header.nav-open .header__menu-lines i:first-child{transform:translateY(3px) rotate(45deg)}
.header.nav-open .header__menu-lines i:last-child{width:100%;transform:translateY(-3px) rotate(-45deg)}
.header__cta{display:flex;align-items:center;gap:.55rem;letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;color:#fff}
.header__cta-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ===== Nav overlay ===== */
.nav{position:fixed;inset:0;z-index:150;background:var(--ink-2);display:grid;grid-template-columns:1.4fr 1fr;align-items:center;padding:0 var(--pad);clip-path:inset(0 0 100% 0);pointer-events:none}
.nav.is-open{pointer-events:auto}
.nav__col--links ul{list-style:none}
.nav__col--links li{overflow:hidden}
.nav__col--links a{display:flex;align-items:baseline;gap:1.2rem;font-family:'Cormorant Garamond',serif;font-size:clamp(2.4rem,7vw,5rem);color:var(--ivory);padding:.1em 0;transition:color .4s,padding-left .4s var(--ease);transform:translateY(110%)}
.nav__col--links a span{font-family:'Jost',sans-serif;font-size:.8rem;letter-spacing:.2em;color:var(--gold);font-weight:400}
.nav__col--links a:hover{color:var(--gold-soft);padding-left:.3em}
.nav__col--meta{display:flex;flex-direction:column;gap:2.5rem;align-self:center;justify-self:end;text-align:right}
.nav__meta-label{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ivory-dim);margin-bottom:.8rem}
.nav__meta-link{display:block;font-size:1.05rem;color:var(--ivory);padding:.15rem 0;transition:color .3s}
.nav__meta-link:hover{color:var(--gold)}
@media (max-width:760px){
  .nav{grid-template-columns:1fr}
  .nav__col--meta{display:none}
}

/* ===== HERO ===== */
.hero{position:relative;height:400vh}
.hero__sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.hero__panels{position:absolute;inset:0}
.panel{position:absolute;inset:0;opacity:0;visibility:hidden}
.panel.is-active{opacity:1;visibility:visible}
.panel__media{position:absolute;inset:0;overflow:hidden}
.panel__media{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.panel__img{position:absolute;inset:-6%;background-size:cover;background-position:center;transform:scale(1.12);will-change:transform}
.panel.is-active .panel__img{animation:kenburns 9s linear forwards}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1.24)}}
.panel__overlay{position:absolute;inset:0;background:
  linear-gradient(to top,rgba(10,9,8,.9) 0%,rgba(10,9,8,.25) 45%,rgba(10,9,8,.55) 100%)}
.panel__content{position:absolute;left:var(--pad);bottom:clamp(4rem,12vh,9rem);max-width:min(640px,80vw);z-index:2}
.panel__eyebrow{display:block;margin-bottom:1.4rem;opacity:0;transform:translateY(20px)}
.panel__title{font-size:clamp(3rem,9vw,7.5rem);margin-bottom:1.6rem}
.panel__title span{display:block;overflow:hidden}
.panel__title span>*{display:block}
.panel__title span:nth-child(2){padding-left:.6em;color:var(--gold-soft);font-style:italic}
.panel__text{max-width:46ch;color:var(--ivory-dim);font-size:1.02rem;margin-bottom:2rem;opacity:0;transform:translateY(20px)}

.btn-discover{display:inline-flex;align-items:center;gap:.8rem;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ivory);padding:1.05rem 1.9rem;border:1px solid var(--line);border-radius:100px;transition:.4s var(--ease);opacity:0;transform:translateY(20px)}
.btn-discover:hover{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.btn-discover__arrow{transition:transform .4s var(--ease)}
.btn-discover:hover .btn-discover__arrow{transform:translateX(5px)}

.panel.is-active .panel__eyebrow{opacity:1;transform:none;transition:.7s var(--ease) .15s}
.panel.is-active .panel__text{opacity:1;transform:none;transition:.7s var(--ease) .35s}
.panel.is-active .btn-discover{opacity:1;transform:none;transition:.7s var(--ease) .5s}

.hero__dots{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:1.1rem}
.hero__dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--ivory-dim);transition:.4s var(--ease)}
.hero__dot.is-active{background:var(--gold);border-color:var(--gold);transform:scale(1.25)}
@media (max-width:760px){ .hero__dots{display:none} }

.hero__scroll-hint{position:absolute;right:var(--pad);bottom:clamp(2rem,6vh,3rem);z-index:3;display:flex;flex-direction:column;align-items:center;gap:.7rem;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ivory-dim)}
.hero__scroll-hint i{width:1px;height:46px;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden}
.hero__scroll-hint i::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--gold);animation:scrolldot 2s var(--ease) infinite}
@keyframes scrolldot{0%{transform:translateY(-100%)}100%{transform:translateY(250%)}}

/* ===== INTRO ===== */
.intro{padding:clamp(7rem,18vh,14rem) var(--pad);max-width:1300px}
.intro__label{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:2.5rem}
.intro__text{font-size:clamp(1.7rem,4.2vw,3.4rem);line-height:1.28;font-weight:300;color:var(--ivory)}
.intro__more{display:inline-flex;align-items:center;gap:.7rem;margin-top:3rem;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ivory-dim);transition:color .3s}
.intro__more:hover{color:var(--gold)}
.intro__more span{color:var(--gold)}

/* reveal lines */
.reveal-lines .line-inner{display:inline}
.word{display:inline-block;overflow:hidden;vertical-align:top}
.word>span{display:inline-block;transform:translateY(110%);will-change:transform}

/* ===== JOURNEY (horizontal pin) ===== */
.journey{position:relative;background:var(--ink-2)}
.journey__pin{height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.journey__head{padding:0 var(--pad);margin-bottom:2.5rem;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.journey__title{font-size:clamp(2rem,5vw,4rem)}
.journey__eyebrow{display:block;margin-bottom:.8rem}
.journey__track{display:flex;gap:clamp(1rem,3vw,2.5rem);padding:0 var(--pad);will-change:transform}
.reel{position:relative;flex:0 0 auto;width:clamp(230px,24vw,340px)}
.reel__media{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:4px;background:var(--ink-2)}
.reel__img,.reel__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center;transform:scale(1.05);transition:transform 1.1s var(--ease)}
.reel:hover .reel__img,.reel:hover .reel__video{transform:scale(1.14)}
.reel__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,8,.6),transparent 50%)}
.reel__meta{position:absolute;left:1.1rem;bottom:1.1rem;z-index:2;display:flex;align-items:baseline;gap:.7rem}
.reel__meta span{font-size:.7rem;letter-spacing:.2em;color:var(--gold)}
.reel__meta p{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--ivory)}

/* ===== VSTACK (vertical one-by-one) ===== */
.vstack{padding:clamp(6rem,14vh,11rem) var(--pad)}
.vstack__head{text-align:center;margin-bottom:clamp(3rem,8vh,6rem)}
.vstack__eyebrow{display:block;margin-bottom:1rem}
.vstack__title{font-size:clamp(2.2rem,6vw,5rem)}
.vstack__list{display:flex;flex-direction:column;gap:clamp(4rem,12vh,9rem);max-width:560px;margin:0 auto}
.vframe{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:6px;background:var(--ink-2)}
.vframe__img,.vframe__video{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;background-size:cover;background-position:center;will-change:transform}
.vframe::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,8,.75),transparent 55%)}
.vframe__cap{position:absolute;left:1.6rem;bottom:1.6rem;z-index:2}
.vframe__cap span{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.vframe__cap p{font-family:'Cormorant Garamond',serif;font-size:clamp(1.6rem,4vw,2.4rem);color:var(--ivory);margin-top:.3rem}

/* ===== ENQUIRE ===== */
.enquire{padding:clamp(6rem,16vh,12rem) var(--pad);border-top:1px solid var(--line)}
.enquire__inner{max-width:1200px;margin:0 auto}
.enquire__label{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:2rem}
.enquire__title{font-size:clamp(2.6rem,8vw,6rem);margin-bottom:clamp(3rem,8vh,5rem)}
.enquire__split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,2rem)}
.enquire__card{position:relative;padding:clamp(2rem,4vw,3.5rem);border:1px solid var(--line);border-radius:6px;transition:.5s var(--ease);overflow:hidden}
.enquire__card::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);transition:transform .55s var(--ease);z-index:-1}
.enquire__card:hover{border-color:var(--gold);color:var(--ink)}
.enquire__card:hover::before{transform:translateY(0)}
.enquire__card-num{font-size:.72rem;letter-spacing:.2em;color:var(--gold);transition:color .5s}
.enquire__card:hover .enquire__card-num{color:var(--ink)}
.enquire__card h3{font-size:clamp(1.6rem,3vw,2.4rem);margin:1.4rem 0 1rem}
.enquire__card p{color:var(--ivory-dim);max-width:36ch;margin-bottom:2rem;transition:color .5s}
.enquire__card:hover p{color:rgba(10,9,8,.75)}
.enquire__card-go{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase}
@media (max-width:760px){ .enquire__split{grid-template-columns:1fr} }

/* ===== Footer ===== */
.footer{padding:clamp(4rem,10vh,7rem) var(--pad) 2.5rem;border-top:1px solid var(--line)}
.footer__top{text-align:center;margin-bottom:clamp(3rem,8vh,5rem)}
.footer__logo{font-family:'Cormorant Garamond',serif;font-size:clamp(4rem,16vw,12rem);letter-spacing:.1em;color:var(--ivory);line-height:1;display:inline-block}
.footer__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;padding-bottom:clamp(2.5rem,6vh,4rem);border-bottom:1px solid var(--line)}
.footer__label{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:1.3rem}
.footer__col a{display:block;color:var(--ivory-dim);padding:.3rem 0;font-size:.95rem;transition:color .3s}
.footer__col a:hover{color:var(--ivory)}
.footer__bottom{display:flex;justify-content:space-between;gap:1rem;padding-top:2rem;font-size:.72rem;letter-spacing:.1em;color:var(--ivory-dim);flex-wrap:wrap}
@media (max-width:760px){ .footer__grid{grid-template-columns:1fr 1fr} }

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .panel{opacity:1;visibility:visible}
}


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

.panel__overlay{
    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.88),
        rgba(0,0,0,.2) 45%,
        rgba(0,0,0,.45)
    );
}

.panel__content{

    left:24px;
    right:24px;

    bottom:55px;

    max-width:100%;

}

.panel__title{

    font-size:clamp(2.5rem,10vw,4rem);

}

.panel__text{

    font-size:15px;

}

.btn-discover{

    padding:14px 26px;

}

.hero__scroll-hint{

    right:20px;
    bottom:30px;

}

}



.panel__video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center center;
}

video{
    width: 100%;
}

@media (max-width:768px){

.hero{
    height:300vh;
}

.hero__sticky{
    position:sticky;
    top:0;
    height:100svh;
}

.panel{
    position:absolute;
    inset:0;
}

.panel__media{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.panel__video{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
}

.panel__content{
    left:20px;
    right:20px;
    bottom:60px;
    max-width:100%;
}

.panel__title{
    font-size:42px;
}

.panel__text{
    font-size:15px;
}

}