/* ─────────────────────────────────────────────────────────────────────────────
   e15-specular.css — cursor-tracked light reflection across cards + surfaces
   Depends on: e15-specular.js (sets --spec-x, --spec-y per card)
───────────────────────────────────────────────────────────────────────────── */

/* ── Specular reflection layer on ev-cards ── */
.ev-card,
.pick-card,
.feature-card,
.category-tile {
  position: relative;
  isolation: isolate;
}

.ev-card::before,
.pick-card::before,
.feature-card::before,
.category-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle 140px at var(--spec-x, -100px) var(--spec-y, -100px),
    oklch(100% 0 0 / 0.07) 0%,
    oklch(93% 0.27 122 / 0.03) 40%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 1;
}

.ev-card.spec-hovered::before,
.pick-card.spec-hovered::before,
.feature-card.spec-hovered::before,
.category-tile.spec-hovered::before {
  opacity: 1;
}

/* ── Edge highlight — border glow that follows cursor ── */
.ev-card::after,
.pick-card::after,
.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle 80px at var(--spec-x, 50%) var(--spec-y, 50%),
    oklch(93% 0.27 122 / 0.15) 0%,
    transparent 60%
  );
  mask-image: linear-gradient(black, black);
  mask-composite: subtract;
  /* border glow via outline hack */
  box-shadow: inset 0 0 0 1px oklch(93% 0.27 122 / 0);
  transition:
    box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    opacity    0.3s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 2;
  opacity: 0;
}

.ev-card.spec-hovered::after,
.pick-card.spec-hovered::after,
.feature-card.spec-hovered::after {
  box-shadow: inset 0 0 0 1px oklch(93% 0.27 122 / 0.25);
  opacity: 1;
}

/* ── Phone frame specular — premium hardware feel ── */
.phone-mockup,
.app-preview {
  position: relative;
}

.phone-mockup::before,
.app-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle 200px at var(--spec-x, 50%) var(--spec-y, -30%),
    oklch(100% 0 0 / 0.06) 0%,
    transparent 65%
  );
  z-index: 10;
  transition: background 0.15s linear;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .ev-card::before, .ev-card::after,
  .pick-card::before, .pick-card::after,
  .feature-card::before, .feature-card::after,
  .category-tile::before,
  .phone-mockup::before, .app-preview::before {
    display: none;
  }
}