/* ─────────────────────────────────────────────────────────────
   The Residence · Mérida — Private Jet Access
   deep navy + muted gold · Marcellus display / Inter body / Plex Mono data
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Marcellus';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(../assets/fonts/Marcellus-400.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(../assets/fonts/IBMPlexMono-400.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url(../assets/fonts/IBMPlexMono-500.woff2) format('woff2');
}

:root {
  --bg: #070d16;
  --navy: #162638;
  --navy-soft: rgba(22, 38, 56, 0.72);
  --gold: #af915f;
  --gold-hi: #d4b578;
  --cream: #fce1b6;
  --white: #ffffff;
  --ink-dim: rgba(252, 225, 182, 0.58);
  --hair: rgba(175, 145, 95, 0.28);
  --ease: cubic-bezier(0.15, 0, 0.45, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
.estimate-note { font-size: 14px; line-height: 1.5; max-width: 36ch; margin-top: 18px; color: #dfd2bb; }
button:focus-visible, a:focus-visible { outline: 2px solid #fce1b6; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; } }
body {
  background: var(--bg);
  color: var(--white);
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.hidden { display: none !important; }

::selection { background: rgba(175, 145, 95, 0.45); color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a3c52; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── fixed scene layers ─────────────────────────────────── */
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 52%, rgba(4, 8, 14, 0.55) 100%),
    linear-gradient(to bottom, rgba(4, 8, 14, 0.35), transparent 18%, transparent 82%, rgba(4, 8, 14, 0.5));
}
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 60; }

/* ── loader ─────────────────────────────────────────────── */
#loader {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  transition: opacity 0.9s var(--ease), visibility 0.9s;
}
#loader.done { opacity: 0; visibility: hidden; }
.loader-mark {
  font-family: 'Marcellus', serif; font-size: 64px; letter-spacing: 0.28em;
  color: var(--gold-hi); padding-left: 0.28em;
}
.loader-sub {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.42em;
  color: var(--ink-dim); padding-left: 0.42em;
}

/* ── top bar ────────────────────────────────────────────── */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 34px;
  border-bottom: 1px solid var(--hair);
  background: linear-gradient(to bottom, rgba(7, 13, 22, 0.82), rgba(7, 13, 22, 0));
  backdrop-filter: blur(6px);
}
.brand {
  font-family: 'Marcellus', serif; font-size: 17px; letter-spacing: 0.22em; color: var(--white);
}
.brand span { color: var(--gold-hi); }
.topbar-right { font-size: 10px; letter-spacing: 0.18em; color: var(--ink-dim); }
.topbar-right .lt { color: var(--gold-hi); }
.topbar-right .lt-sep { margin: 0 14px; color: var(--hair); }

/* ── MID label that rides the globe ─────────────────────── */
#mid-label {
  position: fixed; top: 0; left: 0; z-index: 10;
  font-size: 10px; letter-spacing: 0.3em; color: var(--gold-hi);
  padding: 6px 10px; border: 1px solid var(--hair);
  background: rgba(7, 13, 22, 0.55); backdrop-filter: blur(4px);
  white-space: nowrap; cursor: pointer; transition: opacity 0.3s;
}

