/* ==========================================================================
   Motion & polish — loaded after styles.css.
   Reading progress, scrollspy, pointer spotlight, and view-transition effects.
   Everything here is progressive: it degrades to the plain design, and is
   disabled for visitors who prefer reduced motion.
   ========================================================================== */

html {
  scroll-padding-top: 92px; /* anchored sections clear the fixed header */
}

/* Reading progress along the top edge */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 60;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--life));
  pointer-events: none;
}

/* Nav: the link for the section in view */
.links a.on {
  color: var(--fg);
}
.links a.on:after {
  transform: scaleX(1);
}

/* Soft spotlight that follows the pointer across cards */
.spot {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.spot:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--accent) 17%, transparent),
    transparent 62%
  );
}
.spot:hover:before {
  opacity: 1;
}

/* Theme switch: the new theme spreads out from the toggle (View Transitions API) */
.vt-theme::view-transition-old(root),
.vt-theme::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
.vt-theme::view-transition-new(root) {
  animation: vt-reveal 0.9s var(--ease) both;
}
/* the wash used on phones and without View Transitions (see ui/theme.js) */
.theme-veil {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  will-change: opacity;
}
.theme-veil.on {
  opacity: 1;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes vt-reveal {
  from {
    clip-path: circle(0 at var(--vx, 50%) var(--vy, 0));
  }
  to {
    clip-path: circle(var(--vr, 150vmax) at var(--vx, 50%) var(--vy, 0));
  }
}

/* Page ↔ quiet room: a calm crossfade */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
  animation-timing-function: var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .spot:before {
    display: none;
  }
  .progress {
    transition: none;
  }
}