/* ============================================================
   OPENING SEQUENCE
   Placeholder CSS animation — replaced by AI video at launch
   ============================================================ */

#opening-sequence {
  position: fixed;
  inset: 0;
  z-index: 500;
  /* Extra mid-stops soften the falloff (fewer/farther-apart stops band visibly on
     OLED phone screens at this low an opacity) and translateZ(0) forces this gradient
     to composite as one stable layer before the animated children below are promoted
     to their own layers — otherwise a child's layer can paint a visible seam/rectangle
     against this background where the two layers meet. */
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%,
      rgba(224, 168, 90, 0.09) 0%,
      rgba(224, 168, 90, 0.05) 35%,
      rgba(224, 168, 90, 0.02) 55%,
      transparent 80%),
    var(--ink);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  transition: opacity 1.4s cubic-bezier(0.25, 0.1, 0.1, 1);
}

#opening-sequence.is-fading {
  opacity: 0;
  pointer-events: none;
}

/* === Clock face — real image (replaced by <video> when video is ready) === */
.seq-clock {
  position: relative;
  width: min(360px, 68vw);
  height: min(360px, 68vw);
  opacity: 0;
  animation: seqClockReveal 1100ms 100ms var(--ease) forwards;
}

/* The scale/opacity reveal lives on the wrapper above, not here — animating
   `transform` on the same element as `filter: drop-shadow` is a known Safari/iOS
   bug where the glow gets clipped to the element's own box instead of blooming
   outward, showing up as a hard-edged square around the glow. Keeping the filter
   on a non-transformed element avoids it. */
.seq-clock img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 28px rgba(196, 145, 64, 0.32))
    drop-shadow(0 0 80px rgba(196, 145, 64, 0.14));
}


/* Full-bleed AI video — sits behind the clock fallback/brand/skip/progress
   chrome (z-index below them), hidden until JS confirms desktop + playable */
#opening-video {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
#opening-video.is-active {
  display: block;
}

/* === Brand text === */
.seq-brand {
  text-align: center;
  opacity: 0;
  z-index: 2;
  animation: seqFadeUp 900ms 600ms var(--ease) forwards;
}

.seq-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  font-weight: 300;
  font-style: italic;
  color: var(--brass-light);
  letter-spacing: 0.08em;
  margin-top: 0.6rem;
  display: block;
}

/* === Skip button === */
.seq-skip {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  z-index: 3;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-dark);
  border: 1px solid var(--brass-dark);
  padding: 7px 16px;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  animation: seqFadeIn 600ms 1200ms ease forwards;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.seq-skip:hover {
  color: var(--brass);
  border-color: var(--brass);
}

/* === Progress bar === */
.seq-progress {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 1px;
  background: rgba(138, 100, 40, 0.2);
  z-index: 3;
}
.seq-progress-fill {
  height: 100%;
  background: var(--brass);
  width: 0%;
  transition: width linear;
}

/* === Fog bridge (Vanta.js FOG, desktop only) ===
   Drifting mist beneath the bloom — replaces a flat color fade with actual
   texture/depth for the crossfade. Vanta's canvas isn't natively transparent, so
   this leans on mix-blend-mode: screen + a near-black baseColor (opening-sequence.js)
   to make the dark areas disappear and only the lit mist glow through — same trick
   as the bloom's radial-gradient, just with motion and grain.
   Pre-warmed hidden (opacity, never display:none — Vanta needs real layout size to
   measure) well before crossfade so there's no WebGL init stutter at reveal time.

   Three phases, driven by opening-sequence.js (colors move too — see the color
   arc there: rosette teal/gold at the seam, warming to hero candlelight):
     is-rising  — the video's final approach: mist creeps up INSIDE the video,
                  so the transition is anticipated rather than appearing from
                  nothing at the cut
     is-active  — the seam itself: near-full cover while the video hands off to
                  the hero, carrying the luminance drop from the bright rosette
     (neither)  — slow dissolve, deliberately outliving the 1.4s crossfade so
                  the hero is revealed through thinning mist, not a hard edge */
#seq-fog {
  position: fixed;
  inset: 0;
  z-index: 590;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1700ms ease;
}
#seq-fog.is-rising {
  opacity: 0.35;
  transition: opacity 1100ms ease-in;
}
#seq-fog.is-active {
  opacity: 0.85;
  transition: opacity 400ms ease-out;
}
#seq-fog canvas {
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  #seq-fog { display: none !important; }
}

/* === Light-bloom bridge ===
   A warm wash that swells at crossfade-start and dissolves over the blend.
   The opening video ends on warm light through stained glass; this bloom makes
   the handoff read as passing THROUGH that light into the site, and it masks
   the scale mismatch between the video's macro close-up and the wide hero.
   Sits above both the sequence overlay (z 500) and the site, ignores clicks.
   In/out speeds are asymmetric: fast swell, slow dissolve. */
.seq-bloom {
  position: fixed;
  inset: 0;
  z-index: 600;
  pointer-events: none;
  background: radial-gradient(ellipse 85% 75% at 50% 45%,
    rgba(232, 186, 110, 0.5) 0%,
    rgba(224, 168, 90, 0.28) 38%,
    rgba(224, 168, 90, 0.08) 62%,
    transparent 82%);
  opacity: 0;
  transition: opacity 1150ms ease;
}
.seq-bloom.is-active {
  opacity: 1;
  transition: opacity 320ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .seq-bloom { display: none !important; }
}

/* === Keyframes === */
@keyframes seqClockReveal {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes seqFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes seqFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* === Reduced motion: skip straight to content === */
@media (prefers-reduced-motion: reduce) {
  #opening-sequence {
    display: none !important;
  }
}

/* === Site content — hidden until sequence ends === */
#site-content {
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.25, 0.1, 0.1, 1);
}
#site-content.is-visible {
  opacity: 1;
}