/* ============================================================
   InteractiveWish — Gender Reveal Scratch Card Landing CSS
   Landing #105 | Prefix: glp-
   Extends universal-landing.css
   ============================================================ */

/* ── CONFETTI BACKGROUND (hero) ────────────────────────────── */
.glp-confetti-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.glp-confetti-dot {
  position: absolute;
  border-radius: 50%;
  animation: glp-float linear infinite;
  opacity: 0;
}
@keyframes glp-float {
  0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-110vh) rotate(720deg); }
}

/* ── HERO colour accent on title em ────────────────────────── */
.ulp-hero-title em {
  background: linear-gradient(135deg, #f48fb1 0%, #90caf9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Idea card border colour – gender theme ─────────────────── */
.ulp-idea-card {
  border-left-color: #1565c0;
}
.ulp-idea-card:nth-child(2n) {
  border-left-color: #e91e8c;
}

/* ── emotional close block highlight ──────────────────────── */
.glp-emotional-close {
  background: linear-gradient(135deg, rgba(21,101,192,0.15) 0%, rgba(233,30,140,0.15) 100%);
  border-color: rgba(144,202,249,0.25);
}

/* ── Gender colour pills in review ─────────────────────────── */
.ulp-review-mode--pink  { background: rgba(244,143,177,0.2); color: #f48fb1; }
.ulp-review-mode--blue  { background: rgba(144,202,249,0.2); color: #90caf9; }

/* ── CTA primary gradient override (blue→pink) ─────────────── */
.ulp-cta--primary {
  background: linear-gradient(135deg, #1565c0 0%, #e91e8c 100%);
  box-shadow: 0 4px 20px rgba(21,101,192,0.35);
}
.ulp-cta--primary:hover {
  background: linear-gradient(135deg, #0d47a1 0%, #c2185b 100%);
}

/* ── Step number bubble — pink for even, blue for odd ───────── */
.ulp-how-step:nth-child(2n) .ulp-how-step-num {
  background: linear-gradient(135deg, #e91e8c 0%, #c2185b 100%);
}

/* ── Section alt background tweak ───────────────────────────── */
.ulp-section--alt {
  background: #f9faff;
}