/* preloader.css — full-screen word-rotator preloader
 * Experimental — see ai/PLAN_PRELOADER.md / USE_PRELOADER flag in cinematic-hero.js
 * Clean revert: delete this file + remove the enqueue from functions.php
 */

/* ── Overlay ──────────────────────────────────────────────────────────────────── */

.feat-preloader {
  position: fixed;
  inset: 0;
  z-index: 100003; /* above mark (100001) and glass-nav */
  background: var(--ch-bg, #071421);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  pointer-events: none; /* allow any concurrent interactions through */
}

/* ── Inner row: "loading" label + word rotator ────────────────────────────────── */

.feat-preloader__loader {
  display: flex;
  align-items: center;
  gap: 0.55em;
  line-height: 1;
}

/* ── Static label ─────────────────────────────────────────────────────────────── */

.feat-preloader__label {
  font-family: var(--ch-sans, 'Helvetica Neue', Arial, sans-serif);
  font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(231, 230, 221, 0.35);
  white-space: nowrap;
  user-select: none;
}

/* ── Word rotator container ───────────────────────────────────────────────────── */
/* height: 1.5em gives Playfair Display room for ascenders (l, h) and descenders (g, y).
 * overflow:hidden clips everything outside — the 2% overshoot in the keyframes
 * amounts to 0.03em ≈ sub-pixel at our font size, so no ::after mask is needed. */

.feat-preloader__words {
  overflow: hidden;
  position: relative;
  height: 1.5em;
  line-height: 1.5;
}

/* ── Word spans ───────────────────────────────────────────────────────────────── */

.feat-preloader__word {
  display: block;
  height: 1.5em;
  line-height: 1.5;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  font-weight: 500;
  color: #FDD56E;
  white-space: nowrap;
  user-select: none;
  /* 4s = one full cycle through all 5 words, matching PRELOADER_HOLD_MS */
  animation: feat-preloader-spin 4s infinite;
}

/* 5-word rotation: films → frames → lenses → light → stories → (loop)
 * Adapted from Uiverse.io by kennyotsu. Overshoot pairs (−102/−202…)
 * create a spring effect on each word entry. Loop snap back is instant
 * and invisible under overflow:hidden. */
@keyframes feat-preloader-spin {
  10%  { transform: translateY(-102%); }
  25%  { transform: translateY(-100%); }
  35%  { transform: translateY(-202%); }
  50%  { transform: translateY(-200%); }
  60%  { transform: translateY(-302%); }
  75%  { transform: translateY(-300%); }
  85%  { transform: translateY(-402%); }
  100% { transform: translateY(-400%); }
}

/* ── Reduced motion ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .feat-preloader__word {
    animation: none;
  }
}

/* ── Mobile — scale down slightly on very small screens ──────────────────────── */

@media (max-width: 480px) {
  .feat-preloader__label,
  .feat-preloader__word {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
  }
}