/*! OnoLeads visual-styles layer - cached, page-independent.
 *  Loaded ONLY when an admin picks a non-default style OR any motion, via
 *  <link href="/lp-visual-styles.css"> in landing-page-layout.tsx.
 *
 *  Rules honored (docs/claude/architecture.md - visual-styles module):
 *   - Every color derives from the editor's brand vars (--lp-primary/--lp-dark)
 *     via color-mix. NO fixed brand hex.
 *   - Scoped entirely under #lp-root[data-page-style] / [data-motion]. Defaults
 *     (default/off) match nothing -> current pages render byte-identically.
 *   - NEVER puts transform/filter/backdrop-filter/perspective/will-change/contain
 *     on #lp-root or #main-content (they enclose every fixed overlay). Transforms
 *     live only on leaf cards and on #main-content section wrappers, which never
 *     contain a fixed element.
 *   - Never touches the lead form ([data-section-type="form"] excluded from
 *     motion; no rule sets pointer-events / visibility / opacity on inputs).
 *   - Mobile-first: only cheap properties (background, border, radius, gradient,
 *     letter-spacing, opacity/transform). No backdrop-filter introduced.
 *   - !important is used to beat Tailwind's own utilities on the target props
 *     (same precedent as lp-brand-overrides.css). Card box-shadow is NOT a hook
 *     here (a cascade-layer rule wins it); depth is expressed via background
 *     contrast + borders + radius instead.
 *   Bump LP_VISUAL_CSS_VERSION in landing-page-layout.tsx when editing this file.
 */

/* ============================================================
   MOTION  (independent axis: subtle + cinematic)
   Prestate paints immediately, only when the visitor has NOT asked for reduced
   motion. Hero (LCP) and form (lead capture) are excluded. Sections slide/fade
   in on scroll when the JS adds [data-lp-in]; a JS safety net guarantees they
   are never left hidden.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  #lp-root[data-motion="subtle"]   #main-content > [data-section-type]:not([data-section-type="hero"]):not([data-section-type="form"]):not([data-lp-in]),
  #lp-root[data-motion="cinematic"] #main-content > [data-section-type]:not([data-section-type="hero"]):not([data-section-type="form"]):not([data-lp-in]) {
    opacity: 0;
    transform: translateY(30px);
  }
  /* cinematic travels further and adds a subtle rise-in scale for a richer feel */
  #lp-root[data-motion="cinematic"] #main-content > [data-section-type]:not([data-section-type="hero"]):not([data-section-type="form"]):not([data-lp-in]) {
    transform: translateY(46px) scale(.982);
  }
  #lp-root[data-motion="subtle"]   #main-content > [data-section-type][data-lp-in],
  #lp-root[data-motion="cinematic"] #main-content > [data-section-type][data-lp-in] {
    opacity: 1;
    transform: none;
    transition:
      opacity .7s var(--ease-out-expo, cubic-bezier(.16,1,.3,1)),
      transform .7s var(--ease-out-expo, cubic-bezier(.16,1,.3,1));
  }
  #lp-root[data-motion="cinematic"] #main-content > [data-section-type][data-lp-in] {
    transition:
      opacity .85s var(--ease-spring, cubic-bezier(.34,1.4,.64,1)),
      transform .85s var(--ease-spring, cubic-bezier(.34,1.4,.64,1));
  }
}

/* ================================================================
   STYLE: אקדמי / editorial  — prestige. A clean, calm paper ground
   (the busy mesh is dropped), sharp corners, hairline-defined cards,
   tighter headings. Quiet on purpose, but clearly cleaner.
   ================================================================ */
#lp-root[data-page-style="editorial"] { --ease-out-expo: cubic-bezier(.22,1,.36,1); }
#lp-root[data-page-style="editorial"] .bg-mesh-warm,
#lp-root[data-page-style="editorial"] .bg-mesh-light {
  background-image: none !important;
  background-color: color-mix(in srgb, var(--lp-primary) 3%, #fbfaf7) !important;
}
#lp-root[data-page-style="editorial"] .card-premium {
  border-radius: 6px !important;
  border: 1px solid color-mix(in srgb, var(--lp-dark) 15%, transparent) !important;
}
#lp-root[data-page-style="editorial"] #main-content section h2 {
  letter-spacing: -.02em;
  font-weight: 800;
}
#lp-root[data-page-style="editorial"] :is(button, a, [role="button"], input[type="submit"]).bg-\[\#B8D900\] {
  border-radius: 6px !important;
}

/* ================================================================
   STYLE: יוקרה / premium  — depth. A cool, expensive canvas so the
   bright cards float; large soft radius + a defining light border;
   gradient CTAs. Depth via contrast (card box-shadow is not a hook).
   ================================================================ */
#lp-root[data-page-style="premium"] {
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.4,.64,1);
}
#lp-root[data-page-style="premium"] .bg-mesh-warm {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--lp-dark) 4%, #f5f6f9),
    color-mix(in srgb, var(--lp-dark) 7%, #edf0f5)) !important;
}
#lp-root[data-page-style="premium"] .bg-mesh-light {
  background-image: none !important;
  background-color: color-mix(in srgb, var(--lp-primary) 4%, #f6f7fa) !important;
}
#lp-root[data-page-style="premium"] .card-premium {
  border-radius: 24px !important;
  border: 1px solid color-mix(in srgb, var(--lp-dark) 9%, transparent) !important;
}
#lp-root[data-page-style="premium"] :is(button, a, [role="button"], input[type="submit"]).bg-\[\#B8D900\] {
  border-radius: 16px !important;
  background-image: linear-gradient(135deg,
    color-mix(in srgb, var(--lp-primary) 90%, #fff),
    var(--lp-primary) 55%,
    color-mix(in srgb, var(--lp-primary) 80%, var(--lp-dark))) !important;
}
#lp-root[data-page-style="premium"] #main-content section h2 { letter-spacing: -.01em; }

/* ================================================================
   STYLE: אירוע / event  — momentum. Warm, lime-energized bands, a
   brand accent bar on every card, bolder tighter headings, punchy
   corners. The most alive of the three.
   ================================================================ */
#lp-root[data-page-style="event"] {
  --ease-out-expo: cubic-bezier(.2,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}
#lp-root[data-page-style="event"] .bg-mesh-warm {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--lp-primary) 11%, #fff),
    color-mix(in srgb, var(--lp-primary) 3%, #fff)) !important;
}
#lp-root[data-page-style="event"] .bg-mesh-light {
  background-image: none !important;
  background-color: color-mix(in srgb, var(--lp-primary) 6%, #fff) !important;
}
#lp-root[data-page-style="event"] .card-premium {
  border-radius: 14px !important;
  border-top: 4px solid var(--lp-primary) !important;
}
#lp-root[data-page-style="event"] #main-content section h2 {
  letter-spacing: -.025em;
  font-weight: 800;
}
#lp-root[data-page-style="event"] :is(button, a, [role="button"], input[type="submit"]).bg-\[\#B8D900\] {
  border-radius: 12px !important;
}

/* ================================================================
   Belt-and-suspenders: under reduced motion, never hide anything.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  #lp-root[data-motion] #main-content > [data-section-type] {
    opacity: 1 !important;
    transform: none !important;
  }
}