/* ============================================================
   InteractiveWish — Cinematic Scratch Card Landing CSS
   Landing #110 | Prefix: csc-
   Extends universal-landing.css
   ============================================================ */

/* ── FILM REELS (hero) ─────────────────────────────────────── */
.csc-reels-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.csc-reel-item {
  position: absolute;
  animation: csc-drift linear infinite;
  opacity: 0;
  user-select: none;
  font-style: normal;
}
@keyframes csc-drift {
  0%   { opacity: 0; transform: translateY(0) rotate(-6deg) scale(0.75); }
  8%   { opacity: 0.7; }
  50%  { transform: translateY(-55vh) rotate(3deg) scale(1.0); }
  92%  { opacity: 0.45; }
  100% { opacity: 0; transform: translateY(-110vh) rotate(-2deg) scale(1.1); }
}

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

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

/* ── Emotional close block ──────────────────────────────────── */
.csc-emotional-close {
  background: linear-gradient(135deg, rgba(255,214,0,0.14) 0%, rgba(255,171,0,0.10) 100%);
  border-color: rgba(255,214,0,0.30);
}

/* ── CTA primary ────────────────────────────────────────────── */
.ulp-cta--primary {
  background: linear-gradient(135deg, #ffd600 0%, #ffab00 100%);
  color: #1a1400;
  box-shadow: 0 4px 20px rgba(255,214,0,0.40);
}
.ulp-cta--primary:hover {
  background: linear-gradient(135deg, #f9c200 0%, #e69900 100%);
}

/* ── Step number — amber for even ───────────────────────────── */
.ulp-how-step:nth-child(2n) .ulp-how-step-num {
  background: linear-gradient(135deg, #ffab00 0%, #ffd600 100%);
  color: #1a1400;
}

/* ── Nav CTA ────────────────────────────────────────────────── */
.ulp-nav-cta--primary {
  background: linear-gradient(135deg, #ffd600 0%, #ffab00 100%);
  color: #1a1400;
  box-shadow: 0 2px 10px rgba(255,214,0,0.38);
}

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

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

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

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