/* =========================================================
   MALEA · Modals (invite form + vertical video lightbox)
   ========================================================= */

/* ---- Invite / form modal ---- */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 56px);
  background: rgba(5, 10, 24, .80);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease-out), visibility .5s;
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal__card {
  position: relative;
  width: min(100%, 540px);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(94,141,190,.10), transparent 60%),
    var(--bg-deep);
  border: 1px solid var(--gold-line);
  padding: clamp(32px, 5vw, 56px);
  transform: translateY(24px) scale(.98);
  opacity: 0;
  transition: transform .6s var(--ease-out), opacity .6s var(--ease-out);
}
.modal__title { text-align: center; }
.modal__tg { display: flex; justify-content: center; }
.modal__note { text-align: center; }
.modal.is-open .modal__card { transform: translateY(0) scale(1); opacity: 1; }

.modal__overline { margin-bottom: var(--s-4); }
.modal__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.08;
  margin-bottom: var(--s-4);
}
.modal__text { color: var(--ink-soft); margin-bottom: var(--s-5); max-width: 44ch; }
.modal__text p + p { margin-top: var(--s-3); }
.modal__note {
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: var(--s-4);
  margin-top: var(--s-5);
  border-top: 1px solid var(--ink-ghost);
}
.modal__tg { margin-top: var(--s-4); }
.modal__close {
  position: absolute;
  top: var(--s-4); right: var(--s-4);
  width: 40px; height: 40px;
}
.modal__close::before, .modal__close::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 18px; height: 1px; background: var(--ink-muted);
  transition: background .3s ease;
}
.modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.modal__close:hover::before, .modal__close:hover::after { background: var(--gold); }

/* ---- Vertical video lightbox ---- */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 48px);
  background: rgba(5, 10, 24, .88);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease-out), visibility .5s;
}
.video-modal.is-open { opacity: 1; visibility: visible; }

.video-modal__inner {
  position: relative;
  width: min(100%, 460px);
  max-height: min(92svh, 920px);
}
.video-modal__frame {
  position: relative;
  width: 100%;
  background: var(--bg-main);
  overflow: hidden;
  border: 1px solid var(--gold-line);
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
}
.video-modal__frame--vertical { aspect-ratio: 9 / 16; max-height: 88svh; }
.video-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-modal__close {
  position: absolute;
  top: -46px; right: 0;
  width: 40px; height: 40px;
}
.video-modal__close::before, .video-modal__close::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 20px; height: 1px; background: var(--ink-soft);
}
.video-modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.video-modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 760px) {
  .video-modal__close { top: -42px; }
}