@layer reset, tokens, base, components, responsive, utilities;

@layer components {
  @keyframes content-reveal {
    from {
      opacity: 0;
      transform: translateY(var(--motion-reveal-distance));
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  .rail[data-reveal="pending"] {
    opacity: 0;
  }

  .rail[data-reveal="shown"] > .rail__header,
  .rail[data-reveal="shown"] > .rail__viewport {
    animation: content-reveal var(--motion-standard) var(--ease-enter) backwards;
  }

  .rail[data-reveal="shown"] > .rail__viewport {
    animation-delay: var(--motion-stagger);
  }

  @keyframes nav-enter {
    from {
      opacity: 0;
      transform: translateY(calc(var(--motion-reveal-distance) / 2));
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  .mobile-nav {
    animation: nav-enter var(--motion-standard) var(--ease-enter) backwards;
  }

  .card__img,
  .hero__art-img {
    transition: opacity var(--motion-fast) linear;
  }

  .card__img.is-loading,
  .hero__art-img.is-loading {
    opacity: 0;
  }

  html[data-reveal-hold] .hero__content > *,
  html[data-reveal-hold] .mobile-nav {
    animation-play-state: paused;
  }
}

@layer responsive {
  @media (min-width: 640px) and (hover: none) and (pointer: coarse) {
    .card {
      -webkit-tap-highlight-color: transparent;
      transition:
        transform var(--motion-micro) var(--ease-enter),
        opacity var(--motion-micro) linear;
    }

    .card:not(.card--soon):active {
      transform: scale(0.985);
      opacity: 0.86;
      transition-duration: var(--motion-instant);
      transition-delay: var(--motion-press-delay);
    }

    .search-result {
      transition:
        transform var(--motion-micro) var(--ease-enter),
        opacity var(--motion-micro) linear;
    }

    .search-result:not(.search-result--soon):active {
      transform: scale(0.985);
      opacity: 0.86;
      transition-duration: var(--motion-instant);
      transition-delay: var(--motion-press-delay);
    }

    .search-result:not(.search-result--soon):active .search-result__thumb {
      transform: none;
    }
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms;
      animation-delay: 0ms;
      animation-iteration-count: 1;
      scroll-behavior: auto;
    }

    .hero__content > * {
      animation: none;
    }

    .rail[data-reveal="pending"] {
      opacity: 1;
    }

    .rail[data-reveal="shown"] > .rail__header,
    .rail[data-reveal="shown"] > .rail__viewport,
    .mobile-nav {
      animation: none;
    }

    .expanded-card,
    .expanded-card.is-open {
      transition-property: opacity;
    }

    .card,
    .btn:active,
    .hero__slide,
    .hero__media,
    .hero__slide.is-active .hero__media,
    .detail-modal,
    .detail-modal.is-open,
    .search-panel,
    .search-panel.is-open,
    .search-result,
    .search-result__thumb,
    .mobile-nav__item:active {
      transform: none;
    }
  }
}