@media (prefers-reduced-motion: no-preference) {
  .feature-card,
  .story-card,
  .lane-card {
    transition:
      translate 220ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 220ms ease,
      border-color 220ms ease;
  }

  .feature-image,
  .story-thumb {
    transition: scale 420ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .read-link,
  .inline-link {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size 220ms ease, color 220ms ease;
  }

  .read-link:hover,
  .inline-link:hover,
  .read-link:focus-visible,
  .inline-link:focus-visible {
    background-size: 100% 1px;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .feature-card:hover,
  .story-card:hover,
  .lane-card:hover {
    translate: 0 -3px;
    border-color: color-mix(in srgb, var(--ochre) 34%, var(--line));
    box-shadow: 0 12px 28px rgba(17, 10, 6, 0.12);
  }

  html[data-theme="dark"] .feature-card:hover,
  html[data-theme="dark"] .story-card:hover,
  html[data-theme="dark"] .lane-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.48);
  }

  .feature-card:hover .feature-image,
  .story-card:hover .story-thumb {
    scale: 1.015;
  }
}

@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  html.toc-motion-enabled .header-actions {
    display: flex;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    translate: 0 -8px;
    padding-bottom: 0;
    pointer-events: none;
    transition:
      max-height 320ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 180ms ease,
      translate 260ms cubic-bezier(0.22, 1, 0.36, 1),
      padding-bottom 260ms ease,
      visibility 0s linear 320ms;
  }

  html.toc-motion-enabled .header-actions.is-open {
    max-height: 560px;
    visibility: visible;
    opacity: 1;
    translate: 0 0;
    padding-bottom: 6px;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .hamburger-lines span {
    transform-origin: center;
    transition: transform 220ms ease, opacity 160ms ease;
  }

  .mobile-nav-toggle[aria-expanded="true"] .hamburger-lines span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .mobile-nav-toggle[aria-expanded="true"] .hamburger-lines span:nth-child(2) {
    opacity: 0;
  }

  .mobile-nav-toggle[aria-expanded="true"] .hamburger-lines span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .feature-card,
  .story-card,
  .lane-card,
  .feature-image,
  .story-thumb,
  .header-actions,
  .hamburger-lines span,
  .read-link,
  .inline-link {
    animation: none !important;
    transition: none !important;
  }
}