/* ── globe UI / hero ────────────────────────────────────── */
#globe-ui { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#hero { position: relative; height: 100vh; }
/* CSS entrance — deterministic, no JS timing dependencies */
.hero-inner > * { opacity: 0; animation: heroIn 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero-inner > *:nth-child(1) { animation-delay: 1.50s; }
.hero-inner > *:nth-child(2) { animation-delay: 1.59s; }
.hero-inner > *:nth-child(3) { animation-delay: 1.68s; }
.hero-inner > *:nth-child(4) { animation-delay: 1.77s; }
.hero-inner > *:nth-child(5) { animation-delay: 1.86s; }
.hero-inner > *:nth-child(6) { animation-delay: 1.95s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero-inner {
  position: absolute; left: 6vw; top: 50%; transform: translateY(-50%);
  max-width: 560px; pointer-events: none;
}
/* soft scrim so the headline always reads, even over the sunlit limb */
.hero-inner::before {
  content: ''; position: absolute; inset: -90px -18vw -90px -6vw; z-index: -1;
  background: linear-gradient(95deg, rgba(7, 13, 22, 0.78) 0%, rgba(7, 13, 22, 0.45) 50%, rgba(7, 13, 22, 0.12) 78%, transparent 100%);
}
.eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500;
  letter-spacing: 0.38em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 26px;
}
h1, h2 { font-family: 'Marcellus', serif; font-weight: 400; }
#hero h1 {
  font-size: clamp(44px, 5.6vw, 84px); line-height: 1.02; letter-spacing: 0.01em;
  color: var(--white);
}
#hero h1 em { font-style: normal; color: var(--gold-hi); }
.lede {
  margin-top: 26px; font-size: 15.5px; line-height: 1.75; color: rgba(255, 255, 255, 0.72);
  max-width: 44ch;
}
.tagline {
  margin-top: 28px; font-family: 'Marcellus', serif; font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.6; color: var(--gold-hi); letter-spacing: 0.02em;
}
.hero-stats { display: flex; gap: 44px; margin-top: 40px; }
.hero-stats .stat b {
  display: block; font-size: 30px; font-weight: 500; color: var(--gold-hi); letter-spacing: 0.04em;
}
.hero-stats .stat span {
  display: block; margin-top: 6px; font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-dim);
}
.hero-hints { display: flex; flex-direction: column; gap: 8px; margin-top: 44px; }
.hero-hints span { font-size: 10px; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.38); text-transform: uppercase; }
.hero-hints span::before { content: '—'; color: var(--gold); margin-right: 10px; }

/* rotating seal */
#badge { position: absolute; right: 5vw; bottom: 7vh; width: 150px; height: 150px; opacity: 0.9; }
#badge svg { width: 100%; height: 100%; }
.badge-rotor { transform-origin: 80px 80px; animation: rotor 16s linear infinite; }
@keyframes rotor { to { transform: rotate(360deg); } }
.badge-text {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.32em;
  fill: var(--gold);
}
.badge-disc { fill: none; stroke: var(--hair); stroke-width: 1; }
.badge-glyph { fill: var(--gold-hi); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 9px; letter-spacing: 0.4em; color: var(--ink-dim);
}
.scroll-cue i {
  width: 1px; height: 44px; background: linear-gradient(to bottom, var(--gold), transparent);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ── interstitial: the question ─────────────────────────── */
#interstitial {
  margin-left: auto; width: min(730px, 94vw);
  padding: 10vh 4vw 6vh 0; text-align: left;
}
.int-question {
  font-family: 'Marcellus', serif; font-weight: 400;
  font-size: clamp(34px, 4vw, 58px); line-height: 1.14; color: var(--white);
  text-shadow: 0 2px 40px rgba(7, 13, 22, 0.9);
}
.int-question em { font-style: normal; color: var(--gold-hi); }
.int-answer {
  margin-top: 30px; font-size: 10px; letter-spacing: 0.3em; line-height: 2.1;
  color: var(--ink-dim); text-shadow: 0 1px 18px rgba(7, 13, 22, 1);
}

/* ── scrolling page ─────────────────────────────────────── */
#page { position: relative; z-index: 15; pointer-events: none; padding-top: 100vh; }
#page > * { pointer-events: none; }
#directory, #airfield, #footer { pointer-events: auto; }
#directory {
  margin-left: auto; width: min(730px, 94vw);
  padding: 16vh 4vw 12vh 0;
}
.section-head { margin-bottom: 54px; }
.section-head h2 {
  font-size: clamp(30px, 3.2vw, 46px); line-height: 1.12; color: var(--white);
}
.section-head h2 em { font-style: normal; color: var(--gold-hi); }
.section-lede {
  margin-top: 20px; font-size: 13.5px; line-height: 1.8; color: rgba(255, 255, 255, 0.6);
  max-width: 58ch;
}
.section-lede b { color: var(--gold-hi); font-weight: 500; }

