/* ===== Tonino Lamborghini Residences — immersive landing ===== */
:root{
  --bg:#08070b;            /* near-black, warm-tinted */
  --bg-1:#0e0c12;          /* surface ladder */
  --bg-2:#151219;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.14);
  --ink:#f4efe8;           /* warm off-white */
  --ink-mut:#a59f99;       /* muted body (passes AA on bg) */
  --accent:#ff4d2e;        /* Tonino red-orange (single accent) */
  --accent-soft:#ff7a45;
  --maxw:1180px;
  --pad:clamp(20px,5vw,40px);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,canvas,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:italic}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* visually-hidden (stable h1 for SEO/a11y; the cinematic IS the visual hero) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* kicker */
.kick{
  display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--accent);margin-bottom:1.1rem;
}

/* buttons */
.btn{
  display:inline-block;font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);padding:.95em 1.8em;
  border:1px solid var(--line-2);border-radius:2px;background:transparent;
  transition:border-color .3s,background .3s,color .3s;cursor:pointer;
}
.btn:hover{border-color:var(--accent);color:#fff;background:rgba(255,77,46,.08)}
.btn--full{width:100%;background:var(--accent);border-color:var(--accent);color:#0a0507;font-weight:600}
.btn--full:hover{background:var(--accent-soft);border-color:var(--accent-soft);color:#0a0507}

/* ===== PRELOADER ===== */
.preloader{position:fixed;inset:0;z-index:100;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s ease;will-change:opacity}
.preloader.is-done{opacity:0;pointer-events:none}
.pl__inner{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:var(--pad);max-width:540px;
  background:radial-gradient(120% 90% at 50% 40%,#140d10 0%,transparent 70%)}
.pl__brand{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,7.5vw,3rem);
  letter-spacing:.05em;line-height:1.04}
.pl__sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-mut);margin-top:1rem}
.pl__bar{position:relative;width:min(300px,66vw);height:2px;background:rgba(255,255,255,.12);
  margin:2.8rem 0 1.1rem;overflow:hidden;border-radius:2px}
.pl__bar i{display:block;height:100%;width:0;background:var(--accent);
  box-shadow:0 0 16px -2px var(--accent);transition:width .25s ease}
.pl__pct{font-family:var(--mono);font-size:.82rem;letter-spacing:.2em;color:var(--ink);font-variant-numeric:tabular-nums}
.pl__hint{font-family:var(--mono);font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-mut);margin-top:1.5rem;opacity:.7;animation:plHint 2.4s ease-in-out infinite}
@keyframes plHint{0%,100%{opacity:.35}50%{opacity:.75}}
/* lock the page while the preloader is up */
html.pl-lock,html.pl-lock body{overflow:hidden!important;height:100%;touch-action:none}
@media(prefers-reduced-motion:reduce){.preloader{transition:none}.pl__hint{animation:none}}

/* ===== NAV ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:.95rem var(--pad);
  background:linear-gradient(180deg,rgba(8,7,11,.85),rgba(8,7,11,0));
  transition:background .4s,border-color .4s;border-bottom:1px solid transparent;
}
.nav.is-stuck{background:rgba(8,7,11,.92);border-bottom-color:var(--line);backdrop-filter:blur(10px)}
.nav__brand{display:flex;flex-direction:column;line-height:1}
.nav__brand-name{font-family:var(--serif);font-size:1.05rem;letter-spacing:.12em}
.nav__brand-sub{font-family:var(--mono);font-size:.55rem;letter-spacing:.42em;color:var(--ink-mut);margin-top:3px}
.nav__links{display:flex;align-items:center;gap:1.6rem}
.nav__links a{font-size:.82rem;letter-spacing:.04em;color:var(--ink-mut);transition:color .25s}
.nav__links a:hover{color:var(--ink)}
.nav__cta{border:1px solid var(--line-2);padding:.5em 1.1em;border-radius:2px;color:var(--ink)!important}
.nav__cta:hover{border-color:var(--accent)}
@media(max-width:720px){.nav__links a:not(.nav__cta){display:none}}

/* ===== FRAME-SCRUB ===== */
/* height sets scrub SENSITIVITY: progress-per-scroll-pixel = 1/height. Tall (1680vh ≈ 4× the
   original 420vh) → ~4× LESS sensitive, so one hard fling only covers ~¼ of the tour (no smear),
   and snap eases it to the nearest scene start. */
.scrub{position:relative;height:1680vh;background:var(--bg)}
.scrub__sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid}
.scrub__c,.scrub__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.scrub__v{display:none}
/* preloaded first frame = instant LCP; canvas draws over it, then this fades out */
.scrub__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  pointer-events:none;transition:opacity .35s ease}
.scrub--ready .scrub__poster{opacity:0}
.scrub--static .scrub__poster{display:none}
.scrub__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,7,11,.55),rgba(8,7,11,.05) 30%,rgba(8,7,11,.86))}
.scrub__cap{position:absolute;left:0;right:0;bottom:11vh;z-index:2}
.scrub__t{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,8vw,4.4rem);
  line-height:1.02;letter-spacing:-.01em;max-width:18ch}
