/* Invite landing — Alisa's ambi-invite demo (2026-09-28): the stamp card for
 * friend and Ambassador invitations, its hover sway, the Welcome on a cream
 * frame, a fixed footer, and the demo's responsive rules.
 *
 * The page loads waitlist.css for everything it shares with /waitlist/: the
 * shell, water canvas, nav, footer, white pill (.wl-cta), toast, the cream
 * frame, and the centred column the checking / invalid / already states
 * keep. This file adds only what is the invitation's own. */

.iv-page { background: #6f8d7d; }


/* the corner pill is the card's own action, so it only stands beside the card */
.iv-page:not([data-state="pending"]) .iv-pill { display: none; }
/* waitlist.css hides the pill once signed in; the invitation still needs accepting */
.iv-page[data-auth="in"][data-state="pending"] .iv-pill { display: flex; }
.iv-page:not([data-state="invalid"]) .iv-pill--waitlist { display: none; }

/* Keep Download and the invitation action within the phone header. */
@media (max-width: 560px) {
  .iv-page .wl-links .iv-nav-secondary { display: none; }
}

/* ---------- an invite that cannot be used (Alisa, 2026-09-30) ----------
   The waitlist landing, with the reason in a soft pill above the mark. */
.iv-invalid { gap: 44px; }
/* the waitlist paints this copy into its water; here it stays DOM text */
.iv-page.is-live .iv-invalid .wl-copy--join > * { visibility: visible; }
.iv-notice {
  margin: 0 0 12px;
  padding: 6px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font: 400 16px/24px var(--wl-serif);
  color: rgba(255, 255, 255, 0.9);
}

/* ---------- stage ---------- */
.iv-stage { transition: filter .5s ease; }
/* signing in: the page behind the overlay goes soft, as in the design */
.iv-page.is-signing .iv-stage { filter: blur(18px); }
.iv-page.is-signing .wl-nav,
.iv-page.is-signing .wl-foot { filter: blur(10px); opacity: .6; transition: filter .45s ease, opacity .45s ease; }

/* ---------- the invitation card (Figma 4348:62086) ----------
   --s is the card's scale, set from the viewport by invite.js: 1 on the
   1440×900 board (0.96 at most), smaller whenever the 440×560 panel would
   not fit between the nav and the footer. */
.iv-invite { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; }
.iv-fit {
  position: relative;
  flex: none;
  pointer-events: auto;
  width: calc(440px * var(--s, 1));
  height: calc(560px * var(--s, 1));
}
.iv-scale {
  position: absolute;
  left: calc(-40px * var(--s, 1));
  top: calc(-32px * var(--s, 1));
  width: 520px;
  height: 640px;
  transform: scale(var(--s, 1));
  transform-origin: 0 0;
  perspective: 1800px;
}
.iv-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 520px;
  height: 640px;
  will-change: transform;
  transform-origin: 260px 312px;
}
.iv-stamp { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.iv-grain { opacity: .5; }
/* Figma's GLASS, clipped to the exported stamp outline */
.iv-glass {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(14px) saturate(1.12) brightness(1.07);
  backdrop-filter: blur(14px) saturate(1.12) brightness(1.07);
  -webkit-clip-path: url(#ivStampClip);
  clip-path: url(#ivStampClip);
}
/* hover depth: a soft shadow that stays on the ground while the card lifts */
.iv-lift { position: absolute; inset: 0; opacity: 0; pointer-events: none; will-change: opacity; }
.iv-lift svg { display: block; overflow: visible; }
/* the paper face catches the light as it turns */
.iv-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  -webkit-clip-path: url(#ivStampClip);
  clip-path: url(#ivStampClip);
}

.iv-face { position: absolute; left: 40px; top: 32px; width: 440px; height: 560px; color: #fff; }
.iv-logo {
  position: absolute;
  left: 50%;
  top: 72px;
  transform: translateX(-50%);
  width: 148px;
  height: 110px;
  opacity: .92;
}
.iv-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.iv-text {
  position: absolute;
  left: 50%;
  top: 206px;
  transform: translateX(-50%);
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.iv-text h1 {
  margin: 0;
  width: 100%;
  font: 400 36px/44px var(--wl-serif);
  letter-spacing: -0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.iv-sub { margin: 0; font: 400 max(16px, calc(13px / var(--s, 1)))/1.5 var(--wl-serif); color: #fff; }
.iv-sub b { font-weight: 700; white-space: nowrap; }
.iv-act { position: absolute; left: 50%; top: 432px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: 340px; }
.iv-registration-error { margin: 0; text-align: center; font: 400 14px/18px var(--wl-serif); color: #fff; }

/* Ambassador invitations: laurels either side of the mark (Figma 4485:46051) */
.iv-laurel { position: absolute; top: 96px; width: 37px; height: 77px; display: block; }
.iv-laurel[hidden] { display: none; }
.iv-laurel--l { left: 117px; }
.iv-laurel--r { left: 286px; transform: scaleX(-1); }

/* ---------- the card's pill: smaller type, its own shadow ---------- */
.iv-cta--card {
  width: 200px;
  min-width: 0;
  height: 56px;
  padding: 0;
  border-radius: 56px;
  font: 500 max(16px, calc(13px / var(--s, 1)))/24px var(--wl-serif);
  color: #152b2d;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08), 0 -6px 12px rgba(0, 0, 0, 0.03), 0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 0 1px rgba(0, 0, 0, 0.10);
}

/* ---------- already headline ---------- */
.iv-h1--plain { font-size: 32px; line-height: 42px; }

/* ================= Welcome (Figma 4188:50614) ================= */
.iv-joined {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(64 * var(--u));
  width: 100%;
  text-align: center;
  color: #fff;
}
.iv-jgroup { display: flex; flex-direction: column; align-items: center; gap: calc(40 * var(--u)); }
.iv-jtop { display: flex; flex-direction: column; align-items: center; gap: calc(24 * var(--u)); }
.iv-jhead { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); }
.iv-jmark { width: calc(64 * var(--u)); height: calc(64 * var(--u)); display: grid; place-items: center; }
.iv-jmark img { display: block; width: calc(63 * var(--u)); height: calc(41 * var(--u)); }
.iv-kicker { margin: 0; font: 400 16px/24px var(--wl-serif); white-space: nowrap; }
.iv-joined h1 { margin: 0; font: 400 calc(64 * var(--u))/1 var(--wl-serif); white-space: nowrap; }
.iv-note { margin: 0; width: 560px; max-width: 100%; font: 400 16px/24px var(--wl-serif); }
.iv-note b { font-weight: 700; }
.iv-jcta { opacity: 0; transform: translateY(calc(18 * var(--u))); }
.iv-page[data-state="accepted"] .iv-jcta { animation: iv-rise .7s cubic-bezier(.2,.9,.25,1) 1.18s forwards; }

/* Welcome copy stays crisp, with the existing DOM entrance in every GPU mode. */
.iv-page .iv-jgroup [data-water-part] { opacity: 0; transform: translateY(calc(18 * var(--u))); }
.iv-page[data-state="accepted"] .iv-jmark { animation: iv-rise .8s cubic-bezier(.2,.9,.25,1) .14s forwards; }
.iv-page[data-state="accepted"] .iv-kicker { animation: iv-rise .8s cubic-bezier(.2,.9,.25,1) .28s forwards; }
.iv-page[data-state="accepted"] .iv-joined h1 { animation: iv-num .85s cubic-bezier(.16,1.2,.3,1) .42s forwards; }
.iv-page[data-state="accepted"] .iv-note { animation: iv-rise .7s cubic-bezier(.2,.9,.25,1) 1s forwards; }
@keyframes iv-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes iv-num {
  0%   { opacity: 0; transform: translateY(calc(42 * var(--u))) scale(.92); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .iv-jcta,
  .iv-page .iv-jgroup [data-water-part] { opacity: 1; transform: none; animation: none !important; }
}

/* ---------- tablets and phones ---------- */
@media (max-width: 720px) {
  .iv-jcta { width: 190px; height: 52px; font-size: 18px; line-height: 24px; }
  .iv-h1--plain { font-size: 26px; line-height: 34px; }

  /* Welcome on small screens: readable sizes instead of the board's scaled units */
  .iv-joined { padding: 56px 20px 58px; gap: 40px; }
  .iv-jgroup { width: 100%; gap: 24px; }
  .iv-jtop { gap: 16px; }
  .iv-jmark { width: 52px; height: 52px; }
  .iv-jmark img { width: 51px; height: 33px; }
  .iv-kicker { white-space: normal; }
  .iv-joined h1 { font-size: 40px; line-height: 1.05; white-space: normal; }
  .iv-note { width: 100%; }

}