/* ============================================================
   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));
}


/* When the real video replaces the clock SVG */
#opening-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === Brand text === */
.seq-brand {
  text-align: center;
  opacity: 0;
  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;
  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);
}
.seq-progress-fill {
  height: 100%;
  background: var(--brass);
  width: 0%;
  transition: width linear;
}

/* === 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;
}