/* ==========================================================================
 * Ovations '26 — "First Light" intro (logo-free, pre-reveal).
 *
 * Every animation is gated behind `#ov-intro.go`, which intro.js adds once the
 * art has preloaded. Base state is therefore the *first frame* of the film:
 * near-total darkness. That way a slow connection shows black, never a
 * half-finished pose.
 *
 * Act timings (from .go):
 *   0.0s  ember ignites
 *   1.3s  horizon tears open, stars rush in
 *   3.3s  the flourish draws itself
 *   4.6s  OVATIONS '26 letterspaces in
 *   6.0s  tagline
 *   7.6s  light floods — hand-off at 8.6s
 * ========================================================================== */

body.ov-lock { overflow: hidden; }

#ov-intro {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(120% 90% at 50% 56%, #070a16 0%, #03050C 58%, #010206 100%);
  overflow: hidden; isolation: isolate;
  opacity: 1; transform: none;
  transition: opacity 1.25s cubic-bezier(.4, 0, .2, 1),
              transform 1.25s cubic-bezier(.4, 0, .2, 1);
}
#ov-intro.ov-out { opacity: 0; transform: scale(1.045); pointer-events: none; }

/* ---------- stage ---------- */
.ov-cam { position: absolute; inset: 0; will-change: transform; }

.ov-stars {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0;
}
#ov-intro.go .ov-stars { animation: ovFade 2.1s ease 1.3s forwards; }

/* the ember: one point of gold that ignites, then breathes */
.ov-ember {
  position: absolute; left: 50%; top: 52%; width: 8px; height: 8px;
  translate: -50% -50%; border-radius: 50%;
  background: #fff6dd;
  box-shadow: 0 0 12px 3px rgba(241, 214, 140, .9),
              0 0 46px 12px rgba(231, 194, 113, .5);
  opacity: 0; transform: scale(.2);
}
#ov-intro.go .ov-ember {
  animation: ovIgnite 1.5s cubic-bezier(.2, .7, .2, 1) forwards,
             ovBreathe 3.4s ease-in-out 1.6s infinite;
}

/* the horizon: the ember tears sideways into a line of light */
.ov-horizon {
  position: absolute; left: 50%; top: 52%; width: min(92vw, 1180px); height: 1px;
  translate: -50% -50%;
  background: linear-gradient(90deg,
    transparent, rgba(231, 194, 113, .16) 12%, rgba(255, 246, 221, .95) 50%,
    rgba(231, 194, 113, .16) 88%, transparent);
  box-shadow: 0 0 26px rgba(231, 194, 113, .55);
  transform: scaleX(0); opacity: 0;
}
#ov-intro.go .ov-horizon {
  animation: ovTear 1.9s cubic-bezier(.16, .84, .24, 1) 1.25s forwards,
             ovHorizonSettle 2.6s ease 3.4s forwards;
}

/* the bloom: soft gold light behind everything, floods at the end */
.ov-bloom {
  position: absolute; left: 50%; top: 52%;
  width: min(150vw, 1500px); aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(circle,
    rgba(231, 194, 113, .30) 0%, rgba(201, 154, 70, .13) 26%, transparent 62%);
  opacity: 0;
}
#ov-intro.go .ov-bloom {
  animation: ovBloomIn 2.4s ease 1.5s forwards, ovFlood 1.5s ease 7.6s forwards;
}

/* ---------- centre flourish (rulebook art — safe, not logo-derived) -------- */
/* Corner moon + banjo were removed by request: the film is centre-only now.
   ornament-flourish-lit.png is a luminance-keyed cutout, so the navy page
   ground is fully transparent and no blend mode or edge mask is needed. */
.ov-flourish { position: absolute; opacity: 0; }

.ov-flourish {
  left: 50%; top: 52%; width: min(78vw, 720px);
  translate: -50% -50%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  transform: translateY(-50%) scaleX(.6);
}
#ov-intro.go .ov-flourish { animation: ovDraw 2.3s cubic-bezier(.16, .84, .24, 1) 3.3s forwards; }

/* ---------- type ---------- */
.ov-type {
  position: absolute; left: 0; right: 0; top: 52%;
  translate: 0 -50%; text-align: center; padding: 0 20px; z-index: 4;
}

.ov-star {
  width: 62px; margin: 0 auto 14px; display: block; opacity: 0;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 46%, transparent 68%);
          mask-image: radial-gradient(circle at 50% 46%, #000 46%, transparent 68%);
}
#ov-intro.go .ov-star {
  animation: ovFade 1.4s ease 4.3s forwards, ovSpin 70s linear 4.3s infinite;
}

