/* ==========================================================
   motion.css — camada de movimento (Primos das Promoções)
   Tudo aqui é aditivo. Estados iniciais "escondidos" só valem
   sob html.m, classe que o próprio motion.js adiciona: se o JS
   falhar, o site aparece completo e estático.
   A abertura (html.m-intro) é 100% CSS e se encerra sozinha.
   ========================================================== */

/* ---------- motion tokens ---------- */
:root {
  --m-out: cubic-bezier(.16, 1, .3, 1);        /* expo-out: entradas */
  --m-in: cubic-bezier(.7, 0, .84, 0);         /* expo-in: saídas */
  --m-inout: cubic-bezier(.65, 0, .35, 1);     /* trocas */
  --m-back: cubic-bezier(.34, 1.56, .64, 1);   /* overshoot ~1.56: badges, ícones, CTAs */
  --m-micro: 200ms;
  --m-ui: 420ms;
  --m-scene: 900ms;
  --m-stagger: 50ms;
}

/* A) ABERTURA: CSS crítico inline no <head> do index.html, para não bloquear a 1ª pintura */

/* ==========================================================
   B) HERO
   ========================================================== */
/* tipografia cinética: cada palavra sobe de dentro de uma máscara */
.m-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
.m-wi { display: inline-block; position: relative; z-index: 0; }
/* marca-texto que "desenha" atrás da palavra-chave */
.m-hl { position: absolute; left: -1px; right: -1px; bottom: .1em; height: .46em; z-index: -1; border-radius: 3px; background: var(--y); transform-origin: left center; }

/* brilho ambiente do amarelo (deriva lenta) + grão leve */
.m-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.m-glow::before {
  content: ''; position: absolute; width: 70%; aspect-ratio: 1; left: -10%; top: -60%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
  opacity: .55;
}
/* (grão em SVG removido: imagem de fundo grande vira candidata a LCP e atrasava a métrica) */
html.m:not(.m-rm) .m-glow::before { animation: m-drift 18s ease-in-out infinite alternate; }
@keyframes m-drift { to { transform: translate(85%, 30%) scale(1.15); } }

/* chips das lojas: lift + leve rotação, alternando o lado */
html.m .schip { transition: transform .45s var(--m-back), box-shadow .45s var(--m-out); }
html.m .schip:hover { transform: translateY(-3px) rotate(-2deg); }
html.m .schip:nth-child(even):hover { transform: translateY(-3px) rotate(2deg); }
html.m .schip--all:hover { transform: translateX(2px); }
.chips.m-drag { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.chips.m-drag a { pointer-events: none; }

/* card do QR: flutua (translate) + tilt 3D (transform) sem conflito */
html.m .qrbox { transform: perspective(700px) rotateX(var(--m-rx, 0deg)) rotateY(var(--m-ry, 0deg)); transition: transform .7s var(--m-out); }
html.m:not(.m-rm) .qrbox { animation: m-float 5.6s ease-in-out infinite; }
@keyframes m-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

/* scan-line passando pelo QR a cada ~4 s */
html.m .qrbox .qr, html.m .wsteps .qr { position: relative; overflow: hidden; }
html.m:not(.m-rm) .qrbox .qr::after, html.m:not(.m-rm) .wsteps .qr::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 34%; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(180deg, rgba(255, 194, 14, 0), rgba(255, 194, 14, .55) 80%, #ffc20e);
  transform: translateY(-105%);
  animation: m-scan 4.2s var(--m-inout) infinite;
}
html.m:not(.m-rm) .wsteps .qr::after { animation-delay: 1.6s; }
@keyframes m-scan { 0% { transform: translateY(-105%); } 32%, 100% { transform: translateY(300%); } }

/* ==========================================================
   C) FEED
   ========================================================== */
html.m .card.m-pre { opacity: 0; }
/* 1º preenchimento: já pintado (conta para o LCP), só deslocado até a entrada */
html.m .card.m-pre.m-keep { opacity: 1; transform: translateY(24px) scale(.98); }
html.m .card.m-pre .card__off, html.m .card.m-pre .off { opacity: 0; }
html.m .m-pre .wsteps li { opacity: 0; }

/* preço: dígitos de largura fixa para o count-up não "tremer" */
html.m .card .price span { font-variant-numeric: tabular-nums; }
/* count-up: o valor real segura a largura (transparente); o número que conta vem por cima */
.m-count { position: relative; color: transparent; }
.m-count::after { content: attr(data-n); position: absolute; left: 0; top: 0; color: var(--ink); }
.card.is-closed .m-count::after { color: var(--mute); }

/* preço antigo: o risco se desenha da esquerda pra direita */
html.m .card .old { position: relative; text-decoration: none; }
html.m .card .old::after {
  content: ''; position: absolute; left: -1px; right: -1px; top: 54%; height: 1.25px; border-radius: 1px; background: currentColor;
  transform-origin: left center; transition: transform .5s var(--m-out) var(--m-sd, 0s);
}
html.m .card.m-pre .old::after { transform: scaleX(0); }

/* badge de desconto: brilho diagonal passa uma vez */
html.m .card__off, html.m .card .off { overflow: hidden; }
html.m .card .off { position: relative; }
.m-shine::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .9) 50%, transparent 75%);
  transform: translateX(-130%); animation: m-shine .85s var(--m-inout) forwards;
}
@keyframes m-shine { to { transform: translateX(130%); } }

