/* The preview stays beneath the player so fading never exposes an empty frame. */
.wl-ocean.is-intro-playing .wl-hero-screen-layer { animation-play-state: paused; }
.wl-ocean .wl-hero-symbol,
.wl-ocean .wl-hero-motif-pi { transition: opacity .42s cubic-bezier(.22, .61, .36, 1); }
.wl-ocean.is-intro-playing .wl-hero-symbol,
.wl-ocean.is-intro-playing .wl-hero-motif-pi { opacity: 0; }

.wm-intro-video {
    position: absolute;
    inset: 0;
    z-index: 3;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: inherit;
    background: #080d25;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity .42s cubic-bezier(.22, .61, .36, 1);
}
.wl-ocean.is-intro-playing .wm-intro-video { opacity: 1; pointer-events: auto; }
.wm-intro-video[hidden] { display: none; }
.wm-intro-video [data-intro-video-player] { display: block; width: 100%; height: 100%; object-fit: contain; background: #080d25; }

.wm-intro-video [data-intro-video-close] {
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 1px solid #ffffff40;
    border-radius: 50%;
    background: #080d25cc;
    color: #fff;
    cursor: pointer;
}
.wm-intro-video [data-intro-video-close]:hover { background: #30245e; }
.wm-intro-video [data-intro-video-close] svg { display: block; width: 22px; height: 22px; }
.wm-intro-video :focus-visible { outline: 3px solid #c3a7ff; outline-offset: -4px; }

.wm-intro-video .wm-intro-video__error {
    position: absolute;
    right: 12px;
    bottom: 78px;
    left: 12px;
    margin: 0;
    padding: 12px 16px;
    border-radius: 10px;
    background: #171320ed;
    color: #fff;
    font-size: 13px;
    line-height: 1.6;
}
.wm-intro-video [data-intro-video-error][hidden] { display: none; }
.wm-intro-video .wm-intro-video__error a { color: #d5c1ff; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
    .wm-intro-video [data-intro-video-close] { top: 6px; right: 6px; }
    .wm-intro-video .wm-intro-video__error { right: 8px; bottom: 52px; left: 8px; }
}
@media (forced-colors: active) {
    .wm-intro-video [data-intro-video-close] { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
}
@media (prefers-reduced-motion: reduce) {
    .wm-intro-video,
    .wl-ocean .wl-hero-symbol,
    .wl-ocean .wl-hero-motif-pi { transition: none; }
}