/* Shared progressive motion. Content and actions work without animations. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: gestalt-fade-out 150ms ease both; }
::view-transition-new(root) { animation: gestalt-arrive 260ms var(--motion-ease) both; }
@keyframes gestalt-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes gestalt-fade-out { to { opacity: 0; } }
@keyframes gestalt-panel {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes gestalt-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}
@keyframes gestalt-backdrop { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  :where(.hero-copy, .page-heading, .checkout-intro, .login-card, .reading > header) {
    animation: gestalt-arrive 500ms var(--motion-ease) both;
  }
  :where(.product-card, .article-card, .portal-card, .resource-grid > *, .quote-panel) {
    animation: gestalt-arrive 500ms var(--motion-ease) both;
    transition: translate 220ms var(--motion-ease), box-shadow 220ms ease, border-color 220ms ease;
  }
  :where(.product-grid, .article-grid, .resource-grid) > :nth-child(2) { animation-delay: 60ms; }
  :where(.product-grid, .article-grid, .resource-grid) > :nth-child(3) { animation-delay: 120ms; }
  :where(.product-grid, .article-grid, .resource-grid) > :nth-child(n+4) { animation-delay: 180ms; }
  :where(.hero-art .art-circle, .hero-art .small-leaf) { animation: gestalt-float 6s ease-in-out infinite; }
  :where(button, .button, .text-link, nav a, .brand, summary) {
    transition: translate 180ms var(--motion-ease), scale 180ms var(--motion-ease),
      background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
  }
  :where(button, .button):active:not(:disabled):not([aria-disabled="true"]) { scale: .97; }
  :where(input, textarea, select) {
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
  }
  .alma-panel:not([hidden]), dialog[open], .alma-message {
    animation: gestalt-panel 240ms var(--motion-ease) both;
  }
  dialog[open]::backdrop { animation: gestalt-backdrop 200ms ease both; }
  details[open] > :not(summary) { animation: gestalt-arrive 220ms var(--motion-ease); }
  @media (hover: hover) and (pointer: fine) {
    :where(.button, button):hover:not(:disabled):not([aria-disabled="true"]) { translate: 0 -2px; }
    :where(.product-card, .article-card):hover {
      translate: 0 -5px;
      box-shadow: 0 16px 36px #24463914;
      border-color: #b7cbbb;
    }
    :where(nav a, .text-link):hover { translate: 0 -1px; }
  }
}
:where(input, textarea, select):focus-visible {
  outline: 2px solid #628c75;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #dfeade;
}
:where(button, .button, summary, nav a):focus-visible {
  outline: 2px solid #628c75;
  outline-offset: 4px;
}
/* Retain real hidden states, including panels, retry actions and filtered cards. */
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}