/* selo "há Xmin" com ponto pulsante nas ofertas mais recentes */
html.m .card.m-live .js-ago::before {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; vertical-align: 1px;
  background: var(--success-2);
}
html.m:not(.m-rm) .card.m-live .js-ago::before { animation: m-pulse 2s ease-in-out infinite; }
@keyframes m-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.45); opacity: .45; } }

/* hover/foco (desktop): sobe 4 px, sombra em camadas, zoom lento */
@media (hover: hover) and (pointer: fine) {
  html.m .card { transition: transform .5s var(--m-out), box-shadow .5s var(--m-out), border-color .2s; }
  html.m .card:hover, html.m .card:focus-within {
    transform: translateY(-4px); border-color: var(--line-2);
    box-shadow: 0 1px 2px rgba(27, 24, 16, .04), 0 6px 12px rgba(27, 24, 16, .06), 0 18px 36px rgba(27, 24, 16, .1);
  }
  html.m .card__img .art, html.m .card__img img { transition: transform 1s var(--m-out); }
  html.m .card:hover .card__img .art, html.m .card:hover .card__img img { transform: scale(1.06); }
}
/* toque (mobile): press rápido ao tocar no produto */
@media (hover: none) {
  html.m .card { transition: transform .12s var(--m-out); }
  html.m .card:has(.card__img:active, .card__title a:active) { transform: scale(.98); }
}

/* curtir: partículas */
.m-spark { position: fixed; z-index: 140; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; pointer-events: none; }

/* ==========================================================
   D) ABAS — pílula amarela compartilhada entre as abas
   ========================================================== */
.tabs.m-pill-on { position: relative; }
.tabs.m-pill-on .tab { z-index: 1; }
.tabs.m-pill-ready .tab[aria-selected="true"] { background: transparent; } /* só depois da pílula posicionada */
.m-pill { position: absolute; z-index: 0; border-radius: 12px; background: var(--y); pointer-events: none; }

/* ==========================================================
   E) ROTAS — painel amarelo diagonal
   ========================================================== */
