/* ─────────────────────────────────────────────
   VILLA AURELIA — cinematic scroll experience
   ───────────────────────────────────────────── */

@font-face{font-family:'Anton';src:url('../assets/vendor/anton.woff2') format('woff2');font-display:block}
@font-face{font-family:'Cormorant';src:url('../assets/vendor/cormorant.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Cormorant';src:url('../assets/vendor/cormorant-italic.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'Inter';src:url('../assets/vendor/inter.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  --ink:#0e0d0b;
  --ink-2:#161411;
  --bone:#ece7de;
  --bone-dim:#b9b2a6;
  --gold:#c8a87c;
  --gold-dim:rgba(200,168,124,.35);
  --serif:'Cormorant',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --disp:'Anton',Impact,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:400;
  overflow-x:hidden;
  cursor:none;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:400}

/* selection */
::selection{background:var(--gold);color:var(--ink)}

/* ══════════ GRAIN + CURSOR ══════════ */
.grain{
  position:fixed;inset:-50%;z-index:200;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}20%{transform:translate(-13%,3%)}
  30%{transform:translate(6%,-12%)}40%{transform:translate(-4%,14%)}50%{transform:translate(-12%,7%)}
  60%{transform:translate(11%,3%)}70%{transform:translate(3%,11%)}80%{transform:translate(-8%,-4%)}90%{transform:translate(9%,-7%)}
}
.cursor{
  position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;
  border:1px solid var(--gold);z-index:300;pointer-events:none;
  transform:translate(-50%,-50%);
  transition:width .25s,height .25s,background .25s,opacity .3s;
  mix-blend-mode:difference;
}
.cursor.is-active{width:52px;height:52px;background:rgba(200,168,124,.15)}
@media (hover:none){.cursor{display:none}body{cursor:auto}}

/* ══════════ PRELOADER ══════════ */
.preloader{
  position:fixed;inset:0;z-index:400;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.preloader-inner{text-align:center}
.preloader-mark{
  font-family:var(--serif);font-style:italic;font-size:20vmin;line-height:1;
  color:var(--gold);opacity:0;animation:fadeUp 1s .1s forwards;
}
.preloader-word{
  font-family:var(--disp);letter-spacing:.6em;text-indent:.6em;font-size:14px;
  margin-top:1.2rem;opacity:0;animation:fadeUp 1s .35s forwards;
}
.preloader-count{
  position:fixed;right:4vw;bottom:5vh;font-family:var(--disp);
  font-size:11vmin;color:var(--ink);-webkit-text-stroke:1px var(--gold-dim);
}
.preloader-bar{position:fixed;left:0;bottom:0;width:100%;height:2px;background:rgba(236,231,222,.08)}
.preloader-bar span{display:block;width:0%;height:100%;background:var(--gold)}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* ══════════ FIXED UI ══════════ */
.ui-top{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 4vw;mix-blend-mode:difference;
  opacity:0;transition:opacity .8s;
}
body.is-ready .ui-top,body.is-ready .ui-bottom{opacity:1}
.brand{font-family:var(--disp);letter-spacing:.35em;font-size:15px;display:flex;gap:.6em;align-items:center}
.brand-mark{color:var(--gold);font-size:18px}
.ui-nav{display:flex;gap:2.2vw;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.ui-nav a{opacity:.65;transition:opacity .3s}
.ui-nav a:hover{opacity:1}
.ui-cta{
  font-size:11px;letter-spacing:.25em;padding:.9em 1.8em;
  border:1px solid rgba(236,231,222,.4);border-radius:99px;transition:.35s;
}
.ui-cta:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.ui-bottom{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  display:flex;align-items:center;gap:2vw;padding:18px 4vw;
  mix-blend-mode:difference;opacity:0;transition:opacity .8s;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
}
.ui-chapter{display:flex;gap:.9em;align-items:baseline;min-width:150px}
.ui-chapter span{font-family:var(--disp);font-size:15px;color:var(--gold)}
.ui-chapter em{font-style:normal;opacity:.7}
.ui-progress{flex:1;height:1px;background:rgba(236,231,222,.15);position:relative}
.ui-progress span{position:absolute;inset:0;width:0%;background:var(--gold)}
.ui-coords{opacity:.55}
@media(max-width:900px){.ui-nav,.ui-coords{display:none}}

/* ══════════ SHARED ══════════ */
.chapter{position:relative}
.sec-head{padding:16vh 4vw 6vh}
.sec-index{
  font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.6vw,22px);color:var(--gold);
  display:block;margin-bottom:1rem;
}
.sec-title{
  font-family:var(--disp);font-size:clamp(52px,9vw,150px);line-height:.95;
  letter-spacing:.01em;text-transform:uppercase;
}
.sec-sub{margin-top:1.4rem;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim)}
.split .word{display:inline-block;overflow:hidden;vertical-align:top}
.split .word>i{display:inline-block;font-style:inherit;transform:translateY(110%)}
.reveal-line{opacity:0;transform:translateY(30px)}

/* parallax figure */
.parallax-img .img-wrap{overflow:hidden;height:100%}
.parallax-img img{transform:scale(1.18)}

/* ══════════ 01 HERO ══════════ */
.hero{height:100vh;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-shade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(14,13,11,.55) 0%,rgba(14,13,11,.05) 35%,rgba(14,13,11,.1) 60%,rgba(14,13,11,.92) 100%)}
.hero-content{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 4vw;
}
.hero-over{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.8vw,26px);color:var(--bone)}
.hero-title{
  font-family:var(--disp);font-size:clamp(70px,16.5vw,300px);line-height:1;
  letter-spacing:.02em;margin:.05em 0 .12em;display:flex;
}
.hero-title span{display:inline-block;will-change:transform,opacity}
.hero-under{font-size:clamp(12px,1.1vw,15px);letter-spacing:.15em;text-transform:uppercase;color:var(--bone-dim);max-width:560px}
.hero-scroll{
  position:absolute;bottom:9vh;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:10px;letter-spacing:.4em;color:var(--bone-dim);
}
.hero-scroll-line{width:1px;height:54px;background:var(--gold);transform-origin:top;animation:scrollLine 1.8s ease-in-out infinite}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ══════════ 02 MANIFESTO ══════════ */
.manifesto{padding:26vh 0 0;background:var(--ink)}
.manifesto-inner{padding:0 4vw;max-width:1500px;margin:0 auto;text-align:center}
.mline{
  font-family:var(--disp);font-size:clamp(44px,8.4vw,140px);line-height:1.04;
  text-transform:uppercase;letter-spacing:.015em;
}
.mline-serif{font-family:var(--serif);text-transform:none;color:var(--gold);font-size:clamp(40px,7.6vw,124px)}
.manifesto-note{
  margin:8vh auto 0;max-width:620px;font-family:var(--serif);
  font-size:clamp(19px,1.9vw,26px);line-height:1.65;color:var(--bone-dim);
}
.marquee{margin-top:20vh;padding:2.4vh 0;border-top:1px solid rgba(236,231,222,.1);border-bottom:1px solid rgba(236,231,222,.1);overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex}
.marquee-track span{
  font-family:var(--disp);font-size:clamp(18px,2.4vw,34px);letter-spacing:.12em;
  color:transparent;-webkit-text-stroke:1px rgba(236,231,222,.4);padding-right:.5em;
}

