/* ============================================================
   HOTEL 918 · V4 · main.css
   Quinte Luxury Hotels · QED Groups Inc.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garant:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Space+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap');

:root {
  /* Brand */
  --crimson:       #9f1c3b;
  --crimson-deep:  #7a1530;
  --crimson-light: #c4304f;
  --crimson-pale:  #e8b4bf;
  --gold:          #c9a84c;
  --gold-light:    #e0c27a;
  --gold-pale:     #f0ddb0;
  --black:         #04030a;
  --dark:          #080610;
  --dark-mid:      #0e0b18;
  --dark-card:     #130f1f;
  --dark-border:   #1e1830;
  --grey:          #4a3f60;
  --grey-mid:      #7a6e90;
  --grey-light:    #a89fba;
  --cream:         #f0ebe0;
  --cream-deep:    #e0d8c8;
  --white:         #faf8f4;

  /* Semantic */
  --bg:            var(--dark);
  --bg-section:    var(--dark-mid);
  --bg-card:       var(--dark-card);
  --text:          var(--cream);
  --text-muted:    var(--grey-light);
  --accent:        var(--crimson);
  --accent-gold:   var(--gold);
  --border:        var(--dark-border);
  --border-crimson: rgba(159,28,59,0.25);
  --border-gold:   rgba(201,168,76,0.2);

  /* Announcement bar height — used to offset nav */
  --bar-height:    42px;

  /* Typography */
  --font-display: 'Cormorant Garant', serif;
  --font-body:    'Outfit', sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* Layout */
  --section-pad:  clamp(80px, 10vw, 140px);
  --content-max:  1280px;
  --gutter:       clamp(20px, 5vw, 64px);

  /* Motion */
  --ease:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur:          0.35s;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  cursor: none;
}
body.loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button { font-family: var(--font-body); cursor: none; border: none; background: none; }
input, textarea, select { font-family: var(--font-body); }

.container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Typography ──────────────────────────────────────────── */
.display-1 {
  font-family: var(--font-display);
  font-size: clamp(72px, 13vw, 200px);
  font-weight: 300;
  line-height: 0.88;
  letter-spacing: 0.08em;
}
.display-2 {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 110px);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: 0.04em;
}
.display-3 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 72px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.section-label::before {
  content: ''; display: block; width: 24px; height: 1px;
  background: var(--gold); flex-shrink: 0;
}
.section-label-crimson { color: var(--crimson-light) !important; }
.section-label-crimson::before { background: var(--crimson-light) !important; }

/* ── Loader ──────────────────────────────────────────────── */
#loader {
  position: fixed; inset: 0; background: var(--black); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 32px;
  transition: opacity 0.7s var(--ease), visibility 0.7s;
}
#loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-logo { height: 36px; width: auto; animation: loaderPulse 1.6s ease-in-out infinite; }
.loader-bar { width: 120px; height: 1px; background: rgba(201,168,76,0.2); overflow: hidden; }
.loader-fill { height: 100%; background: linear-gradient(90deg, var(--crimson), var(--gold)); animation: loaderFill 2s var(--ease) forwards; }
@keyframes loaderPulse { 0%,100%{opacity:.4} 50%{opacity:1} }
@keyframes loaderFill  { from{width:0} to{width:100%} }

/* ── Reveal ──────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay:.12s }
.reveal-delay-2 { transition-delay:.24s }
.reveal-delay-3 { transition-delay:.36s }
.reveal-delay-4 { transition-delay:.48s }
.reveal-delay-5 { transition-delay:.60s }

.stagger-grid > * { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.stagger-grid.revealed > *:nth-child(1) { transition-delay:0s }
.stagger-grid.revealed > *:nth-child(2) { transition-delay:.1s }
.stagger-grid.revealed > *:nth-child(3) { transition-delay:.2s }
.stagger-grid.revealed > *:nth-child(4) { transition-delay:.3s }
.stagger-grid.revealed > *:nth-child(5) { transition-delay:.4s }
.stagger-grid.revealed > *:nth-child(6) { transition-delay:.5s }
.stagger-grid.revealed > * { opacity: 1; transform: translateY(0); }

/* ── Utilities ───────────────────────────────────────────── */
.text-crimson { color: var(--crimson-light); }
.text-gold    { color: var(--gold); }
.text-muted   { color: var(--grey-light); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0 }

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }