/* ============================================================
   PAVI'S LAB — launch-soon.css
   "Launching Soon" lock for the Build-Your-Own bundle feature:
   a 3D satin ribbon + bow wrapped around the home-page section,
   and the grand-launch popup. Everything is driven by
   /js/launch-soon.js — flip BUNDLES_ON_HOLD there to launch.
   ============================================================ */

/* ── Locked section ─────────────────────────────────────────── */
.ls-locked {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  perspective: 1400px;
}

/* Cards float in 3D and tilt toward the pointer (JS sets --rx / --ry) */
.ls-locked .ls-tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
  will-change: transform;
}
.ls-locked .ls-tilt:hover { box-shadow: 0 30px 60px rgba(255, 0, 127, 0.28); }

/* Overlay holding ribbons, bow and tag — never takes clicks itself;
   the section's own click handler opens the popup */
.ls-wrap {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

/* Frosted glass screen between the cards and the ribbon — pushes the cards
   back so the wrap reads first. Starts just above the cards (--ls-top, set
   in JS) so the section heading stays clear, and fades in at its top edge. */
.ls-veil {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--ls-top, 0px);
  bottom: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(20, 4, 14, 0.5) 0%, rgba(12, 2, 9, 0.62) 100%);
  backdrop-filter: blur(1.5px) saturate(0.85);
  -webkit-backdrop-filter: blur(1.5px) saturate(0.85);
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 44px);
          mask: linear-gradient(180deg, transparent 0, #000 44px);
  opacity: 0;
  transition: opacity 0.9s ease;
}
.ls-in .ls-veil { opacity: 1; }

/* Slow diagonal reflection gliding across the glass */
.ls-veil::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 22%;
  left: -30%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.07) 45%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.07) 55%, transparent 100%);
  transform: skewX(-18deg);
  animation: lsGlassSweep 7s ease-in-out infinite 2.5s;
}
@keyframes lsGlassSweep {
  0%        { left: -30%; }
  45%, 100% { left: 130%; }
}

/* ── Gift-wrap ribbon ────────────────────────────────────────
   Two straight red-velvet bands crossing at the bow, like ribbon tied
   round a present: one across the cards (--ls-y) and one down the middle
   from just above the cards (--ls-top). Each band is built as two halves
   meeting at the bow, so pull-to-open can slide all four pieces away.
   Layers: gold edge piping, centre gold hairline, velvet shading, pile. */
.ls-wrapband { position: absolute; inset: 0; }

.ls-band {
  position: absolute;
  --w: 28px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.45);
  transition: transform 1s cubic-bezier(0.7, 0, 0.25, 1), opacity 0.5s ease;
}
.ls-band-h {
  top: var(--ls-y, 50%);
  height: var(--w);
  margin-top: calc(var(--w) / -2);
  background:
    linear-gradient(180deg,
      #f3d98f 0 2px, #9a6b1f 2px 3px, transparent 3px calc(100% - 3px),
      #9a6b1f calc(100% - 3px) calc(100% - 2px), #f3d98f calc(100% - 2px)),
    linear-gradient(180deg, transparent calc(50% - 0.6px), rgba(232, 197, 110, 0.75) calc(50% - 0.6px) calc(50% + 0.6px), transparent calc(50% + 0.6px)),
    linear-gradient(180deg, rgba(255, 140, 160, 0.2) 0%, transparent 40%, rgba(0, 0, 0, 0.3) 100%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.09) 0 1px, transparent 1px 3px),
    #8e0d22;
}
.ls-band-v {
  left: 50%;
  width: var(--w);
  margin-left: calc(var(--w) / -2);
  background:
    linear-gradient(90deg,
      #f3d98f 0 2px, #9a6b1f 2px 3px, transparent 3px calc(100% - 3px),
      #9a6b1f calc(100% - 3px) calc(100% - 2px), #f3d98f calc(100% - 2px)),
    linear-gradient(90deg, transparent calc(50% - 0.6px), rgba(232, 197, 110, 0.75) calc(50% - 0.6px) calc(50% + 0.6px), transparent calc(50% + 0.6px)),
    linear-gradient(90deg, rgba(255, 140, 160, 0.2) 0%, transparent 40%, rgba(0, 0, 0, 0.3) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.09) 0 1px, transparent 1px 3px),
    #8e0d22;
}
/* Halves meet at the bow; each wraps in from the bow outward */
.ls-band-hl { left: 0;   right: 50%; transform-origin: right center; transform: scaleX(0); }
.ls-band-hr { left: 50%; right: 0;   transform-origin: left center;  transform: scaleX(0); }
.ls-band-vt {
  top: var(--ls-top, 0px);
  height: calc(var(--ls-y, 50%) - var(--ls-top, 0px));
  transform-origin: center bottom;
  transform: scaleY(0);
  transition-delay: 0.3s;
}
.ls-band-vb { top: var(--ls-y, 50%); bottom: 0; transform-origin: center top; transform: scaleY(0); transition-delay: 0.3s; }
.ls-in .ls-band-hl,
.ls-in .ls-band-hr { transform: scaleX(1); }
.ls-in .ls-band-vt,
.ls-in .ls-band-vb { transform: scaleY(1); }

/* Sparkles twinkling along the across-band */
.ls-glint {
  position: absolute;
  top: var(--ls-y, 50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 12px rgba(255, 240, 200, 0.95);
  transform: translate(-50%, -50%) scale(0);
  animation: lsGlintTwinkle 3.6s ease-in-out infinite;
}
@keyframes lsGlintTwinkle {
  0%, 60%, 100% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
  75%           { transform: translate(-50%, -50%) scale(1.15) rotate(45deg); opacity: 1; }
  90%           { transform: translate(-50%, -50%) scale(0.6) rotate(90deg); opacity: 0.6; }
}

/* ── Bow at the crossing — crisp, sharp-edged folded velvet ──
   Every part is a clipped polygon in gold with the velvet face set 2px
   inside it (::before), giving each piece a fine gold rim. Hard gradient
   stops make the sharp folds and creases. */
.ls-bow {
  position: absolute;
  left: 50%;
  top: var(--ls-y, 50%);
  width: 0;
  height: 0;
  z-index: 1;
  transform: scale(0) rotate(-40deg);
  transition: transform 0.8s cubic-bezier(0.34, 1.7, 0.5, 1) 1.25s;   /* after the ribbon wraps */
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
}
.ls-in .ls-bow { transform: scale(1) rotate(0deg); }
.ls-bow-inner { position: absolute; left: 0; top: 0; animation: lsBowBreathe 3.2s ease-in-out infinite 2s; }

.ls-loop,
.ls-tail,
.ls-knot {
  position: absolute;
  background: linear-gradient(135deg, #fbe3a2, #d4a13f 45%, #9a6b1f);   /* gold rim */
}
.ls-loop::before,
.ls-tail::before,
.ls-knot::before {
  content: '';
  position: absolute;
  inset: 2px;
  clip-path: inherit;
}

/* Wings: wide at the outer end with a sharp V-notch, narrowing into the knot */
.ls-loop {
  top: -38px;
  width: 104px;
  height: 76px;
  transition: transform 0.6s cubic-bezier(0.34, 1.45, 0.5, 1) 0.15s, opacity 0.4s ease 0.15s;
}
.ls-loop-l {
  right: 8px;
  transform-origin: right center;
  transform: rotate(-14deg);
  clip-path: polygon(100% 38%, 0 0, 20% 50%, 0 100%, 100% 62%);
}
.ls-loop-r {
  left: 8px;
  transform-origin: left center;
  transform: rotate(14deg);
  clip-path: polygon(0 38%, 100% 0, 80% 50%, 100% 100%, 0 62%);
}
/* Crease across the middle: lit upper fold, shadowed lower fold,
   darkening toward the knot where the velvet tucks in */
.ls-loop-l::before {
  background:
    linear-gradient(90deg, transparent 55%, rgba(20, 0, 5, 0.6) 100%),
    linear-gradient(180deg, #d2253f 0%, #9b1128 49.5%, #5c0714 50.5%, #340309 100%);
}
.ls-loop-r::before {
  background:
    linear-gradient(270deg, transparent 55%, rgba(20, 0, 5, 0.6) 100%),
    linear-gradient(180deg, #d2253f 0%, #9b1128 49.5%, #5c0714 50.5%, #340309 100%);
}

/* Tails: swallowtail cut, folded down the centre */
.ls-tail {
  top: 2px;
  width: 30px;
  height: 104px;
  transform-origin: top center;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 50% 82%, 0 100%);
  animation: lsTailSway 3s ease-in-out infinite;
  transition: transform 0.6s cubic-bezier(0.34, 1.45, 0.5, 1) 0.2s, opacity 0.4s ease 0.2s;
}
.ls-tail::before { background: linear-gradient(90deg, #b3172f 0 49.5%, #5a0613 50.5% 100%); }
.ls-tail-l { right: -2px; transform: rotate(32deg); }
.ls-tail-r { left: -2px;  transform: rotate(-32deg); animation-delay: -1.5s; }
@keyframes lsTailSway {
  0%, 100% { rotate: 0deg; }
  50%      { rotate: 4deg; }
}

/* Knot: a crisp hexagonal band with a sharp centre crease */
.ls-knot {
  left: -17px;
  top: -24px;
  width: 34px;
  height: 48px;
  clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%);
  transition: transform 0.5s cubic-bezier(0.34, 1.45, 0.5, 1) 0.4s, opacity 0.35s ease 0.4s;
}
.ls-knot::before {
  background:
    linear-gradient(180deg, rgba(255, 190, 200, 0.3) 0%, transparent 30%),
    linear-gradient(90deg, #c21a36 0 49.5%, #6e0a1a 50.5% 100%);
}
@keyframes lsBowBreathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.05) rotate(-2deg); }
}

/* ── Pull-to-open: tapping the section unwraps it before the popup ──
   The knot spins loose, the wings fly apart, the tails and tag drop, the
   ribbon bands split at the bow and slide off all four ways, and the glass
   lifts. Removing .ls-opening (when the popup closes) re-wraps everything
   using the base transitions above. */
.ls-opening .ls-knot {
  transform: scale(0) rotate(160deg);
  opacity: 0;
  transition: transform 0.35s ease-in, opacity 0.3s ease;
}
.ls-opening .ls-loop-l {
  transform: translate(-80px, -34px) rotate(-95deg) scale(0.55);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0.75, 0) 0.1s, opacity 0.4s ease 0.2s;
}
.ls-opening .ls-loop-r {
  transform: translate(80px, -34px) rotate(95deg) scale(0.55);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0.75, 0) 0.1s, opacity 0.4s ease 0.2s;
}
.ls-opening .ls-tail-l {
  transform: translate(-34px, 110px) rotate(75deg);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.5, 0, 0.75, 0) 0.15s, opacity 0.45s ease 0.25s;
}
.ls-opening .ls-tail-r {
  transform: translate(34px, 110px) rotate(-75deg);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.5, 0, 0.75, 0) 0.15s, opacity 0.45s ease 0.25s;
}
.ls-in.ls-opening .ls-tag-wrap {   /* must outrank .ls-in .ls-tag-wrap below */
  transform: translateY(120px) rotate(18deg);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.35s ease 0.15s;
}
.ls-in.ls-opening .ls-band {
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.6, 0, 0.4, 1) 0.25s, opacity 0.5s ease 0.45s;
}
.ls-in.ls-opening .ls-band-hl { transform: translateX(-60%); }
.ls-in.ls-opening .ls-band-hr { transform: translateX(60%); }
.ls-in.ls-opening .ls-band-vt { transform: translateY(-70%); }
.ls-in.ls-opening .ls-band-vb { transform: translateY(70%); }
.ls-opening .ls-glint { visibility: hidden; }
.ls-opening .ls-veil {
  opacity: 0;
  transition: opacity 0.6s ease 0.35s;
}

