/* ============================================================
   VAIORA — Private lagoon retreat · the synthesis ship
   Best of: signature scroll-object (POE), magnetic cursor (RAVA),
   horizontal gallery (HOULE), reveal restraint (FARE).
   Type: Cormorant Garamond (display, elegant) + Inter (body)
   ============================================================ */
:root{
  --night:#07181C; --teal:#1C5A56; --aqua:#7FD9C4;
  --sand:#E7D8BC; --bone:#F4EEE2; --gold:#E0A95E;
  --soft:rgba(244,238,226,.66); --faint:rgba(244,238,226,.4); --line:rgba(244,238,226,.16);
  --display:"Cormorant Garamond", Georgia, serif;
  --body:"Inter", system-ui, sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(1.4rem,5vw,5rem);
}
*{ margin:0; padding:0; box-sizing:border-box; }
body{ font-family:var(--body); background:var(--night); color:var(--bone); font-size:16px; line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
::selection{ background:var(--gold); color:var(--night); }
a{ color:inherit; text-decoration:none; }
.eyebrow{ font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); }

/* CURSOR */
.cursor{ position:fixed; top:0; left:0; width:12px; height:12px; border-radius:50%; background:var(--aqua); pointer-events:none; z-index:300; transform:translate(-50%,-50%); mix-blend-mode:screen; transition:width .22s var(--ease), height .22s var(--ease), opacity .22s var(--ease); }
.cursor.is-hover{ width:56px; height:56px; background:rgba(127,217,196,.3); }
@media (hover:none){ .cursor{ display:none; } }

/* INTRO */
.intro{ position:fixed; inset:0; z-index:200; background:var(--night); display:grid; place-items:center; }
.intro__word{ font-family:var(--display); font-weight:500; font-size:clamp(2.6rem,10vw,7rem); letter-spacing:.14em; color:var(--bone); }

/* NAV */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:1.5rem var(--pad); transition:transform .45s var(--ease); }
.nav--hidden{ transform:translateY(-115%); }
.nav__brand{ font-family:var(--display); font-weight:600; font-size:1.6rem; letter-spacing:.1em; }
.nav__links{ display:flex; gap:2rem; }
.nav__links a{ font-size:.78rem; letter-spacing:.08em; color:var(--soft); transition:color .16s var(--ease); }
.nav__links a:hover{ color:var(--bone); }
.nav__cta{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; padding:.7rem 1.3rem; border:1px solid var(--line); border-radius:100px; transition:background .24s var(--ease), color .24s var(--ease); }
.nav__cta:hover{ background:var(--bone); color:var(--night); }

