/* =========================================================================
   ConversionClub — Effects: gradients, glow, shadows, motion
   Cinematic depth. The brand gradient appears only on: one headline word,
   the primary CTA, and light pulses. Never fill a large block with it.
   ========================================================================= */

:root {
  /* ---- Brand gradient (135°) ---- */
  --cc-gradient-brand:       linear-gradient(135deg, #4F7CFF 0%, #9B6BFF 100%); /* @kind color */
  --cc-gradient-brand-hover: linear-gradient(135deg, #6B90FF 0%, #B085FF 100%); /* @kind color */
  --cc-gradient-brand-soft:  linear-gradient(135deg, rgba(79,124,255,0.16) 0%, rgba(155,107,255,0.16) 100%); /* @kind color */
  /* text-clip helper value (apply with background-clip:text) */
  --gradient-brand: var(--cc-gradient-brand); /* @kind color */

  /* ---- Page background: radial glow at top over the base floor ---- */
  --cc-bg-radial: radial-gradient(120% 78% at 50% -8%, #1A202F 0%, #131826 42%, #0F121B 72%); /* @kind color */
  /* ambient accent bloom used behind heroes / focal points */
  --cc-bloom-primary:   radial-gradient(closest-side, rgba(79,124,255,0.30), rgba(79,124,255,0) 72%);  /* @kind color */
  --cc-bloom-secondary: radial-gradient(closest-side, rgba(155,107,255,0.26), rgba(155,107,255,0) 72%);/* @kind color */

  /* ---- Glow (spec token) & derivatives ---- */
  --cc-glow:        rgba(79,124,255,0.45); /* @kind color */
  --cc-glow-soft:   rgba(79,124,255,0.28); /* @kind color */
  --cc-glow-violet: rgba(155,107,255,0.40);/* @kind color */

  /* ---- Elevation shadows (dark UI: deep, low-spread, cool) ---- */
  --cc-shadow-xs:  0 1px 2px rgba(0,0,0,0.40);   /* @kind shadow */
  --cc-shadow-sm:  0 2px 8px rgba(0,0,0,0.36);   /* @kind shadow */
  --cc-shadow-md:  0 10px 24px rgba(0,0,0,0.42); /* @kind shadow */
  --cc-shadow-lg:  0 24px 60px rgba(0,0,0,0.55); /* @kind shadow */
  --cc-shadow-xl:  0 40px 120px rgba(0,0,0,0.60);/* @kind shadow */

  /* card resting: soft drop + faint top inner highlight for the 1px lip */
  --cc-shadow-card:
      0 1px 0 rgba(244,246,251,0.05) inset,
      0 12px 32px rgba(0,0,0,0.40); /* @kind shadow */
  /* card hover: lift + a whisper of accent glow */
  --cc-shadow-card-hover:
      0 1px 0 rgba(244,246,251,0.07) inset,
      0 20px 48px rgba(0,0,0,0.50),
      0 0 40px rgba(79,124,255,0.10); /* @kind shadow */

  /* primary CTA glow (resting / hover) */
  --cc-glow-cta:       0 8px 24px rgba(79,124,255,0.34), 0 2px 6px rgba(79,124,255,0.30); /* @kind shadow */
  --cc-glow-cta-hover: 0 10px 34px rgba(79,124,255,0.50), 0 0 0 1px rgba(155,107,255,0.35); /* @kind shadow */

  /* focus ring */
  --cc-ring-focus: 0 0 0 3px rgba(79,124,255,0.45); /* @kind shadow */

  /* ---- Motion : settle easing + 140/220/420ms durations ---- */
  --cc-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);  /* @kind other */
  --cc-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --cc-dur-fast:   140ms; /* @kind other */
  --cc-dur-base:   220ms; /* @kind other */
  --cc-dur-slow:   420ms; /* @kind other */
  --cc-transition: 220ms cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */

  /* ---- Blur (glass overlays: sticky nav, modals) ---- */
  --cc-blur-glass: saturate(140%) blur(16px); /* @kind other */

  /* semantic */
  --shadow-card:       var(--cc-shadow-card);       /* @kind shadow */
  --shadow-card-hover: var(--cc-shadow-card-hover); /* @kind shadow */
  --glow-cta:          var(--cc-glow-cta);          /* @kind shadow */
  --ring-focus:        var(--cc-ring-focus);        /* @kind shadow */
  --ease:              var(--cc-ease-out);          /* @kind other */
}