/* Movimiento Belora: cercano, suave y cuidado, sin restar claridad a la compra. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-quick: 180ms;
  --motion-dialog: 280ms;
  --motion-content: 460ms;
}

/* El color responde al gesto; las fotos, los precios y la tipografía permanecen quietos. */
.button,
.campaign-cta,
.product-add,
.icon-button,
.cart-button,
.quantity-controls button,
.filter-chip,
.text-link,
.footer-links a,
.footer-bottom a {
  transition:
    background-color var(--motion-quick) var(--motion-ease),
    border-color var(--motion-quick) var(--motion-ease),
    color var(--motion-quick) var(--motion-ease),
    box-shadow var(--motion-quick) var(--motion-ease);
}

.text-link:hover {
  padding-bottom: 10px;
  border-bottom-width: 1px;
  box-shadow: 0 1px 0 currentColor;
}

.main-nav a::after {
  transition-duration: 200ms;
  transition-timing-function: var(--motion-ease);
}

.text-link .ui-icon--arrow-up-right,
.button .ui-icon--arrow-up-right,
.footer-links .ui-icon--arrow-up-right,
.footer-bottom .ui-icon--arrow-up-right {
  transition: translate var(--motion-quick) var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .text-link:hover .ui-icon--arrow-up-right,
  .button:hover .ui-icon--arrow-up-right,
  .footer-links a:hover .ui-icon--arrow-up-right,
  .footer-bottom a:hover .ui-icon--arrow-up-right {
    translate: 2px -2px;
  }
}

.faq-list summary .ui-icon {
  transition: transform 200ms var(--motion-ease);
}

.shop-toast {
  transition:
    opacity 220ms var(--motion-ease),
    transform 280ms var(--motion-ease),
    visibility 220ms;
}

/* La copia saliente nunca ocupa espacio ni captura acciones. */
.catalog-stage { position: relative; }
.catalog-ghost {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  z-index: 2;
}
.catalog-ghost,
.catalog-ghost *,
.catalog-ghost *::before,
.catalog-ghost *::after {
  animation: none !important;
  transition: none !important;
  pointer-events: none !important;
}

/* El diálogo conserva apertura, cierre, foco y Escape nativos. */
@supports (transition-behavior: allow-discrete) {
  .cart-dialog,
  .product-dialog {
    opacity: 0;
    transition:
      opacity var(--motion-dialog) var(--motion-ease),
      translate var(--motion-dialog) var(--motion-ease),
      display var(--motion-dialog) allow-discrete,
      overlay var(--motion-dialog) allow-discrete;
  }
  .cart-dialog { translate: 28px 0; }
  .product-dialog { translate: 0 12px; }
  .cart-dialog[open],
  .product-dialog[open] {
    opacity: 1;
    translate: 0 0;
  }
  .cart-dialog::backdrop,
  .product-dialog::backdrop {
    opacity: 0;
    transition:
      opacity var(--motion-dialog) var(--motion-ease),
      display var(--motion-dialog) allow-discrete,
      overlay var(--motion-dialog) allow-discrete;
  }
  .cart-dialog[open]::backdrop,
  .product-dialog[open]::backdrop { opacity: 1; }

  @starting-style {
    .cart-dialog[open] { opacity: 0; translate: 28px 0; }
    .product-dialog[open] { opacity: 0; translate: 0 12px; }
    .cart-dialog[open]::backdrop,
    .product-dialog[open]::backdrop { opacity: 0; }
  }
}

/* Solo se mejora el despliegue cuando el navegador entiende tamaños intrínsecos. */
@supports (interpolate-size: allow-keywords) and (transition-behavior: allow-discrete) and selector(details::details-content) {
  .faq-list details { interpolate-size: allow-keywords; }
  .faq-list details::details-content {
    block-size: 0;
    opacity: 0;
    overflow: clip;
    transition:
      block-size 360ms var(--motion-ease),
      opacity 200ms var(--motion-ease),
      content-visibility 360ms allow-discrete;
  }
  .faq-list details[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* Mejora progresiva para futuras páginas del mismo origen. */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: belora-page-out 160ms ease-out both;
}
::view-transition-new(root) {
  animation: belora-page-in 260ms var(--motion-ease) both;
}
@keyframes belora-page-out { to { opacity: 0; } }
@keyframes belora-page-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .cart-dialog,
  .product-dialog,
  .text-link .ui-icon--arrow-up-right,
  .button .ui-icon--arrow-up-right,
  .footer-links .ui-icon--arrow-up-right,
  .footer-bottom .ui-icon--arrow-up-right { translate: none !important; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}