#directory .section-head, #directory-list {
  background: var(--navy-soft);
  backdrop-filter: blur(14px);
  border: 1px solid var(--hair);
}
#directory .section-head { padding: 44px 40px; border-bottom: none; margin-bottom: 0; }
#directory-list { border-top: none; }

.dir-region { padding: 34px 40px 40px; border-top: 1px solid var(--hair); }
.dir-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 10px; }
.dir-roman { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--gold); letter-spacing: 0.2em; }
.dir-head h3 {
  font-family: 'Marcellus', serif; font-weight: 400; font-size: 24px;
  letter-spacing: 0.06em; color: var(--white);
}
.dir-count { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.18em; color: var(--ink-dim); text-transform: uppercase; }

.dir-rows { display: flex; flex-direction: column; }
.dir-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 64px 62px 56px 100px;
  align-items: center; gap: 12px;
  padding: 13px 2px;
  background: none; border: none; border-top: 1px solid rgba(175, 145, 95, 0.14);
  cursor: pointer; text-align: left;
  transition: background 0.25s var(--ease), padding 0.25s var(--ease);
  color: inherit; font: inherit;
}
.dir-row:hover { background: rgba(175, 145, 95, 0.12); padding-left: 12px; }
.dr-ap { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--gold); letter-spacing: 0.08em; }
.dr-city { font-family: 'Marcellus', serif; font-size: 17px; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-city em { font-style: normal; font-family: 'Inter', sans-serif; font-size: 11px; color: var(--ink-dim); margin-left: 8px; }
.dr-bar { height: 2px; background: rgba(252, 225, 182, 0.12); position: relative; }
.dr-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(to right, var(--gold), var(--gold-hi)); }
.dr-nm { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--ink-dim); text-align: right; }
.dr-time { font-family: 'IBM Plex Mono', monospace; font-size: 16px; font-weight: 500; color: var(--gold-hi); text-align: right; }
.dr-time b { font-size: 9px; vertical-align: super; color: var(--gold); margin-left: 2px; }
.dr-jet { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.45); text-transform: uppercase; text-align: right; }

/* ── airfield ───────────────────────────────────────────── */
#airfield {
  background: linear-gradient(to bottom, rgba(22, 38, 56, 0.88), rgba(11, 21, 34, 0.94));
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--hair);
  padding: 14vh 8vw;
}
.af-anon { margin-top: 54px; }
.af-anon-line {
  font-family: 'Marcellus', serif; font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.25; color: var(--white);
}
.af-anon-line em { font-style: normal; color: var(--gold-hi); }
.af-anon-sub { margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.04em; }
.af-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin-top: 60px; }
.af-item { border-top: 1px solid var(--gold); padding-top: 22px; }
.af-k { font-size: 10px; letter-spacing: 0.3em; color: var(--gold); }
.af-item b {
  display: block; font-family: 'Marcellus', serif; font-weight: 400;
  font-size: 27px; color: var(--white); margin: 14px 0 12px;
}
.af-item p { font-size: 13px; line-height: 1.75; color: rgba(255, 255, 255, 0.6); }
.af-note { margin-top: 64px; font-size: 10px; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.35); }

