/* ══════════════════════════════════════════════════════════════════
   css/home-interactive.css — the parts of the homepage that respond
   S.MONK · November 2026
   ------------------------------------------------------------------
   Loaded with js/home-interactive.js, and only when the November
   repositioning is switched on. Everything here styles something the
   script adds (the reading bar, the course filter chips) or a state
   it sets (a card under the pointer, a card filtered away), so with
   the script blocked none of it ever applies.

   Tokens only. No new colours.
   ══════════════════════════════════════════════════════════════════ */

/* ── How far down the page you are ──────────────────────────────── */
.smk-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 700;              /* the nav is 600 */
  pointer-events: none;
  background: transparent;
}
.smk-progress i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--c-teal-400) 0%, var(--orange) 70%, var(--c-orange-400) 100%);
}


/* ── Filter the courses by exam family ──────────────────────────── */
.smk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto 18px;
  padding: 0 clamp(20px, 4vw, 32px);
}
.smk-chip {
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-600);
  background: #fff;
  border: 1px solid var(--c-ink-200);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s, box-shadow .18s;
}
.smk-chip:hover {
  color: var(--c-ink-900);
  border-color: var(--c-ink-400);
}
.smk-chip[aria-pressed="true"] {
  color: #fff;
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: 0 6px 16px rgba(11,29,63,0.18);
}
.smk-chip:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* Said out loud for a screen reader, and kept quiet for everyone else:
   the chips themselves already show the answer on screen. */
.smk-chips__live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* .home-course is display:flex, which beats the browser's own rule for
   [hidden] — so the class has to do the hiding. */
.home-course.is-filtered-out { display: none !important; }

.home-courses__grid.smk-anim .home-course { animation: smk-pop .3s ease both; }
@keyframes smk-pop {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}


/* ── A light that follows the pointer across a card ─────────────────
   The script only writes --mx and --my. Nothing here fires on a
   touch screen, where there is no pointer to follow. ───────────── */
.home-feature,
.home-testimonial,
.home-pillar,
.h2x-card { position: relative; }

.home-feature::after,
.home-testimonial::after,
.home-pillar::after,
.h2x-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(
    260px circle at 50% 0%,
    rgba(249,115,22,0.10) 0%,
    rgba(249,115,22,0.04) 42%,
    transparent 72%
  );
}
/* On the navy section the same light has to be brighter to read. */
.home-pillar::after {
  background: radial-gradient(
    300px circle at 50% 0%,
    rgba(251,163,116,0.16) 0%,
    rgba(59,192,208,0.07) 45%,
    transparent 72%
  );
}
/* Lit on hover by CSS alone. The script used to move this gradient with
   the pointer, which repainted on every mouse move across four card
   grids and is what made the page feel heavy to scroll (Ravi, 9 Nov).
   A plain hover costs one paint and looks the same standing still. */
.home-feature:hover::after,
.home-testimonial:hover::after,
.home-pillar:hover::after,
.h2x-card:hover::after { opacity: 1; }


/* ── Nothing moves on its own for anyone who asked for less ────── */
@media (prefers-reduced-motion: reduce) {
  .smk-progress i { transition: none; }
  .smk-chip { transition: none; }
  .home-courses__grid.smk-anim .home-course { animation: none; }
  .home-feature::after,
  .home-testimonial::after,
  .home-pillar::after,
  .h2x-card::after { display: none; }
}