/* Opening video at the top of the home page. */
.intro-video { position: relative; background: #120405; color: #fff; overflow: hidden; }
.intro-video video, .intro-video iframe { display: block; border: 0; width: 100%; height: 45vw; max-height: calc(80svh - 104px); min-height: 176px; margin-inline: auto; object-fit: cover; object-position: center; background: #120405; }
.intro-video-controls { position: absolute; inset: auto 16px 16px 16px; display: flex; justify-content: flex-start; align-items: center; gap: 10px; pointer-events: none; }
.intro-video-top { position: absolute; inset: 16px 16px auto 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; pointer-events: none; }
.intro-video-top > * { pointer-events: auto; }
.intro-video-controls > * { pointer-events: auto; }
.intro-video button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid #ffffff99; border-radius: 999px; background: #1a0508b8; color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; backdrop-filter: blur(6px); }
.intro-video button:hover { background: #ca001b; border-color: #fff; }
.intro-video button:focus-visible { outline: 3px solid #ffd27d; outline-offset: 3px; }
.intro-video button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.intro-video-hint { margin: 0; padding: 8px 14px; border-radius: 999px; background: #ca001bf0; color: #fff; font-size: 14px; font-weight: 600; pointer-events: none; animation: intro-hint-pulse 1.6s ease-in-out infinite; }
.intro-video-hint[hidden], .intro-video [hidden] { display: none !important; }
@keyframes intro-hint-pulse { 50% { transform: scale(1.05); } }

/* The opening video is 20% shorter at the same width, centered within the frame. */
@media (orientation: landscape) {
  .intro-video { height: calc(80svh - 104px); min-height: 288px; }
  .intro-video video, .intro-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; min-height: 0; object-fit: cover; object-position: center; }
}

/* Real full screen (button): show the whole picture, never crop it. */
.intro-video:fullscreen { height: 100%; width: 100%; }
.intro-video:fullscreen video { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; }
.intro-video:-webkit-full-screen { height: 100%; width: 100%; }
.intro-video:-webkit-full-screen video { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; }
@media (max-width: 560px) {
  .intro-video-controls { inset: auto 10px 10px 10px; }
  .intro-video button { min-height: 42px; padding: 6px 12px; font-size: 14px; }
  .intro-video-top { inset: 10px 10px auto 10px; }
  .intro-video-hint { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .intro-video-hint { animation: none; } }

/* YouTube version: YouTube's own controls sit at the bottom, so the skip button moves to the top. */
.intro-youtube .intro-video-controls { inset: 16px 16px auto auto; }
.intro-youtube iframe { height: 56.25vw; max-height: calc(80svh - 104px); }
@media (orientation: landscape) { .intro-youtube iframe { height: 100%; max-height: none; } }