/* Small, finite interactions. Scroll reveals use native Web Animations; HTML is visible by default. */
@media (prefers-reduced-motion: no-preference) {
  :root { --gps-motion-ease: cubic-bezier(.22, 1, .36, 1); }

  .card__photo, .post-card__photo { overflow: hidden; }
  .card__photo > img,
  .post-card__photo > img,
  .types > a > img,
  .classtile > img,
  .gemnav__tab > img {
    transition: transform 620ms var(--gps-motion-ease);
  }

  .btn:not(:disabled):not(.disabled):not(.loading),
  .th-button:not(:disabled) {
    transition: translate 200ms var(--gps-motion-ease), color 160ms ease,
      background-color 160ms ease, border-color 160ms ease, filter 160ms ease;
  }

  .more,
  .ws-text-link > span,
  .th-text-link > span,
  .th-buy > span,
  .ws-button > span {
    transition: translate 240ms var(--gps-motion-ease);
  }

  @media (hover: hover) and (pointer: fine) {
    .card:hover .card__photo > img { transform: scale(1.025); }
    .post-card:hover .post-card__photo > img { transform: scale(1.025); }
    .types > a:hover > img { transform: scale(1.018); }
    .classtile:hover > img,
    .gemnav__tab:hover > img { transform: translateY(-3px); }
    .btn:not(:disabled):not(.disabled):not(.loading):not([aria-busy="true"]):hover,
    .th-button:not(:disabled):hover { translate: 0 -2px; }
    .btn:not(:disabled):not(.disabled):not(.loading):active,
    .th-button:not(:disabled):active { translate: 0 0; }
    .more:hover { translate: 2px 0; }
    .ws-text-link:hover > span,
    .th-text-link:hover > span,
    .th-buy:hover > span,
    .ws-button:hover > span { translate: 2px 0; }
  }

  @media (min-width: 820px) {
    .nav__items > li > a { position: relative; }
    .nav__items > li > a::after {
      content: "";
      position: absolute;
      height: 1px;
      left: 0;
      right: 0;
      bottom: 4px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 240ms var(--gps-motion-ease);
      pointer-events: none;
    }
    .nav__items > li > a:is(:hover, :focus-visible)::after,
    .nav__items > .current-menu-item > a::after { transform: scaleX(1); }
  }

  @media (max-width: 819px) {
    .nav.open { animation: gps-menu-enter 180ms var(--gps-motion-ease) both; }
  }
  .search-panel:not([hidden]) { animation: gps-menu-enter 160ms var(--gps-motion-ease) both; }
  .answer[open] > div,
  .ws-detail[open] > div { animation: gps-detail-enter 200ms ease-out both; }

  @keyframes gps-menu-enter {
    from { opacity: .45; translate: 0 -6px; }
    to { opacity: 1; translate: 0 0; }
  }
  @keyframes gps-detail-enter {
    from { opacity: .4; translate: 0 4px; }
    to { opacity: 1; translate: 0 0; }
  }
}

@media print {
  .nav.open, .search-panel, .answer > div, .ws-detail > div { animation: none !important; }
}