/*
  waitlist-modal.css — "Be first to try" waitlist popup
  =========================================================
  Purely additive, same pattern as motion.css / drag-play.css: nothing
  here touches existing layout. Opens as an overlay, so it's safe to
  drop into any page that already loads the design tokens (--paper,
  --ink, --orange, etc.) from index.html / contact.html.
*/

.waitlist-modal{
  position:fixed;
  inset:0;
  z-index:9998;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background: rgba(28,26,22,.55);
  backdrop-filter: blur(6px);
  opacity:0;
  transition: opacity .25s ease;
}
.waitlist-modal.is-open{ display:flex; }
.waitlist-modal.is-visible{ opacity:1; }

body.waitlist-lock{ overflow:hidden; }

.waitlist-card{
  position:relative;
  width:100%;
  max-width:440px;
  background: var(--white, #fff);
  border-radius:24px;
  padding:84px 36px 64px;
  text-align:center;
  box-shadow: 0 50px 90px -30px rgba(28,26,22,.45);
  transform: translateY(18px) scale(.97);
  opacity:0;
  transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.waitlist-modal.is-visible .waitlist-card{
  transform: translateY(0) scale(1);
  opacity:1;
}

.waitlist-close{
  position:absolute;
  top:16px; right:16px;
  width:32px; height:32px;
  border-radius:50%;
  background: var(--paper-soft, #FFF7DC);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink, #1C1A16);
  z-index:5;
  transition: background .15s ease, transform .15s ease;
}
.waitlist-close:hover{ background: var(--line, #E7D9BC); transform: scale(1.06); }
.waitlist-close svg{ width:14px; height:14px; }

/* ---------- Floating integration badges ---------- */
.waitlist-icon{
  position:absolute;
  width:52px; height:52px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 22px -8px rgba(28,26,22,.3);
  background:#fff;
  z-index:2;
  animation: waitlistFloat 4.2s ease-in-out infinite;
}
.waitlist-icon img{ width:26px; height:26px; object-fit:contain; display:block; }

/* Sit fully inside the card's own top/bottom padding band — above the
   heading and below the note, so they never sit on top of the text
   (padding-top:84 / padding-bottom:64 give them that clear lane). */
.waitlist-icon--video{ top:16px; left:40px; animation-delay:0s; }
.waitlist-icon--notes{ top:4px; left:50%; transform:translateX(-50%); border:1.5px solid var(--line,#E7D9BC); animation-delay:.4s; }
.waitlist-icon--meet{ top:20px; right:36px; animation-delay:.8s; }
/* MeetNote's own mark keeps the brand-orange badge as the "signature" one —
   this one intentionally sits half-over the email input, like the ref design. */
.waitlist-icon--mic{ left:34px; top:50%; transform:translateY(-50%); background: var(--orange, #FF6A3D); width:44px; height:44px; animation-delay:1.2s; }
.waitlist-icon--mic svg{ width:22px; height:22px; }
.waitlist-icon--swoosh{ left:36px; bottom:8px; animation-delay:1.6s; }
.waitlist-icon--chat{ right:36px; bottom:6px; animation-delay:2s; }

@keyframes waitlistFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-7px); }
}
.waitlist-icon--notes{ animation-name: waitlistFloatCenter; }
@keyframes waitlistFloatCenter{
  0%, 100%{ transform: translateX(-50%) translateY(0); }
  50%{ transform: translateX(-50%) translateY(-7px); }
}
.waitlist-icon--mic{ animation-name: waitlistFloatMic; }
@keyframes waitlistFloatMic{
  0%, 100%{ transform: translateY(-50%); }
  50%{ transform: translateY(calc(-50% - 7px)); }
}

/* ---------- Copy + form ---------- */
.waitlist-heading{
  font-family: var(--font-title);
  font-size:24px;
  margin-bottom:10px;
  line-height:1.25;
}
.waitlist-sub{
  color: var(--ink-soft, #6B6357);
  font-size:14px;
  line-height:1.6;
  margin-bottom:26px;
}

.waitlist-form{ display:flex; flex-direction:column; gap:14px; }
.waitlist-input-wrap{ position:relative; text-align:left; }
.waitlist-input{
  width:100%;
  font-family: var(--font-body);
  font-size:14px;
  color: var(--ink, #1C1A16);
  background: var(--white, #fff);
  border:1.5px solid var(--line, #E7D9BC);
  border-radius:12px;
  padding:14px 44px 14px 16px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.waitlist-input::placeholder{ color: var(--ink-soft, #6B6357); opacity:.65; }
.waitlist-input:focus{
  outline:none;
  border-color: var(--orange, #FF6A3D);
  box-shadow: 0 0 0 4px var(--orange-tint, #FFE3CF);
}
.waitlist-input-wrap.has-error .waitlist-input{
  border-color: var(--error, #D93025);
  box-shadow: 0 0 0 4px rgba(217,48,37,.12);
}
.waitlist-input-icon{
  position:absolute;
  right:14px; top:50%;
  transform:translateY(-50%);
  width:18px; height:18px;
  color: var(--ink-soft, #6B6357);
  pointer-events:none;
}

.waitlist-error{
  display:none;
  text-align:left;
  font-size:12px;
  color: var(--error, #D93025);
  margin-top:-6px;
}
.waitlist-error.show{ display:block; }

.waitlist-submit{ width:100%; }
.waitlist-submit:disabled{ opacity:.65; cursor:not-allowed; transform:none; }

.waitlist-note{
  font-size:12px;
  color: var(--ink-soft, #6B6357);
  opacity:.8;
  margin-top:18px;
}

/* ---------- Success state ---------- */
.waitlist-success-state{ display:none; }
.waitlist-modal.is-success .waitlist-form-state{ display:none; }
.waitlist-modal.is-success .waitlist-success-state{ display:block; }

.waitlist-check{
  width:64px; height:64px;
  margin:0 auto 20px;
  border-radius:50%;
  background: var(--success, #2E7D4F);
  display:flex; align-items:center; justify-content:center;
  transform: scale(.4);
  opacity:0;
  animation: waitlistCheckIn .45s cubic-bezier(.34,1.56,.64,1) forwards .05s;
}
.waitlist-check svg{ width:28px; height:28px; }
@keyframes waitlistCheckIn{
  to{ transform:scale(1); opacity:1; }
}

/* Full-viewport confetti burst — sits above the modal, never blocks input */
.waitlist-confetti{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  display:none;
}
.waitlist-confetti svg{ width:100%; height:100%; }

@media (max-width:480px){
  .waitlist-card{ padding:76px 22px 52px; }
  .waitlist-icon{ width:44px; height:44px; }
  .waitlist-icon img{ width:20px; height:20px; }
  .waitlist-icon--video{ top:12px; left:22px; }
  .waitlist-icon--notes{ top:0; }
  .waitlist-icon--meet{ top:14px; right:20px; }
  .waitlist-icon--swoosh{ left:20px; bottom:4px; }
  .waitlist-icon--chat{ right:20px; bottom:2px; }
  .waitlist-icon--mic{ width:38px; height:38px; left:20px; }
  .waitlist-icon--mic svg{ width:18px; height:18px; }
}

@media (min-width:860px){
  /* Match the Figma frame exactly: 975 x 517, content vertically +
     horizontally centered so the icons get the same roomy gutters
     around the text that the design shows — no manual pixel-chasing. */
  .waitlist-card{
    max-width:975px;
    min-height:517px;
    padding:48px 40px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .waitlist-form-state{ max-width:520px; width:100%; }
  .waitlist-success-state{ max-width:520px; width:100%; }

  .waitlist-heading{ font-size:32px; }
  .waitlist-sub{ font-size:15px; }

  /* Exact Figma numbers: form frame is 366 x 116 with a 24px gap, which
     splits into a 44px-tall input row and a 48px-tall button row. */
  .waitlist-form{ width:366px; max-width:100%; margin:0 auto; gap:24px; }
  .waitlist-input-wrap{ height:44px; }
  .waitlist-input{
    box-sizing:border-box;
    height:44px;
    padding:0 46px 0 18px;
    font-size:15px;
  }
  .waitlist-submit{
    box-sizing:border-box;
    height:48px;
    padding-top:0;
    padding-bottom:0;
    font-size:15px;
  }

  .waitlist-close{ top:22px; right:22px; width:36px; height:36px; }
  .waitlist-close svg{ width:15px; height:15px; }

  /* Corner badges, repositioned for the wide card — generous clearance
     above/below/beside the centered text+form column on both sides, so
     nothing ever sits on top of a letter or the input/button. */
  .waitlist-icon--video{ top:46px; left:72px; }
  .waitlist-icon--notes{ top:34px; left:50%; }
  .waitlist-icon--meet{ top:50px; right:72px; }
  .waitlist-icon--swoosh{ left:72px; bottom:46px; }
  .waitlist-icon--chat{ right:72px; bottom:50px; }
  /* Same left column as video/swoosh — well clear of the 366px-wide
     form (its left edge sits at 50% - 183px), unlike the compact-card
     version where it intentionally grazed the input. */
  .waitlist-icon--mic{ left:72px; }
}

@media (prefers-reduced-motion: reduce){
  .waitlist-modal, .waitlist-card{ transition:none !important; }
  .waitlist-icon{ animation:none !important; }
  .waitlist-check{ animation:none !important; transform:scale(1); opacity:1; }
}