/* TRECHO — motion pass. "Da chapa pra mesa": curto, físico, entra → comunica → assenta.
   Só transform/opacity (e clip-path pontual em fotografia). Nada contínuo, nada em loop.

   Contrato com o JS (assets/js/motion.js):
   - html.js-motion  → setado no <head> só com JS ativo e SEM prefers-reduced-motion.
                        Estados iniciais escondidos só existem debaixo dessa classe.
   - html.is-loading → loader da home, 1x por sessão (sessionStorage).
   - [data-motion].is-in → bloco entrou na viewport (1x, nunca repete).
   Tudo que desloca espaço fica dentro de @media (prefers-reduced-motion: no-preference). */

:root {
  /* durações — 5 degraus, nada fora disso */
  --dur-micro: 140ms;   /* toque, press */
  --dur-ui: 200ms;      /* hover, estados, header, dialog */
  --dur-reveal-s: 380ms; /* itens pequenos: faixa, categorias, cards, footer */
  --dur-reveal: 460ms;  /* texto entrando */
  --dur-media: 640ms;   /* fotografia sendo revelada */
  --dur-sheet: 520ms;   /* folha do loader saindo */

  --stagger: 70ms;
  --stagger-tight: 35ms;

  /* easings */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);        /* assentar: rápido e pousa macio */
  --ease-sheet: cubic-bezier(0.76, 0, 0.24, 1);      /* folha puxada: pega peso, solta */
  --ease-drop: cubic-bezier(0.55, 0, 0.9, 0.45);     /* gravidade: acelera na queda */
  --ease-physical: cubic-bezier(0.34, 1.4, 0.64, 1); /* micro-overshoot: SÓ feedback */

  /* amplitude */
  --rise: 12px;
  --conv-x: 16px;  /* combo: convergência lateral */
  --conv-y: 0px;

  /* header compacto */
  --header-pad: var(--space-xs);
  --header-pad-compact: 0.4rem;
}
@media (max-width: 720px) {
  :root { --rise: 8px; --conv-x: 0px; --conv-y: 8px; } /* empilhado: converge na vertical */
}

/* ======================================================================
   ESTADOS (valem com ou sem reduced-motion — só mudam de cor/forma)
   ====================================================================== */

/* header: ao sair do topo fica mais baixo e ganha um assentamento de sombra.
   margin-bottom compensa a perda de padding → nada abaixo do header se mexe. */
.site-header__inner { padding-block: var(--header-pad); }
.site-header.is-compact { margin-bottom: calc(2 * (var(--header-pad) - var(--header-pad-compact))); box-shadow: 0 10px 18px -16px rgba(37, 37, 37, 0.55); }
.site-header.is-compact .site-header__inner { padding-block: var(--header-pad-compact); }
.site-header .wordmark { transform-origin: 0 50%; }
.site-header.is-compact .wordmark { transform: scale(0.9); }

.btn { transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out); }
.site-nav a { transition: color var(--dur-ui) var(--ease-out); }
.cat-nav a { transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.chip { transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.item { transition: transform var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out); }

/* botão + : vira ✓ por um instante depois que o item entrou no carrinho */
.item__add { position: relative; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-ui) var(--ease-out); }
.item__add::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 0.62em; height: 0.34em; margin: -0.26em 0 0 -0.31em;
  border-left: 3px solid var(--warm-white); border-bottom: 3px solid var(--warm-white);
  transform: rotate(-45deg) scale(0.4); opacity: 0;
}
.item__add.is-added { color: transparent; background: var(--cta-hover); }
.item__add.is-added::after { opacity: 1; transform: rotate(-45deg); }

/* passos: estado final de "pede" em Tijolo (sequência anima até aqui).
   ajuste técnico: a <ul> herdava bullet + padding-left padrão do navegador — o bullet
   caía exatamente onde a linha de progresso passa (e descentralizava o bloco em 20px). */
.steps-inline { list-style: none; padding-left: 0; }
.steps-inline li { position: relative; }
.steps-inline li + li::before {
  content: ""; position: absolute; top: calc(var(--step-2) * 0.78);
  left: calc(-1 * var(--space-l) + 6px); width: calc(var(--space-l) - 12px); height: 2px;
  background: var(--graphite); opacity: 0.3; border-radius: 2px; transform-origin: 0 50%;
}
.steps-inline li:last-child span { color: var(--brick); font-weight: 700; }

/* microassinatura da frita: 3 palitos ao lado do kicker, estáticos em repouso */
.fry-marks { display: inline-flex; align-items: flex-end; gap: 3px; height: 1em; margin-left: 0.7em; vertical-align: -0.12em; }
.fry-marks i { display: block; width: 4px; border-radius: 1.5px; background: var(--brick); transform: rotate(var(--r)); }
.fry-marks i:nth-child(1) { height: 0.8em; --r: -12deg; }
.fry-marks i:nth-child(2) { height: 1.1em; --r: 3deg; }
.fry-marks i:nth-child(3) { height: 0.9em; --r: 15deg; }

