/* ============================================================
   Reveal Cinematográfico de Entrada — Seção "Faça seu pedido"
   Escopo: section.pedido (#pedido). NÃO altera HTML/cores/imagens/layout.
   Carregado DEPOIS dos estilos inline → sobrescreve as animações antigas.
   Acompanha: animacoes.js (ativa via IntersectionObserver, re-toca a cada entrada).

   IDEIA: ao entrar na seção, cada textura ESCORREGA e PREENCHE sua faixa,
   devagar — sai da cor chapada da bandeira e a textura vai se preenchendo:
     • verde   → preenche de baixo p/ cima
     • branca  → preenche de cima p/ baixo
     • vermelha→ preenche de baixo p/ cima, mais rápido
   clip-path = "preenche a lacuna" | background-position = "escorrega".
   A máscara diagonal (forma da faixa) fica fixa → listras sempre alinhadas.
   ============================================================ */

/* Antes de preencher: BLOCO ÚNICO BRANCO — sem gradiente, sem divisão de
   coluna. As próprias texturas (coloridas) formam a bandeira ao preencher. */
.pedido{ background: #fff !important; }

.pedido .faixa-verde,
.pedido .faixa-branca,
.pedido .faixa-vermelha{
  background-size: 130% 150% !important;   /* folga p/ a textura escorregar */
  will-change: clip-path, background-position;
}

/* -------- estado inicial: faixa "vazia" (textura fora/recolhida) --------
   Só é aplicado pelo JS (.anim-ready) quando há animação habilitada. */
.pedido.anim-ready .faixa-verde   { clip-path: inset(100% 0 0 0); background-position: center 100%; }
.pedido.anim-ready .faixa-vermelha{ clip-path: inset(100% 0 0 0); background-position: center 100%; }
.pedido.anim-ready .faixa-branca  { clip-path: inset(0 0 100% 0); background-position: center 0%; }

.pedido.anim-ready h2,
.pedido.anim-ready .small{ opacity: 0; transform: translateY(24px); }
.pedido.anim-ready .small{ animation: none; }
.pedido.anim-ready .acoes .btn{ opacity: 0; transform: translateY(18px) scale(.97); animation: none; will-change: transform, opacity; }

/* -------- estado final: textura preencheu a faixa (centro) -------- */
.pedido.anim-in .faixa-verde,
.pedido.anim-in .faixa-branca,
.pedido.anim-in .faixa-vermelha{ clip-path: inset(0 0 0 0); background-position: center 50%; }

/* reveal LENTO (um pouco mais devagar), escalonado; vermelha "sobe mais rápido" */
.pedido.anim-in .faixa-verde   { transition: clip-path 2.4s cubic-bezier(.22,.61,.36,1) .05s, background-position 2.4s cubic-bezier(.22,.61,.36,1) .05s; }
.pedido.anim-in .faixa-branca  { transition: clip-path 2.8s cubic-bezier(.22,.61,.36,1) .35s, background-position 2.8s cubic-bezier(.22,.61,.36,1) .35s; }
.pedido.anim-in .faixa-vermelha{ transition: clip-path 1.9s cubic-bezier(.22,.61,.36,1) .55s, background-position 1.9s cubic-bezier(.22,.61,.36,1) .55s; }

/* conteúdo ACOMPANHA o preenchimento (entra junto, mais devagar) */
.pedido.anim-in h2{ opacity: 1; transform: none; transition: opacity 1.1s ease-out .35s, transform 1.1s ease-out .35s; }
.pedido.anim-in .small{ opacity: 1; transform: none; transition: opacity 1s ease-out .60s, transform 1s ease-out .60s; }
.pedido.anim-in .acoes .btn{ opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.2,.75,.25,1), transform .9s cubic-bezier(.2,.75,.25,1); }
.pedido.anim-in .acoes .btn:nth-child(1){ transition-delay: 1.15s; }
.pedido.anim-in .acoes .btn:nth-child(2){ transition-delay: 1.50s; }
.pedido.anim-in .acoes .btn:nth-child(3){ transition-delay: 1.85s; }

/* ============================================================
   SHIMMER dos botões — reflexo discreto a cada ~7s (ambiente).
   ============================================================ */
.pedido .acoes .btn{ position: relative; overflow: hidden; }
.pedido .acoes .btn::after{
  content: ""; position: absolute; top: 0; left: 0; width: 38%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
  transform: translateX(-180%) skewX(-18deg);
  animation: rm-btn-shimmer 7s ease-in-out infinite;
}
.pedido .acoes .btn:nth-child(2)::after{ animation-delay: 2.3s; }
.pedido .acoes .btn:nth-child(3)::after{ animation-delay: 4.6s; }
@keyframes rm-btn-shimmer{
  0%   { transform: translateX(-180%) skewX(-18deg); }
  14%  { transform: translateX(360%)  skewX(-18deg); }
  100% { transform: translateX(360%)  skewX(-18deg); }
}

/* ============================================================
   PIMENTAS — balanço sutil de objeto real (ambiente, contínuo).
   ============================================================ */
.pedido .pedido-pimenta{ animation: rm-pim-sway 6s ease-in-out infinite !important; will-change: rotate, translate; }
.pedido .pedido-pimenta.p2{ animation-duration: 6.8s !important; animation-delay: .4s !important; }
@keyframes rm-pim-sway{
  0%,100% { rotate: -3deg; translate: 0 0; }
  50%     { rotate:  3deg; translate: 0 -4px; }
}

/* ---------- Responsivo / acessibilidade ---------- */
@media (max-width: 760px){
  .pedido .faixa-verde,.pedido .faixa-branca,.pedido .faixa-vermelha{ background-size: 130% 140% !important; }
}
@media (prefers-reduced-motion: reduce){
  .pedido .pedido-pimenta,
  .pedido .acoes .btn::after{ animation: none !important; }
}