/* ============================================================
   CAVMIR — HOLLYWOOD PRELOADER (v2 — brand-compliant)
   Spotlight sweep → white Ubuntu wordmark with shimmer reveal
   Initial-load title card + page-to-page transitions
   Brand rule: CAVMIR logotype is always WHITE — never gold/yellow
   ============================================================ */

/* ── Root overlay (always mounted) ── */
.cav-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  background: transparent;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease-out;
  transform: translateZ(0);
  will-change: opacity;
  touch-action: none;
}

.cav-preloader.is-done {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.4s ease-out, visibility 0s 0.4s;
}

body.cav-preloader-lock {
  overflow: hidden;
  height: 100vh;
}

/* ═══════════════════════════════════════════════════════════
   CURTAINS — two black halves that split open at reveal
   ═══════════════════════════════════════════════════════════ */
.cav-preloader__curtain {
  position: absolute;
  left: -2%;
  right: -2%;
  height: 51%;
  background:
    radial-gradient(ellipse at center, #0a0a0a 0%, #000 70%),
    #000;
  transition: transform 0.9s cubic-bezier(0.86, 0, 0.07, 1);
  z-index: 2;
  box-shadow: inset 0 0 120px rgba(255, 255, 255, 0.03);
}
.cav-preloader__curtain--top    { top: 0;    transform: translateY(0); }
.cav-preloader__curtain--bottom { bottom: 0; transform: translateY(0); }

/* Thin seam at meeting line (white this time — brand safe) */
.cav-preloader__curtain--top::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: -0.5px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 30%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.35) 70%,
    transparent 100%);
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

/* Film grain — cinema quality */
.cav-preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  opacity: 0.3;
  mix-blend-mode: screen;
  animation: cav-grain 1.8s steps(6) infinite;
}
@keyframes cav-grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -2%); }
  60%  { transform: translate(-2%, -1%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* ═══════════════════════════════════════════════════════════
   STAGE — logo layer
   ═══════════════════════════════════════════════════════════ */
.cav-preloader__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 4;
  padding: 0 24px;
  text-align: center;
  pointer-events: none;
}

/* SPOTLIGHT — soft cool-white beam that sweeps across BEHIND the wordmark */
.cav-preloader__spotlight {
  position: absolute;
  top: 50%;
  left: 0;
  width: 80vmax;
  height: 80vmax;
  max-width: 1400px;
  max-height: 1400px;
  transform: translate(-100%, -50%);
  background: radial-gradient(circle at center,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(255, 255, 255, 0.20) 14%,
    rgba(255, 255, 255, 0.10) 28%,
    rgba(255, 255, 255, 0.04) 44%,
    transparent 62%);
  filter: blur(16px);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ───────────────────────────────────────────────────────────
   WORDMARK — WHITE Ubuntu, light-sweep shimmer reveal
   The text is filled with a wide gradient that goes from
   dim-white → bright-white. Animating background-position
   makes the "bright light" appear to sweep THROUGH the letters.
   ─────────────────────────────────────────────────────────── */
.cav-preloader__wordmark {
  font-family: 'Ubuntu', 'Open Sans', sans-serif;
  font-weight: 300;
  letter-spacing: 0.38em;
  text-indent: 0.38em;
  text-transform: uppercase;
  font-size: clamp(3.2rem, 13vw, 13.5rem);
  line-height: 1;
  color: #ffffff;
  /* Light-sweep gradient (dim → bright hot spot → bright) */
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0.18)  0%,
    rgba(255, 255, 255, 0.18) 38%,
    rgba(255, 255, 255, 0.75) 46%,
    rgba(255, 255, 255, 1.00) 50%,
    rgba(255, 255, 255, 1.00) 51%,
    rgba(255, 255, 255, 0.85) 55%,
    rgba(255, 255, 255, 1.00) 62%,
    rgba(255, 255, 255, 1.00) 100%);
  background-size: 260% 100%;
  background-position: 100% 0;             /* START: dim window showing */
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 1;
  filter: drop-shadow(0 0 32px rgba(255, 255, 255, 0.18))
          drop-shadow(0 0 80px rgba(255, 255, 255, 0.08));
  white-space: nowrap;
}

/* HAIRLINE — thin WHITE rule under wordmark */
.cav-preloader__hairline {
  width: 0;
  height: 1px;
  margin-top: clamp(18px, 2.2vw, 32px);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.85) 20%,
    #ffffff 50%,
    rgba(255, 255, 255, 0.85) 80%,
    transparent 100%);
  opacity: 0;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* TAGLINE — uppercase, wide tracking, white */
