/* Anavai Resort — scroll flythrough. Engine: canvas + GSAP ScrollTrigger. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-600italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/archivo-700.woff2') format('woff2');
}

:root{
  --ink:#0d1613;
  --panel:#1a2b26;
  --sand:#e9e2d0;
  --emerald:#3c8267;
  --brass:#c69a5c;
  --dusk:#7e948d;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--ink);
  color:var(--sand);
  font-family:var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ -webkit-user-drag:none; user-select:none; }
a{ color:inherit; text-decoration:none; }
.accent{ font-style:italic; color:var(--brass); }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px clamp(20px,4vw,56px);
  pointer-events:none;
  background:transparent; backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease, padding .35s ease;
}
.nav.is-solid{
  background:rgba(13,22,19,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(233,226,208,.1);
  padding-top:18px; padding-bottom:18px;
}
.nav__logo{
  font-family:var(--serif); font-weight:600; font-size:1.05rem;
  letter-spacing:.14em; pointer-events:auto;
}
.nav__links{ display:flex; align-items:center; gap:28px; pointer-events:auto; }
.nav__links a{
  font-family:var(--sans); font-weight:400; font-size:.82rem;
  letter-spacing:.06em; color:var(--sand); opacity:.82;
  transition:opacity .25s ease;
}
.nav__links a:hover{ opacity:1; }
.nav__cta{
  font-family:var(--sans); font-weight:700; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:var(--sand);
  padding:10px 20px; border:1px solid var(--sand);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.nav__cta:hover{ background:transparent; color:var(--sand); border-color:var(--sand); }

/* ---------- Preloader ---------- */
#preloader{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; transition:opacity .8s ease;
}
#preloader .mark{
  font-family:var(--serif); font-weight:600; font-size:1.4rem; letter-spacing:.16em;
  color:var(--sand);
}
#preloader .bar{
  width:min(280px,60vw); height:1px; background:rgba(233,226,208,.18); position:relative;
}
#preloader .bar i{
  position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--emerald);
  transition:width .15s ease;
}
#preloader .pct{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.14em; color:var(--dusk);
}
#preloader.is-hidden{ opacity:0; pointer-events:none; }

/* ---------- Stage / canvas ---------- */
#stage{ position:relative; width:100%; height:2000vh; }
#viewport{
  position:relative; width:100%; height:100vh; overflow:hidden; background:var(--ink);
}
#seq-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.vignette{
  position:absolute; inset:0; pointer-events:none; z-index:5;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.42) 100%);
}
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:90; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

#dim{
  position:absolute; inset:0; z-index:6; opacity:0; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(13,22,19,.92) 0%, rgba(13,22,19,.6) 30%, rgba(13,22,19,.2) 52%, rgba(13,22,19,0) 70%),
    linear-gradient(100deg, rgba(13,22,19,.5) 0%, rgba(13,22,19,0) 42%);
}

/* ---------- Hero ---------- */
.hero{
  position:absolute; inset:0; z-index:20;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  padding:0 clamp(20px,6vw,80px) 9vh;
  background:
    linear-gradient(0deg, rgba(13,22,19,.9) 0%, rgba(13,22,19,.62) 28%, rgba(13,22,19,.22) 52%, rgba(13,22,19,0) 72%),
    linear-gradient(100deg, rgba(13,22,19,.48) 0%, rgba(13,22,19,0) 42%);
}
.hero__label{
  font-family:var(--sans); font-weight:700; font-size:.74rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brass); margin-bottom:18px;
  text-shadow:0 2px 18px rgba(13,22,19,.7);
}
.hero__title{
  font-family:var(--serif); font-weight:600; font-size:clamp(2.6rem,7.2vw,6rem);
  line-height:1.02; margin:0; color:var(--sand); max-width:16ch;
  text-shadow:0 4px 30px rgba(13,22,19,.65), 0 1px 3px rgba(13,22,19,.7);
}
.hero__sub{
  font-family:var(--sans); font-weight:400; font-size:clamp(.95rem,1.3vw,1.1rem);
  color:var(--sand); opacity:.85; margin:22px 0 0; max-width:34ch; line-height:1.6;
  text-shadow:0 2px 16px rgba(13,22,19,.7);
}
.hero__scroll{
  margin-top:46px; display:flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sand); opacity:.7;
  text-shadow:0 2px 14px rgba(13,22,19,.7);
}
.hero__scroll .line{ width:28px; height:1px; background:var(--sand); opacity:.6; }