.scrub__d{margin-top:.9rem;color:var(--ink-mut);font-size:clamp(.98rem,2.4vw,1.18rem);max-width:40ch}
.scrub__cap .kick,.scrub__t,.scrub__d{transition:opacity .45s ease,transform .45s ease}
.scrub__cap.is-swap .kick,.scrub__cap.is-swap .scrub__t,.scrub__cap.is-swap .scrub__d{opacity:0;transform:translateY(10px)}
.scrub__rail{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;background:rgba(255,255,255,.07)}
.scrub__rail i{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 14px -2px var(--accent)}
.scrub__hint{position:absolute;bottom:3.5vh;left:50%;transform:translateX(-50%);
  z-index:3;font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-mut);text-align:center;animation:hintFade 2.6s ease-in-out infinite;pointer-events:none}
.scrub__hint::after{content:"";display:block;width:1px;height:22px;margin:.7em auto 0;background:var(--accent)}
@keyframes hintFade{0%,100%{opacity:.3}50%{opacity:.85}}
@media(prefers-reduced-motion:reduce){.scrub__hint{animation:none}}
/* fallback (reduced-motion / saveData) → collapse + loop the video */
.scrub--static{height:100svh}
.scrub--static .scrub__c{display:none}
.scrub--static .scrub__v{display:block}
@media(prefers-reduced-motion:reduce){.scrub{height:100svh}}

/* ===== SECTIONS ===== */
.sec{padding-block:clamp(5rem,14vh,9rem);border-top:1px solid var(--line)}
.sec__t{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,6.5vw,3.6rem);
  line-height:1.04;letter-spacing:-.01em;margin-bottom:1.2rem;max-width:20ch}
.sec__lead{max-width:52ch;color:var(--ink-mut);font-size:clamp(1rem,2.3vw,1.16rem);margin-bottom:3rem}
.sec__note{margin-top:2rem;color:var(--ink-mut);font-size:.92rem}

/* residences */
.units{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
@media(min-width:720px){.units{grid-template-columns:repeat(3,1fr)}}
.unit{background:var(--bg-1);padding:2.2rem 1.8rem;transition:background .3s}
.unit:hover{background:var(--bg-2)}
.unit__n{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--accent)}
.unit h3{font-family:var(--serif);font-weight:500;font-size:1.9rem;margin:.7rem 0 .3rem}
.unit p{color:var(--ink-mut);font-size:.95rem}

/* amenities */
.amen{list-style:none;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;overflow:hidden;
  grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.amen{grid-template-columns:repeat(4,1fr)}}
.amen li{background:var(--bg-1);padding:1.6rem 1.4rem;font-size:.98rem;min-height:120px;
  display:flex;align-items:flex-end}
.amen li strong{color:var(--accent);font-weight:600}

/* location */
.dist{list-style:none;display:grid;gap:1.4rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.dist{grid-template-columns:repeat(5,1fr)}}
.dist li{border-top:1px solid var(--line-2);padding-top:1.1rem}
.dist b{font-family:var(--serif);font-size:2.8rem;font-weight:500;line-height:1}
.dist span{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-left:.4em}
.dist p{margin-top:.5rem;color:var(--ink-mut);font-size:.9rem}

/* enquire */
.enquire{display:grid;gap:3rem}
@media(min-width:860px){.enquire{grid-template-columns:1fr 1fr;gap:5rem;align-items:center}}
.offer{list-style:none;display:grid;gap:1rem;margin-top:.5rem}
.offer li{font-size:1.1rem;color:var(--ink-mut);border-bottom:1px solid var(--line);padding-bottom:1rem}
.offer b{font-family:var(--serif);color:var(--ink);font-size:1.6rem;margin-right:.6em}
.form{background:var(--bg-1);border:1px solid var(--line);border-radius:4px;padding:clamp(1.6rem,4vw,2.6rem)}
.form__t{font-family:var(--serif);font-weight:500;font-size:1.7rem;margin-bottom:1.6rem}
.form label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-mut);margin-bottom:1.1rem}
.form input{width:100%;margin-top:.5rem;background:var(--bg);border:1px solid var(--line-2);
  border-radius:2px;padding:.85em .9em;color:var(--ink);font-family:var(--sans);font-size:1rem;
  transition:border-color .25s}
.form input:focus{outline:none;border-color:var(--accent)}
.form__fine{margin-top:1rem;color:var(--ink-mut);font-size:.74rem;line-height:1.5}

/* footer */
.foot{border-top:1px solid var(--line);padding-block:3rem}
.foot__in{display:flex;flex-direction:column;gap:.5rem}
.foot__brand{font-family:var(--serif);letter-spacing:.1em;font-size:1.05rem}
.foot__meta,.foot__by{color:var(--ink-mut);font-size:.82rem}
.foot__by{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;margin-top:.6rem}