.cav-preloader__tagline {
  font-family: 'Ubuntu', 'Open Sans', sans-serif;
  font-weight: 400;
  letter-spacing: 0.58em;
  text-indent: 0.58em;
  font-size: clamp(0.65rem, 0.9vw, 0.82rem);
  margin-top: clamp(14px, 1.6vw, 22px);
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   INTRO ANIMATION (initial load)
   Full timeline: ~3.1s including curtain open
   - 0-1800ms: light sweeps through wordmark
   - 0-1400ms: spotlight passes behind
   - 1500-2100ms: hairline draws
   - 1900-2400ms: tagline appears
   - 2400-2800ms: hold
   - 2800-3700ms: curtains open
   ═══════════════════════════════════════════════════════════ */
.cav-preloader.is-intro .cav-preloader__spotlight {
  animation: cav-spot-sweep 1500ms cubic-bezier(0.32, 0.06, 0.4, 1) forwards;
}
.cav-preloader.is-intro .cav-preloader__wordmark {
  animation: cav-light-sweep 2200ms cubic-bezier(0.5, 0.05, 0.2, 1) forwards;
}
.cav-preloader.is-intro .cav-preloader__hairline {
  animation: cav-hairline-draw 700ms 1500ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.cav-preloader.is-intro .cav-preloader__tagline {
  animation: cav-fade-up 500ms 1900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.cav-preloader.is-intro .cav-preloader__curtain--top::after {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   QUICK ANIMATION (page-to-page arrival)
   Total: ~1.4s including curtain open
   ═══════════════════════════════════════════════════════════ */
.cav-preloader.is-quick .cav-preloader__wordmark {
  font-size: clamp(2.2rem, 7vw, 6rem);
  animation: cav-light-sweep 900ms cubic-bezier(0.5, 0.05, 0.2, 1) forwards;
}
.cav-preloader.is-quick .cav-preloader__hairline {
  animation: cav-hairline-draw 400ms 500ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.cav-preloader.is-quick .cav-preloader__tagline { display: none; }
.cav-preloader.is-quick .cav-preloader__spotlight {
  animation: cav-spot-sweep 900ms cubic-bezier(0.32, 0.06, 0.4, 1) forwards;
}

/* ═══════════════════════════════════════════════════════════
   CURTAINS OPEN — page revealed
   ═══════════════════════════════════════════════════════════ */
.cav-preloader.is-opening .cav-preloader__curtain--top    { transform: translateY(-100%); }
.cav-preloader.is-opening .cav-preloader__curtain--bottom { transform: translateY(100%); }
.cav-preloader.is-opening .cav-preloader__stage {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.45s ease-out, transform 0.9s ease-out;
}

/* ═══════════════════════════════════════════════════════════
   OUTGOING OVERLAY (link clicked — fade black over page)
   ═══════════════════════════════════════════════════════════ */
.cav-page-exit {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cav-page-exit.is-active {
  opacity: 1;
  pointer-events: auto;
}
.cav-page-exit__mark {
  font-family: 'Ubuntu', 'Open Sans', sans-serif;
  font-weight: 300;
  letter-spacing: 0.38em;
  text-indent: 0.38em;
  text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 4.5rem);
  color: #ffffff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s 0.12s ease-out, transform 0.45s 0.12s cubic-bezier(0.22, 0.61, 0.36, 1);
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.2));
}
.cav-page-exit.is-active .cav-page-exit__mark {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════════════════════════ */
@keyframes cav-spot-sweep {
  0%   { transform: translate(-100%, -50%); opacity: 0; }
  10%  { opacity: 0.6; }
  50%  { transform: translate(0%, -50%); opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translate(100%, -50%); opacity: 0; }
}

/* The light-sweep — the KEY effect
   Background moves from position 100% (dim visible) to 0% (bright visible).
   Mid-animation, the bright hot spot passes visibly across the letters. */
@keyframes cav-light-sweep {
  0%   {
    background-position: 100% 0;
    letter-spacing: 0.48em;
    filter:
      drop-shadow(0 0 10px rgba(255, 255, 255, 0.05))
      blur(0.8px);
  }
  12%  {
    filter:
      drop-shadow(0 0 20px rgba(255, 255, 255, 0.15))
      blur(0);
  }
  55%  {
    /* Peak: shimmer crossing — intense glow */
    filter:
      drop-shadow(0 0 45px rgba(255, 255, 255, 0.55))
      drop-shadow(0 0 90px rgba(255, 255, 255, 0.28))
      blur(0);
  }
  100% {
    background-position: 0% 0;
    letter-spacing: 0.38em;
    filter:
      drop-shadow(0 0 32px rgba(255, 255, 255, 0.18))
      drop-shadow(0 0 80px rgba(255, 255, 255, 0.08))
      blur(0);
  }
}

@keyframes cav-hairline-draw {
  0%   { width: 0;                             opacity: 0; }
  15%  {                                       opacity: 1; }
  100% { width: clamp(220px, 32vw, 480px);     opacity: 1; }
}

@keyframes cav-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 0.85; transform: translateY(0); }
}

/* Brand decision: the Hollywood preloader plays in full for every visitor,
   so we intentionally do NOT honour prefers-reduced-motion here. */

/* ═══════════════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .cav-preloader__wordmark { letter-spacing: 0.28em; text-indent: 0.28em; }
  .cav-preloader__tagline  { letter-spacing: 0.38em; text-indent: 0.38em; font-size: 0.6rem; }
}