/* ══════════════════════════════════════════════════════════
   rsvp.css — First-time owl intro overlay + RSVP panel
══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   FIRST-TIME OWL INTRO (door swing → owl drops envelope)
══════════════════════════════════════════════════════════ */
.owlIntro {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
}

.owlIntro[hidden] { display: none; }

.owlIntroOwl {
  position: absolute;
  top: 12%;
  left: -100px;
  transition: none;
}

.owlIntro.is-flying .owlIntroOwl {
  animation: owlFlyIn 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.owlIntro.is-dropping .owlIntroEnvelope {
  animation: envelopeDrop 600ms cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

.owlIntro.is-flying-out .owlIntroOwl {
  animation: owlFlyOut 1000ms cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes owlFlyIn {
  0%   { left: -100px; top: 8%; transform: rotate(-8deg); }
  60%  { left: calc(50% - 30px); top: 10%; transform: rotate(4deg); }
  100% { left: calc(50% - 30px); top: 12%; transform: rotate(0deg); }
}

@keyframes envelopeDrop {
  0%   { top: 22%; opacity: 0; transform: scale(0.6); }
  100% { top: 50%; opacity: 1; transform: scale(1); }
}

@keyframes owlFlyOut {
  0%   { left: calc(50% - 30px); top: 12%; }
  100% { left: calc(100% + 100px); top: 8%; }
}

.owlIntroEnvelope {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  pointer-events: auto;
}

.owlIntroEnvelope[hidden] { display: none; }

/* ── RSVP panel ───────────────────────────────────────────── */
.rsvpPanelSurface {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 24px 32px;
  gap: 24px;
  overflow-y: auto;
}

.owlRsvpAnim {
  position: relative;
  height: 80px;
}

.owlRsvpOwl {
  position: absolute;
  left: -120px;
  top: 0;
}

.owlRsvpAnim.is-flying-in .owlRsvpOwl {
  animation: owlRsvpFlyIn 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.owlRsvpAnim.is-flying-out .owlRsvpOwl {
  animation: owlRsvpFlyOut 800ms cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes owlRsvpFlyIn {
  from { left: -120px; opacity: 0; }
  to   { left: 0; opacity: 1; }
}

@keyframes owlRsvpFlyOut {
  from { left: 0; opacity: 1; }
  to   { left: calc(100vw + 120px); opacity: 0; }
}

.rsvpEnvelopeWrap {
  width: min(480px, 92vw);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .rsvpPanelSurface { padding: 64px 14px 20px; }
}