/* ============================================================
   InteractiveWish — Celebration Scratch Cards Landing CSS
   Landing #111 | Prefix: csc-
   Extends universal-landing.css
   ============================================================ */

/* ── SPARKLES (hero) ────────────────────────────────────────── */
.csc-sparkles-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.csc-sparkle {
  position: absolute;
  animation: csc-float linear infinite;
  opacity: 0;
  user-select: none;
}
@keyframes csc-float {
  0%   { opacity: 0; transform: translateY(0) rotate(0deg) scale(0.7); }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-110vh) rotate(360deg) scale(1.1); }
}

/* ── HERO title em — gold ───────────────────────────────────── */
.ulp-hero-title em {
  background: linear-gradient(135deg, #ffd600 0%, #ff6d00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Occasions cards ────────────────────────────────────────── */
.csc-occasion-card {
  background: #6a1aad;
  border-color: rgba(106,26,173,0.6);
  color: #fff;
}
.csc-occasion-card h3 { color: #fff; }
.csc-occasion-card p  { color: rgba(255,255,255,0.85); }

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

/* ── Emotional close block ──────────────────────────────────── */
.csc-emotional-close {
  background: linear-gradient(135deg, rgba(106,26,173,0.2) 0%, rgba(255,214,0,0.12) 100%);
  border-color: rgba(255,214,0,0.2);
}

/* ── CTA primary — purple to gold ───────────────────────────── */
.ulp-cta--primary {
  background: linear-gradient(135deg, #6a1aad 0%, #ffd600 100%);
  color: #1a0a2e;
  box-shadow: 0 4px 20px rgba(106,26,173,0.40);
}
.ulp-cta--primary:hover {
  background: linear-gradient(135deg, #4a0e80 0%, #f9a825 100%);
}

/* ── How step numbers ───────────────────────────────────────── */
.ulp-how-step .ulp-how-step-num {
  background: linear-gradient(135deg, #6a1aad 0%, #9c4dcc 100%);
}
.ulp-how-step:nth-child(2n) .ulp-how-step-num {
  background: linear-gradient(135deg, #ffd600 0%, #ff6d00 100%);
  color: #1a0a2e;
}

/* ── Nav CTA ────────────────────────────────────────────────── */
.ulp-nav-cta--primary {
  background: linear-gradient(135deg, #6a1aad 0%, #ffd600 100%);
  color: #1a0a2e;
  box-shadow: 0 2px 10px rgba(106,26,173,0.35);
}

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

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

/* ── Idea card borders ──────────────────────────────────────── */
.ulp-idea-card { border-left-color: #6a1aad; }
.ulp-idea-card:nth-child(2n) { border-left-color: #ffd600; }

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