/* ============================================================
   Site Preloader — "Swiss Wave": a short reveal of the emblem on
   the first page of a visit, then a coordinated hero handoff.
   Pure CSS keyframes (no animation library to download); loader.js
   only injects the markup and decides when to leave.
   Colours follow the site theme tokens (style.css / Website Theme),
   with the original palette as fallback.
   Namespaced with an `ld-` prefix so nothing here collides with
   the site's own styles.
   ============================================================ */
:root{
  --ld-navy:var(--navy-800, #213248);
  --ld-ocean:var(--navy-600, #3A5274);
  --ld-aqua:var(--gold-500, #7189B4);
  --ld-gold:var(--gold-600, #56709E);
  --ld-foam:var(--gold-100, #E3E9F3);
  --ld-ivory:var(--off-white, #F6F8FB);
  --ld-ink:var(--ink, #0E1A2B);
  --ld-ease:cubic-bezier(.22,.61,.36,1);
  --ld-serif:'Inter', system-ui, sans-serif;
  --ld-sans:'Inter', 'Manrope', system-ui, sans-serif;
}

html.ld-lock, html.ld-lock body{ overflow:hidden; height:100%; }

/* This wrapper must never become a layout participant of its parent
   (e.g. a CSS grid/flex `<body>`) — it only hosts the fixed-position
   preloader injected into it by loader.js. */
#site-loader-root{ display:contents; }

/* ===================== Preloader shell ===================== */
.ld-preloader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  overflow:hidden;
  background:var(--ld-ivory);
  font-family:var(--ld-sans);
  color:var(--ld-ink);
}
.ld-preloader.ld-hidden{ display:none; }
.ld-preloader.ld-dissolve{
  transition:opacity .4s var(--ld-ease), transform .4s var(--ld-ease);
  opacity:0; transform:scale(1.02);
  pointer-events:none;
}

/* Ambient horizon, independent of the emblem stage */
.ld-horizon{
  position:absolute; left:0; right:0; top:57%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--navy-800-rgb, 33,50,72),.14) 25%, rgba(var(--navy-800-rgb, 33,50,72),.22) 50%, rgba(var(--navy-800-rgb, 33,50,72),.14) 75%, transparent);
  opacity:0;
  animation:ld-fade .3s var(--ld-ease) .05s forwards;
}

.ld-stage{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  transform:translateY(-4%);
}

/* The emblem + wave live in one square box so both share a
   coordinate frame and can never drift apart. */
.ld-emblem-box{
  position:relative;
  width:clamp(130px, 14vw, 166px);
  aspect-ratio:1/1;
}
@media (max-width: 640px){
  .ld-emblem-box{ width:clamp(105px, 26vw, 130px); }
}
.ld-emblem-box svg{ position:absolute; inset:0; width:100%; height:100%; overflow:hidden }
.ld-emblem-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transform:translateY(12px) scale(.82);
  animation:ld-emblem-in .5s cubic-bezier(.16,1,.3,1) .4s forwards;
}

/* ===================== Wave (SVG) ===================== */
.ld-wave-a-0{ stop-color:var(--ld-navy); stop-opacity:0 }
.ld-wave-a-1{ stop-color:var(--ld-navy) }
.ld-wave-a-2{ stop-color:var(--ld-ocean) }
.ld-wave-a-3{ stop-color:var(--ld-aqua) }
.ld-wave-a-4{ stop-color:var(--ld-aqua); stop-opacity:0 }
.ld-wave-b-0{ stop-color:var(--ld-ocean); stop-opacity:0 }
.ld-wave-b-1{ stop-color:var(--ld-ocean) }
.ld-wave-b-2{ stop-color:var(--ld-foam) }
.ld-wave-b-3{ stop-color:var(--ld-foam); stop-opacity:0 }

#ld-wave-a, #ld-wave-b, #ld-wave-c{ transform:translateX(-240px); }
#ld-wave-a{ animation:ld-wave-in .55s var(--ld-ease) .12s forwards, ld-fade-out .25s ease .72s forwards; }
#ld-wave-b{ animation:ld-wave-in .58s var(--ld-ease) .15s forwards, ld-fade-out .25s ease .72s forwards; }
#ld-wave-c{ stroke:var(--ld-ivory); animation:ld-wave-c .58s var(--ld-ease) .18s forwards, ld-fade-out .25s ease .72s forwards; }
#ld-ripple{
  fill:var(--ld-ocean);
  transform-origin:300px 458px;
  animation:ld-ripple .5s ease-out .18s forwards;
}

/* ===================== Wordmark ===================== */
.ld-wordmark{
  margin-top:22px;
  text-align:center;
}
.ld-word-1, .ld-word-2, .ld-word-loc{ opacity:0; transform:translateY(8px); }
.ld-word-1{
  font-family:var(--ld-serif);
  font-weight:700;
  font-size:clamp(19px, 2.4vw, 25px);
  letter-spacing:.14em;
  color:var(--ld-gold);
  animation:ld-rise .35s var(--ld-ease) .6s forwards;
}
.ld-word-2{
  font-family:var(--ld-serif);
  font-weight:700;
  font-size:clamp(12px, 1.3vw, 14px);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ld-ocean);
  margin-top:4px;
  animation:ld-rise .35s var(--ld-ease) .66s forwards;
}
.ld-word-loc{
  font-family:var(--ld-sans);
  font-weight:600;
  font-size:9.5px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ld-gold);
  margin-top:12px;
  animation:ld-rise-soft .3s var(--ld-ease) .72s forwards;
}