/* loader: só existe visualmente com html.is-loading (JS + sem reduced-motion) */
.loader { display: none; }

/* ======================================================================
   MOVIMENTO — só pra quem não pediu redução
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* ---------- transições de header ---------- */
  .site-header { transition: margin-bottom var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out); }
  .site-header__inner { transition: padding-block var(--dur-ui) var(--ease-out); }
  .site-header .wordmark { transition: transform var(--dur-ui) var(--ease-out); }

  /* ---------- CTAs: linguagem física única ---------- */
  @media (hover: hover) and (pointer: fine) {
    .btn:hover { transform: translateY(-1px); }
    .cat-nav a:hover { border-color: var(--graphite); }
    .chip:hover { border-color: var(--graphite); }
    .item:hover { transform: translateY(-2px); border-color: rgba(37, 37, 37, 0.24); }
    .item__add:hover { background: var(--cta-hover); transform: translateY(-1px); }
  }
  .btn:active, .btn--primary:active { transform: scale(0.97); transition-duration: 80ms; }
  .cat-nav a:active, .chip:active { transform: scale(0.97); transition-duration: 80ms; }
  .item__add:active { transform: scale(0.9); transition-duration: 80ms; }
  .item__add.is-pressed { transform: scale(0.86); transition-duration: 80ms; }
  .item__add.is-added::after { transition: transform var(--dur-ui) var(--ease-physical), opacity var(--dur-micro) linear; }
  .cart-toggle__count.is-bump { animation: mo-bump 320ms var(--ease-physical); }

  /* ---------- dialogs (item + carrinho): assentam, não voam ---------- */
  dialog[open] { animation: mo-dialog-in var(--dur-ui) var(--ease-out); }
  dialog[open]::backdrop { animation: mo-fade var(--dur-ui) linear; }
  .cart-line.is-new { animation: mo-rise var(--dur-reveal) var(--ease-out) backwards; --rise: 6px; }

  /* ---------- LOADER ---------- */
  html.is-loading .loader {
    display: grid; place-items: center;
    position: fixed; inset: 0; z-index: 100;
    background: var(--cream);
    border-bottom: 2px solid var(--graphite);
    touch-action: none;
  }
  .loader.is-leaving { animation: mo-sheet-up var(--dur-sheet) var(--ease-sheet) forwards; }
  .loader__stage { animation: mo-rise 220ms var(--ease-out) backwards; --rise: 6px; }
  .loader__bag { display: block; width: clamp(124px, 30vw, 148px); height: auto; overflow: visible; transform-origin: 50% 100%; animation: mo-squash 240ms var(--ease-out) 1020ms both; }
  .loader__back { fill: var(--cta-hover); }
  .loader__front { fill: var(--brick); }
  .loader__word { fill: var(--cream); font-family: var(--font-display); font-size: 13px; letter-spacing: 0.01em; animation: mo-word 220ms var(--ease-out) 960ms backwards; }
  .fry { transform-box: fill-box; transform-origin: 50% 50%; animation: mo-fry-drop 420ms linear calc(150ms + var(--i) * 95ms) backwards; }
  .fry rect { fill: var(--warm-white); stroke: var(--graphite); stroke-width: 2; }

  /* ---------- HERO (entra junto com a saída do loader) ---------- */
  .hero { --t0: 0ms; }
  .hero.after-loader { --t0: 110ms; }
  html.js-motion .hero:not(.is-in) .hero__media img { clip-path: inset(6% 5% 6% 5% round var(--radius)); transform: scale(1.02); }
  html.js-motion .hero:not(.is-in) .hero__w,
  html.js-motion .hero:not(.is-in) .hero__sub,
  html.js-motion .hero:not(.is-in) .hero__actions { opacity: 0; }

  .hero.is-in .hero__media img { animation: mo-open var(--dur-media) var(--ease-out) var(--t0) backwards; }
  .hero.is-in .hero__title { animation: mo-rise-soft var(--dur-reveal) var(--ease-out) calc(var(--t0) + 90ms) backwards; }
  .hero.is-in .hero__w { animation: mo-fade var(--dur-reveal-s) var(--ease-out) calc(var(--t0) + 90ms) backwards; }
  .hero.is-in .hero__w + .hero__w { animation-delay: calc(var(--t0) + 180ms); }
  .hero.is-in .hero__sub,
  .hero.is-in .hero__actions { animation: mo-rise var(--dur-reveal) var(--ease-out) calc(var(--t0) + 280ms) backwards; --rise: 8px; }

  /* ---------- reveals genéricos por bloco ---------- */
  /* --mo-base: atraso extra só pro que já estava na tela quando o hero entrou */

  /* faixa delivery / retirada / pedido direto */
  html.js-motion .info-strip:not(.is-in) .info-strip__item { opacity: 0; }
  .info-strip.is-in .info-strip__item { --rise: 6px; animation: mo-rise var(--dur-reveal-s) var(--ease-out) calc(var(--mo-base, 0ms) + var(--n, 0) * var(--stagger-tight) * 2) backwards; }
  .info-strip__item:nth-child(2) { --n: 1; }
  .info-strip__item:nth-child(3) { --n: 2; }

  /* cabeçalhos de seção: kicker → título assenta → lead */
  html.js-motion [data-motion="heading"]:not(.is-in) > * { opacity: 0; }
  [data-motion="heading"].is-in > * { animation: mo-rise var(--dur-reveal) var(--ease-out) calc(var(--mo-base, 0ms) + var(--n, 0) * var(--stagger)) backwards; }
  [data-motion="heading"] > :nth-child(2) { --n: 1; }
  [data-motion="heading"] > :nth-child(3) { --n: 2; }

  /* categorias + cards (chegam async da API; --i vem do JS, com teto) */
  html.js-motion .cat-nav__scroll:not(.is-in) > a,
  html.js-motion .items:not(.is-in) > .item { opacity: 0; }
  .cat-nav__scroll.is-in > a { --rise: 6px; animation: mo-rise var(--dur-reveal-s) var(--ease-out) calc(var(--mo-base, 0ms) + var(--i, 0) * var(--stagger-tight)) backwards; }
  .items.is-in > .item { --rise: 10px; animation: mo-rise var(--dur-reveal-s) var(--ease-out) calc(var(--mo-base, 0ms) + var(--i, 0) * var(--stagger-tight)) backwards; }

  /* blocos editoriais — texto sempre em stagger curto, imagem muda por bloco */
  html.js-motion .editorial[data-motion]:not(.is-in) .editorial__copy > * { opacity: 0; }
  .editorial.is-in .editorial__copy > * { animation: mo-rise var(--dur-reveal) var(--ease-out) calc(var(--copy-t0, 120ms) + var(--n, 0) * var(--stagger)) backwards; }
  .editorial__copy > :nth-child(2) { --n: 1; }
  .editorial__copy > :nth-child(3) { --n: 2; }
  .editorial__copy > :nth-child(4) { --n: 3; }

  /* SMASH + FRITAS: produto colocado na bancada — máscara sobe da base */
  html.js-motion [data-motion="smash"]:not(.is-in) .editorial__media img,
  html.js-motion [data-motion="fritas"]:not(.is-in) .editorial__media img { clip-path: inset(100% 0 0 0 round var(--radius)); }
  [data-motion="smash"].is-in .editorial__media img,
  [data-motion="fritas"].is-in .editorial__media img { animation: mo-clip-up var(--dur-media) var(--ease-out) backwards, mo-settle var(--dur-media) var(--ease-out) backwards; }

  /* COMBO: imagem e texto convergem e assentam (vertical no mobile) */
  html.js-motion [data-motion="combo"]:not(.is-in) .editorial__media { opacity: 0; }
  [data-motion="combo"].is-in .editorial__media { --dir: -1; animation: mo-converge var(--dur-media) var(--ease-out) backwards; }
  [data-motion="combo"].is-in .editorial__copy > * { --dir: 1; animation-name: mo-converge; }

  /* FRITAS: palitinhos caem ao lado do kicker, 1x, e ficam parados */
  html.js-motion [data-motion="fritas"]:not(.is-in) .fry-marks i { opacity: 0; }
  [data-motion="fritas"].is-in .fry-marks i { animation: mo-stick var(--dur-reveal-s) var(--ease-physical) calc(var(--copy-t0, 120ms) + 180ms + var(--k, 0) * 70ms) backwards; }
  .fry-marks i:nth-child(2) { --k: 1; }
  .fry-marks i:nth-child(3) { --k: 2; }

  /* MESA: editorial, sem pressa — foto aparece, texto vem depois */
  [data-motion="mesa"] { --copy-t0: 260ms; }
  html.js-motion [data-motion="mesa"]:not(.is-in) .editorial__media img { opacity: 0; }
  [data-motion="mesa"].is-in .editorial__media img { animation: mo-fade var(--dur-media) var(--ease-out) backwards, mo-settle var(--dur-media) var(--ease-out) backwards; }
  [data-motion="mesa"].is-in .editorial__copy > * { --rise: 8px; animation-duration: var(--dur-media); }

  /* CHAPA: passagem horizontal pela bancada */
  html.js-motion [data-motion="chapa"]:not(.is-in) .editorial__media img { clip-path: inset(0 100% 0 0 round var(--radius)); }
  [data-motion="chapa"].is-in .editorial__media img { animation: mo-clip-right var(--dur-media) var(--ease-out) backwards; }

  /* ESCOLHE → MONTA → PEDE: sequência única (~900ms), estado final estático */
  html.js-motion [data-motion="steps"]:not(.is-in) li { opacity: 0; }
  html.js-motion [data-motion="steps"]:not(.is-in) li + li::before { transform: scaleX(0); }
  [data-motion="steps"].is-in li { --rise: 8px; animation: mo-rise 260ms var(--ease-out) calc(var(--s, 0) * 280ms) backwards; }
  [data-motion="steps"].is-in li + li::before { animation: mo-draw 150ms var(--ease-out) calc(var(--s, 0) * 280ms - 150ms) backwards; }
  [data-motion="steps"].is-in li:last-child span { animation: mo-mark 200ms var(--ease-out) 760ms backwards; }
  [data-motion="steps"] li:nth-child(2) { --s: 1; }
  [data-motion="steps"] li:nth-child(3) { --s: 2; }

  /* FOOTER: TRECHO primeiro, o resto logo depois. termina em repouso. */
  html.js-motion [data-motion="footer"]:not(.is-in) .wordmark,
  html.js-motion [data-motion="footer"]:not(.is-in) .site-footer__inner p,
  html.js-motion [data-motion="footer"]:not(.is-in) .site-footer__inner .btn { opacity: 0; }
  [data-motion="footer"].is-in .wordmark { --rise: 8px; animation: mo-rise var(--dur-reveal-s) var(--ease-out) backwards; }
  [data-motion="footer"].is-in .site-footer__inner p,
  [data-motion="footer"].is-in .site-footer__inner .btn { --rise: 6px; animation: mo-rise var(--dur-reveal-s) var(--ease-out) var(--stagger) backwards; }

  /* revelado sem animar (ex.: bloco já tinha passado quando a página carregou rolada) */
  .no-anim, .no-anim * { animation: none !important; }
}

