/* Sahn (working name) — Andalusian courtyard residences. Tijaarah palette: black, jade, gold. */
:root{
  --ink:#000000;
  --night:#020B07;
  --green-900:#04150E;
  --jade:#1E6B4F;
  --gold:#C9A24A;
  --gold-lit:#F0D89A;
  --cream:#F2F6F3;
  --muted:#9AA9A1;
  --line:rgba(201,162,74,.28);
  --display:"Gloock",Georgia,"Times New Roman",serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,5vw,72px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{overflow-x:clip;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:calc(18px + env(safe-area-inset-top,0px)) var(--pad) 18px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0))}
.nav > *{pointer-events:auto}
.mark{font-family:var(--display);font-size:22px;letter-spacing:.32em;text-decoration:none;color:var(--gold-lit)}
.nav-cta{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--line);border-radius:99px;padding:9px 16px;color:var(--cream);background:rgba(0,0,0,.35);backdrop-filter:blur(8px)}

/* ---------- hero: tall track, pinned stage ---------- */
.hero{position:relative;height:520vh;height:520lvh;--p:0}
.stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:var(--night)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 62%,rgba(0,0,0,.7) 100%)}

/* Lantern-glow mist that covers the stretch where the video fades between views */
.mist{position:absolute;inset:-10%;z-index:1;pointer-events:none;opacity:var(--m,0);will-change:opacity}
.mist b{position:absolute;inset:0;
  background:
    radial-gradient(38% 30% at 50% 46%,rgba(255,236,190,.95),rgba(240,216,154,.55) 45%,rgba(201,162,74,0) 75%),
    radial-gradient(70% 55% at 50% 50%,rgba(150,120,70,.55),rgba(30,40,30,0) 70%)}
.mist i{position:absolute;width:90%;height:70%;border-radius:50%;filter:blur(60px);opacity:.9;
  background:radial-gradient(closest-side,rgba(232,226,206,.85),rgba(200,196,178,0));
  animation:drift 9s ease-in-out infinite alternate}
.mist i:nth-child(1){left:-20%;top:20%}
.mist i:nth-child(2){right:-25%;top:35%;animation-duration:11s;animation-direction:alternate-reverse}
.mist i:nth-child(3){left:10%;top:55%;width:110%;animation-duration:13s}
@keyframes drift{from{transform:translateX(-6%) scale(1)}to{transform:translateX(8%) scale(1.12)}}

.beat{position:absolute;left:0;right:0;z-index:2;padding-inline:var(--pad);text-align:center;pointer-events:none}
.beat a{pointer-events:auto}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}

/* Beat 1: the name, sitting in the sky, rising away as the camera moves in */
.b-title{top:13svh;
  opacity:clamp(0,calc(1 - var(--p) * 4.2),1);
  transform:translateY(calc(var(--p) * -60svh)) scale(calc(1 + var(--p) * .25))}
.b-title h1{margin:.2em 0 0;font-family:var(--display);font-weight:400;line-height:.86;letter-spacing:.06em;
  font-size:clamp(72px,11.5vw,190px);
  filter:drop-shadow(0 6px 30px rgba(0,0,0,.55));
  background:linear-gradient(180deg,var(--gold-lit) 0%,var(--gold) 55%,#8a6a2a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none}
.b-title p{margin:.6em auto 0;max-width:30ch;font-size:clamp(16px,1.6vw,20px);color:var(--cream);text-shadow:0 1px 14px rgba(0,0,0,.9)}
.b-title::before{content:"";position:absolute;left:50%;top:-6svh;width:min(900px,90vw);height:46svh;transform:translateX(-50%);z-index:-1;
  background:radial-gradient(closest-side,rgba(0,4,2,.62),rgba(0,4,2,0));pointer-events:none}
.b-arch p,.b-end h2{text-shadow:0 2px 24px rgba(0,0,0,.85)}
.b-end::before{content:"";position:absolute;left:50%;top:-8svh;width:min(1000px,96vw);height:44svh;transform:translateX(-50%);z-index:-1;
  background:radial-gradient(closest-side,rgba(0,4,2,.7),rgba(0,4,2,0));pointer-events:none}

/* Beat 2: crossing the arch */
.b-arch{bottom:14svh;
  opacity:clamp(0,min(calc((var(--p) - .26) * 9),calc((.52 - var(--p)) * 9)),1);
  transform:translateY(calc((.39 - var(--p)) * 30svh))}
.b-arch p{margin:.7em auto 0;max-width:34ch;font-family:var(--display);font-size:clamp(26px,3.4vw,48px);line-height:1.12;text-wrap:balance}

/* Beat 3: drifting labels in the garden (Igloo-style) */
.tags{position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:clamp(0,min(calc((var(--p) - var(--tag-in,.66)) * 9),calc((var(--tag-out,.85) - var(--p)) * 9)),1)}
.tag{position:absolute;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lit);
  padding:9px 13px;border:1px solid var(--line);border-radius:4px;background:rgba(2,11,7,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transform:translateY(calc((var(--tag-mid,.77) - var(--p)) * var(--drift,40svh)))}
.tag i{width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg);flex:none}
.tag span{display:block;color:var(--muted);letter-spacing:.08em}
.tag:nth-child(1){left:8%;top:36%;--drift:30svh}
.tag:nth-child(2){right:8%;top:28%;--drift:55svh;flex-direction:row-reverse;text-align:right}
.tag:nth-child(3){left:14%;top:66%;--drift:80svh}
.tag:nth-child(4){right:12%;top:60%;--drift:45svh;flex-direction:row-reverse;text-align:right}

/* Beat 4: arrival at the villas */
.b-end{top:16svh;opacity:clamp(0,calc((var(--p) - .82) * 8),1);transform:translateY(calc((1 - var(--p)) * 12svh))}
.b-end h2{margin:.35em 0 .5em;font-family:var(--display);font-weight:400;font-size:clamp(40px,6vw,92px);line-height:1;text-wrap:balance;color:var(--gold-lit)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);background:linear-gradient(96deg,var(--gold),var(--gold-lit) 50%,var(--gold));padding:14px 22px;border-radius:99px}

/* scroll cue */
.cue{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:3;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  opacity:clamp(0,calc(1 - var(--p) * 12),1);display:grid;justify-items:center;gap:8px}
.cue::after{content:"";width:1px;height:34px;background:linear-gradient(var(--gold),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

@media (max-width:700px){
  .tag:nth-child(1){left:6%;top:30%}
  .tag:nth-child(2){right:6%;top:44%}
  .tag:nth-child(3){left:6%;top:62%}
  .tag:nth-child(4){display:none}
  .b-end{top:22svh;opacity:clamp(0,calc((var(--p) - .88) * 9),1)}
  .hero{--tag-in:.75;--tag-out:.89;--tag-mid:.82}
}
@media (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .stage{position:relative}
  .b-arch,.tags,.b-end,.cue{display:none}
  .b-title{opacity:1;transform:none}
  .cue::after{animation:none}
}