/* ── Hanging "Launching Soon" tag ── */
.ls-tag-wrap {
  position: absolute;
  left: 50%;
  top: calc(var(--ls-y, 50%) + 18px);
  width: 0;
  opacity: 0;
  z-index: 2;            /* in front of the bow, so the velvet tails tuck behind the tag */
  transition: opacity 0.5s ease 1.6s, transform 0.7s cubic-bezier(0.34, 1.45, 0.5, 1) 0.5s;
}
.ls-in .ls-tag-wrap { opacity: 1; }
.ls-tag-swing {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  animation: lsSwing 3.4s ease-in-out infinite;
}
.ls-string {
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 90px;          /* long enough that the tag hangs below the bow's tail tips */
  background: linear-gradient(#ffd36e, #c99a2e);
}
.ls-tag {
  position: absolute;
  top: 88px;
  left: 0;
  transform: translateX(-50%);
  min-width: 210px;
  padding: 14px 22px 12px;
  border-radius: 16px;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(145deg, #2a0618 0%, #4a0a2c 55%, #1c0310 100%);
  border: 2px solid #ffd36e;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.55),
    0 0 30px rgba(255, 211, 110, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.ls-tag::before {                     /* punch hole */
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #ffd36e;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.4);
}
.ls-tag-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #ffd36e;
}
.ls-tag-title {
  display: block;
  margin: 4px 0 3px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, #fff 0%, #ffd36e 30%, #ff7ac0 55%, #fff 80%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lsTextShimmer 3s linear infinite;
}
.ls-tag-hint {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  animation: lsBlink 1.8s ease-in-out infinite;
}
@keyframes lsSwing {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}
@keyframes lsTextShimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes lsBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Locked CTA buttons */
.ls-locked .ls-btn-locked { filter: saturate(0.9); }

/* ── Grand-launch popup ─────────────────────────────────────── */
.ls-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  perspective: 1200px;
  font-family: var(--font, 'Poppins', sans-serif);
}
.ls-modal.open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.35s ease;
}

.ls-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(120, 0, 60, 0.55) 0%, rgba(8, 0, 6, 0.92) 70%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Slowly turning spotlight rays */
.ls-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180vmax;
  height: 180vmax;
  margin: -90vmax 0 0 -90vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 79, 163, 0.16) 0deg 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 55%);
          mask: radial-gradient(circle, #000 0%, transparent 55%);
  animation: lsSpin 40s linear infinite;
  pointer-events: none;
}
@keyframes lsSpin { to { transform: rotate(360deg); } }

