/*
  Pizza Time — motion layer
  Additive only. Load AFTER style.css / admin.css.
  Motion clarifies state, never blocks input. Transform + opacity only.
*/

:root {
  --m-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --m-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------- Storefront: hero page-load entrance ---------- */

#heroEyebrow,
#heroTitle,
#heroText,
#heroCta,
#heroPhone,
#heroHours,
#heroAddress {
  animation: m-rise-in 480ms var(--m-ease-out) backwards;
}

#heroEyebrow { animation-delay: 0ms; }
#heroTitle { animation-delay: 60ms; }
#heroText { animation-delay: 120ms; }
#heroCta { animation-delay: 180ms; }
#heroPhone { animation-delay: 210ms; }
#heroHours { animation-delay: 240ms; }
#heroAddress { animation-delay: 270ms; }

.hero-card {
  animation: m-hero-card-in 600ms var(--m-ease-out) 140ms backwards;
}

@keyframes m-rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes m-hero-card-in {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Admin: auth card and tab panels ---------- */

.auth-card {
  animation: m-card-in 420ms var(--m-ease-out) backwards;
}

@keyframes m-card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.admin-section:not([hidden]) {
  animation: m-section-in 260ms var(--m-ease-out) backwards;
}

@keyframes m-section-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Product-card reveal (JS adds html.m-js) ---------- */

html.m-js .product-card {
  animation: none;
}

html.m-js .product-card.m-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    transform 360ms var(--m-ease-out),
    opacity 300ms var(--m-ease-out);
}

html.m-js .product-card.m-reveal.m-in {
  opacity: 1;
  transform: translateY(0);
}

html.m-js .product-card.m-reveal.m-d1 { transition-delay: 45ms; }
html.m-js .product-card.m-reveal.m-d2 { transition-delay: 90ms; }
html.m-js .product-card.m-reveal.m-d3 { transition-delay: 135ms; }
html.m-js .product-card.m-reveal.m-d4 { transition-delay: 180ms; }
html.m-js .product-card.m-reveal.m-d5 { transition-delay: 225ms; }

/* ---------- Press feedback ---------- */

.btn:active:not(:disabled),
.ghost-btn:active:not(:disabled),
.add-btn:active,
.icon-btn:active,
.cart-btn:active,
.category-btn:active,
.variant-pill:active,
.floating-cart:active,
.admin-nav-btn:active,
.row-actions button:active,
.qty-control button:active,
.lang-switch button:active {
  transform: scale(0.97);
}

.icon-btn,
.admin-nav-btn,
.row-actions button,
.qty-control button,
.lang-switch button,
.floating-cart {
  transition-property: background-color, border-color, color, box-shadow, transform;
  transition-duration: 180ms;
  transition-timing-function: var(--m-ease-out);
}

/* ---------- Category / admin-nav active feedback ---------- */

.category-btn.active {
  animation: m-chip-pop 180ms var(--m-ease-out);
}

.admin-nav-btn.active {
  animation: m-nav-pop 200ms var(--m-ease-out);
}

@keyframes m-chip-pop {
  from { transform: scale(0.96); }
  to { transform: scale(1); }
}

@keyframes m-nav-pop {
  from { transform: scale(0.97); }
  to { transform: scale(1); }
}

/* ---------- Cart drawer choreography ---------- */

.cart-drawer {
  transition: visibility 0s linear 380ms;
}

.cart-drawer.open {
  transition: visibility 0s;
}

.cart-backdrop {
  transition: opacity 280ms var(--m-ease-out);
}

.cart-panel {
  transition: transform 380ms var(--m-ease-drawer);
}

.cart-head,
.cart-items,
.cart-foot {
  transition:
    opacity 220ms var(--m-ease-out),
    transform 260ms var(--m-ease-out);
}

.cart-drawer:not(.open) .cart-head,
.cart-drawer:not(.open) .cart-items,
.cart-drawer:not(.open) .cart-foot {
  opacity: 0;
  transform: translateX(10px);
}

.cart-drawer.open .cart-head { transition-delay: 60ms; }
.cart-drawer.open .cart-items { transition-delay: 100ms; }
.cart-drawer.open .cart-foot { transition-delay: 140ms; }

/* ---------- Modal enter / exit ---------- */

.modal {
  transition:
    opacity 200ms var(--m-ease-out),
    visibility 0s linear 260ms;
}

.modal.open {
  transition:
    opacity 260ms var(--m-ease-out),
    visibility 0s;
}

.modal-backdrop {
  transition: opacity 180ms var(--m-ease-out);
}

.modal.open .modal-backdrop {
  transition-duration: 260ms;
}

.modal-card {
  transition:
    transform 200ms var(--m-ease-out),
    opacity 180ms var(--m-ease-out);
}

.modal.open .modal-card {
  transition:
    transform 320ms var(--m-ease-out),
    opacity 240ms var(--m-ease-out);
}

/* ---------- Toast + floating cart ---------- */

.toast {
  transform: translate(-50%, 18px) scale(0.97);
  transition:
    transform 240ms var(--m-ease-out),
    opacity 200ms var(--m-ease-out);
}

.toast.show {
  transform: translate(-50%, 0) scale(1);
}

.floating-cart.show {
  animation: m-pop-in 260ms var(--m-ease-out);
}

@keyframes m-pop-in {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Cart-count bump ---------- */

.cart-count.m-bump,
#floatingCartCount.m-bump {
  animation: m-bump 320ms var(--m-ease-out);
}

@keyframes m-bump {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.18); }
}

/* ---------- Admin search / filter settling ---------- */

.products-list.m-settle {
  animation: m-list-settle 200ms var(--m-ease-out);
}

@keyframes m-list-settle {
  from { opacity: 0.55; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Reduced motion: keep the UI still and instant ---------- */

@media (prefers-reduced-motion: reduce) {
  #heroEyebrow,
  #heroTitle,
  #heroText,
  #heroCta,
  #heroPhone,
  #heroHours,
  #heroAddress,
  .hero-card,
  .auth-card,
  .admin-section:not([hidden]),
  .floating-cart.show,
  .products-list.m-settle,
  .m-bump,
  .category-btn.active,
  .admin-nav-btn.active {
    animation: none !important;
  }

  html.m-js .product-card.m-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .cart-drawer,
  .cart-drawer.open,
  .cart-backdrop,
  .cart-panel,
  .cart-head,
  .cart-items,
  .cart-foot,
  .modal,
  .modal.open,
  .modal-backdrop,
  .modal-card,
  .toast {
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }

  .cart-head,
  .cart-items,
  .cart-foot {
    opacity: 1 !important;
    transform: none !important;
  }

  :where(.btn, .ghost-btn, .add-btn, .icon-btn, .cart-btn, .category-btn, .variant-pill, .floating-cart, .admin-nav-btn, .row-actions button, .qty-control button, .lang-switch button):active {
    transform: none !important;
  }

  .btn:hover,
  .ghost-btn:hover,
  .add-btn:hover,
  .icon-btn:hover,
  .cart-btn:hover,
  .category-btn:hover,
  .variant-pill:hover,
  .admin-nav-btn:hover,
  .row-actions button:hover,
  .qty-control button:hover,
  .lang-switch button:hover,
  .product-card:hover,
  .product-card:hover .product-media img {
    transform: none !important;
  }
}