/* ==========================================================================
   InviteUtsav — homepage-only launch offer popup
   (template-parts/launch-popup.php). Cream/plum/gold, same tokens as the
   rest of the site (design-system.css) — a ribbon "unties" open on
   appearance, then the offer content fades/scales in underneath it.
   ========================================================================== */

.launch-popup{
  position:fixed; inset:0; z-index:10050;
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-4);
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-mid) var(--ease-soft), visibility var(--dur-mid);
}
.launch-popup.is-open{ opacity:1; visibility:visible; }

.launch-popup__backdrop{
  position:absolute; inset:0;
  background:rgba(42,1,31,.65);
}

.launch-popup__panel{
  position:relative; z-index:1; width:100%; max-width:440px;
  background:linear-gradient(160deg, var(--cream), var(--champagne));
  border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
  padding:var(--sp-7) var(--sp-6);
  text-align:center; overflow:hidden;
  transform:scale(.92);
  transition:transform var(--dur-mid) var(--ease-premium);
  border:8px solid #2c0220db;
}
.launch-popup.is-open .launch-popup__panel{ transform:scale(1); }

.launch-popup__close{
  position:absolute; top:var(--sp-3); right:var(--sp-3); z-index:3;
  width:32px; height:32px; border-radius:50%;
  background:rgba(60,2,53,.08); color:var(--plum-800);
  font-size:1.3rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast) var(--ease-soft);
}
.launch-popup__close:hover{ background:rgba(60,2,53,.16); }

/* Ambient falling-petal canvas (assets/js/launch-popup.js) — same
   sprite-based technique as the wedding-01 template's own falling-petals
   effect, scaled down and confined to this panel: low petal count, soft
   opacity, sits behind the content layer so it never competes with
   readability. Runs only while the popup is open; cleared/stopped on
   close so it costs nothing the rest of the time. */
.launch-popup__petals{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%;
}

/* ---------------------------------------------------------------------- */
/* Ribbon-opening reveal                                                    */
/* ---------------------------------------------------------------------- */
.launch-popup__ribbon-stage{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.launch-popup__ribbon{
  position:absolute; top:50%; width:60%; height:52px; margin-top:-26px;
  background:linear-gradient(135deg, var(--gold-500), var(--gold-300));
  /* Slightly translucent (not fully opaque) — the falling petals sitting
     just behind this band (z-index:0, below the ribbon's z-index:2) stay
     faintly visible through it instead of being fully hidden while the
     ribbon is still closed/crossing. */
  opacity:.82;
  box-shadow:0 6px 18px rgba(60,2,53,.25);
  transition:transform .8s var(--ease-premium), opacity .5s ease .3s;
}
.launch-popup__ribbon--left{ left:0; transform-origin:right center; }
.launch-popup__ribbon--right{ right:0; transform-origin:left center; }
.launch-popup.is-ribbon-open .launch-popup__ribbon--left{ transform:translateX(-105%); }
.launch-popup.is-ribbon-open .launch-popup__ribbon--right{ transform:translateX(105%); }
.launch-popup.is-ribbon-open .launch-popup__ribbon{ opacity:0; }

.launch-popup__seal{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(1);
  width:60px; height:60px; border-radius:50%;
  background:radial-gradient(circle, var(--gold-300), var(--gold-500));
  display:flex; align-items:center; justify-content:center; color:var(--plum-900);
  box-shadow:0 8px 20px rgba(60,2,53,.3);
  transition:transform .5s var(--ease-premium) .2s, opacity .4s ease .2s;
}
.launch-popup__seal svg{ width:26px; height:26px; }
.launch-popup.is-ribbon-open .launch-popup__seal{ transform:translate(-50%,-50%) scale(0); opacity:0; }

/* ---------------------------------------------------------------------- */
/* Offer content — revealed once the ribbon has opened                     */
/* ---------------------------------------------------------------------- */
.launch-popup__content{
  position:relative; z-index:1;
  opacity:0; transform:translateY(12px);
  transition:opacity .5s ease .1s, transform .5s var(--ease-premium) .1s;
}
.launch-popup.is-ribbon-open .launch-popup__content{ opacity:1; transform:translateY(0); }

.launch-popup__eyebrow{
  display:inline-block; font-weight:800; letter-spacing:.06em;
  color:var(--rose-500); font-size:.98rem; margin-bottom:var(--sp-2);
}
.launch-popup__title{ font-family:var(--font-display); color:var(--plum-800); font-size:1.55rem; line-height:1.3; }
.launch-popup__offer{
  display:inline-block; margin-top:.25rem; font-size:2rem; font-weight:700;
  background:linear-gradient(135deg, var(--rose-500), var(--gold-500));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.launch-popup__code-row{ margin-top:var(--sp-5); }
.launch-popup__code-label{
  display:block; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600; margin-bottom:.4rem;
}
.launch-popup__code-box{
  display:inline-flex; align-items:center; gap:.6rem;
  border:2px dashed var(--gold-500); border-radius:var(--r-pill);
  padding:.5rem .5rem .5rem 1.2rem; background:var(--surface);
}
.launch-popup__code{ font-family:var(--font-display); font-weight:700; letter-spacing:.04em; color:var(--plum-800); font-size:1.1rem; }
.launch-popup__code-box .btn{ white-space:nowrap; }
.launch-popup__code-box .btn.is-copied{ background:linear-gradient(135deg, #3f9d6f, #2f8058); color:#fff; }

.launch-popup__validity{ margin-top:var(--sp-4); font-size:.86rem; color:var(--ink-soft); }
.launch-popup__cta{ display:flex; margin-top:var(--sp-5); width:100%; }

@media (max-width:480px){
  .launch-popup__panel{ padding:var(--sp-6) var(--sp-4); }
  .launch-popup__title{ font-size:1.3rem; }
  .launch-popup__offer{ font-size:1.55rem; }
  .launch-popup__ribbon{ height:42px; margin-top:-21px; }
  /* "LAUNCH20" + "Copy Code" side by side is tight on a narrow phone —
     stacks instead of squeezing/wrapping mid-word. */
  .launch-popup__code-box{ flex-direction:column; gap:.6rem; padding:.9rem; }
  .launch-popup__code-box .btn{ width:100%; }
}

@media (prefers-reduced-motion: reduce){
  .launch-popup__ribbon, .launch-popup__seal, .launch-popup__content, .launch-popup__panel{
    transition-duration:.01ms !important;
  }
}