/* ═══════════════════════════════════════
   VIDEO OVERLAY — tasto "discover"
   Il video si apre SOPRA la pagina, senza navigare: alla chiusura si
   torna esattamente al punto di partenza perche' la pagina non e' mai
   stata lasciata (niente scroll da ripristinare, niente ricaricamento).

   NB: qui dentro NON si puo' usare `filter`. Un filter dentro un
   contenitore position:fixed con opacity animata fa perdere il paint
   dell'intera pagina in Chromium — vedi la nota in nav.css.
═══════════════════════════════════════ */

.video-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;              /* sopra curtain (800) e panel (700) */
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  overscroll-behavior: contain;
  transition:
    opacity .45s cubic-bezier(0.22, 1, 0.36, 1),
    visibility .45s;
}

.video-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* Massima dimensione consentita dalla finestra, proporzioni intatte:
   il box e' la finestra intera, `contain` scala il video al massimo che
   ci sta dentro. Il nero attorno e' lo sfondo dell'overlay. */
.video-overlay video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  object-fit: contain;
  transform: scale(0.985);
  transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1);
}

.video-overlay.is-open video {
  transform: none;
}

/* ── Chiusura ── */
.video-close {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 0;
  color: var(--white);
  cursor: pointer;
  transition:
    background .25s ease,
    border-color .25s ease,
    color .25s ease,
    opacity .35s ease;
}

.video-close:hover,
.video-close:focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--dark);
}

.video-close svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* Dopo qualche secondo di immobilita' il pulsante si dissolve, come i
   controlli nativi; torna al primo movimento del mouse o tocco. */
.video-overlay.is-idle .video-close {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .video-close {
    top: 14px;
    right: 14px;
  }
}