/* ============================================================
   Opening gate — reconstructed from wooowinvites' own envelope
   component (assets/js/CountdownBlock-*.js in the scrape).

   The scraper tapped through the envelope to capture the page
   behind it, so the gate is the one piece of the original that
   the baked DOM does not contain. Everything here is their
   mechanism and their assets: the opening-animation mp4, its
   own frame at 0.12s as the idle poster, and the timings read
   off their state machine. Nothing about the sequence is
   invented — see gate.js for the clock.
   ============================================================ */

html.wi-locked,
html.wi-locked body {
  overflow: hidden !important;
  height: 100%;
}

#wi-gate {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: #0d0b09;
  overflow: hidden;
  transition: opacity 760ms cubic-bezier(.4, 0, .2, 1);
}

#wi-gate.wi-open {
  opacity: 0;
  pointer-events: none;
}

#wi-gate .wi-media {
  position: absolute;
  inset: 0;
}

#wi-gate .wi-still,
#wi-gate video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

/* the animation is held at opacity 0 over its own poster frame, so
   the swap at tap time is invisible — same pixels, now moving */
#wi-gate video {
  opacity: 0;
  transition: opacity 220ms cubic-bezier(.4, 0, .2, 1);
}

#wi-gate.wi-opening video {
  opacity: 1;
}

#wi-gate .wi-tap {
  position: absolute;
  inset: 0;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#wi-gate .wi-tap:focus-visible {
  outline: 2px solid #e8c98a;
  outline-offset: -8px;
}

#wi-gate.wi-opening .wi-tap {
  cursor: default;
}

/* Visually-hidden label: the envelope art carries its own
   "tap to open" wording, so the button needs an accessible name
   without painting a second one over it. */
#wi-gate .wi-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip: present, never in the way. Bottom corner, small, low contrast until
   touched. It appears 1.5s into the opening (see gate.js). */
#wi-gate .wi-skip {
  position: absolute;
  right: 14px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: rgba(30, 28, 24, .28);
  color: #fff;
  font: 500 13px/1 Tajawal, system-ui, sans-serif;
  letter-spacing: .04em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 0;
  animation: wiSkipIn 500ms ease forwards;
}

@keyframes wiSkipIn { to { opacity: .82; } }

/* Reduced motion shortens the incidental cross-fades. It does not skip
   the opening itself — see the note in gate.js. */
@media (prefers-reduced-motion: reduce) {
  #wi-gate {
    transition-duration: 200ms;
  }
  #wi-gate video {
    transition-duration: 80ms;
  }
}