/* Movimento discreto para a identidade da Cantina Sabor Paulista. */
:root {
  --motion-quick: 160ms;
  --motion-standard: 240ms;
  --motion-gentle: 360ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

.cart-flying-product {
  position: fixed;
  z-index: 70;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 2px solid #fffaf0;
  border-radius: 9px;
  box-shadow: 0 5px 16px #27110d45;
  pointer-events: none;
  will-change: transform, opacity;
}

.cart-flight-destination {
  position: fixed;
  z-index: 69;
  top: calc(12px + env(safe-area-inset-top));
  right: 16px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--wine);
  box-shadow: 0 5px 15px #27110d38;
  pointer-events: none;
}

.cart-flight-destination img { width: 26px; height: 26px; object-fit: contain; }
.cart-flight-destination b {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  border-radius: 10px;
  background: #fffaf0;
  color: var(--wine);
  font: 700 10px/1 var(--sans);
}

@media (prefers-reduced-motion: reduce) {
  .cart-flying-product, .cart-flight-destination { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes cantina-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes cantina-soft-enter {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes cantina-confirm {
    from { opacity: 0; transform: scale(.96); }
    to { opacity: 1; transform: scale(1); }
  }

  .route-inicio .home-hero-copy h1 {
    animation: cantina-enter var(--motion-gentle) var(--motion-ease) both;
  }

  .route-inicio .home-order-link {
    animation: cantina-enter var(--motion-gentle) var(--motion-ease) 90ms both;
  }

  :is(.route-cardapio, .route-pedidos, .route-carrinho) .photo-hero .hero-copy h1 {
    animation: cantina-enter var(--motion-gentle) var(--motion-ease) both;
  }

  :is(.route-cardapio, .route-pedidos, .route-carrinho) .photo-hero .hero-copy p {
    animation: cantina-enter var(--motion-gentle) var(--motion-ease) 70ms both;
  }

  .desktop-nav a,
  .management-sidebar nav button {
    transition: background-color var(--motion-quick) ease-out,
      color var(--motion-quick) ease-out,
      border-color var(--motion-quick) ease-out;
  }

  .wine-button,
  .add-product {
    transition: background-color var(--motion-quick) ease-out,
      color var(--motion-quick) ease-out,
      border-color var(--motion-quick) ease-out,
      transform var(--motion-quick) var(--motion-ease);
  }

  :is(.wine-button, .add-product):not(:disabled):active {
    transform: scale(.98);
  }

  @media (hover: hover) and (pointer: fine) {
    .route-inicio .home-carousel .feature-card .photo-frame img {
      transition: transform var(--motion-standard) var(--motion-ease);
    }

    .route-inicio .home-carousel:not(.is-dragging) .feature-card:is(:hover,:focus-within) .photo-frame img {
      transform: scale(calc(var(--photo-zoom, 1) + .04));
    }

    .route-cardapio .menu-grid .product-card .photo-frame img {
      transition: transform var(--motion-standard) var(--motion-ease);
    }

    .route-cardapio .menu-grid .product-card:is(:hover, :focus-within) .photo-frame img {
      transform: scale(calc(var(--photo-zoom, 1) + .03));
    }
  }

  @media (hover: none) and (pointer: coarse) {
    .route-inicio .home-carousel .feature-card .photo-frame img {
      transition: transform var(--motion-standard) var(--motion-ease);
    }

    .route-inicio .home-carousel .feature-card:active .photo-frame img {
      transform: scale(calc(var(--photo-zoom, 1) + .03));
    }
  }

  .schedule-days button:not(:disabled),
  .schedule-slot:not(.unavailable),
  .payment-option {
    transition: background-color var(--motion-quick) ease-out,
      border-color var(--motion-quick) ease-out,
      box-shadow var(--motion-quick) ease-out;
  }

  .payment-option:has(input:checked) {
    background-color: #73051f08;
    box-shadow: inset 0 0 0 1px #73051f18;
  }

  :is(.auth-card, .profile-page, .contact-page, .admin-dashboard) :is(input, select, textarea) {
    transition: border-color var(--motion-quick) ease-out,
      background-color var(--motion-quick) ease-out,
      box-shadow var(--motion-quick) ease-out;
  }

  :is(.auth-card, .profile-page, .contact-page, .admin-dashboard) :is(input, select, textarea):focus-visible {
    box-shadow: 0 0 0 3px #73051f14;
  }

  .field-error,
  .form-feedback:not(:empty),
  #schedule-feedback:not(:empty),
  .pickup-feedback:not(:empty),
  .payment-page .payment-notice {
    animation: cantina-soft-enter var(--motion-standard) var(--motion-ease) both;
  }

  .payment-state .state-icon {
    animation: cantina-confirm 300ms var(--motion-ease) both;
  }

  .management-chevron {
    transition: transform var(--motion-standard) var(--motion-ease);
  }

  .management-record[open] .management-record-body,
  .management-mobile-menu[open] nav {
    animation: cantina-soft-enter var(--motion-standard) var(--motion-ease) both;
  }

  .admin-dashboard.motion-tab-change .management-hero-copy,
  .admin-dashboard.motion-tab-change .management-section {
    animation: cantina-soft-enter var(--motion-standard) var(--motion-ease) both;
  }
}