/* Shared video overlay — the trailer on the homepage and 'Törf' on /1807/bevestigd. */

.modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(13, 9, 7, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 5vh 5vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms var(--ease-fade), visibility 0s linear 250ms;
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 250ms var(--ease-fade);
}
.modal__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  width: 100%;
  max-width: 1000px;
}
.modal__inner {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  box-shadow: var(--shadow-mist);
}
.modal__inner iframe { width: 100%; height: 100%; border: 0; display: block; }
.modal__close {
  position: absolute; top: -44px; right: -4px;
  font-family: var(--font-display); font-size: 32px; font-weight: 300;
  color: var(--parchment-dim);
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-fade);
}
.modal__close:hover { color: var(--gold-muted); }
.modal__alt {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: var(--parchment);
  opacity: 0.7;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: transparent;
  transition: opacity 200ms var(--ease-fade), text-decoration-color 200ms var(--ease-fade);
}
.modal__alt:hover {
  opacity: 1;
  text-decoration-color: rgba(245, 241, 232, 0.35);
}
.modal__alt[hidden] { display: none; }