/* ═══════════════════════════════════════════════════════════════
   Açaí Real — motion.css  (iFood-style interactions)
   ═══════════════════════════════════════════════════════════════ */

/* ── Ripple effect (toque no botão) ─────────────────────────── */
@keyframes sda-ripple {
  0%   { transform: scale(0); opacity: 0.28; }
  100% { transform: scale(4); opacity: 0; }
}

/* ── Flash sutil em botões de controle (+/−) ────────────────── */
@keyframes sda-control-flash {
  0%,100% { box-shadow: 0 0 0 0 rgba(234,29,44,0); }
  40%     { box-shadow: 0 0 0 5px rgba(234,29,44,0.13); }
}

/* ── Pulso no botão "Ver sacola" quando item é adicionado ────── */
@keyframes sda-cart-bump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.035); box-shadow: 0 6px 24px rgba(234,29,44,0.45); }
  60%  { transform: scale(0.985); }
  100% { transform: scale(1); box-shadow: 0 4px 14px rgba(234,29,44,0.28); }
}

/* ── Badge de quantidade no carrinho ────────────────────────── */
@keyframes sda-badge-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  65%  { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Entrada de card de produto (lazy load) ─────────────────── */
@keyframes sda-card-in {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Sheet / drawer deslizando de baixo ─────────────────────── */
@keyframes sda-slide-up {
  0%   { transform: translateY(100%); }
  100% { transform: translateY(0); }
}
@keyframes sda-slide-down {
  0%   { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ── Backdrop fade ──────────────────────────────────────────── */
@keyframes sda-fade-in  { from { opacity:0; } to { opacity:1; } }
@keyframes sda-fade-out { from { opacity:1; } to { opacity:0; } }

/* ── Checkmark de confirmação ───────────────────────────────── */
@keyframes sda-check-pop {
  0%  { transform: scale(0) rotate(-45deg); opacity:0; }
  60% { transform: scale(1.15) rotate(4deg); opacity:1; }
  100%{ transform: scale(1) rotate(0deg); }
}

/* ── Spinner de carregamento (iFood usa 3 pontos, emulamos) ─── */
@keyframes sda-dot1 { 0%,80%,100%{transform:scale(0)}40%{transform:scale(1)} }
@keyframes sda-dot2 { 0%,80%,100%{transform:scale(0)}40%{transform:scale(1)} }
@keyframes sda-dot3 { 0%,80%,100%{transform:scale(0)}40%{transform:scale(1)} }

/* ════════ Aplicações ════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

  /* Botões de controle (+/-) */
  button.sda-control-flash {
    animation: sda-control-flash 0.28s ease-out;
  }

  /* Botão "Ver sacola" */
  button.sda-cart-pulse,
  a.sda-cart-pulse {
    animation: sda-cart-bump 0.42s cubic-bezier(0.22,1,0.36,1);
  }

  /* Badge de quantidade */
  .sda-badge-pop {
    animation: sda-badge-pop 0.32s cubic-bezier(0.22,1,0.36,1);
  }

  /* Cards entrando na tela */
  .sda-card-in {
    animation: sda-card-in 0.28s ease-out both;
  }

  /* Ripple em qualquer botão com a classe */
  .sda-ripple-host { position: relative; overflow: hidden; }
  .sda-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(234, 29, 44, 0.18);
    pointer-events: none;
    animation: sda-ripple 0.55s ease-out forwards;
    transform-origin: center;
  }
  /* Para botões de fundo vermelho o ripple fica claro */
  .sda-ripple-light .sda-ripple {
    background: rgba(255, 255, 255, 0.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  button.sda-control-flash,
  button.sda-cart-pulse,
  .sda-badge-pop,
  .sda-card-in { animation: none !important; }
}

/* ── Transições de toque (iFood: 120ms, não 200ms) ──────────── */
button, a[href] {
  -webkit-tap-highlight-color: transparent;
}

/* Esconder scrollbar mas manter scroll (iFood não tem scrollbar) */
.sda-no-scroll::-webkit-scrollbar { display: none; }
.sda-no-scroll { -ms-overflow-style: none; scrollbar-width: none; }