/* A little light and movement, with no delay on controls or incoming offers. */
:root { --motion-ease: cubic-bezier(.2,.75,.25,1); }
.hero-layout { position: relative; isolation: isolate; }
.hero-layout::before {
  content: ''; position: absolute; inset: -15px -25px 12%; z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 4%, #ffffff0b, transparent 63%);
  border-radius: 40%;
}
.hero-symbol { position: relative; width: 74px; height: 74px; margin: 0 auto 22px; align-items: center; }
.hero-symbol::before, .hero-symbol::after {
  content: ''; position: absolute; inset: 0; border: 1px solid #ffffff14;
  border-radius: 50%; pointer-events: none;
}
.hero-symbol::after { inset: -7px; border-color: #ffffff08; border-top-color: #ffffff40; transform: rotate(-35deg); }
.hero-symbol img { filter: drop-shadow(0 0 13px #ffffff38); }
.hero-primary h1 { text-wrap: balance; }
.search-form {
  background: linear-gradient(130deg, #1c1c1f, #131315 70%);
  transition: border-color 220ms, box-shadow 250ms;
  box-shadow: 0 12px 45px #0005, inset 0 1px 0 #ffffff05;
}
.search-form:focus-within { border-color: #a1a1aa; box-shadow: 0 0 0 3px #ffffff08, 0 14px 50px #0007; }
.button, .suggestion, .category-tab, .icon-button, .favorite-button {
  transition: background 180ms, border-color 180ms, color 180ms, box-shadow 200ms, translate 200ms var(--motion-ease), scale 160ms var(--motion-ease);
}
.button svg, .suggestion svg, .text-button svg { transition: translate 220ms var(--motion-ease); }
.button.primary { box-shadow: 0 1px 0 #ffffff50 inset, 0 2px 8px #0002; }
.button.primary:disabled { box-shadow: none; }
.product-card { transition: translate 260ms var(--motion-ease), border-color 200ms, box-shadow 260ms; }
.product-open img { transition: transform 500ms var(--motion-ease); }
.favorite-button.selected { color: #f5f5f7; border-color: #b7b7c1; }
.favorite-button.selected svg { fill: currentColor; }
.nav-button { transition: background 200ms, color 180ms; }
.nav-button svg { transition: translate 200ms var(--motion-ease); }
.join-banner, .member-card { transition: border-color 220ms, box-shadow 220ms; }
.checkout-steps strong { position: relative; }
.checkout-steps strong::after { content: ''; position: absolute; height: 1px; background: #eee; bottom: -21px; left: 0; right: 0; }

@media (hover: hover) and (pointer: fine) {
  .product-card:hover { translate: 0 -4px; box-shadow: 0 12px 32px #0007; border-color: #66666d; }
  .product-card:hover .product-open img { transform: scale(1.035); }
  .button:not(:disabled):hover, .suggestion:hover { translate: 0 -2px; }
  .button.primary:not(:disabled):hover { background: #fff; box-shadow: 0 3px 18px #ffffff18; }
  .button.primary:hover svg, .text-button:hover svg { translate: 3px 0; }
  .favorite-button:hover { scale: 1.1; }
  .nav-button:hover svg { translate: 2px 0; }
  .join-banner:hover, .member-card:hover { border-color: #4d4d56; box-shadow: 0 0 28px #ffffff04 inset; }
}
.button:not(:disabled):active, .suggestion:active, .favorite-button:active { scale: .97; translate: 0 0; }
.search-form:has(button:disabled) { border-color: #53535c; }

@media (prefers-reduced-motion: no-preference) {
  .motion-entry .hero-symbol::after { animation: orbit-arrive 1.4s var(--motion-ease) both; }
  dialog[open]::backdrop { animation: backdrop-arrive 200ms ease-out; }
  .compare-tray:not([hidden]) { animation: tray-arrive 220ms var(--motion-ease); }
  @keyframes orbit-arrive { from { opacity: 0; transform: rotate(-165deg); } to { opacity: 1; transform: rotate(-35deg); } }
  @keyframes backdrop-arrive { from { background-color: #0000; } to { background-color: #0009; } }
  @keyframes tray-arrive { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .product-card:hover, .button:hover, .suggestion:hover, .favorite-button:hover, .nav-button:hover svg,
  .button:hover svg, .text-button:hover svg { translate: none; scale: none; }
  .product-card:hover .product-open img, .product-open:hover img { transform: none; }
}
@media (max-width: 640px) {
  .hero-symbol { width: 62px; height: 62px; margin-bottom: 24px; }
  .hero-layout::before { inset: -6px -8px 15%; }
}