/* ==========================================================================
   Travella — Splash screen
   Brand tokens live in tokens.css (Travella Brand & Visual Reference).
   All sizes are fluid (clamp) so the splash scales from small phones
   to ultra-wide screens without breakpoints doing the heavy lifting.

   Reveal: each letter is drawn as a fine gold outline, then gilded with
   solid gold while the outline fades. Firefly sparks trail the pen tip
   (drawn on a canvas by splash.js).
   ========================================================================== */

:root {
  /* Splash sizing (fluid) */
  --splash-logo-w: clamp(14.5rem, 36vw + 8rem, 47.5rem);
  --splash-gap: clamp(1.1rem, 1.6vw + 0.6rem, 2.4rem);
  --splash-usp-size: clamp(0.6875rem, 0.58rem + 0.48vw, 1.0625rem);
  --splash-usp-track: 0.4em;
  --splash-hairline-w: clamp(0.75rem, 4vw, 3rem);
  --splash-hairline-gap: clamp(0.6rem, 1.2vw, 1.25rem);
  --splash-edge: clamp(1.25rem, 3.5vw, 4rem);
  --splash-loader-size: clamp(0.8125rem, 0.74rem + 0.22vw, 0.9375rem);
  --splash-loader-line: clamp(4.5rem, 8vw, 7.5rem);
}

/* Hidden SVG sprite holding the traced wordmark (single source of truth) */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */

.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  pointer-events: auto;
  /* Failsafe: if the script never runs, the splash still gets out of the way */
  animation: splash-failsafe 0.6s ease 7s forwards;
}

.splash.is-managed { animation: none; }

html.splash-skip .splash { display: none; }

/* Background is its own layer so it can fade independently of the logo */
.splash__bg {
  position: absolute;
  inset: 0;
  background: var(--tv-teal-logo);
}

/* Firefly sparks, drawn by splash.js */
.splash__sparks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Stage: logo + USP, optically centered (slightly above true center)
   -------------------------------------------------------------------------- */

.splash__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--splash-gap);
  width: 100%;
  padding-inline: max(1rem, env(safe-area-inset-left), env(safe-area-inset-right));
  transform: translateY(-3%);
}

.splash__logo {
  display: block;
  width: min(var(--splash-logo-w), 88vw);
  height: auto;
  aspect-ratio: 821 / 147;
  overflow: visible;
  transform-origin: 0 0;          /* needed for the glide into the navbar */
  will-change: transform;
}

/* Letters: outline first, gold fill after. splash.js animates the
   dash offset, fill and outline opacity. */
.splash__letter {
  fill: var(--tv-gold-logo);
  fill-opacity: 0;
  stroke: var(--tv-gold-logo);
  stroke-width: var(--splash-stroke, 60);   /* in the letters' own units; set precisely by JS */
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}

/* Glint: a soft light band clipped to the letter shapes */
.splash__glint { opacity: 0.5; }

.splash__glint-band {
  opacity: 0;
  transform: translateX(-260px) skewX(-18deg);
}

/* --------------------------------------------------------------------------
   USP line — "Curated Experiences"
   -------------------------------------------------------------------------- */

.splash__usp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--splash-hairline-gap);
  margin: 0;
  max-width: 100%;
  color: var(--tv-cream);
  font-family: var(--tv-font-body);
  font-weight: 300;
  font-size: var(--splash-usp-size);
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}

.splash__usp-text {
  letter-spacing: var(--splash-usp-track);
  /* letter-spacing adds space after the last letter; pull it back so the
     text stays visually centered */
  margin-right: calc(var(--splash-usp-track) * -1);
  opacity: 0;
}

.splash__hairline {
  flex: 0 1 auto;
  width: var(--splash-hairline-w);
  min-width: 0.5rem;
  height: 1px;
  background: var(--tv-gold-logo);
  opacity: 0.6;
  transform: scaleX(0);
}

/* Lines draw outward from the text */
.splash__hairline--left { transform-origin: right center; }
.splash__hairline--right { transform-origin: left center; }

/* --------------------------------------------------------------------------
   Loader — burning fuse, bottom right
   -------------------------------------------------------------------------- */