/* ══════════ 03 ESTATE ══════════ */
.estate{background:var(--ink)}
.estate-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:2.5vw;
  padding:0 4vw;align-items:start;
}
.e-img{position:relative}
.e-img figcaption{
  margin-top:12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);
  display:flex;gap:1em;
}
.e-img figcaption span{color:var(--gold)}
.e-a{grid-column:1/8;height:72vh}
.e-b{grid-column:8/13;height:48vh;margin-top:16vh}
.e-c{grid-column:3/8;height:52vh;margin-top:8vh}
.e-text{grid-column:8/13;align-self:center;margin-top:8vh}
.e-text p{font-family:var(--serif);font-size:clamp(19px,1.8vw,25px);line-height:1.7;color:var(--bone-dim)}
.stats{
  display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:rgba(236,231,222,.1);
  border-top:1px solid rgba(236,231,222,.1);border-bottom:1px solid rgba(236,231,222,.1);
  margin-top:18vh;
}
.stat{background:var(--ink);padding:5vh 2vw;text-align:center}
.stat strong{font-family:var(--disp);font-size:clamp(30px,3.6vw,60px);color:var(--bone);display:block}
.stat span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
@media(max-width:900px){
  .e-a,.e-b,.e-c,.e-text{grid-column:1/13;margin-top:6vh;height:auto}
  .e-a,.e-b,.e-c{height:48vh}
  .stats{grid-template-columns:repeat(3,1fr)}
}

