/* animations.css — WebGL smoke, spotlight cards, neon button, card glows */

/* ─── Smoke Canvas ────────────────────────────────────────────────────────── */
.smoke-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Upscale the half-res WebGL output */
  image-rendering: auto;
  pointer-events: none;
  z-index: 0;
  /* Blend additively with existing atmosphere so colors merge */
  mix-blend-mode: screen;
}

/* ─── Spotlight Cards ─────────────────────────────────────────────────────── */
/*
  Applied via JS (GlobalEffects).
  Uses ::after + CSS vars --sx / --sy (px from card top-left corner).
  isolation: isolate keeps z-index: -1 within the card's stacking context —
  the glow sits above the card background but behind all content.
*/
.spotlight-card {
  --sx: -9999px;
  --sy: -9999px;
  isolation: isolate;
}

.spotlight-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    360px circle at var(--sx) var(--sy),
    color-mix(in oklab, var(--accent), transparent 82%),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.38s ease;
  pointer-events: none;
  border-radius: inherit;
  z-index: -1;
}

.spotlight-card:hover::after {
  opacity: 1;
}

/* ─── Neon Button Shimmer ─────────────────────────────────────────────────── */
/*
  Adds a light shimmer sweep over .btn-primary on hover.
  position:relative + overflow:hidden added here so existing styles aren't touched.
*/
.btn-primary {
  position: relative !important;
  overflow: hidden !important;
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 28%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 72%
  );
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
  z-index: 1;
}

.btn-primary:hover::after {
  animation: btn-shimmer 0.52s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes btn-shimmer {
  to { transform: translateX(220%) skewX(-18deg); }
}

/* Stronger glow on hover */
.btn-primary:hover {
  box-shadow:
    0 8px 32px color-mix(in oklab, var(--accent), transparent 52%),
    0 0 0 1px color-mix(in oklab, var(--accent), transparent 74%),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* ─── Enhanced card hover transitions ────────────────────────────────────── */
.pain-card {
  transition: border-color 0.3s ease, transform 0.22s ease, box-shadow 0.3s ease;
}
.pain-card:hover {
  border-color: color-mix(in oklab, var(--accent), transparent 68%) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  transform: translateY(-2px);
}

.diff-card {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.22s ease;
}
.diff-card:hover {
  border-color: color-mix(in oklab, var(--accent), transparent 66%) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}

.pkg-card:not(.featured) {
  transition: border-color 0.3s ease, transform 0.22s ease, box-shadow 0.3s ease;
}
.pkg-card:not(.featured):hover {
  border-color: color-mix(in oklab, var(--accent), transparent 62%) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32);
}

/* ─── Before/After column spotlight ──────────────────────────────────────── */
.ba-col {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.ba-after.spotlight-card:hover::after {
  background: radial-gradient(
    360px circle at var(--sx) var(--sy),
    color-mix(in oklab, var(--success), transparent 86%),
    transparent 40%
  );
}

/* ─── Reduce smoke on low-power/prefer-reduced-motion ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .smoke-canvas { display: none; }
  .btn-primary:hover::after { animation: none; }
  .spotlight-card::after { transition: none; }
}