/* HERO — cinematic, scrubbed day → dusk (the signature) */
.hero{ position:relative; height:100svh; overflow:hidden; display:flex; align-items:flex-end; }
.hero__sky{ position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,#07181C 0%,#0E3A3C 46%,#1C5A56 70%,#2E6E62 100%); will-change:background; }
.hero__sea{ position:absolute; left:0; right:0; bottom:0; height:38%; z-index:1; background:linear-gradient(180deg, rgba(127,217,196,.22), rgba(7,24,28,.9) 60%); }
.hero__sea::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(180deg, rgba(244,238,226,.04) 0 2px, transparent 2px 7px); mix-blend-mode:screen; }
.sun{ position:absolute; left:50%; top:12.5%; transform:translate(-50%,-50%); z-index:1; width:clamp(96px,11vw,166px); aspect-ratio:1; border-radius:50%; will-change:transform; }
.sun__core{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 50% 46%, #FFF6E6 0%, #FCE3B0 32%, #E0A95E 62%, rgba(224,169,94,0) 74%); box-shadow:0 0 76px 8px rgba(224,169,94,.28); }
.hero__content{ position:relative; z-index:2; width:100%; padding:0 var(--pad) 11vh; text-align:center; }
.hero__eyebrow{ margin-bottom:1.6rem; font-size:.76rem; letter-spacing:.26em; text-transform:uppercase; color:var(--aqua); }
.hero__title{ font-family:var(--display); font-weight:500; font-size:clamp(2.9rem,8.4vw,7.4rem); line-height:1; letter-spacing:.005em; }
.hero__title em{ font-style:italic; color:var(--gold); }
.line{ display:block; overflow:hidden; }
.line > span{ display:block; will-change:transform; }
.hero__sub{ margin:2rem auto 0; max-width:34rem; color:var(--soft); font-size:clamp(1rem,1.5vw,1.16rem); }
.hero__btn, .invite__btn{ margin-top:2.4rem; display:inline-flex; align-items:center; gap:.7rem; padding:1.05rem 2.1rem; border-radius:100px; background:var(--bone); color:var(--night); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; transition:transform .16s var(--ease); will-change:transform; }
.hero__cue{ position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:.6rem; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.hero__cue i{ width:1px; height:30px; background:linear-gradient(var(--soft),transparent); }

/* MANIFESTO */
.manifesto{ padding:clamp(7rem,18vh,14rem) var(--pad); max-width:62rem; margin:0 auto; }
.manifesto .eyebrow{ display:block; margin-bottom:2rem; }
.manifesto__line{ font-family:var(--display); font-weight:500; font-size:clamp(1.9rem,4.8vw,3.6rem); line-height:1.24; }
.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word > span{ display:inline-block; will-change:transform; }

/* EXPERIENCES */
.exp{ padding:clamp(4rem,10vh,8rem) var(--pad); }
.exp__head{ border-top:1px solid var(--line); padding-top:2rem; margin-bottom:3rem; }
.exp__title{ font-family:var(--display); font-weight:500; font-size:clamp(2rem,5vw,3.8rem); line-height:1; margin-top:.4rem; }
.exp__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(1rem,2vw,2rem); }
.xp{ border:1px solid var(--line); border-radius:14px; padding:2rem 1.8rem; min-height:15rem; display:flex; flex-direction:column; transition:background .3s var(--ease), transform .3s var(--ease); }
.xp:hover{ background:rgba(127,217,196,.06); transform:translateY(-6px); }
.xp__n{ font-size:1.3rem; color:var(--aqua); margin-bottom:auto; transition:transform .3s var(--ease); }
.xp:hover .xp__n{ transform:translate(4px,-4px); }
.xp h3{ font-family:var(--display); font-weight:600; font-size:1.7rem; margin:2rem 0 .6rem; }
.xp p{ color:var(--soft); font-size:.95rem; }

/* SUITES — horizontal gallery */
.suites{ overflow:hidden; }
.suites__track{ display:flex; gap:2vw; padding:0 var(--pad); height:100svh; align-items:center; width:max-content; will-change:transform; }
.panel{ flex:0 0 auto; }
.suites__intro{ width:min(86vw,38rem); display:flex; flex-direction:column; justify-content:center; gap:1.4rem; }
.suites__intro h2{ font-family:var(--display); font-weight:500; font-size:clamp(2.6rem,7vw,5.6rem); line-height:.98; }
.suites__hint{ color:var(--aqua); letter-spacing:.16em; text-transform:uppercase; font-size:.76rem; }
.suite{ position:relative; width:min(74vw,28rem); height:72vh; border-radius:16px; overflow:hidden; display:flex; align-items:flex-end; background:linear-gradient(155deg,var(--c1),var(--c2)); border:1px solid var(--line); }
.suite::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 72% 16%, rgba(244,238,226,.16), transparent 56%); }
.suite__n{ position:absolute; top:1.4rem; left:1.6rem; font-family:var(--display); font-size:1.6rem; color:var(--bone); }
.suite__b{ position:relative; padding:2rem; }
.suite__b h3{ font-family:var(--display); font-weight:600; font-size:clamp(1.8rem,3vw,2.6rem); line-height:1; margin-bottom:.5rem; }
.suite__b p{ color:var(--soft); font-size:.95rem; max-width:22rem; }

/* GOLDEN MOMENT */
.moment{ padding:clamp(8rem,22vh,16rem) var(--pad); text-align:center; background:linear-gradient(180deg,var(--night),#241A10); }
.moment__q{ font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(2rem,5.5vw,4.4rem); line-height:1.2; max-width:48rem; margin:0 auto; color:var(--gold); }
.moment__q .word > span{ color:var(--gold); }

/* INVITE */
.invite{ text-align:center; padding:clamp(7rem,16vh,13rem) var(--pad); display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
.invite .eyebrow{ margin-bottom:.6rem; }
.invite__title{ font-family:var(--display); font-weight:500; font-size:clamp(2.6rem,8vw,6rem); line-height:1; }
.invite__title em{ font-style:italic; color:var(--gold); }
.invite__sub{ color:var(--soft); max-width:30rem; }

/* FOOTER */
.foot{ border-top:1px solid var(--line); padding:3rem var(--pad); display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.foot__brand{ font-family:var(--display); font-weight:600; font-size:clamp(3rem,12vw,8rem); line-height:.8; letter-spacing:.04em; }
.foot__cols{ display:flex; flex-direction:column; gap:.3rem; text-align:right; color:var(--faint); font-size:.84rem; }

@media (max-width:820px){
  .nav__links{ display:none; }
  .cursor{ display:none; }
  /* horizontal pin is desktop-only — stack the suites vertically on mobile */
  .suites{ overflow:visible; }
  .suites__track{ flex-direction:column; width:auto; height:auto; padding:4rem var(--pad) 1rem; gap:1.4rem; align-items:stretch; }
  .suites__intro{ width:auto; padding-bottom:1rem; }
  .suites__hint{ display:none; }
  .suite{ width:100%; height:auto; min-height:58vh; }
}
@media (prefers-reduced-motion:reduce){ .sun__core{ animation-play-state:running !important; } }