/* SHUEVO — motion global (transiciones tipo app) */

:root {
  --sh-ease: cubic-bezier(.22, 1, .36, 1);
  --sh-ease-out: cubic-bezier(.16, 1, .3, 1);
  --sh-dur: .38s;
  --sh-dur-fast: .22s;
  --sh-dur-slow: .52s;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  scroll-behavior: smooth;
}

/* Botones / chips / iconos */
.sh-btn,
.sh-icon-btn,
.sh-login-chip,
.sh-app-add,
.sh-app-nav-item,
.sh-cart-fab,
.cuenta-auth-close,
.cuenta-app-close,
.checkout-sheet-back,
.checkout-sheet-close,
.cart-modal .modal-close,
.product-modal-close {
  transition:
    transform var(--sh-dur-fast) var(--sh-ease),
    background var(--sh-dur-fast) ease,
    color var(--sh-dur-fast) ease,
    box-shadow var(--sh-dur) var(--sh-ease),
    opacity var(--sh-dur-fast) ease,
    border-color var(--sh-dur-fast) ease;
}

.sh-btn:active,
.sh-app-add:active,
.sh-cart-fab:active,
.sh-app-nav-item:active {
  transform: scale(0.96);
}

/* Cards / listados */
.sh-card,
.sh-app-card,
.sh-app-banner-slide,
.sh-app-why li,
.sh-app-chips span {
  transition:
    transform var(--sh-dur) var(--sh-ease),
    box-shadow var(--sh-dur) var(--sh-ease),
    opacity var(--sh-dur) ease;
}

.sh-app-card:active {
  transform: scale(0.985);
}

/* Sheets / modales: fade backdrop + slide panel */
.site-modal-backdrop,
.product-modal-backdrop,
.cuenta-auth-backdrop,
.cuenta-app-backdrop {
  transition: opacity var(--sh-dur) var(--sh-ease), visibility var(--sh-dur) var(--sh-ease);
}

.cart-modal {
  transition:
    transform var(--sh-dur-slow) var(--sh-ease-out),
    opacity var(--sh-dur) ease,
    visibility var(--sh-dur) ease;
}

.checkout-sheet {
  transition: visibility var(--sh-dur) var(--sh-ease);
}

.checkout-sheet-panel {
  transition: transform var(--sh-dur-slow) var(--sh-ease-out);
}

.cuenta-auth-layer {
  transition: opacity var(--sh-dur) var(--sh-ease), visibility var(--sh-dur) var(--sh-ease);
}

.cuenta-auth-card {
  transition: transform var(--sh-dur-slow) var(--sh-ease-out), opacity var(--sh-dur) ease;
}

.cuenta-app-drawer {
  transition: transform var(--sh-dur-slow) var(--sh-ease-out);
}

.cuenta-order-sheet {
  transition: transform var(--sh-dur-slow) var(--sh-ease-out);
}

.product-modal {
  transition: opacity var(--sh-dur) var(--sh-ease), visibility var(--sh-dur) var(--sh-ease);
}

.product-modal-panel {
  transition: transform var(--sh-dur-slow) var(--sh-ease-out), opacity var(--sh-dur) ease;
}

/* Nav app + FAB */
.sh-app-nav {
  transition: transform var(--sh-dur) var(--sh-ease-out), opacity var(--sh-dur-fast) ease;
}

.sh-cart-fab {
  transition:
    transform var(--sh-dur) var(--sh-ease),
    opacity var(--sh-dur) var(--sh-ease),
    box-shadow var(--sh-dur) var(--sh-ease),
    background var(--sh-dur-fast) ease;
}

/* Banners dots */
.sh-app-banners-dots button {
  transition: width var(--sh-dur-fast) var(--sh-ease), background var(--sh-dur-fast) ease;
}

/* Header */
.sh-header {
  transition:
    background var(--sh-dur) ease,
    border-color var(--sh-dur) ease,
    backdrop-filter var(--sh-dur) ease,
    box-shadow var(--sh-dur) ease;
}

.sh-nav a {
  transition: color var(--sh-dur-fast) ease, opacity var(--sh-dur-fast) ease;
}

/* Toast cuenta */
.cuenta-toast {
  transition: transform var(--sh-dur) var(--sh-ease-out), opacity var(--sh-dur) ease;
}