/* ─────────────────────────────────────────────────────────────────────────────
   e20-colorshift.css — scroll-driven color temperature and accent shifts
   Depends on: e20-colorshift.js (updates CSS vars on :root)
───────────────────────────────────────────────────────────────────────────── */

/* ── Smooth color transitions on root vars ── */
:root {
  --accent-l:    93%;
  --accent-c:    0.27;
  --accent-h:    122;
  --blue-l:      74%;
  --blue-c:      0.20;
  --blue-h:      246;

  /* Computed accent from animated vars */
  --lime-shift:  oklch(var(--accent-l) var(--accent-c) var(--accent-h));
  --blue-shift:  oklch(var(--blue-l)   var(--blue-c)   var(--blue-h));
}

/* Elements that respond to color shift */
.site-nav,
.btn-primary,
.feature-num,
.stat-num,
.live-dot,
.section-dot.dot-active {
  transition:
    background-color 0.8s cubic-bezier(0.23, 1, 0.32, 1),
    border-color     0.8s cubic-bezier(0.23, 1, 0.32, 1),
    color            0.8s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow       0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── Section color themes — JS adds data-section to body ── */

/* Hero / default — lime dominant */
body[data-section="hero"] {
  --accent-h: 122;
  --accent-c: 0.27;
}

/* How it works — cooler, more blue */
body[data-section="how"] {
  --accent-h: 200;
  --accent-c: 0.22;
}

/* Picks — warm amber shift */
body[data-section="picks"] {
  --accent-h: 85;
  --accent-c: 0.25;
}

/* Events — deeper, violet-adjacent */
body[data-section="events"] {
  --accent-h: 155;
  --accent-c: 0.24;
}

/* Features — back to lime but brighter */
body[data-section="features"] {
  --accent-h: 122;
  --accent-c: 0.29;
  --accent-l: 95%;
}

/* Categories — aqua/teal */
body[data-section="categories"] {
  --accent-h: 170;
  --accent-c: 0.26;
}

/* Waitlist — full lime energy */
body[data-section="waitlist"] {
  --accent-h: 118;
  --accent-c: 0.30;
  --accent-l: 94%;
}

/* ── Apply shifted colors to key elements ── */
.hero h1 .line-2,
.feature-num,
.stat-num {
  color: oklch(var(--accent-l) var(--accent-c) var(--accent-h));
  transition: color 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.section-dot.dot-active {
  background: oklch(var(--accent-l) var(--accent-c) var(--accent-h));
  box-shadow: 0 0 8px 2px oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.4);
}

/* ── Reduced motion — no color transitions ── */
@media (prefers-reduced-motion: reduce) {
  :root,
  .site-nav,
  .btn-primary,
  .feature-num,
  .stat-num {
    transition: none !important;
  }
}