/* ─────────────────────────────────────────────────────────────────────────────
   e18-velocity.css — scroll velocity skew + momentum blur
   Depends on: e18-velocity.js (sets --skew-y, --blur-amount on body)
───────────────────────────────────────────────────────────────────────────── */

/* Apply velocity skew to the page content wrapper */
main,
.page-content,
#content {
  will-change: transform;
  transform: skewY(var(--scroll-skew, 0deg));
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Cards and images get a complementary counter-skew to stay level */
.ev-card,
.pick-card,
.category-tile,
.phone-mockup,
.app-preview {
  transform: skewY(calc(var(--scroll-skew, 0deg) * -1));
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Combined with existing hover transforms — don't override */
.ev-card:hover,
.pick-card:hover {
  transform: skewY(calc(var(--scroll-skew, 0deg) * -1)) translateY(-6px) scale(1.015);
}

/* ── Velocity blur on fast scroll — Chrome/Edge only via filter ── */
body.fast-scroll main,
body.fast-scroll .page-content {
  filter: blur(var(--scroll-blur, 0px));
}

/* ── Section parallax depth offsets ── */
.hero-content {
  transform: translateY(calc(var(--parallax-y, 0px) * 0.3));
  will-change: transform;
}

.hero-bg-canvas,
.hero-canvas {
  transform: translateY(calc(var(--parallax-y, 0px) * 0.15));
  will-change: transform;
}

/* ── Reduced motion — zero everything ── */
@media (prefers-reduced-motion: reduce) {
  main,
  .page-content,
  #content {
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
  }
  .ev-card,
  .pick-card,
  .category-tile,
  .phone-mockup,
  .app-preview {
    transform: none !important;
  }
  .hero-content,
  .hero-bg-canvas,
  .hero-canvas {
    transform: none !important;
  }
}