@media (prefers-reduced-motion: no-preference) {
  body > header, body > main, body > footer {
    position: relative;
    z-index: 2;
  }
  .fox-cursor-light {
    position: fixed;
    left: 0;
    top: 0;
    width: 560px;
    height: 560px;
    z-index: 1;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, #ff6b2b40 0%, #ff6b2b1a 28%, #ff6b2b08 48%, transparent 70%);
    opacity: 0;
    transition: opacity .2s ease;
    will-change: transform;
  }
  .fox-cursor-light.is-visible { opacity: 1; }
  .hero::before {
    content: '';
    position: absolute;
    z-index: 1;
    pointer-events: none;
    width: min(65vw, 700px);
    height: 500px;
    right: -12%;
    top: -15%;
    border-radius: 50%;
    background: radial-gradient(ellipse, #ff6b2b25, #ff6b2b09 45%, transparent 70%);
    animation: fox-light-drift 4.8s ease-in-out both;
  }
  .hero-art { animation: none; }
  @keyframes fox-light-drift {
    0% { opacity: 0; transform: translate(-35%, 12%) scale(.8); }
    45% { opacity: 1; transform: translate(-15%, 18%) scale(1.12); }
    100% { opacity: .55; transform: translate(0, 0) scale(1); }
  }
  .cards > .card, .plans > .plan {
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .cards > .card:hover, .plans > .plan:hover {
      transform: perspective(900px) rotateX(2deg) rotateY(-3deg) scale(1.015);
      border-color: #ff6b2b88;
      box-shadow: 0 16px 32px #0005, 0 0 30px #ff6b2b14;
    }
  }
  .links a { transition: color .2s ease; }
  .links a:hover { color: var(--orange); }
  .button:active { transform: translateY(0) scale(.98); }
}