/* Animações do biolink e do cardápio de festas da Vó Dazinha. Cada bloco leva o número do item da lista.
   Cada regra só vale com a classe  an-N  no <html> (ver animacoes.js). Movimento só com  mov;
   com "reduzir movimento" (classe  rm ) tudo vira aparecer simples e o fundo fica parado. */
@font-face { font-family: 'Pinyon Script'; src: url('/vodazinha/assets/fonts/pinyon-script.woff2') format('woff2'); font-display: swap; }
html { --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 600ms; }
body { position: relative; }
.wrap { position: relative; z-index: 1; }

/* ===== 5 a 9: fundo com vida ===== */
.fv-ilus { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fv-ilus .ilu { position: absolute; width: var(--w, 64px); height: var(--w, 64px); color: var(--lover, #AB1415); opacity: .09; transform: rotate(var(--r, 0deg)); will-change: transform; }
html.mov.an-6 .fv-ilus .ilu { animation: ilu-flutua var(--d, 10s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes ilu-flutua { from { transform: translate3d(0, -9px, 0) rotate(calc(var(--r, 0deg) - 5deg)); } to { transform: translate3d(0, 9px, 0) rotate(calc(var(--r, 0deg) + 5deg)); } }

.fv-manchas, .fv-gran { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fv-manchas i { position: absolute; width: 78vmax; height: 78vmax; border-radius: 50%; will-change: transform; }
.fv-manchas .m1 { left: -30vmax; top: -22vmax; background: radial-gradient(circle, rgba(242, 201, 76, .46) 0%, rgba(242, 201, 76, 0) 64%); }
.fv-manchas .m2 { right: -36vmax; top: 28vh; background: radial-gradient(circle, rgba(171, 20, 21, .13) 0%, rgba(171, 20, 21, 0) 62%); }
.fv-manchas .m3 { left: -20vmax; bottom: -40vmax; background: radial-gradient(circle, rgba(245, 222, 191, .85) 0%, rgba(245, 222, 191, 0) 64%); }
html.mov.an-7 .fv-manchas .m1 { animation: mancha-a 21s ease-in-out infinite alternate; }
html.mov.an-7 .fv-manchas .m2 { animation: mancha-b 26s ease-in-out infinite alternate; }
html.mov.an-7 .fv-manchas .m3 { animation: mancha-c 24s ease-in-out infinite alternate; }
@keyframes mancha-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(34vmax, 22vmax, 0) scale(1.18); } }
@keyframes mancha-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-40vmax, -18vmax, 0) scale(.9); } }
@keyframes mancha-c { from { transform: translate3d(0, 0, 0) scale(.95); } to { transform: translate3d(28vmax, -26vmax, 0) scale(1.2); } }

.fv-gran i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, var(--c) 62%); box-shadow: 0 0 5px rgba(235, 203, 131, .75); opacity: .85; will-change: transform; }
html.mov.an-8 .fv-gran i { top: -4vh; animation: gran-cai var(--d, 46s) linear var(--dl, 0s) infinite; }
@keyframes gran-cai { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(calc(var(--dx) * -.6), 56vh, 0); } 100% { transform: translate3d(var(--dx), 112vh, 0); } }

/* ===== 10: logo pop + anel de brilho ===== */
.marca-wrap { position: relative; width: 92px; height: 92px; margin: 0 auto 14px; }
.marca-wrap .marca { position: relative; z-index: 1; margin: 0; }
.marca::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--lover); opacity: 0; pointer-events: none; }
html.mov.an-10 .marca { animation: logo-pop 700ms var(--ease) both; }
html.mov.an-10 .marca::after { animation: logo-anel 1100ms cubic-bezier(.2,.7,.3,1) 520ms 1; }
@keyframes logo-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes logo-anel { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(2.1); opacity: 0; } }

/* ===== 11: vapor, "saiu do forno" ===== */
.vapor { position: absolute; left: 50%; bottom: 52%; width: 110px; height: 96px; margin-left: -55px; z-index: 0; overflow: visible; pointer-events: none; }
.vapor path { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 5px rgba(171, 20, 21, .5)); }
html.mov.an-11 .vapor path { animation: vapor 15s cubic-bezier(.3,.6,.4,1) infinite; animation-delay: calc(.55s + var(--v, 0) * .35s); }
@keyframes vapor {
  0% { opacity: 0; transform: translateY(26px) scaleY(.6); }
  3% { opacity: .9; }
  14% { opacity: .75; transform: translateY(-8px) scaleY(1); }
  20% { opacity: 0; transform: translateY(-34px) scaleY(1.15); }
  100% { opacity: 0; transform: translateY(-34px) scaleY(1.15); }
}
.vapor path { transform-box: fill-box; transform-origin: 50% 100%; }

