/* Part 4 — premium motion system (overrides / additions) */

:root {
  --motion-instant: 100ms;
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-screen: 320ms;
  --motion-slow: 420ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-soft: cubic-bezier(0.25, 0.8, 0.25, 1);
}

.app__stage {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  transition:
    transform var(--motion-screen) var(--ease-standard),
    opacity var(--motion-screen) var(--ease-standard),
    filter var(--motion-screen) var(--ease-standard);
  will-change: transform, opacity, filter;
}

.app.is-cart-open .app__stage {
  transform: scale(0.985);
  opacity: 0.72;
  filter: blur(3px);
  pointer-events: none;
}

.app.is-menu-open .reel {
  transition:
    filter var(--motion-base) var(--ease-standard),
    transform var(--motion-screen) var(--ease-enter),
    opacity var(--motion-base) var(--ease-standard);
}

/* Intro — keep text visible after animation; no opacity:0 !important traps */
.app.is-booting .topbar {
  opacity: 0;
}

.app.is-booting .slide.is-active .slide__info {
  opacity: 0;
}

.app:not(.is-booting) .topbar {
  transition: opacity var(--motion-base) var(--ease-enter);
}

.app.is-intro .slide.is-active .slide__info > * {
  animation: introIn 320ms var(--ease-enter) both;
}

.app.is-intro .slide.is-active .slide__title { animation-delay: 80ms; }
.app.is-intro .slide.is-active .slide__price { animation-delay: 120ms; }
.app.is-intro .slide.is-active .slide__desc,
.app.is-intro .slide.is-active .slide__weight { animation-delay: 160ms; }
.app.is-intro .slide.is-active .add-btn { animation-delay: 200ms; }
.app.is-intro .slide.is-active .swipe-hint { animation-delay: 400ms; }
.app.is-intro .fixed-category {
  animation: introIn 320ms var(--ease-enter) both;
  animation-delay: 40ms;
}
.app.is-intro .fixed-pager {
  animation: introIn 320ms var(--ease-enter) both;
  animation-delay: 240ms;
}

@keyframes introIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dish change */
.slide.is-switching .slide__info > * {
  animation: dishInfoIn 280ms var(--ease-enter) both;
}

.slide.is-switching .slide__title { animation-delay: 0ms; }
.slide.is-switching .slide__price { animation-delay: 35ms; }
.slide.is-switching .slide__desc,
.slide.is-switching .slide__weight { animation-delay: 70ms; }
.slide.is-switching .add-btn { animation-delay: 105ms; }

@keyframes dishInfoIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Buttons */
.icon-btn,
.cart-close,
.add-btn,
.cart-checkout,
.cart-promo__btn,
.cart-empty-state__btn,
.fs-call,
.qty button {
  transition:
    transform var(--motion-instant) ease-out,
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.icon-btn:active,
.cart-close:active {
  transform: scale(0.94);
}

.add-btn:active:not(:disabled),
.cart-checkout:active:not(:disabled),
.cart-promo__btn:active:not(:disabled),
.cart-empty-state__btn:active {
  transform: scale(0.98);
}

@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover,
  .cart-close:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.22);
  }
}

@media (hover: hover) and (pointer: fine) {
  .icon-btn:focus-visible,
  .cart-close:focus-visible,
  .add-btn:focus-visible,
  .fs-nav__item:focus-visible,
  .cart-checkout:focus-visible,
  .cart-promo__btn:focus-visible,
  .qty button:focus-visible {
    outline: 2px solid #f0a25c;
    outline-offset: 3px;
  }
}

/* Touch: no sticky outline after taps */
@media (hover: none), (pointer: coarse) {
  .icon-btn:focus,
  .icon-btn:focus-visible {
    outline: none;
  }
}

.cart-badge.is-bump {
  animation: badgeBump 240ms var(--ease-standard);
}