/* ══════════ 04 FILM ══════════ */
.film{height:130vh;background:var(--ink)}
.film-frame{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:flex-end;
}
.film-frame video{position:absolute;inset:0;filter:brightness(.85)}
.film-caption{
  position:relative;z-index:2;padding:0 4vw 10vh;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.film-caption h3{font-family:var(--disp);font-size:clamp(40px,6.5vw,110px);text-transform:uppercase;line-height:1}
.film-caption p{margin-top:1rem;font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.7vw,24px);color:var(--bone)}

/* ══════════ 05 MODEL ══════════ */
.model{height:400vh;background:var(--ink-2)}
.model-stage{position:sticky;top:0;height:100vh;overflow:hidden}
#modelCanvas{position:absolute;inset:0;width:100%;height:100%}
.model-head{position:absolute;top:12vh;left:4vw;z-index:3;pointer-events:none}
.model-head .sec-title{font-size:clamp(40px,6vw,100px)}
.model-hint{
  position:absolute;bottom:6vh;left:50%;transform:translateX(-50%);
  font-size:10px;letter-spacing:.4em;color:var(--bone-dim);z-index:3;
}
.model-label{
  position:absolute;z-index:3;display:flex;align-items:center;gap:14px;
  font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.7vw,24px);
  color:var(--bone);opacity:0;transform:translateY(16px);pointer-events:none;
  text-shadow:0 2px 18px rgba(0,0,0,.7);
}
.model-label i{display:block;width:44px;height:1px;background:var(--gold)}
.model-label[data-step="0"]{top:34%;left:8%}
.model-label[data-step="1"]{top:56%;right:10%}
.model-label[data-step="2"]{top:30%;right:14%}
.model-label[data-step="3"]{bottom:22%;left:10%}

/* ══════════ 06 INTERIORS ══════════ */
.interiors{background:var(--ink)}
.interiors-pin{height:100vh;overflow:hidden;position:relative;display:flex;align-items:center}
.interiors-head{position:absolute;top:9vh;left:4vw;z-index:3}
.interiors-head .sec-title{font-size:clamp(40px,6vw,100px)}
.interiors-track{
  display:flex;gap:6vw;padding:0 8vw;align-items:center;will-change:transform;
}
.room{flex:0 0 auto;width:min(62vw,760px);display:flex;flex-direction:column;gap:22px}
.room-img{height:56vh;overflow:hidden}
.room-img img{transform:scale(1.12);transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.room:hover .room-img img{transform:scale(1.02)}
.room-meta span{font-size:11px;letter-spacing:.25em;color:var(--gold);text-transform:uppercase}
.room-meta h3{font-family:var(--disp);font-size:clamp(26px,3vw,46px);text-transform:uppercase;margin:.3em 0 .4em}
.room-meta p{font-family:var(--serif);font-size:clamp(16px,1.5vw,21px);color:var(--bone-dim);line-height:1.6;max-width:480px}

/* ══════════ 07 FACILITIES ══════════ */
.facilities{background:var(--ink);position:relative;padding-bottom:14vh}
.fac-list{list-style:none;border-top:1px solid rgba(236,231,222,.12)}
.fac-item{
  display:flex;align-items:baseline;gap:3vw;padding:4.2vh 4vw;
  border-bottom:1px solid rgba(236,231,222,.12);position:relative;
  transition:background .4s,padding-left .4s;
}
.fac-item:hover{background:rgba(200,168,124,.06);padding-left:5.5vw}
.fac-no{font-size:11px;letter-spacing:.2em;color:var(--gold);min-width:44px}
.fac-item h3{
  font-family:var(--disp);font-size:clamp(28px,4.6vw,74px);text-transform:uppercase;
  line-height:1;flex:1;color:var(--bone);transition:color .4s;
}
.fac-item:hover h3{color:var(--gold)}
.fac-note{font-family:var(--serif);font-style:italic;font-size:clamp(14px,1.4vw,20px);color:var(--bone-dim)}
.fac-preview{
  position:fixed;z-index:90;width:340px;height:240px;overflow:hidden;
  pointer-events:none;opacity:0;transform:scale(.9);border:1px solid rgba(236,231,222,.15);
}
@media(max-width:900px){.fac-preview{display:none}}

/* ══════════ 08 GOLDEN ══════════ */
.golden{height:120vh;position:relative}
.golden-media{position:absolute;inset:0}
.golden-media::after{content:'';position:absolute;inset:0;background:rgba(14,13,11,.35)}
.golden-text{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;z-index:2;padding:0 4vw;
}
.golden-text h2{
  font-family:var(--disp);font-size:clamp(80px,15vw,260px);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--bone);
}
.golden-text p{margin-top:2vh;font-size:clamp(13px,1.2vw,16px);letter-spacing:.12em;text-transform:uppercase;color:var(--bone);line-height:2}
.golden-text em{font-family:var(--serif);font-size:clamp(19px,1.9vw,27px);text-transform:none;letter-spacing:0;color:var(--gold)}

