/* Full-screen player. Geometry off the client's reference (notes, image
   8): the film takes two thirds of the width, centred, softly rounded; a
   thin close mark sits 4vw in from the top-right corner. Over the dark
   stage the pointer reads "(Close)". */

.video-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    background: var(--video-stage);
    color: var(--chrome-ink-light);
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-out);
    cursor: none;
}

.video-modal[hidden] { display: none; }

.video-modal.is-open { opacity: 1; }

.video-modal__stage {
    position: relative;
    width: min(66.6vw, calc((100vh - 120px) * 16 / 9));
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: max(6px, 0.6vw);
    background: var(--video-stage);
    cursor: auto;
}

.video-modal__stage video,
.video-modal__stage iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
}

.video-modal__close {
    position: absolute;
    top: max(16px, 3.9vw);
    right: max(16px, 3.8vw);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--chrome-ink-light);
    opacity: 0.55;
    cursor: pointer;
    transition: opacity var(--dur-fast) var(--ease-out);
}

.video-modal__close svg {
    width: max(14px, 1vw);
    height: max(14px, 1vw);
}

.video-modal__close:hover,
.video-modal__close:focus-visible {
    opacity: 1;
    outline: none;
}

.video-modal__cursor {
    position: fixed;
    top: 0;
    left: 0;
    font-family: var(--font-family);
    font-size: max(11px, 0.62vw);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(var(--cx, -100px), var(--cy, -100px)) translate(-50%, -50%);
    transition: opacity var(--dur-fast) var(--ease-out);
}

.video-modal.has-cursor .video-modal__cursor { opacity: 1; }

@media (hover: none) {
    .video-modal { cursor: auto; }
    .video-modal__cursor { display: none; }
}

@media (max-width: 720px) {
    .video-modal__stage { width: 100vw; border-radius: 0; }
}