/* Movimiento SWAP: composiciones existentes, entradas breves y respuesta táctil. */
:root { --swap-ease: cubic-bezier(.16, 1, .3, 1); }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: swap-page-out .18s ease both; }
::view-transition-new(root) { animation: swap-page-in .32s var(--swap-ease) both; }
@keyframes swap-page-out { to { opacity: 0; } }
@keyframes swap-page-in { from { opacity: 0; translate: 0 8px; } }

.site-loader {
  position: fixed; inset: 0; z-index: 180; display: grid; place-content: center;
  background: #fff; color: #172d4e; pointer-events: none;
  transition: opacity .32s ease, visibility .32s;
  animation: swap-loader-failsafe .2s 2.2s forwards;
}
.motion-pending .site-loader[hidden] { display: grid !important; }
.site-loader.is-leaving { opacity: 0; visibility: hidden; }
.loader-brand { display: flex; gap: 14px; align-items: center; font-size: 48px; font-weight: 750; letter-spacing: -.06em; }
.loader-brand img { width: 32px; height: 57px; }
.loader-line { height: 2px; width: 132px; margin: 24px auto 0; border-radius: 2px; background: #edf2f8; overflow: hidden; }
.loader-line::after { content: ''; display: block; width: 55%; height: 100%; background: linear-gradient(90deg, #009fd6, #5d0bf3); animation: swap-loader-line 1s var(--swap-ease) infinite; }
@keyframes swap-loader-line { from { translate: -110% 0; } to { translate: 200% 0; } }
@keyframes swap-loader-failsafe { to { opacity: 0; visibility: hidden; } }

.motion-ready .product-card { animation: none; }
:is(.button, .swap-submit, .sale-submit, .filter, .nav-icon, .icon-button, .product-add, .clarity-cta, .location-option, .locations-directions) {
  transition: background-color .25s, border-color .25s, color .25s, translate .28s var(--swap-ease), scale .2s var(--swap-ease);
}
.hero .primary:hover { transform: none; }
:is(.button, .swap-submit, .sale-submit, .filter, .nav-icon, .icon-button, .product-add, .clarity-cta, .location-option, .locations-directions):active:not(:disabled) { scale: .97; }
.swap-submit svg, .sale-submit svg, .button :is(svg, [aria-hidden='true']), .clarity-cta > span, .hero-text-link > span, .shop-link > span, .product-open > span {
  display: inline-block; transition: translate .3s var(--swap-ease);
}
.menu-button svg { transition: transform .35s var(--swap-ease); }
:is(.swap-form-panel, .sale-form-wrap) :is(input, select), .search { transition: border-color .25s, background-color .25s, box-shadow .25s; }

@media (hover: hover) and (pointer: fine) {
  :is(.button, .swap-submit, .sale-submit, .clarity-cta, .product-add, .locations-directions):hover { translate: 0 -2px; }
  :is(.button, .swap-submit, .sale-submit, .clarity-cta, .hero-text-link, .shop-link, .product-open):hover :is(svg, [aria-hidden='true']) { translate: 3px 0; }
}
.mobile-nav:not([hidden]) { transform-origin: top; animation: swap-menu-in .36s var(--swap-ease); }
.overlay:not([hidden]) { animation: swap-overlay-in .24s ease; }
.cart-panel:not([hidden]) { animation: swap-cart-in .48s var(--swap-ease); }
.modal:not([hidden]) { animation: swap-modal-in .4s var(--swap-ease); }
.flow-result:not([hidden]), .toast:not([hidden]) { animation: swap-modal-in .38s var(--swap-ease); }
.faq-clean details[open] p { animation-duration: .38s; }
@keyframes swap-menu-in { from { opacity: 0; translate: 0 -10px; } }
@keyframes swap-overlay-in { from { opacity: 0; } }
@keyframes swap-cart-in { from { opacity: .4; translate: 100% 0; } }
@keyframes swap-modal-in { from { opacity: 0; translate: 0 14px; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .site-loader, .motion-pending .site-loader[hidden] { display: none !important; }
  :is(.button, .swap-submit, .sale-submit, .filter, .nav-icon, .icon-button, .product-add, .clarity-cta, .location-option, .locations-directions):is(:active, :hover) { translate: none; scale: none; }
}