/* ── footer ─────────────────────────────────────────────── */
#footer {
  background: #050a12;
  border-top: 1px solid var(--hair);
  padding: 16vh 8vw 10vh;
  text-align: center;
}
#footer h2 { font-size: clamp(34px, 4.4vw, 64px); color: var(--white); }
#footer h2 em { font-style: normal; color: var(--gold-hi); }
.footer-line {
  margin-top: 18px; font-family: 'Marcellus', serif; font-size: 19px;
  color: var(--ink-dim); letter-spacing: 0.08em;
}
.cta {
  display: inline-block; margin-top: 48px; padding: 18px 42px;
  border: 1px solid var(--gold); color: var(--gold-hi);
  font-size: 11px; letter-spacing: 0.3em; text-decoration: none;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.cta:hover { background: var(--gold); color: #0b1522; }
.fine { margin-top: 70px; font-size: 11px; color: rgba(255, 255, 255, 0.3); letter-spacing: 0.06em; }

/* ── tooltip ────────────────────────────────────────────── */
#globe-tooltip {
  position: fixed; z-index: 30; width: 240px; pointer-events: none;
  background: rgba(11, 21, 34, 0.86); backdrop-filter: blur(10px);
  border: 1px solid var(--hair); padding: 14px 18px 16px;
}
.tt-ap { font-size: 9px; letter-spacing: 0.24em; color: var(--gold); margin-bottom: 8px; }
.tt-name { font-family: 'Marcellus', serif; font-size: 19px; color: var(--white); }
.tt-row { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; }
.tt-time { font-family: 'IBM Plex Mono', monospace; font-size: 24px; font-weight: 500; color: var(--gold-hi); }
.tt-dist { font-size: 10px; letter-spacing: 0.14em; color: var(--ink-dim); }
.tt-jet { margin-top: 6px; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }

/* ── city detail card ───────────────────────────────────── */
#city-card {
  position: fixed; top: 50%; right: 4vw; transform: translateY(-50%);
  z-index: 35; width: 350px;
  background: rgba(11, 21, 34, 0.88); backdrop-filter: blur(14px);
  border: 1px solid var(--hair); border-left: 2px solid var(--gold);
  padding: 34px 34px 30px;
}
#cc-close {
  position: absolute; top: 10px; right: 14px; background: none; border: none;
  color: var(--ink-dim); font-size: 22px; cursor: pointer; transition: color 0.2s;
}
#cc-close:hover { color: var(--gold-hi); }
.cc-no { font-size: 9px; letter-spacing: 0.26em; color: var(--gold); }
.cc-name { font-family: 'Marcellus', serif; font-weight: 400; font-size: 34px; color: var(--white); margin-top: 12px; }
.cc-place { font-size: 10px; letter-spacing: 0.16em; color: var(--ink-dim); margin-top: 6px; }
.cc-timeblock { display: flex; align-items: baseline; gap: 14px; margin-top: 26px; }
.cc-time { font-family: 'Marcellus', serif; font-size: 62px; color: var(--gold-hi); line-height: 1; }
.cc-timeunit { font-size: 9px; letter-spacing: 0.3em; color: var(--ink-dim); }
.cc-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.cc-grid k { display: block; font-size: 8.5px; letter-spacing: 0.26em; color: var(--gold); margin-bottom: 3px; }
.cc-grid v { font-size: 12px; color: rgba(255, 255, 255, 0.85); }
.cc-stop { margin-top: 20px; font-size: 11.5px; line-height: 1.6; color: var(--cream); opacity: 0.75; }
.cc-out { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 9px; letter-spacing: 0.22em; color: var(--ink-dim); }

/* ── responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .dir-row { grid-template-columns: 50px minmax(0, 1fr) 62px 54px 96px; }
  .dr-bar { display: none; }
}
@media (max-width: 860px) {
  .hero-inner { left: 0; right: 0; max-width: none; padding: 0 7vw; }
  /* dark scrim behind the hero copy so it reads over the bright globe */
  .hero-inner::before {
    content: ''; position: absolute; inset: -60px 0; z-index: -1;
    background: linear-gradient(100deg, rgba(7, 13, 22, 0.92) 0%, rgba(7, 13, 22, 0.62) 55%, rgba(7, 13, 22, 0.15) 85%, transparent 100%);
  }
  /* tablet & phone: headline + tagline + stats only, no wall of words */
  .lede, .hero-hints { display: none; }
  #mid-label { display: none; }
  .hero-stats { gap: 30px; margin-top: 32px; }
  #badge { display: none; }
  #directory { width: 94vw; margin: 0 auto; padding: 12vh 0 10vh; }
  #directory .section-head, .dir-region { padding-left: 26px; padding-right: 26px; }
  .dr-jet { display: none; }
  .dir-row { grid-template-columns: 46px minmax(0, 1fr) 58px 52px; }
  .af-grid { grid-template-columns: 1fr; gap: 36px; }
  #city-card { right: 3vw; left: 3vw; width: auto; }
  .topbar-right { display: none; }
}