@media (prefers-reduced-motion: no-preference) {
  html.has-motion [data-scroll-reveal] {
    opacity: 0;
    transform: translateY(18px) scale(.99);
    filter: blur(1px);
    transition:
      opacity .55s cubic-bezier(.2,.7,.2,1),
      transform .55s cubic-bezier(.2,.7,.2,1),
      filter .55s ease;
    transition-delay: var(--reveal-delay, 0ms);
  }

  html.has-motion [data-scroll-reveal].is-revealed {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .pointer-reactive,
  .mascot-card {
    position: relative;
    transform-style: preserve-3d;
  }

  .pointer-reactive::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(230px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255,255,255,.44), transparent 72%);
    transition: opacity .2s ease;
  }

  .pointer-reactive.is-pointer-over::after {
    opacity: .8;
  }

  .post-card.pointer-reactive,
  .guide-card.pointer-reactive,
  .game-card.pointer-reactive,
  .directory-card.pointer-reactive,
  .card.pointer-reactive {
    transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
    transition: transform .16s ease-out, box-shadow .18s ease-out;
  }

  .post-card.pointer-reactive:hover,
  .post-card.pointer-reactive:focus-visible,
  .guide-card.pointer-reactive:hover,
  .guide-card.pointer-reactive:focus-visible,
  .game-card.pointer-reactive:hover,
  .game-card.pointer-reactive:focus-visible,
  .directory-card.pointer-reactive:hover,
  .directory-card.pointer-reactive:focus-visible,
  .card.pointer-reactive:hover,
  .card.pointer-reactive:focus-visible {
    transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translate3d(-3px, -3px, 0);
  }

  .cta,
  .carousel-button,
  .game-demo-button,
  .game-dialog-close,
  .support-copy-button {
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
  }

  .cta:hover,
  .carousel-button:hover:not(:disabled),
  .game-demo-button:hover,
  .game-dialog-close:hover,
  .support-copy-button:hover {
    transform: translateY(-2px);
  }

  .cta:active,
  .carousel-button:active:not(:disabled),
  .game-demo-button:active,
  .game-dialog-close:active,
  .support-copy-button:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--ink);
  }

  .carousel-track,
  .games-track,
  .guide-track {
    cursor: grab;
  }

  .carousel-track.is-dragging,
  .games-track.is-dragging,
  .guide-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
  }

  .navlinks.is-open {
    animation: menu-enter .18s ease-out both;
  }

  .mascot-card.is-revealed {
    animation: mascot-card-rock 6s ease-in-out infinite;
    transform-origin: center 45%;
  }

  .game-dialog[open] {
    animation: dialog-enter .22s cubic-bezier(.2,.8,.2,1) both;
  }

  .game-dialog[open]::backdrop {
    animation: backdrop-enter .18s ease-out both;
  }
}

@keyframes mascot-card-rock {
  0%, 100% { transform: rotate(2deg); }
  50% { transform: rotate(-1deg); }
}

@keyframes menu-enter {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dialog-enter {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  [data-scroll-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}