/* Confetti (spans generated by JS) */
.ls-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ls-confetti i {
  position: absolute;
  top: -20px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.9;
  animation: lsFall linear infinite;
}
@keyframes lsFall {
  0%   { transform: translate3d(0, -20px, 0) rotateX(0) rotateZ(0); }
  100% { transform: translate3d(var(--dx, 40px), 110vh, 0) rotateX(720deg) rotateZ(360deg); }
}

.ls-card {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 34px 30px 30px;
  border-radius: 28px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 0, 127, 0.28) 0%, transparent 70%),
    linear-gradient(170deg, #2b0719 0%, #140310 60%, #0c020a 100%);
  border: 1.5px solid rgba(255, 211, 110, 0.55);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(255, 0, 127, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: rotateX(28deg) translateY(70px) scale(0.82);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.2, 1.35, 0.4, 1), opacity 0.4s ease;
}
.ls-modal.open .ls-card { transform: none; opacity: 1; }

.ls-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.3s;
  z-index: 3;
}
.ls-close:hover { background: rgba(255, 0, 127, 0.35); transform: rotate(90deg); }

/* 3D gift box — a real CSS cube with a bobbing lid and light escaping */
.ls-scene {
  position: relative;
  width: 200px;
  height: 190px;
  margin: 6px auto 8px;
  perspective: 700px;
}
.ls-glow {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 170px;
  height: 150px;
  margin-left: -85px;
  background: radial-gradient(ellipse 40% 60% at 50% 100%, rgba(255, 230, 150, 0.95) 0%, rgba(255, 150, 200, 0.45) 45%, transparent 75%);
  clip-path: polygon(38% 100%, 62% 100%, 100% 0, 0 0);
  filter: blur(4px);
  animation: lsBeam 2.4s ease-in-out infinite;
}
@keyframes lsBeam { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

.ls-box {
  position: absolute;
  left: 50%;
  top: 72px;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  transform-style: preserve-3d;
  animation: lsTurn 9s linear infinite;
}
@keyframes lsTurn {
  from { transform: rotateX(-20deg) rotateY(0deg); }
  to   { transform: rotateX(-20deg) rotateY(360deg); }
}
.ls-face {
  position: absolute;
  width: 100px;
  height: 100px;
  background:
    linear-gradient(90deg, transparent 42%, #ffd36e 42%, #f4b93a 58%, transparent 58%),
    linear-gradient(145deg, #ff6fb5 0%, #e0006f 60%, #a1004f 100%);
  box-shadow: inset 0 0 20px rgba(80, 0, 40, 0.45);
  backface-visibility: hidden;
}
.ls-f-front  { transform: translateZ(50px); }
.ls-f-back   { transform: rotateY(180deg) translateZ(50px); }
.ls-f-right  { transform: rotateY(90deg) translateZ(50px); }
.ls-f-left   { transform: rotateY(-90deg) translateZ(50px); }
.ls-f-bottom { transform: rotateX(-90deg) translateZ(50px); background: #7a003c; }
.ls-f-inside { transform: rotateX(90deg) translateZ(48px); background: radial-gradient(circle, #fff3c4 0%, #ffb3d6 60%, #d40068 100%); }

.ls-lid {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: lsLid 2.4s ease-in-out infinite;
}
@keyframes lsLid {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-38px) rotateZ(-6deg); }
}
.ls-lid-top {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 110px;
  height: 110px;
  transform: rotateX(90deg) translateZ(68px);
  background:
    linear-gradient(90deg, transparent 42%, #ffd36e 42%, #f4b93a 58%, transparent 58%),
    linear-gradient(0deg, transparent 42%, #ffd36e 42%, #f4b93a 58%, transparent 58%),
    linear-gradient(145deg, #ff86c1 0%, #ff2d8f 60%, #c20062 100%);
}
.ls-lid-side {
  position: absolute;
  left: -5px;
  top: 41px;
  width: 110px;
  height: 18px;
  background:
    linear-gradient(90deg, transparent 42%, #ffd36e 42%, #f4b93a 58%, transparent 58%),
    linear-gradient(180deg, #ff4fa3, #c20062);
}
.ls-ls-1 { transform: translateY(-59px) translateZ(55px); }
.ls-ls-2 { transform: translateY(-59px) rotateY(180deg) translateZ(55px); }
.ls-ls-3 { transform: translateY(-59px) rotateY(90deg) translateZ(55px); }
.ls-ls-4 { transform: translateY(-59px) rotateY(-90deg) translateZ(55px); }

.ls-sparkle {
  position: absolute;
  color: #ffd36e;
  font-size: 18px;
  animation: lsTwinkle 1.8s ease-in-out infinite;
}
@keyframes lsTwinkle {
  0%, 100% { transform: scale(0.6) rotate(0deg); opacity: 0.4; }
  50%      { transform: scale(1.2) rotate(20deg); opacity: 1; }
}

.ls-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffd36e;
  margin-bottom: 8px;
}

/* 3D headline — shimmering face; the extrusion is stacked drop-shadows
   (a pseudo-element would be clipped into the gradient text itself) */
.ls-title {
  position: relative;
  margin: 0 0 12px;
  filter:
    drop-shadow(1px 1px 0 #7a0040) drop-shadow(1px 1px 0 #62003a)
    drop-shadow(1px 1px 0 #4e002d) drop-shadow(1px 1px 0 #3a0021)
    drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55));
  font-size: clamp(34px, 7vw, 54px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, #fff 0%, #ffd36e 25%, #ff7ac0 50%, #fff 75%, #ffd36e 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lsTextShimmer 3.5s linear infinite, lsTitleFloat 4s ease-in-out infinite;
}
@keyframes lsTitleFloat {
  0%, 100% { transform: translateY(0) rotateX(0deg); }
  50%      { transform: translateY(-4px) rotateX(8deg); }
}

.ls-sub {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  max-width: 400px;
  margin: 0 auto 18px;
}

.ls-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}
.ls-chips span {
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 211, 110, 0.4);
  animation: lsChipIn 0.6s cubic-bezier(0.34, 1.6, 0.5, 1) backwards;
}
.ls-chips span:nth-child(1) { animation-delay: 0.45s; }
.ls-chips span:nth-child(2) { animation-delay: 0.6s; }
.ls-chips span:nth-child(3) { animation-delay: 0.75s; }
@keyframes lsChipIn { from { opacity: 0; transform: translateY(14px) scale(0.7); } }

.ls-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 220px;
  height: 52px;
  padding: 0 28px;
  border: none;
  border-radius: 50px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(90deg, #ff2d95, #ff4fb0, #ff2d95);
  background-size: 200% 100%;
  box-shadow: 0 12px 30px rgba(255, 0, 127, 0.5);
  animation: lsTextShimmer 4s linear infinite;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ls-cta:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 16px 40px rgba(255, 0, 127, 0.6); }

/* Builder pages while on hold: hide the page, show only the popup */
html.ls-page-blocked body > *:not(.ls-modal) { visibility: hidden !important; }
html.ls-page-blocked body { overflow: hidden !important; }
html.ls-page-blocked .ls-close { display: none; }

/* ── Sparkles (light) theme ── */
.ls-sparkles .ls-veil { background: linear-gradient(180deg, rgba(255, 238, 246, 0.5) 0%, rgba(255, 228, 240, 0.62) 100%); }
.ls-sparkles .ls-veil::after { background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.25) 45%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.25) 55%, transparent 100%); }
.ls-sparkles .ls-tag {
  color: #3d1a2e;
  background: linear-gradient(145deg, #fff 0%, #fff0f7 60%, #ffe1ee 100%);
  border-color: #ff4fa3;
  box-shadow: 0 18px 40px rgba(255, 0, 127, 0.25), 0 0 24px rgba(255, 79, 163, 0.3);
}
.ls-sparkles .ls-tag-eyebrow { color: #d40068; }
.ls-sparkles .ls-tag-title { background-image: linear-gradient(90deg, #d40068 0%, #ff4fa3 35%, #c99a2e 60%, #d40068 85%); }
.ls-sparkles .ls-tag-hint { color: rgba(61, 26, 46, 0.7); }

.ls-modal.ls-sparkles .ls-backdrop { background: radial-gradient(ellipse at 50% 40%, rgba(255, 190, 220, 0.75) 0%, rgba(60, 10, 35, 0.85) 75%); }
.ls-modal.ls-sparkles .ls-card {
  color: #3d1a2e;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 79, 163, 0.22) 0%, transparent 70%),
    linear-gradient(170deg, #fff 0%, #fff4f9 60%, #ffe8f2 100%);
  border-color: #ff9ccc;
}
.ls-modal.ls-sparkles .ls-close { color: #3d1a2e; border-color: rgba(61, 26, 46, 0.2); background: rgba(255, 79, 163, 0.08); }
.ls-modal.ls-sparkles .ls-eyebrow { color: #d40068; }
.ls-modal.ls-sparkles .ls-title { background-image: linear-gradient(90deg, #d40068 0%, #ff4fa3 25%, #c99a2e 50%, #ff4fa3 75%, #d40068 100%); }
.ls-modal.ls-sparkles .ls-title {
  filter:
    drop-shadow(1px 1px 0 #ffb3d6) drop-shadow(1px 1px 0 #ffa3ce)
    drop-shadow(1px 1px 0 #ff93c5) drop-shadow(1px 1px 0 #ff83bd)
    drop-shadow(0 10px 14px rgba(255, 0, 127, 0.25));
}
.ls-modal.ls-sparkles .ls-sub { color: rgba(61, 26, 46, 0.75); }
.ls-modal.ls-sparkles .ls-chips span { background: #fff; border-color: #ff9ccc; color: #3d1a2e; }

/* ── Small screens ── */
@media (max-width: 600px) {
  .ls-band     { --w: 20px; }
  .ls-glint    { font-size: 12px; }
  .ls-bow { scale: 0.75; }
  /* shorter tails and string so the tag still rides high over the artwork */
  .ls-tail   { height: 84px; }
  .ls-string { height: 46px; }
  .ls-tag { top: 44px; min-width: 180px; padding: 11px 16px 10px; }
  .ls-tag-title { font-size: 20px; }
  .ls-card { padding: 30px 20px 24px; border-radius: 22px; }
  .ls-scene { transform: scale(0.85); margin-top: -6px; margin-bottom: 0; }
  .ls-sub { font-size: 14px; }
}

/* ── Respect reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .ls-bow-inner, .ls-tail, .ls-tag-swing, .ls-tag-title, .ls-tag-hint,
  .ls-rays, .ls-confetti i, .ls-box, .ls-lid, .ls-glow, .ls-sparkle,
  .ls-title, .ls-cta, .ls-chips span { animation: none !important; }
  .ls-band, .ls-bow, .ls-tag-wrap, .ls-card { transition: none !important; }
  .ls-glint, .ls-confetti, .ls-veil::after { display: none; }
}