/* Hover enhancements only; existing content and layout stay unchanged. */
@media (any-hover: hover) and (any-pointer: fine) {
  .gameplay-cards article,
  .tips-grid article,
  .guide-note,
  .route-steps li,
  .feature-card,
  .update-card,
  .faq-list details {
    position: relative;
    transition:
      transform .3s ease,
      box-shadow .3s ease,
      border-color .3s ease,
      background .3s ease;
  }

  .motion-ready .reveal {
    transition:
      opacity .65s ease,
      transform .3s ease,
      border-color .3s ease,
      box-shadow .3s ease,
      background .3s ease;
  }

  .motion-ready .reveal.is-visible:hover {
    transition-delay: 0s !important;
  }

  .gameplay-cards article:hover,
  .tips-grid article:hover,
  .guide-note:hover,
  .route-steps li:hover,
  .feature-card:hover,
  .feature-card.reveal.is-visible:hover,
  .update-card:hover,
  .update-card.reveal.is-visible:hover,
  .faq-list details:hover,
  .faq-list details.reveal.is-visible:hover {
    z-index: 1;
    transform: translateY(-6px) scale(1.02);
    box-shadow:
      0 14px 32px rgba(38, 58, 75, .13),
      0 0 22px rgba(100, 201, 238, .2),
      0 0 12px rgba(255, 120, 151, .12);
  }

  .feature-card:hover,
  .feature-card.reveal.is-visible:hover {
    box-shadow:
      0 18px 38px rgba(0, 0, 0, .2),
      0 0 28px rgba(255, 120, 151, .22),
      0 0 18px rgba(100, 201, 238, .18);
  }

  .button,
  .menu-toggle,
  .skip-link,
  .detail-cta.detail-cta {
    transition:
      transform .3s ease,
      filter .3s ease,
      box-shadow .3s ease,
      background-color .3s ease;
  }

  .detail-cta.detail-cta::before {
    transition: opacity .3s ease;
  }

  .button:hover,
  .menu-toggle:hover,
  .skip-link:hover,
  .detail-cta.detail-cta:hover {
    transform: scale(1.04);
    filter: brightness(1.08);
  }

  .button:active,
  .menu-toggle:active,
  .skip-link:active,
  .detail-cta.detail-cta:active {
    transform: scale(.97);
  }

  .framed-media,
  .wide-media,
  .character-media {
    transition: translate .3s ease, scale .3s ease, box-shadow .3s ease;
  }

  .framed-media:hover,
  .wide-media:hover,
  .character-media:hover {
    translate: 0 -6px;
    scale: 1.01;
    box-shadow:
      0 18px 38px rgba(38, 58, 75, .16),
      0 0 24px rgba(100, 201, 238, .24),
      0 0 14px rgba(255, 120, 151, .16);
  }

  .framed-media img,
  .wide-media img,
  .character-media img,
  .hero-bg,
  .brand img {
    transition: transform .3s ease;
    transform-origin: center;
  }

  .framed-media:hover img,
  .wide-media:hover img,
  .character-media:hover img,
  .hero:hover .hero-bg,
  .brand:hover img {
    transform: scale(1.06);
  }

  .primary-nav > a:not(.nav-cta)::after {
    display: block;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
  }

  .primary-nav > a:not(.nav-cta):hover::after,
  .primary-nav > a:not(.nav-cta).active::after {
    transform: scaleX(1);
  }

  .site-footer nav a {
    position: relative;
    transition: color .3s ease;
  }

  .site-footer nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: currentColor;
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
  }

  .site-footer nav a:hover::after {
    transform: scaleX(1);
  }
}

@media (any-hover: hover) and (any-pointer: fine) and (max-width: 1040px) {
  .primary-nav > a:not(.nav-cta)::after {
    bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .framed-media:hover,
  .wide-media:hover,
  .character-media:hover {
    translate: none;
    scale: none;
  }

  .gameplay-cards article:hover,
  .tips-grid article:hover,
  .guide-note:hover,
  .route-steps li:hover,
  .feature-card:hover,
  .feature-card.reveal.is-visible:hover,
  .update-card:hover,
  .update-card.reveal.is-visible:hover,
  .faq-list details:hover,
  .faq-list details.reveal.is-visible:hover,
  .button:hover,
  .menu-toggle:hover,
  .skip-link:hover,
  .detail-cta.detail-cta:hover,
  .framed-media:hover img,
  .wide-media:hover img,
  .character-media:hover img,
  .hero:hover .hero-bg,
  .brand:hover img {
    transform: none;
  }
}