/* ============================================================
   EFFECTS — LeaderHouse
   Radii, shadows, gradients, grain, glow, seam.
   NEVER flat-color slabs: every surface gets grain + a gradient.
   Product PNGs get a GLOW (parent div), never a hard drop shadow.
   Dark sections get a red/purple glowing top seam.
   ============================================================ */
:root {
  /* --- Radii --- */
  --lh-radius:    16px; /* @kind radius */
  --lh-radius-sm: 12px; /* @kind radius */
  --lh-radius-xs: 8px;  /* @kind radius */
  --lh-radius-pill: 100px; /* @kind radius */

  /* --- Elevation (soft, diffuse — never harsh) --- */
  --lh-shadow:       0 1px 2px rgba(16,18,21,.04), 0 8px 28px rgba(16,18,21,.06); /* @kind shadow */
  --lh-shadow-hover: 0 2px 6px rgba(16,18,21,.06), 0 18px 50px rgba(16,18,21,.12); /* @kind shadow */
  --lh-shadow-card:  0 1px 2px rgba(16,18,21,.03), 0 10px 30px rgba(16,18,21,.06); /* @kind shadow */
  --lh-shadow-dark:  0 24px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(226,59,78,.12); /* @kind shadow */

  /* --- CTA button --- */
  --lh-cta-gradient: linear-gradient(135deg, #f0556a 0%, #e23b4e 50%, #b8293b 100%); /* @kind color */
  --lh-cta-shadow:   0 8px 24px rgba(226,59,78,.32), inset 0 1px 0 rgba(255,255,255,.2); /* @kind shadow */
  --lh-cta-shadow-dark: 0 0 0 1px rgba(255,255,255,.06), 0 10px 40px rgba(226,59,78,.45); /* @kind shadow */

  /* --- Gold (value/price/credit) --- */
  --lh-gold-gradient:  linear-gradient(180deg, #fff5d6 0%, #ffd54a 55%, #f7b733 100%); /* @kind color */
  --lh-credit-gradient: linear-gradient(135deg, #ffe9a0 0%, #ffd54a 55%, #f7b733 100%); /* @kind color */

  /* --- Dark-section top seam (red -> purple glow) --- */
  --lh-seam: linear-gradient(90deg, transparent, rgba(226,59,78,.6), rgba(120,80,255,.5), transparent); /* @kind color */

  /* --- Section backgrounds (grain + gradient, never flat) --- */
  --lh-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); /* @kind other */
  --lh-grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='lg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23lg)' opacity='0.025'/%3E%3C/svg%3E"); /* @kind other */

  --lh-bg-light: linear-gradient(160deg, #ffffff 0%, #fafbfc 55%, #f8f9fb 100%); /* @kind color */
  --lh-bg-tint-grad: radial-gradient(900px 500px at 90% 0%, rgba(226,59,78,.05) 0%, transparent 60%), linear-gradient(150deg, #f8f9fb 0%, #eff1f4 55%, #e9ebef 100%); /* @kind color */

  /* Hero dark: red glow rising from TOP */
  --lh-bg-hero: radial-gradient(800px 460px at 50% -12%, rgba(226,59,78,.22), transparent 58%), radial-gradient(620px 440px at 88% 12%, rgba(120,80,255,.12), transparent 55%), linear-gradient(180deg, #15171c 0%, #0b0c10 100%); /* @kind color */
  /* Dark section: red glow rising from BOTTOM */
  --lh-bg-dark: radial-gradient(800px 480px at 50% 110%, rgba(226,59,78,.26), transparent 60%), radial-gradient(600px 400px at 15% 10%, rgba(120,80,255,.14), transparent 55%), linear-gradient(180deg, #0b0c10 0%, #15171c 100%); /* @kind color */
  /* Pitch section: red glow strongest at top, purple bottom-right */
  --lh-bg-pitch: radial-gradient(700px 400px at 50% 0%, rgba(226,59,78,.35), transparent 60%), radial-gradient(600px 400px at 80% 100%, rgba(120,80,255,.2), transparent 55%), linear-gradient(180deg, #15171c, #0b0c10); /* @kind color */

  /* Product glow (rises from bottom edge behind a transparent PNG) */
  --lh-product-glow: radial-gradient(ellipse 70% 90% at 50% 100%, rgba(255,200,90,.32) 0%, rgba(255,140,80,.24) 18%, rgba(226,59,78,.26) 40%, rgba(120,80,255,.14) 65%, transparent 92%); /* @kind color */

  /* --- Motion --- */
  --lh-ease:      cubic-bezier(.18,.89,.32,1.28); /* @kind other */
  --lh-transition: transform .15s ease, box-shadow .2s ease; /* @kind other */
}