/* ---------- Captions (plateaus) ---------- */
.caption{
  position:absolute; z-index:7; left:clamp(20px,6vw,80px); bottom:12vh;
  max-width:min(560px,86vw); opacity:0; pointer-events:none;
}
.caption__label{
  display:flex; align-items:center; gap:14px; margin-bottom:16px;
  font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brass);
  text-shadow:0 2px 18px rgba(13,22,19,.7);
}
.caption__label .rule{ width:34px; height:1px; background:var(--emerald); display:block; }
.caption__title{
  font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem,4.4vw,3.4rem);
  line-height:1.08; margin:0 0 16px; color:var(--sand);
  text-shadow:0 4px 30px rgba(13,22,19,.65), 0 1px 3px rgba(13,22,19,.7);
}
.caption__sub{
  font-family:var(--sans); font-weight:400; font-size:clamp(.92rem,1.2vw,1.05rem);
  color:var(--sand); opacity:.82; line-height:1.65; max-width:46ch; margin:0;
  text-shadow:0 2px 16px rgba(13,22,19,.7);
}

/* ---------- Post-stage sections ---------- */
.section{
  position:relative; z-index:10; background:var(--ink);
  padding:min(14vh,140px) clamp(20px,6vw,80px);
}
.section--panel{ background:var(--panel); }

.reserve{ text-align:center; }
.reserve__label{
  font-family:var(--sans); font-weight:700; font-size:.74rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brass); display:block; margin-bottom:18px;
}
.reserve__title{
  font-family:var(--serif); font-weight:600; font-size:clamp(2rem,4.6vw,3.6rem);
  margin:0 auto 18px; max-width:16ch;
}
.reserve__sub{
  font-family:var(--sans); color:var(--dusk); max-width:52ch; margin:0 auto 56px;
  line-height:1.7; font-size:1rem;
}

.booking{
  max-width:1040px; margin:0 auto; border:1px solid rgba(233,226,208,.16);
  display:grid; grid-template-columns:repeat(4,1fr); text-align:left;
}
.booking__field{
  padding:26px clamp(16px,2.4vw,32px); border-right:1px solid rgba(233,226,208,.16);
}
.booking__field:last-child{ border-right:none; padding:0; }
.booking__field label{
  display:block; font-family:var(--sans); font-weight:700; font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dusk); margin-bottom:10px;
}
.booking__value{
  font-family:var(--serif); font-size:1.15rem; color:var(--sand);
}
.booking__value small{ font-family:var(--sans); color:var(--dusk); font-size:.8rem; display:block; margin-top:2px; }
.booking__submit{
  height:100%; width:100%; background:var(--emerald); color:var(--sand);
  border:none; font-family:var(--sans); font-weight:700; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  transition:background .25s ease;
}
.booking__submit:hover{ background:#4a9a7b; }
.booking__note{
  margin:22px auto 0; max-width:52ch; font-size:.78rem; color:var(--dusk);
  opacity:.75;
}

.trio{
  max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,40px); margin-top:70px; text-align:left;
}
.trio__item .num{
  font-family:var(--serif); font-style:italic; color:var(--emerald); font-size:1rem; margin-bottom:14px; display:block;
}
.trio__item h3{
  font-family:var(--serif); font-weight:600; font-size:1.3rem; margin:0 0 10px;
}
.trio__item p{
  font-family:var(--sans); color:var(--dusk); font-size:.92rem; line-height:1.65; margin:0;
}

.footer{
  display:flex; flex-wrap:wrap; gap:40px; align-items:flex-start; justify-content:space-between;
  border-top:1px solid rgba(233,226,208,.14);
}
.footer__brand{ font-family:var(--serif); font-weight:600; font-size:1.5rem; }
.footer__tag{ color:var(--dusk); font-size:.85rem; margin-top:10px; max-width:28ch; line-height:1.6; }
.footer__col h4{
  font-family:var(--sans); font-weight:700; font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass); margin:0 0 14px;
}
.footer__col a, .footer__col span{
  display:block; color:var(--dusk); font-size:.88rem; margin-bottom:9px;
}
.footer__bottom{
  max-width:1200px; margin:70px auto 0; padding-top:22px; border-top:1px solid rgba(233,226,208,.1);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:.74rem; color:var(--dusk); opacity:.7;
}

@media (max-width:820px){
  .nav__links{ display:none; }
  .booking{ grid-template-columns:1fr; }
  .booking__field{ border-right:none; border-bottom:1px solid rgba(233,226,208,.16); }
  .trio{ grid-template-columns:1fr; }
  .footer{ flex-direction:column; }
}