/* Motion only enhances already-visible content. Unsupported browsers navigate normally. */
@view-transition { navigation:auto; }
@media (prefers-reduced-motion:no-preference) {

  ::view-transition-group(root) { animation-duration:260ms; animation-timing-function:cubic-bezier(.22,1,.36,1); }
  ::view-transition-old(root) { animation:uifn-page-out 150ms ease-out both; mix-blend-mode:normal; }
  ::view-transition-new(root) { animation:uifn-page-in 260ms cubic-bezier(.22,1,.36,1) both; mix-blend-mode:normal; }

  /* Match the shared header across catalog/product documents. Its surface
     changes width, while the identity and account button move at their own
     natural size instead of stretching with the background snapshot. */
  :is(.storefront,.product-page) .site-header { view-transition-name:uifn-header; }
  :is(.storefront,.product-page) .site-header .identity { view-transition-name:uifn-identity; }
  :is(.storefront,.product-page) .site-header .purchases-link { view-transition-name:uifn-account; }

  ::view-transition-group(uifn-header),
  ::view-transition-group(uifn-identity),
  ::view-transition-group(uifn-account) {
    animation-duration:420ms;
    animation-timing-function:cubic-bezier(.22,1,.36,1);
  }
  ::view-transition-old(uifn-header),::view-transition-new(uifn-header) { height:100%; }
  ::view-transition-old(uifn-header),
  ::view-transition-old(uifn-identity),
  ::view-transition-old(uifn-account) { animation:none; opacity:0; }
  ::view-transition-new(uifn-header),
  ::view-transition-new(uifn-identity),
  ::view-transition-new(uifn-account) { animation:none; opacity:1; mix-blend-mode:normal; }

  .product-card { transition:border-color .2s ease,box-shadow .2s ease,transform .24s cubic-bezier(.22,1,.36,1); }
  .details-button .icon,.product-buy .icon,.customer-back .icon,.product-nav a .icon { transition:transform .2s cubic-bezier(.22,1,.36,1); }
  .button,.product-buy,.customer-primary,.customer-secondary,.purchases-link,.copy-product-link,.copy-code,.sort-trigger { transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .15s cubic-bezier(.22,1,.36,1); }
  .gallery-thumb { transition:border-color .18s ease,background .18s ease,transform .2s cubic-bezier(.22,1,.36,1); }
  .purchase-row { transition:border-color .18s ease,background .18s ease; }
  .catalog-search,#recovery-email { transition:background .18s ease,border-color .18s ease,box-shadow .18s ease; }

  .button:active,.product-buy:active,.customer-primary:not(:disabled):active,.customer-secondary:not(:disabled):active,.purchases-link:active,.copy-product-link:active,.copy-code:active,.sort-trigger:active { transform:translateY(1px); }
  .sort-options:not([hidden]) { transform-origin:top right; animation:uifn-menu-in 150ms cubic-bezier(.22,1,.36,1); }
  .toast:not([hidden]),#empty-results:not([hidden]),#purchases-empty:not([hidden]),#customer-download:not([hidden]) { animation:uifn-feedback-in 160ms ease-out; }
}

@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine) {
  .product-card:hover { transform:translateY(-2px); }
  .product-card-link:hover .details-button .icon,.product-buy:hover .icon { transform:translateX(2px); }
  .customer-back:hover .icon,.product-nav a:hover .icon { transform:translateX(-2px); }
  .gallery-thumb:hover { transform:translateY(-1px); }
  .purchase-row:hover { border-color:#dce5fa24; }
}

@keyframes uifn-page-out { from { opacity:1; } to { opacity:0; } }
@keyframes uifn-page-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes uifn-menu-in { from { opacity:.55; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
@keyframes uifn-feedback-in { from { opacity:.55; } to { opacity:1; } }

@media (prefers-reduced-motion:reduce) {
  @view-transition { navigation:none; }
  ::view-transition-old(*),::view-transition-new(*),::view-transition-group(*) { animation:none !important; }
}