/* Thin progress line under the wordmark: only shown if the hero image
   is still downloading once the reveal has finished (slow networks),
   so a slow connection reads as "loading", not "stuck". */
.ld-progress{
  width:72px; height:2px; margin:18px auto 0;
  border-radius:2px; overflow:hidden;
  background:rgba(var(--navy-800-rgb, 33,50,72),.1);
  opacity:0; transition:opacity .3s ease;
}
.ld-progress::after{
  content:""; display:block; height:100%; width:40%;
  border-radius:inherit; background:var(--ld-gold);
  animation:ld-progress 1s ease-in-out infinite;
}
.ld-preloader.ld-waiting .ld-progress{ opacity:1; }

@keyframes ld-fade{ to{ opacity:1 } }
@keyframes ld-fade-out{ to{ opacity:0 } }
@keyframes ld-wave-in{ to{ transform:translateX(0) } }
@keyframes ld-wave-c{ from{ opacity:0 } to{ transform:translateX(0); opacity:.9 } }
@keyframes ld-ripple{
  0%{ opacity:0; transform:scale(.5) }
  45%{ opacity:1; transform:scale(1) }
  100%{ opacity:0; transform:scale(1.3) }
}
@keyframes ld-emblem-in{ to{ opacity:1; transform:none } }
@keyframes ld-rise{ to{ opacity:1; transform:none } }
@keyframes ld-rise-soft{ to{ opacity:.9; transform:none } }
@keyframes ld-progress{
  0%{ transform:translateX(-100%) }
  100%{ transform:translateX(250%) }
}

/* ===================== Dev replay control ===================== */
.ld-replay{
  position:fixed; left:16px; bottom:16px; z-index:10001;
  font-family:var(--ld-sans);
  font-size:11px; letter-spacing:.08em;
  color:var(--ld-navy);
  background:rgba(255,255,255,.9);
  border:1px solid rgba(var(--navy-800-rgb, 33,50,72),.18);
  padding:7px 12px;
  border-radius:999px;
  cursor:pointer;
  opacity:.7;
  transition:opacity .2s ease;
}
.ld-replay:hover{ opacity:1; }
@media (max-width: 780px){
  .ld-replay{ display:none; }
}

/* Reduced motion: static emblem + wordmark, no wave, gentle fade out. */
@media (prefers-reduced-motion: reduce){
  .ld-preloader *, .ld-preloader *::after{ animation:none !important; transition:none !important }
  .ld-emblem-img, .ld-word-1, .ld-word-2, .ld-word-loc, .ld-horizon{ opacity:1 !important; transform:none !important }
  #ld-wave-a, #ld-wave-b, #ld-wave-c, #ld-ripple{ opacity:0 !important }
  .ld-preloader.ld-dissolve{ transition:opacity .3s ease !important; transform:none }
}