.ov-name {
  font-family: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  font-weight: 700; font-size: clamp(1.5rem, 5.6vw, 3.5rem);
  letter-spacing: .3em; margin: 0; color: #F2E7CC;
  text-shadow: 0 0 34px rgba(231, 194, 113, .4);
  /* the letter-spacing on the last glyph pushes the word off-centre */
  text-indent: .3em;
}
.ov-name span {
  display: inline-block; opacity: 0; transform: translateY(.5em);
}
#ov-intro.go .ov-name span {
  animation: ovChar .9s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: calc(4.6s + var(--i) * .085s);
}
.ov-name .ov-yr {
  color: #E7C271; margin-left: .1em; opacity: 0;
  transform: translateY(.5em);
}
#ov-intro.go .ov-name .ov-yr { animation: ovChar .9s cubic-bezier(.2, .7, .2, 1) 5.42s forwards; }

.ov-sub {
  font-family: "Cormorant Garamond", Palatino, Georgia, serif;
  font-style: italic; font-size: clamp(.95rem, 2.5vw, 1.6rem);
  color: #D8CDB2; margin: 18px 0 0; letter-spacing: .06em;
  opacity: 0; transform: translateY(10px);
}
#ov-intro.go .ov-sub { animation: ovRise 1.6s cubic-bezier(.2, .7, .2, 1) 6.0s forwards; }

/* ---------- filmic finish ---------- */
.ov-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: radial-gradient(120% 90% at 50% 50%, transparent 42%, rgba(0, 0, 0, .72) 100%);
}
.ov-grain {
  position: absolute; inset: -60%; pointer-events: none; z-index: 7;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
#ov-intro.go .ov-grain { animation: ovGrain .55s steps(2) infinite; }

.ov-mote {
  position: absolute; bottom: -4%; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle, #f6e6b8, rgba(231, 194, 113, 0) 70%);
  opacity: 0;
}
#ov-intro.go .ov-mote { animation: ovMote linear infinite; }

/* ---------- skip ---------- */
.ov-skip {
  position: absolute; right: clamp(16px, 4vw, 44px); bottom: clamp(18px, 5vh, 46px);
  z-index: 8; cursor: pointer;
  font-family: "Inter", system-ui, sans-serif; font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .26em;
  color: #E7C271; background: rgba(8, 11, 24, .55);
  border: 1px solid rgba(201, 154, 70, .42); border-radius: 999px;
  padding: 12px 24px; backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .7s ease, transform .7s ease, background .25s, border-color .25s;
}
.ov-skip.show { opacity: .88; transform: none; pointer-events: auto; }
.ov-skip:hover, .ov-skip:focus-visible {
  opacity: 1; background: rgba(201, 154, 70, .18); border-color: rgba(231, 194, 113, .8);
  outline: none;
}

/* ---------- keyframes ---------- */
@keyframes ovFade   { to { opacity: 1; } }
@keyframes ovRise   { to { opacity: 1; transform: none; } }
@keyframes ovChar   { to { opacity: 1; transform: none; } }
@keyframes ovSpin   { to { rotate: 360deg; } }

@keyframes ovIgnite {
  0%   { opacity: 0; transform: scale(.2); }
  38%  { opacity: 1; transform: scale(1.5); }
  100% { opacity: .95; transform: scale(1); }
}
@keyframes ovBreathe {
  0%, 100% { transform: scale(1);   filter: brightness(1); }
  50%      { transform: scale(1.3); filter: brightness(1.35); }
}
@keyframes ovTear   { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes ovHorizonSettle { to { opacity: .32; } }
@keyframes ovBloomIn { to { opacity: 1; } }
@keyframes ovFlood {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.5); filter: brightness(2.1); }
}
@keyframes ovDraw {
  from { opacity: 0; transform: translateY(-50%) scaleX(.6); }
  to   { opacity: .5; transform: translateY(-50%) scaleX(1); }
}
@keyframes ovGrain {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-2%, 1.5%, 0); }
  100% { transform: translate3d(1.5%, -1%, 0); }
}
@keyframes ovMote {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(.7); }
  18%  { opacity: var(--mo, .35); }
  82%  { opacity: var(--mo, .35); }
  100% { opacity: 0; transform: translate3d(var(--drift, 0), -108vh, 0) scale(1.15); }
}

/* ---------- narrow screens: pull the art back so type stays readable ------- */
@media (max-width: 640px) {
  .ov-name  { letter-spacing: .2em; text-indent: .2em; }
  .ov-vignette { background: radial-gradient(120% 90% at 50% 50%, transparent 26%, rgba(0, 0, 0, .82) 100%); }
}

/* intro.js bails out entirely under reduced motion, so this is belt-and-braces */
@media (prefers-reduced-motion: reduce) {
  #ov-intro { display: none; }
}