/* Immersive styling, GPU-accelerated pointer-tracking radial spotlight borders,
   scroll-linked header elevation, and canvas freeze support. */
:root {
  --immersive-glow: rgba(16, 16, 20, 0.12);
  --spotlight-color: rgba(101, 88, 232, 0.22);
}

[data-theme="dark"] {
  --immersive-glow: rgba(255, 255, 255, 0.22);
  --spotlight-color: rgba(169, 156, 255, 0.28);
}

.immersive-ready .footer__big {
  text-shadow: 0 0 24px var(--immersive-glow);
}

.immersive-ready .card {
  --spot-x: 50%;
  --spot-y: 50%;
  --spot-alpha: 0;
  --mx: 50%;
  --my: 50%;
  position: relative;
}

.immersive-ready .card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(
    340px circle at var(--spot-x, var(--mx)) var(--spot-y, var(--my)),
    var(--spotlight-color),
    transparent 65%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--spot-alpha);
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 2;
}

/* Header scroll-linked elevation */
.header.is-scrolled {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-color: rgba(101, 88, 232, 0.25) !important;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
[data-theme="dark"] .header.is-scrolled {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

/* Freeze page motion without breaking centered chrome or the footer brand flip. */
html.is-editing-canvas *:not(.site-header):not(.nav-pill):not(.footer__big .brand-hi),
html.is-editing-canvas *:not(.site-header):not(.nav-pill):not(.footer__big .brand-hi)::before,
html.is-editing-canvas *:not(.site-header):not(.nav-pill):not(.footer__big .brand-hi)::after {
  animation-play-state: paused !important;
  transition-duration: 0s !important;
  transform: none !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  .immersive-ready .card::after {
    display: none;
  }
  .header.is-scrolled {
    transition: none;
  }
}