html.m .view { animation: none; }
#main:focus { outline: none; }
.m-wipe {
  position: fixed; top: -10vh; bottom: -10vh; left: -25vw; width: 150vw; z-index: 125; pointer-events: none; visibility: hidden;
  background: linear-gradient(100deg, var(--y) 0%, #ffd84d 50%, var(--y) 100%);
  box-shadow: -14px 0 0 var(--y-h);
  transform: translateX(-130%) skewX(-12deg);
}

/* ==========================================================
   F) CTA TELEGRAM
   ========================================================== */
html.m .btn, html.m .cta, html.m .strip__telegram { position: relative; overflow: hidden; isolation: isolate; }
html.m .btn--telegram, html.m .strip__telegram { transition: background .15s, translate .45s var(--m-out); }
.m-ripple { position: absolute; z-index: -1; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: currentColor; opacity: .22; pointer-events: none; }
html.m:not(.m-rm) .btn--telegram:hover svg, html.m:not(.m-rm) .strip__telegram:hover svg { animation: m-hop .55s var(--m-back); }
@keyframes m-hop { 40% { transform: translate(2px, -3px) rotate(-8deg); } }

/* ==========================================================
   G) MICRO-INTERAÇÕES GLOBAIS
   ========================================================== */
/* header: logo encolhe ao grudar no topo, sombra cresce suave */
html.m .hdr { transition: box-shadow .45s var(--m-out); }
html.m .hdr .logo { transform-origin: left center; transition: transform .45s var(--m-out); }
html.m .hdr.is-stuck .logo { transform: scale(.9); }

/* barra de progresso de rolagem (na borda de baixo do header) */
/* progresso via scroll-driven animation: roda no compositor, zero JS no scroll.
   Sem suporte (Firefox/Safari antigos), a barra simplesmente não aparece. */
.m-progress { display: none; }
@supports (animation-timeline: scroll()) {
  html.m .m-progress {
    display: block; position: fixed; left: 0; right: 0; top: calc(var(--hdr-h) - 1px); height: 2px; z-index: 55; pointer-events: none;
    background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
    animation: m-prog linear both, m-prog-in linear both;
    animation-timeline: scroll(root), scroll(root);
    animation-range: normal, 40px 120px;
  }
  @keyframes m-prog { to { transform: scaleX(1); } }
  @keyframes m-prog-in { to { opacity: .85; } }
}

/* bottom nav: bolha ativa desliza */
html.m .bnav a.is-on::before { display: none; }
html.m .bnav a { z-index: 1; }
.m-bub { position: absolute; left: 0; top: 7px; height: 32px; display: flex; justify-content: center; pointer-events: none; opacity: 0; transition: transform .55s var(--m-out), opacity .25s; }
.m-bub.m-snap { transition: none; }
.m-bub i { width: 54px; height: 100%; border-radius: 16px; background: var(--y); }
.m-bub.is-on { opacity: 1; }

/* toast e aviso de destaque com mola; saída mais rápida e acelerando */
html.m .toast, html.m .newbar { transition: opacity .18s var(--m-in), transform .2s var(--m-in); }
html.m .toast.is-on, html.m .newbar.is-on { transition: opacity .25s var(--m-out), transform .55s var(--m-back); }
html.m .toast { transform: translate(-50%, 24px) scale(.94); }
html.m .toast.is-on { transform: translate(-50%, 0); }

/* modais: folha entra com expo-out */
html.m .sheet { transition: transform .5s var(--m-out); }
html.m .modal:not(.is-on) .sheet { transition: transform .2s var(--m-in); }

/* cookies: sobe por baixo, sem cobrir a navegação inferior */
/* sobe sem começar invisível: no mobile o texto do aviso é o elemento LCP */
html.m:not(.m-rm):not(.m-late) .cookie { animation: m-rise .8s var(--m-out) both; }
@keyframes m-rise { from { translate: 0 28px; } }
@media (max-width: 767px) {
  html.m .cookie { bottom: calc(64px + env(safe-area-inset-bottom)); left: 8px; right: 8px; border-radius: 20px; padding-bottom: 18px; }
}

/* pausa loops fora da tela (seletores específicos: universais custariam em todo recálculo de estilo).
   Com a aba oculta o próprio navegador já congela as animações. */
.m-off, .m-off::before, .m-off::after, .m-off .qr::after, .m-off .js-ago::before { animation-play-state: paused !important; }