/* Motion layer for the Nauti Dawg operator app. Keep layout and color rules in styles.css. */

@media (prefers-reduced-motion: no-preference) {
  .elior-search input {
    transition: border-color 0.15s ease;
  }

  .tab-button,
  .inline-button,
  .resource-link,
  .drawer-close {
    transition:
      background-color 0.14s ease,
      border-color 0.14s ease,
      color 0.14s ease,
      box-shadow 0.14s ease;
  }

  .recipe-gallery-card {
    transition:
      transform 0.16s ease,
      box-shadow 0.16s ease,
      border-color 0.16s ease;
  }

  .recipe-gallery-card:hover,
  .recipe-gallery-card:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--concept-accent) 58%, rgba(23, 33, 47, 0.09));
    box-shadow: 0 18px 42px rgba(10, 13, 18, 0.12);
    outline: none;
  }

  .recipe-index-item {
    transition:
      transform 0.14s ease,
      box-shadow 0.14s ease,
      border-color 0.14s ease;
  }

  .recipe-index-item:hover,
  .recipe-index-item:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(10, 13, 18, 0.08);
  }

  .detail-drawer {
    animation: drawerIn 0.18s ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

@keyframes drawerIn {
  from {
    transform: translateX(18px);
    opacity: 0.76;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}