/* Native document navigation; unsupported browsers keep ordinary links. */
@view-transition {
  navigation: none;
}

:root {
  --rbt-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rbt-motion-distance: 20px;
}

::view-transition-group(root) {
  animation-duration: 550ms;
}

::view-transition-image-pair(root) {
  isolation: isolate;
}

::view-transition-old(root) {
  animation: none;
  mix-blend-mode: normal;
  z-index: 1;
}

::view-transition-new(root) {
  animation: rbt-page-wipe 550ms cubic-bezier(0.76, 0, 0.24, 1) both;
  mix-blend-mode: normal;
  z-index: 2;
}

@keyframes rbt-page-wipe {
  from {
    clip-path: inset(0 0 100% 0);
    transform: translateY(18px);
  }
  to {
    clip-path: inset(0);
    transform: translateY(0);
  }
}

/* These classes exist only during an observed, finite entrance. */
@media (prefers-reduced-motion: no-preference) {
  .rbt-motion-heading {
    animation: rbt-heading-arrive 560ms var(--rbt-motion-ease) both;
    animation-delay: var(--rbt-motion-delay, 0ms);
  }

  .rbt-motion-image {
    animation: rbt-image-open 760ms var(--rbt-motion-ease) both;
    animation-delay: var(--rbt-motion-delay, 0ms);
  }

  .rbt-motion-card {
    animation: rbt-card-arrive 520ms var(--rbt-motion-ease) both;
    animation-delay: var(--rbt-motion-delay, 0ms);
  }

  .rbt-motion-row {
    animation: rbt-row-arrive 460ms var(--rbt-motion-ease) both;
    animation-delay: var(--rbt-motion-delay, 0ms);
  }

  .rbt-motion-logo {
    animation: rbt-logo-arrive 420ms var(--rbt-motion-ease) both;
    animation-delay: var(--rbt-motion-delay, 0ms);
  }

  .button,
  .filter-button,
  .finder-controls button {
    transition:
      transform 140ms var(--rbt-motion-ease),
      background-color 180ms ease;
  }

  .button:active,
  .filter-button:active,
  .finder-controls button:active {
    transform: translateY(0) scale(0.975);
  }
}

@keyframes rbt-heading-arrive {
  from {
    opacity: 0.72;
    transform: translateY(var(--rbt-motion-distance));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rbt-image-open {
  from {
    clip-path: inset(0 0 14% 0);
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes rbt-card-arrive {
  from {
    transform: translateY(var(--rbt-motion-distance));
  }
  to {
    transform: translateY(0);
  }
}

@keyframes rbt-row-arrive {
  from {
    transform: translateX(-16px);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes rbt-logo-arrive {
  from {
    opacity: 0.55;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ingredient-card img {
    transition: transform 420ms var(--rbt-motion-ease);
  }

  .ingredient-card .card-link svg,
  .catalog-item .text-link svg {
    transition: transform 220ms var(--rbt-motion-ease);
  }

  .ingredient-card:hover img {
    transform: scale(1.025);
  }

  .ingredient-card:hover .card-link svg,
  .catalog-item:hover .text-link svg {
    transform: translateX(4px);
  }

  .button:active {
    transform: translateY(0) scale(0.975);
  }
}

@media (max-width: 700px) {
  :root {
    --rbt-motion-distance: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  .rbt-motion-heading,
  .rbt-motion-image,
  .rbt-motion-card,
  .rbt-motion-row,
  .rbt-motion-logo {
    animation: none !important;
  }

  .ingredient-card:hover img,
  .ingredient-card:hover .card-link svg,
  .catalog-item:hover .text-link svg,
  .button:active,
  .filter-button:active,
  .finder-controls button:active {
    transform: none;
  }
}