/*
  Card Stage — physical-card hover (tilt / scale / lighting).

  Mounted only after card-stage.js adds `.is-card-stage` on `.course-grid`.
  Without JS this file is inert: rest cards stay in course-cards.css.

  Contract (set on the hovered `.course-card`):
    --card-rx --card-ry     rotate, deg
    --card-scale            unitless
    --card-lx --card-ly     specular position from half-vector, %
    --card-nx --card-ny     pointer in [-1, 1], reserved for foil
    --card-spec             Blinn-Phong lobe, 0–1
    --card-fresnel          Schlick edge term, 0–1
    --card-wrap             wrap lighting, 0.5–1
    --card-ndotl            Lambert, 0–1
    --card-shadow-x/y       contact shadow, px
    --card-light-deg        fixed key light azimuth
    --card-wave             1D grating sample, 0–1; foil only

  Finish hooks on the article (template):
    data-finish="press" | "foil"
    Foil splits the existing spec blob; it does not coat the artwork.
*/

.course-grid.is-card-stage .course-card.is-card-stage-ready {
  isolation: isolate;
  transform-origin: center center;
}

.course-grid.is-card-stage .course-card.is-card-stage-live {
  z-index: 8;
  transform: perspective(920px)
    rotateX(var(--card-rx, 0deg))
    rotateY(var(--card-ry, 0deg))
    scale(var(--card-scale, 1));
  transition:
    border-color 0.15s,
    box-shadow 0.35s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.course-grid.is-card-stage .course-card.is-card-stage-lit {
  will-change: transform;
  transition:
    border-color 0.15s,
    box-shadow 0.18s ease,
    transform 0.08s ease-out;
  box-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.1),
    var(--card-shadow-x, 8px) var(--card-shadow-y, 14px) 22px
      rgb(0 0 0 / calc(0.12 + var(--card-ndotl, 0) * 0.08));
}

/* Coating: key-light specular + grazing Fresnel + warm wrap. */
.course-grid.is-card-stage .course-card.is-card-stage-ready::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: overlay;
  background:
    radial-gradient(
      340px circle at var(--card-lx, 38%) var(--card-ly, 34%),
      rgb(255 255 255 / calc(var(--card-spec, 0) * 0.9)) 0%,
      rgb(255 246 230 / calc(var(--card-spec, 0) * 0.28)) 20%,
      transparent 48%
    ),
    radial-gradient(
      ellipse 92% 78% at 50% 50%,
      transparent 52%,
      rgb(255 255 255 / calc(var(--card-fresnel, 0) * 0.72)) 100%
    ),
    linear-gradient(
      var(--card-light-deg, 144deg),
      rgb(255 244 220 / calc(var(--card-wrap, 0.5) * 0.22)) 0%,
      transparent 42%,
      transparent 58%,
      rgb(255 255 255 / calc(var(--card-fresnel, 0) * 0.2)) 100%
    );
  transition: opacity 0.18s ease;
}

.course-grid.is-card-stage .course-card.is-card-stage-lit::after {
  opacity: 1;
}

/* Lighting replaces the old cover sweep while the stage is on. */
.course-grid.is-card-stage .course-card.is-card-stage-ready:hover .cover::before {
  transform: none;
  opacity: 0;
  transition: none;
}

/*
  Foil: same varnish, same 340px blob. Three chromatic cores sit inside
  that blob; --card-wave shears them so the peak hops wavelength.
  Rest foil stays the gold ribbon in course-cards.css.
*/
.course-grid.is-card-stage .course-card[data-finish="foil"].is-card-stage-ready {
  --foil-split: calc((var(--card-wave, 0.4) - 0.5) * 7%);
}

.course-grid.is-card-stage .course-card[data-finish="foil"].is-card-stage-ready::after {
  background:
    radial-gradient(
      240px circle at
        calc(var(--card-lx, 38%) - 3.2% + var(--foil-split, 0%))
        calc(var(--card-ly, 34%) + 0.8%),
      rgb(0 220 255 / calc(var(--card-spec, 0) * 0.72)) 0%,
      transparent 36%
    ),
    radial-gradient(
      220px circle at
        calc(var(--card-lx, 38%) + 3.4% - var(--foil-split, 0%))
        calc(var(--card-ly, 34%) - 0.6%),
      rgb(255 70 190 / calc(var(--card-spec, 0) * 0.58)) 0%,
      transparent 34%
    ),
    radial-gradient(
      200px circle at
        calc(var(--card-lx, 38%) + var(--foil-split, 0%))
        var(--card-ly, 34%),
      rgb(255 220 70 / calc(var(--card-spec, 0) * 0.5)) 0%,
      transparent 32%
    ),
    radial-gradient(
      340px circle at var(--card-lx, 38%) var(--card-ly, 34%),
      rgb(255 255 255 / calc(var(--card-spec, 0) * 0.62)) 0%,
      rgb(230 244 255 / calc(var(--card-spec, 0) * 0.2)) 20%,
      transparent 48%
    ),
    radial-gradient(
      ellipse 92% 78% at 50% 50%,
      transparent 52%,
      rgb(210 230 255 / calc(var(--card-fresnel, 0) * 0.72)) 100%
    ),
    linear-gradient(
      var(--card-light-deg, 144deg),
      rgb(220 235 255 / calc(var(--card-wrap, 0.5) * 0.18)) 0%,
      transparent 42%,
      transparent 58%,
      rgb(255 255 255 / calc(var(--card-fresnel, 0) * 0.2)) 100%
    );
}

@media (prefers-reduced-motion: reduce) {
  .course-grid.is-card-stage .course-card.is-card-stage-live {
    transform: none;
    will-change: auto;
  }

  .course-grid.is-card-stage .course-card.is-card-stage-ready::after {
    content: none;
  }
}