:root {
  --mo-enter: cubic-bezier(.16, 1, .3, 1);
  --mo-exit: cubic-bezier(.4, 0, 1, 1);
  --mo-press: cubic-bezier(.2, .8, .2, 1);

  --mo-tap: 120ms;
  --mo-hover: 220ms;
  --mo-panel: 320ms;
  --mo-reveal: 520ms;

  --mo-lift: -3px;
  --mo-press-scale: .985;
  --mo-stagger: 45ms;
}

@media (max-width: 768px) {
  :root {
    --mo-hover: 180ms;
    --mo-panel: 260ms;
    --mo-reveal: 420ms;
    --mo-lift: -2px;
  }
}

.tt-btn,
.ck-btn,
.tt-tabbar-btn,
.tt-cart-checkout-btn,
.tt-qty-btn,
.ck-qty-btn,
.login-google,
.login-email-btn,
.tt-interactive-control {
  transition:
    transform var(--mo-hover) var(--mo-press),
    opacity var(--mo-hover) var(--mo-press),
    background-color var(--mo-hover) var(--mo-press),
    border-color var(--mo-hover) var(--mo-press),
    color var(--mo-hover) var(--mo-press);
}

.tt-btn:active,
.ck-btn:active,
.tt-tabbar-btn:active,
.tt-cart-checkout-btn:active,
.tt-qty-btn:active,
.ck-qty-btn:active,
.login-google:active,
.login-email-btn:active {
  transform: scale(var(--mo-press-scale));
  transition-duration: var(--mo-tap);
}

@media (hover: hover) and (pointer: fine) {
  .tt-btn:hover,
  .ck-btn:hover,
  .tt-cart-checkout-btn:hover,
  .login-google:hover,
  .login-email-btn:hover {
    transform: translate3d(0, var(--mo-lift), 0);
  }
}

.tt-product-card,
.tt-coll-card,
.tt-card,
.tt-category-card,
.tt-review-card,
.tt-trust-item {
  transition:
    transform var(--mo-hover) var(--mo-enter),
    box-shadow var(--mo-hover) var(--mo-enter);
}

/* La imagen escala dentro de su marco: el contenedor no cambia de tamano,
   asi que no hay reflow. */
.tt-product-card img,
.tt-coll-card img,
.tt-category-card img {
  transition: transform var(--mo-panel) var(--mo-enter);
  will-change: auto;
}

@media (hover: hover) and (pointer: fine) {
  .tt-product-card:hover img,
  .tt-coll-card:hover img,
  .tt-category-card:hover img {
    transform: scale(1.04);
  }
}

.tt-cart-drawer,
.tt-search-panel,
.tt-account-panel,
.tt-collections-sheet,
.tt-mobile-menu,
.tt-tablet-menu,
.tt-dropdown {
  transition:
    transform var(--mo-panel) var(--mo-enter),
    opacity var(--mo-panel) var(--mo-enter),
    visibility var(--mo-panel) step-end;
}

.tt-cart-drawer.open,
.tt-search-panel.open,
.tt-account-panel.open,
.tt-collections-sheet.open,
.tt-mobile-menu.open,
.tt-tablet-menu.open,
.tt-dropdown.open {
  transition:
    transform var(--mo-panel) var(--mo-enter),
    opacity var(--mo-panel) var(--mo-enter),
    visibility 0s;
}

/* Escalonado del reveal: lo consume js/quality/revelado-desplazamiento-global.js via
   --tt-r-delay. Se corta a los seis primeros para que el ultimo elemento
   nunca espere mas de un cuarto de segundo. */
.tt-auto-reveal:nth-child(1) { --tt-r-delay: 0ms; }
.tt-auto-reveal:nth-child(2) { --tt-r-delay: var(--mo-stagger); }
.tt-auto-reveal:nth-child(3) { --tt-r-delay: calc(var(--mo-stagger) * 2); }
.tt-auto-reveal:nth-child(4) { --tt-r-delay: calc(var(--mo-stagger) * 3); }
.tt-auto-reveal:nth-child(5) { --tt-r-delay: calc(var(--mo-stagger) * 4); }
.tt-auto-reveal:nth-child(n + 6) { --tt-r-delay: calc(var(--mo-stagger) * 5); }

@media (prefers-reduced-motion: reduce) {
  :root {
    --mo-tap: 0ms;
    --mo-hover: 0ms;
    --mo-panel: 0ms;
    --mo-reveal: 0ms;
    --mo-lift: 0px;
    --mo-press-scale: 1;
    --mo-stagger: 0ms;
  }

  .tt-product-card:hover img,
  .tt-coll-card:hover img,
  .tt-category-card:hover img {
    transform: none;
  }
}

/* Header compacto al bajar. Solo transform y sombra: la altura no cambia,
   asi que el contenido de abajo no se mueve. */
.tt-header,
.tt-header-tablet {
  transition:
    transform var(--mo-panel) var(--mo-enter),
    box-shadow var(--mo-panel) var(--mo-enter);
}

.tt-header.tt-header-compact,
.tt-header-tablet.tt-header-compact {
  box-shadow: 0 6px 24px rgba(38, 24, 30, .07);
}

.tt-header .tt-logo-img,
.tt-header-tablet .tt-logo-img {
  transform-origin: left center;
  transition: transform var(--mo-panel) var(--mo-enter);
}

.tt-header-compact .tt-logo-img {
  transform: scale(.92);
}

/* Indicador del tabbar: lo posiciona JS con translateX. Sin transicion salta
   de pestana a pestana. */
.tt-mobile-nav-indicator,
.tt-mobile-nav-halo {
  transition: transform var(--mo-panel) var(--mo-enter);
}

@media (prefers-reduced-motion: reduce) {
  .tt-header-compact .tt-logo-img { transform: none; }
  .tt-mobile-nav-indicator,
  .tt-mobile-nav-halo { transition: none; }
}