/* ============================================================
   Hero handoff — baseline hidden states for JS-driven entrance.
   Kept here (not style.css) so the whole cinematic system lives
   in one file; loader.js adds the reveal classes.
   ============================================================ */
/* Scoped under html.ld-anim-init (set by loader.js the instant it
   runs) so content degrades gracefully to fully visible if JS is
   disabled or fails before it can add this class. */
html.ld-anim-init .hero .hero-eyebrow,
html.ld-anim-init .hero h1 .ld-line,
html.ld-anim-init .hero .hero-tagline,
html.ld-anim-init .hero .hero-sub,
html.ld-anim-init .hero .hero-actions,
html.ld-anim-init .hero .scroll-indicator{
  opacity:0;
}
html.ld-anim-init .hero h1 .ld-line{ display:block; transform:translateY(16px); }
html.ld-anim-init .hero .hero-bg{ transform:scale(1.035); }

html.ld-anim-init .page-hero .breadcrumbs,
html.ld-anim-init .page-hero h1,
html.ld-anim-init .page-hero .page-hero-sub{
  opacity:0;
  transform:translateY(14px);
}
html.ld-anim-init .page-hero .hero-bg{ transform:scale(1.03); }

html.ld-anim-init .hero .hero-eyebrow,
html.ld-anim-init .hero h1 .ld-line,
html.ld-anim-init .hero .hero-tagline,
html.ld-anim-init .hero .hero-sub,
html.ld-anim-init .hero .hero-actions,
html.ld-anim-init .booking-bar-wrap .booking-bar{
  transform:translateY(16px);
}
html.ld-anim-init .booking-bar-wrap .booking-bar{ opacity:0; }
/* ---- Full cinematic handoff (first page of the visit, after the loader) ---- */
html.ld-mode-full.ld-anim-init .hero .hero-bg,
html.ld-mode-full.ld-anim-init .page-hero .hero-bg{ transition:transform .9s cubic-bezier(.22,.61,.36,1); }
html.ld-mode-full.ld-anim-init .hero .hero-eyebrow,
html.ld-mode-full.ld-anim-init .hero h1 .ld-line,
html.ld-mode-full.ld-anim-init .hero .hero-tagline,
html.ld-mode-full.ld-anim-init .hero .hero-sub,
html.ld-mode-full.ld-anim-init .hero .hero-actions,
html.ld-mode-full.ld-anim-init .hero .scroll-indicator,
html.ld-mode-full.ld-anim-init .page-hero .breadcrumbs,
html.ld-mode-full.ld-anim-init .page-hero h1,
html.ld-mode-full.ld-anim-init .page-hero .page-hero-sub,
html.ld-mode-full.ld-anim-init .booking-bar-wrap .booking-bar{
  transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1);
}
html.ld-mode-full.ld-reveal .hero .hero-bg,
html.ld-mode-full.ld-reveal .page-hero .hero-bg{
  transform:scale(1);
  animation:kenburns 24s var(--ease-out, cubic-bezier(.22,.61,.36,1)) .9s infinite alternate;
}
html.ld-mode-full.ld-reveal .hero .hero-eyebrow{ opacity:1; transform:none; transition-delay:.04s; }
html.ld-mode-full.ld-reveal .hero h1 .ld-line{ opacity:1; transform:none; }
html.ld-mode-full.ld-reveal .hero h1 .ld-line:nth-of-type(1){ transition-delay:.11s; }
html.ld-mode-full.ld-reveal .hero h1 .ld-line:nth-of-type(2){ transition-delay:.19s; }
html.ld-mode-full.ld-reveal .hero .hero-tagline{ opacity:1; transform:none; transition-delay:.29s; }
html.ld-mode-full.ld-reveal .hero .hero-sub{ opacity:1; transform:none; transition-delay:.35s; }
html.ld-mode-full.ld-reveal .hero .hero-actions{ opacity:1; transform:none; transition-delay:.44s; }
html.ld-mode-full.ld-reveal .booking-bar-wrap .booking-bar{ opacity:1; transform:none; transition-delay:.53s; }
html.ld-mode-full.ld-reveal .hero .scroll-indicator{ opacity:1; transition-delay:.76s; }
html.ld-mode-full.ld-reveal .page-hero .breadcrumbs{ opacity:1; transform:none; transition-delay:.04s; }
html.ld-mode-full.ld-reveal .page-hero h1{ opacity:1; transform:none; transition-delay:.14s; }
html.ld-mode-full.ld-reveal .page-hero .page-hero-sub{ opacity:1; transform:none; transition-delay:.25s; }

