/* ============================================================
   InteractiveWish — Love2 You Cards Landing CSS
   Landing #123 | Prefix: l2c-
   Extends universal-landing.css
   ============================================================ */

/* ── PHOTO/CLIPART BG (hero) ────────────────────────────── */
.l2c-photo-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.l2c-photo-item {
  position: absolute;
  animation: l2c-drift linear infinite;
  opacity: 0;
  user-select: none;
}
@keyframes l2c-drift {
  0%   { opacity: 0; transform: translateY(0) scale(0.8) rotate(0deg); }
  8%   { opacity: 0.75; }
  92%  { opacity: 0.45; }
  100% { opacity: 0; transform: translateY(-110vh) scale(1.1) rotate(15deg); }
}

/* ── HERO title em — rose to warm peach ────────────────── */
.ulp-hero-title em {
  background: linear-gradient(135deg, #f48fb1 0%, #ffab91 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Feature cards ───────────────────────────────────────── */
.l2c-feature-card {
  background: #ad1457;
  border-color: rgba(173,20,87,0.6);
  color: #fff;
}
.l2c-feature-card h3 { color: #fff; }
.l2c-feature-card p  { color: rgba(255,255,255,0.85); }

/* ── Benefits on light section ──────────────────────────── */
.l2c-benefit-light {
  background: #fff;
  border: 1px solid rgba(173,20,87,0.14);
  box-shadow: 0 2px 12px rgba(173,20,87,0.08);
}
.l2c-benefit-light h3 { color: var(--ulp-text); }
.l2c-benefit-light p  { color: var(--ulp-text); opacity: 0.75; }
.l2c-benefit-light .ulp-benefit-icon { font-size: 2rem; margin-bottom: 12px; }

/* ── Example card — warm peach accent ───────────────────── */
.l2c-example-card {
  border-left: 4px solid #ffab91;
}

/* ── Emotional close block ──────────────────────────────── */
.l2c-emotional-close {
  background: linear-gradient(135deg, rgba(173,20,87,0.22) 0%, rgba(255,171,145,0.14) 100%);
  border-color: rgba(255,171,145,0.22);
}

/* ── CTA primary — rose to warm peach ───────────────────── */
.ulp-cta--primary {
  background: linear-gradient(135deg, #ad1457 0%, #e91e63 50%, #ff7043 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(173,20,87,0.40);
}
.ulp-cta--primary:hover {
  background: linear-gradient(135deg, #78002e 0%, #880e4f 50%, #e64a19 100%);
}

/* ── How step numbers ───────────────────────────────────── */
.ulp-how-step .ulp-how-step-num {
  background: linear-gradient(135deg, #ad1457 0%, #e91e63 100%);
}
.ulp-how-step:nth-child(2n) .ulp-how-step-num {
  background: linear-gradient(135deg, #ff7043 0%, #ff8a65 100%);
  color: #fff;
}

/* ── Nav CTA ────────────────────────────────────────────── */
.ulp-nav-cta--primary {
  background: linear-gradient(135deg, #ad1457 0%, #e91e63 100%);
  color: #fff;
  box-shadow: 0 2px 10px rgba(173,20,87,0.35);
}

/* ── Eyebrow gradient ───────────────────────────────────── */
.ulp-eyebrow {
  background: linear-gradient(135deg, #f48fb1 0%, #ffab91 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Logo gradient ──────────────────────────────────────── */
.ulp-logo-text {
  background: linear-gradient(135deg, #f48fb1 0%, #ffccbc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Section alt / light ────────────────────────────────── */
.ulp-section--alt   { background: #fce4ec; }
.ulp-section--light { background: #fff3e0; }