/* ============================================================
   Opening intro — the animated SS logo (see intro.js).
   Full-screen, letterboxed on the clip's own edge colour so a
   tall phone screen shows no seam above or below the video.
   ============================================================ */
.intro-open,
.intro-open body { overflow: hidden; }

.intro-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: #1C0B2E; /* measured from the clip's border pixels */
  overflow: hidden;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.7s ease;
  visibility: hidden; /* shown only once the inline script opts in — no JS, no splash */
}

.intro-open .intro-splash,
.intro-splash.is-leaving { visibility: visible; }

.intro-splash.is-leaving {
  opacity: 0;
  pointer-events: none;
}

/* height: auto matters — the width/height attributes would otherwise pin the
   box at 768px and the feathering would land on empty letterbox, not on the
   picture, leaving hard edges. */
.intro-video {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* stays centred even when wider than the screen */
  width: 100vw;
  height: auto;
  max-width: calc(100dvh * 1344 / 768);
  aspect-ratio: 1344 / 768;
  /* feather all four edges into the backdrop */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent),
    linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent),
    linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect;
}

/* Portrait phones: the clip is wide, so let the ribbons run off both sides
   and give the SS disc most of the screen width. */
@media (orientation: portrait) {
  .intro-video {
    width: 180vw;
    max-width: none;
  }
}

.intro-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(28px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  gap: 12px;
}

.intro-btn {
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(28, 11, 46, 0.55);
  color: var(--gold);
  font-family: var(--font-engraved);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.intro-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .intro-splash { transition: none; }
}