/* ===== 12: nome letra por letra ===== */
html.mov.an-12 .nome .ch { display: inline-block; opacity: 0; transform: translateY(.55em); animation: letra var(--dur) var(--ease) forwards; animation-delay: calc(.4s + var(--k) * 30ms); }
html.rm.an-12 .nome .ch { display: inline; }
@keyframes letra { to { opacity: 1; transform: none; } }

/* ===== 13: espaçamento da tag abrindo ===== */
html.mov.an-13 .tag { animation: tag-abre 900ms var(--ease) .75s both; }
@keyframes tag-abre { from { letter-spacing: -.4px; opacity: 0; } to { letter-spacing: 3.2px; opacity: 1; } }

/* ===== 1 a 4: slogan ===== */
.slogan { --sc: var(--lover, #AB1415); display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; color: var(--sc); min-height: 62px; }
.slogan[hidden] { display: none; }
html:not(.an-1) .slogan { display: none; }
.slogan .s-svg { display: block; overflow: visible; flex: none; }
.slogan .s-txt { font-family: 'Pinyon Script', 'Snell Roundhand', cursive; fill: currentColor; }
.slogan-coracao { display: inline-block; flex: none; width: 21px; height: 21px; margin-top: 6px; margin-left: -8px; transform-origin: 50% 60%; color: var(--sc); }
.slogan-rodape { margin: 4px auto 0; }
.rodape-fecho { padding-bottom: 6px; display: flex; flex-direction: column; align-items: center; }
.rodape-fecho .prova-google { margin-top: 2px; }
.slogan-topo { margin-top: 2px; }
html.mov.an-13 .slogan-topo, html.mov.an-12 .slogan-topo { }

/* ===== 15 e 27: glacê no fim do topo, fio com coração nas divisórias ===== */
.topo { padding-bottom: 44px; padding-top: 58px; }
.topo::before { inset: -80px 0 0 0; transform: translate3d(0, var(--py, 0px), 0) scale(1.08); }
.glace-topo { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 0; pointer-events: none; display: flex; justify-content: center; }
.glace-topo .glace { display: block; flex: none; filter: drop-shadow(0 -2px 3px rgba(91, 27, 0, .14)); }
html.mov.an-15 .glace-topo .glace { transform: translateY(105%); animation: glace-sobe 1.3s cubic-bezier(.34, 1.35, .5, 1) .5s forwards; }
@keyframes glace-sobe { to { transform: translateY(0); } }
html:not(.an-15) .glace-topo { display: none; }
.fio-div { display: flex; align-items: center; gap: 10px; margin: 18px 0 2px; color: var(--lover, #AB1415); pointer-events: none; }
.fio-div .f { flex: 1; height: 1px; background: rgba(171, 20, 21, .55); }
.fio-div .fh { flex: none; }
html.mov.an-27 .fio-div .f { transform: scaleX(0); transition: transform 1s var(--ease) .15s; }
html.mov.an-27 .fio-div .f1 { transform-origin: 100% 50%; }
html.mov.an-27 .fio-div .f2 { transform-origin: 0 50%; }
html.mov.an-27 .fio-div.in .f { transform: scaleX(1); }
html.mov.an-27 .fio-div .fh { transform: scale(0); transition: transform .6s cubic-bezier(.34, 1.6, .5, 1); }
html.mov.an-27 .fio-div.in .fh { transform: scale(1); }
html:not(.an-27) .fio-div { display: none; }

/* ===== 16: saudação digitada ===== */
.saudacao { position: absolute; top: 14px; left: 14px; right: 70px; z-index: 3; pointer-events: none; display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 18px; background: rgba(250, 243, 233, .85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 22px rgba(34, 10, 0, .28), 0 0 0 .5px rgba(91, 27, 0, .12); font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--choco, #5B1B00); text-align: left; }
.saudacao { opacity: 0; transform: translateY(-14px) scale(.97); transition: opacity .45s ease, transform .6s cubic-bezier(.34, 1.45, .5, 1); }
.saudacao.in, .saudacao.fim { opacity: 1; transform: none; }
.sd-icone { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--lover, #AB1415); display: grid; place-items: center; }
.sd-icone img { width: 20px; height: 20px; object-fit: contain; }
.sd-corpo { flex: 1; min-width: 0; }
.sd-topo { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; line-height: 1.2; margin-bottom: 2px; }
.sd-topo b { font-weight: 600; letter-spacing: .2px; }
.sd-topo em { font-style: normal; font-weight: 500; color: #7a5a48; }
.sd-caixa { position: relative; display: block; font-weight: 500; }
.sd-fantasma { visibility: hidden; }
.sd-digita { position: absolute; left: 0; top: 0; width: 100%; }
.sd-cursor { position: absolute; top: 1px; width: 2px; height: 1.15em; margin-left: 2px; background: var(--choco, #5B1B00); border-radius: 1px; animation: cursor .8s steps(2) infinite; display: none; }
html.mov.an-16 .saudacao.in:not(.fim) .sd-cursor { display: inline-block; position: static; vertical-align: middle; }
html.mov.an-16 .saudacao.in:not(.fim) .sd-digita { position: absolute; }
html.mov.an-16 .saudacao.in:not(.fim) .sd-cursor { position: absolute; left: auto; }
@keyframes cursor { 50% { opacity: 0; } }
html.rm .saudacao .sd-caixa { transition: opacity .5s ease; }

/* ===== 17 e 28: entrada ao rolar ===== */
html.mov.an-28 [data-rev], html.mov.an-17 [data-rev="c"] { opacity: 0; transform: translateY(32px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: var(--rd, 0ms); }
html.mov.an-28 [data-rev].in, html.mov.an-17 [data-rev="c"].in { opacity: 1; transform: none; }
html.mov:not(.an-28) [data-rev]:not([data-rev="c"]) { opacity: 1; }
html.rm [data-rev] { opacity: 0; transition: opacity .5s ease; }
html.rm [data-rev].in { opacity: 1; }

/* ===== 18: foto do card com zoom lento ===== */
html.mov.an-18 .cardapio .foto { animation: zoom-lento 12s ease-in-out infinite alternate; }
@keyframes zoom-lento { from { transform: scale(1); } to { transform: scale(1.08); } }
html.rm .card-foto .foto { animation: none; }

/* ===== 19: brilho atravessando o selo ===== */
html.mov.an-19 .selo::after { left: 0; width: 45%; transform: translateX(-170%) skewX(-18deg); animation: brilho-selo 4s ease-in-out 2.6s infinite; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 100%); }
@keyframes brilho-selo { 0% { transform: translateX(-170%) skewX(-18deg); } 24% { transform: translateX(380%) skewX(-18deg); } 100% { transform: translateX(380%) skewX(-18deg); } }
html.rm .selo::after { display: none; }

/* ===== 20: borda tracejada andando ===== */
html.an-20 .selo { border-color: transparent; }
.formigas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.formigas rect { fill: none; stroke: rgba(171, 20, 21, .7); stroke-width: 1.7; stroke-dasharray: 7 5; }
html.mov.an-20 .formigas rect { animation: formigas 1.4s linear infinite; }
@keyframes formigas { to { stroke-dashoffset: -24; } }

/* ===== 21: cupom-ticket ===== */
html.an-21 .selo-texto { border-right: 1.7px dashed rgba(171, 20, 21, .4); padding-right: 10px; will-change: transform; }
.copiar.copiado { background: #1f7a4a; }
.copiar { transition: background .3s ease, transform .18s ease; }

/* ===== 22: seta do canto ===== */
html.mov.an-22 .cardapio .seta svg { animation: seta-vai 3s ease-in-out infinite; }
@keyframes seta-vai { 0%, 55%, 100% { transform: translate(0, 0); } 70% { transform: translate(5px, -5px); } 85% { transform: translate(-1px, 1px); } }

/* ===== 23, 24, 25: botão fazer encomenda ===== */
html.mov.an-23 .encomenda-foto { animation: respira 3s ease-in-out infinite; }
@keyframes respira { 0%, 100% { box-shadow: 0 14px 34px rgba(91, 27, 0, .16), 0 3px 10px rgba(91, 27, 0, .08); } 50% { box-shadow: 0 16px 38px rgba(171, 20, 21, .6), 0 0 0 4px rgba(171, 20, 21, .16); } }
html.mov.an-24 .encomenda-foto .icone svg { transform-origin: 50% 18%; animation: balanca 5s ease-in-out 1.2s infinite; }
@keyframes balanca { 0%, 16%, 100% { transform: rotate(0); } 3% { transform: rotate(-16deg); } 6% { transform: rotate(13deg); } 9% { transform: rotate(-8deg); } 12% { transform: rotate(4deg); } }
.sac-item { position: absolute; top: 5px; width: 13px; height: 13px; z-index: 3; pointer-events: none; }

/* ===== 26: linhas do rótulo se desenham do centro ===== */
html.mov.an-26 .rotulo::before, html.mov.an-26 .rotulo::after { transform: scaleX(0); transition: transform 1s var(--ease) .2s; }
html.mov.an-26 .rotulo::before { transform-origin: 100% 50%; }
html.mov.an-26 .rotulo::after { transform-origin: 0 50%; }
html.mov.an-26 .rotulo.in::before, html.mov.an-26 .rotulo.in::after { transform: scaleX(1); }

/* ===== 30: pins vermelhos caindo com quique ===== */
.cup { width: 36px; height: 46px; }
.cup svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 4px 5px rgba(91, 27, 0, .3)); }
.pino-nome { top: -26px; }
html.mov.an-30 .cup { opacity: 0; }
html.mov.an-30 [data-rev].in .mapa-pronto .cup { animation: pino-cai 1s cubic-bezier(.4, 0, .6, 1) calc(.3s + var(--k) * .55s) forwards; }
@keyframes pino-cai {
  0% { transform: translateY(-140px); opacity: 0; }
  8% { opacity: 1; }
  48% { transform: translateY(0); opacity: 1; animation-timing-function: ease-out; }
  66% { transform: translateY(-20px); opacity: 1; animation-timing-function: ease-in; }
  82% { transform: translateY(0); opacity: 1; animation-timing-function: ease-out; }
  91% { transform: translateY(-6px); opacity: 1; animation-timing-function: ease-in; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ===== 31: bolinha do status pulsando como radar ===== */
html.mov.an-31 .status.aberto::before { animation: radar 2s ease-out infinite; }
html.mov.an-31 .status.fechando::before { animation: radar 0.9s ease-out infinite; }
@keyframes radar { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 65%, transparent); } 80%, 100% { box-shadow: 0 0 0 9px transparent; } }

/* ===== 34: toque, escala e onda ===== */
.rip-cam { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 5; }
.rip-cam i { position: absolute; border-radius: 50%; background: rgba(171, 20, 21, .3); pointer-events: none; transform: scale(0); }
.rip-cam i.claro { background: rgba(255, 255, 255, .5); }
html.an-34 .copiar:active, html.an-34 .insta:active, html.an-34 .principal:active, html.an-34 .cf-redondo:active, html.an-34 .cf-rodape button:active, html.an-34 .cf-encomendar:active { transform: scale(.97); }
html.an-34 .insta, html.an-34 .principal, html.an-34 .cf-redondo, html.an-34 .cf-rodape button { transition: transform .18s ease; }

/* ===== reduzir movimento: o que já existia fica parado ===== */
@media (prefers-reduced-motion: reduce) {
  .card-foto .foto, .selo::after { animation: none !important; }
  .passos, .trilho, .progresso i, .aviso { transition: none !important; }
}

/* ===== prova social do Google ===== */
.prova-google { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(250, 243, 233, .78); font-size: 13px; font-weight: 500; color: var(--choco, #5B1B00); }
.prova-google[hidden] { display: none; }
.prova-google .pg-estrela { color: #E0A21B; font-size: 15px; line-height: 1; }
.prova-google.pendente { outline: 1.5px dashed var(--lover, #AB1415); outline-offset: 2px; }

/* ===== vídeo da loja no topo ===== */
.topo { min-height: 45svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 40px; padding-bottom: 46px; }
.topo > * { max-width: 100%; }
.topo::before { display: none; }
.topo-video { position: absolute; left: 0; top: -80px; width: 100%; height: calc(100% + 80px); object-fit: cover; z-index: -2; transform: translate3d(0, var(--py, 0px), 0) scale(1.06); background: #3a1a08; }
.topo::after { background: linear-gradient(180deg, rgba(34, 10, 0, .55) 0%, rgba(34, 10, 0, .34) 42%, rgba(34, 10, 0, .5) 78%, rgba(34, 10, 0, .62) 100%); }
.topo .nome { color: #FAF3E9; text-shadow: 0 2px 14px rgba(34, 10, 0, .45); }
.topo .tag { color: rgba(250, 243, 233, .92); text-shadow: 0 1px 8px rgba(34, 10, 0, .5); }
.topo .slogan { --sc: #FAF3E9; filter: drop-shadow(0 1px 6px rgba(34, 10, 0, .45)); }
.topo .slogan-coracao { color: #F4A6B5; }
.saudacao[hidden], .saudacao:empty { display: none; }
html.rm .topo-video { display: none; }
html.rm .topo { background: #3a1a08 url('/vodazinha/assets/videos-loja/topo-poster.jpg') center / cover no-repeat; }