@keyframes badgeBump {
  0% { transform: scale(0.7); }
  55% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.qty__value.is-up {
  animation: qtyUp 200ms var(--ease-standard);
}

.qty__value.is-down {
  animation: qtyDown 200ms var(--ease-standard);
}

@keyframes qtyUp {
  from { transform: translateY(8px); opacity: 0.35; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes qtyDown {
  from { transform: translateY(-8px); opacity: 0.35; }
  to { transform: translateY(0); opacity: 1; }
}

#cartTotal.is-tick {
  display: inline-block;
  animation: totalTick 180ms var(--ease-standard);
}

@keyframes totalTick {
  from { opacity: 0.4; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.cart-card.is-enter {
  animation: cardEnter 280ms var(--ease-enter) both;
}

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cart-screen__drawer {
  transition:
    transform var(--motion-screen) var(--ease-enter) !important;
}

.cart-screen.is-closing .cart-screen__drawer {
  transform: translateX(100%) !important;
  transition: transform 260ms var(--ease-exit) !important;
}

.cart-screen.is-closing .cart-screen__backdrop {
  opacity: 0 !important;
}

.cart-summary {
  transition:
    transform 280ms var(--ease-enter),
    opacity 240ms var(--ease-enter) !important;
}

.cart-screen:not(.is-open) .cart-summary {
  transform: translateY(12px);
  opacity: 0;
}

.cart-screen.is-open .cart-summary:not([hidden]) {
  transform: translateY(0);
  opacity: 1;
}

.cart-summary[hidden] {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}

.fs-menu {
  transition:
    opacity var(--motion-base) var(--ease-standard),
    visibility var(--motion-base) !important;
}

.fs-menu__content {
  transition:
    opacity var(--motion-base) var(--ease-enter),
    transform var(--motion-screen) var(--ease-enter) !important;
}

.fs-menu.is-closing .fs-menu__content {
  transform: translateX(16px) !important;
  transition-duration: 220ms !important;
  transition-timing-function: var(--ease-exit) !important;
}

.fs-nav__arrow {
  transition: transform var(--motion-fast) var(--ease-standard);
}

.fs-nav__item:active:not(:disabled) .fs-nav__arrow {
  transform: translateX(4px);
}

.fs-nav__item.is-active::before {
  transform-origin: left center;
  animation: lineGrow 200ms var(--ease-standard) both;
}

@keyframes lineGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.subpage {
  transition:
    opacity 280ms var(--ease-enter),
    transform 300ms var(--ease-enter) !important;
}

.subpage.is-closing-forward {
  transform: translateX(100%) !important;
  opacity: 0 !important;
  transition: transform 280ms var(--ease-exit), opacity 220ms var(--ease-exit) !important;
}

.subpage.is-closing-back {
  transform: translateX(24px) !important;
  opacity: 0 !important;
  transition: transform 260ms var(--ease-exit), opacity 220ms var(--ease-exit) !important;
}

.network-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1300;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #fff9f3;
  background: rgba(40, 18, 16, 0.94);
  border-bottom: 1px solid rgba(232, 91, 85, 0.4);
  transform: translateY(-110%);
  transition: transform var(--motion-base) var(--ease-enter);
  pointer-events: none;
}

.network-banner.is-online {
  background: rgba(18, 40, 24, 0.94);
  border-bottom-color: rgba(56, 201, 118, 0.4);
}

.network-banner.is-visible {
  transform: translateY(0);
}

.cart-promo__input {
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard) !important;
}

.cart-promo__input:focus {
  border-color: #e99a54 !important;
  background: rgba(255, 255, 255, 0.07) !important;
  outline: none !important;
}

.cart-promo__input.is-error {
  animation: fieldShake 180ms var(--ease-standard);
}

@keyframes fieldShake {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-3px); }
  70% { transform: translateX(3px); }
}

.cart-notice:not([hidden]) {
  animation: noticeIn 240ms var(--ease-enter) both;
}

@keyframes noticeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: skeleton 1.6s ease-in-out infinite;
  border-radius: 10px;
}

@keyframes skeleton {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.swipe-nudge.is-visible .swipe-nudge__arrow {
  animation: swipeNudgeArrow 0.9s var(--ease-standard) infinite;
}

@keyframes swipeNudgeArrow {
  0%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(5px);
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app__stage,
  .app.is-cart-open .app__stage,
  .app.is-menu-open .reel,
  .cart-screen,
  .cart-screen__drawer,
  .cart-screen__backdrop,
  .fs-menu,
  .fs-menu__content,
  .subpage,
  .network-banner,
  .cart-summary {
    transition-duration: 80ms !important;
    filter: none !important;
    transform: none !important;
  }

  .app.is-cart-open .app__stage {
    opacity: 0.78;
  }

  .slide.is-switching .slide__info > *,
  .app.is-intro .slide.is-active .slide__info > *,
  .cart-card.is-enter,
  .fs-nav__item.is-enter,
  .cart-badge.is-bump,
  .qty__value.is-up,
  .qty__value.is-down,
  #cartTotal.is-tick,
  .cart-notice:not([hidden]),
  .fs-nav__item.is-active::before,
  .swipe-nudge.is-visible .swipe-nudge__arrow {
    animation: none !important;
  }

  .skeleton {
    animation: none !important;
  }
}