/* ---- Fast handoff (already seen the loader this session) ---- */
html.ld-mode-fast.ld-anim-init .hero .hero-bg,
html.ld-mode-fast.ld-anim-init .page-hero .hero-bg{ transition:transform .5s cubic-bezier(.22,.61,.36,1); }
html.ld-mode-fast.ld-anim-init .hero .hero-eyebrow,
html.ld-mode-fast.ld-anim-init .hero h1 .ld-line,
html.ld-mode-fast.ld-anim-init .hero .hero-tagline,
html.ld-mode-fast.ld-anim-init .hero .hero-sub,
html.ld-mode-fast.ld-anim-init .hero .hero-actions,
html.ld-mode-fast.ld-anim-init .hero .scroll-indicator,
html.ld-mode-fast.ld-anim-init .page-hero .breadcrumbs,
html.ld-mode-fast.ld-anim-init .page-hero h1,
html.ld-mode-fast.ld-anim-init .page-hero .page-hero-sub,
html.ld-mode-fast.ld-anim-init .booking-bar-wrap .booking-bar{
  transition:opacity .4s cubic-bezier(.22,.61,.36,1), transform .4s cubic-bezier(.22,.61,.36,1);
}
html.ld-mode-fast.ld-reveal .hero .hero-bg,
html.ld-mode-fast.ld-reveal .page-hero .hero-bg{
  transform:scale(1);
  animation:kenburns 24s var(--ease-out, cubic-bezier(.22,.61,.36,1)) .5s infinite alternate;
}
html.ld-mode-fast.ld-reveal .hero .hero-eyebrow{ opacity:1; transform:none; }
html.ld-mode-fast.ld-reveal .hero h1 .ld-line{ opacity:1; transform:none; }
html.ld-mode-fast.ld-reveal .hero h1 .ld-line:nth-of-type(2){ transition-delay:.06s; }
html.ld-mode-fast.ld-reveal .hero .hero-tagline{ opacity:1; transform:none; transition-delay:.08s; }
html.ld-mode-fast.ld-reveal .hero .hero-sub{ opacity:1; transform:none; transition-delay:.1s; }
html.ld-mode-fast.ld-reveal .hero .hero-actions{ opacity:1; transform:none; transition-delay:.14s; }
html.ld-mode-fast.ld-reveal .booking-bar-wrap .booking-bar{ opacity:1; transform:none; transition-delay:.18s; }
html.ld-mode-fast.ld-reveal .hero .scroll-indicator{ opacity:1; transition-delay:.3s; }
html.ld-mode-fast.ld-reveal .page-hero .breadcrumbs,
html.ld-mode-fast.ld-reveal .page-hero h1,
html.ld-mode-fast.ld-reveal .page-hero .page-hero-sub{ opacity:1; transform:none; }

/* ---- Reduced motion: always fully visible, no movement ---- */
@media (prefers-reduced-motion: reduce){
  html.ld-anim-init .hero .hero-eyebrow,
  html.ld-anim-init .hero h1 .ld-line,
  html.ld-anim-init .hero .hero-tagline,
  html.ld-anim-init .hero .hero-sub,
  html.ld-anim-init .hero .hero-actions,
  html.ld-anim-init .hero .scroll-indicator,
  html.ld-anim-init .page-hero .breadcrumbs,
  html.ld-anim-init .page-hero h1,
  html.ld-anim-init .page-hero .page-hero-sub,
  html.ld-anim-init .booking-bar-wrap .booking-bar{
    opacity:1 !important; transform:none !important;
  }
  html.ld-anim-init .hero .hero-bg, html.ld-anim-init .page-hero .hero-bg{ transform:none !important; animation:none !important; }
}