/* ══════════ 09 LOCATION ══════════ */
.location{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:var(--ink)}
.loc-media{height:100vh;position:sticky;top:0}
.loc-panel{padding:16vh 5vw;display:flex;flex-direction:column;justify-content:center}
.loc-panel .sec-title{font-size:clamp(40px,5.6vw,96px)}
.loc-list{list-style:none;margin-top:8vh}
.loc-list li{
  display:flex;align-items:baseline;gap:1.5vw;padding:2.6vh 0;
  border-bottom:1px solid rgba(236,231,222,.12);
}
.loc-list span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim)}
.loc-list i{flex:1;border-bottom:1px dashed rgba(236,231,222,.2)}
.loc-list strong{font-family:var(--disp);font-size:clamp(20px,2.2vw,34px);color:var(--bone)}
@media(max-width:900px){.location{grid-template-columns:1fr}.loc-media{height:50vh;position:relative}}

/* ══════════ 10 GALLERY ══════════ */
.gallery{padding:16vh 0;background:var(--ink-2);overflow:hidden}
.gal-row{display:flex;gap:2vw;margin-bottom:2vw;will-change:transform}
.gal-row img{flex:0 0 auto;width:26vw;height:32vh;object-fit:cover;filter:saturate(.9)}

/* ══════════ 11 ENQUIRE ══════════ */
.enquire{min-height:100vh;display:flex;flex-direction:column;background:var(--ink)}
.enquire-inner{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:22vh 4vw 10vh;
}
.enquire-over{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.7vw,24px);color:var(--gold)}
.enquire-title{
  font-family:var(--disp);font-size:clamp(56px,11vw,200px);line-height:.98;
  text-transform:uppercase;margin:4vh 0 7vh;
}
.enquire-btn{
  font-size:12px;letter-spacing:.3em;padding:1.6em 3.2em;border-radius:99px;
  border:1px solid var(--gold);color:var(--gold);transition:.4s;
}
.enquire-btn:hover{background:var(--gold);color:var(--ink)}
.enquire-meta{
  margin-top:9vh;display:flex;gap:4vw;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-dim);flex-wrap:wrap;justify-content:center;
}
/* ══════════ MOBILE POLISH ══════════ */
@media(max-width:600px){
  .hero-over{font-size:14px;margin-bottom:10px}
  .hero-title{margin:.18em 0 .25em}
  .hero-under{font-size:11px;letter-spacing:.1em;max-width:320px}
  .room{width:78vw}
  .room-img{height:46vh}
  .interiors-track{gap:8vw;padding:0 11vw}
  .fac-item{gap:4vw;padding:3.4vh 5vw}
  .gal-row img{width:44vw;height:24vh}
  .enquire-meta{gap:2vh;flex-direction:column}
  .ui-cta{padding:.8em 1.4em;font-size:10px}
}

.footer{
  display:flex;justify-content:space-between;gap:2vw;flex-wrap:wrap;
  padding:3vh 4vw;border-top:1px solid rgba(236,231,222,.1);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(236,231,222,.35);
}