/* ======================================================================
   KEYFRAMES (só "from": o "to" é sempre o estado de repouso do elemento)
   ====================================================================== */
@keyframes mo-fade { from { opacity: 0; } }
@keyframes mo-rise { from { opacity: 0; transform: translate3d(0, var(--rise), 0); } }
@keyframes mo-rise-soft { from { transform: translate3d(0, 10px, 0); } }
@keyframes mo-converge { from { opacity: 0; transform: translate3d(calc(var(--dir, 1) * var(--conv-x)), var(--conv-y), 0); } }
@keyframes mo-settle { from { transform: scale(1.03); } }
@keyframes mo-open { from { clip-path: inset(6% 5% 6% 5% round var(--radius)); transform: scale(1.02); } to { clip-path: inset(0 0 0 0 round var(--radius)); transform: none; } }
@keyframes mo-clip-up { from { clip-path: inset(100% 0 0 0 round var(--radius)); } to { clip-path: inset(0 0 0 0 round var(--radius)); } }
@keyframes mo-clip-right { from { clip-path: inset(0 100% 0 0 round var(--radius)); } to { clip-path: inset(0 0 0 0 round var(--radius)); } }
@keyframes mo-draw { from { transform: scaleX(0); } }
@keyframes mo-mark { from { color: var(--graphite); } }
@keyframes mo-stick { from { opacity: 0; transform: translate3d(0, -9px, 0) rotate(calc(var(--r) - 18deg)); } }
@keyframes mo-dialog-in { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.985); } }
@keyframes mo-bump { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes mo-sheet-up { to { transform: translate3d(0, -100%, 0); } }
@keyframes mo-squash { 0% { transform: none; } 40% { transform: scale(1.035, 0.93); } 100% { transform: none; } }
@keyframes mo-word { from { opacity: 0; transform: translateY(3px); } }
/* queda da batata: acelera (gravidade) → pequeno impacto → assenta. só no loader. */
@keyframes mo-fry-drop {
  0%   { opacity: 0; transform: translate(var(--x), -104px) rotate(var(--r)); animation-timing-function: var(--ease-drop); }
  12%  { opacity: 1; }
  68%  { transform: translate(0, 3px) rotate(0deg); animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1); }
  84%  { transform: translate(0, -2px) rotate(0deg); animation-timing-function: var(--ease-out); }
  100% { transform: none; }
}

/* ======================================================================
   REDUCED MOTION: nada se desloca, nada em stagger, sem loader, sem smooth
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active, .btn--primary:active { transform: none; }
  .site-header .wordmark, .site-header.is-compact .wordmark { transform: none; }
}