.splash__loader {
  --fuse-len: clamp(6rem, 11vw, 10rem);   /* length of the fuse cord */
  --fuse-pad: 28px;                        /* room around the fuse for sparks */
  position: absolute;
  right: max(var(--splash-edge), env(safe-area-inset-right));
  bottom: max(var(--splash-edge), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--tv-gold-logo);
  font-family: var(--tv-font-body);
  font-size: var(--splash-loader-size);
  font-weight: 400;
  opacity: 0;
}

/* The canvas is bigger than the fuse so sparks have room to fly;
   negative margins keep the fuse itself aligned with the number */
.splash__fuse {
  display: block;
  width: calc(var(--fuse-len) + var(--fuse-pad) * 2);
  height: calc(var(--fuse-pad) * 2.6);
  margin: 0 calc(var(--fuse-pad) * -1) -16px 0;
  pointer-events: none;
}

.splash__loader-value {
  position: relative;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  opacity: 0.72;
  min-width: 4.5ch;
  text-align: right;
}

.splash__loader-unit { opacity: 0.6; margin-left: 0.1em; }

/* --------------------------------------------------------------------------
   Timeline (runs when JS adds .is-playing).
   The letter drawing itself is timed in splash.js (CONFIG.draw).
   -------------------------------------------------------------------------- */

.splash.is-playing .splash__loader {
  animation: tv-fade-in 0.6s var(--tv-ease-reveal) 0.2s forwards;
}

.splash.is-playing .splash__glint-band {
  animation: tv-glint 0.9s ease-in-out 1.75s forwards;
}

.splash.is-playing .splash__usp-text {
  animation: tv-usp-in 0.95s var(--tv-ease-reveal) 1.45s forwards;
}

.splash.is-playing .splash__hairline {
  animation: tv-hairline-in 0.85s var(--tv-ease-reveal) 1.6s forwards;
}

/* Exit: USP, sparks and loader step back first */
.splash.is-leaving .splash__usp,
.splash.is-leaving .splash__loader,
.splash.is-leaving .splash__sparks {
  transition: opacity 0.35s ease;
  opacity: 0 !important;
}

.splash.is-leaving .splash__bg {
  transition: opacity 0.7s ease 0.25s;
  opacity: 0;
}

.splash.is-leaving { pointer-events: none; }

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

@keyframes tv-fade-in { to { opacity: 1; } }

@keyframes tv-glint {
  0%   { opacity: 0;   transform: translateX(-260px) skewX(-18deg); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0;   transform: translateX(1100px) skewX(-18deg); }
}

@keyframes tv-usp-in {
  from { opacity: 0; letter-spacing: 0.6em; margin-right: -0.6em; filter: blur(4px); }
  to   { opacity: 1; letter-spacing: var(--splash-usp-track); margin-right: calc(var(--splash-usp-track) * -1); filter: blur(0); }
}

@keyframes tv-hairline-in { to { transform: scaleX(1); } }

@keyframes splash-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* --------------------------------------------------------------------------
   Small / short screens
   -------------------------------------------------------------------------- */

/* Very narrow phones: tighten tracking a touch so the USP never crowds */
@media (max-width: 340px) {
  :root { --splash-usp-track: 0.32em; }
}

/* Landscape phones and short windows: keep everything comfortably in view */
@media (max-height: 460px) {
  :root {
    --splash-logo-w: clamp(12rem, 28vw + 6rem, 30rem);
    --splash-gap: clamp(0.75rem, 3vh, 1.5rem);
  }
  .splash__stage { transform: none; }
}

/* --------------------------------------------------------------------------
   Reduced motion: no drawing, no sparks, just a calm fade
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .splash .splash__letter { fill-opacity: 1; stroke-opacity: 0; }
  .splash .splash__usp-text,
  .splash .splash__loader {
    opacity: 1;
    animation: none !important;
  }
  .splash .splash__hairline { transform: scaleX(1); animation: none !important; }
  .splash .splash__glint-band { animation: none !important; }
  .splash__sparks { display: none; }
  .splash.is-leaving,
  .splash.is-leaving .splash__bg { transition: opacity 0.3s ease; }
  .splash.is-leaving { opacity: 0; }
}

/* Current Travella integration: lock the page while the splash owns the viewport,
   and hide the real navbar logo until the animated wordmark reaches it. */
html.is-splash-locked,
html.is-splash-locked body {
  overflow: hidden;
  overscroll-behavior: none;
}

html.splash-running [data-splash-target] {
  opacity: 0;
}