/* Camada de animações de teste. Não altera a base: só vale com as classes an-* no <body>.
   Tudo usa opacity/translate/scale (individuais), que não conflitam com o transform da base. */

/* 1) entrada ao rolar */
body.an-reveal .rv{opacity:0;translate:0 24px;transition:opacity .6s ease,translate .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
body.an-reveal .rv.in{opacity:1;translate:0 0}

/* 2) topo: cartões entram um depois do outro */
@keyframes an-lateral{from{opacity:0;translate:-28px 0}to{opacity:1;translate:0 0}}
body.an-hero .v2-hero .v2-card{animation:an-lateral .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * .12s + .25s)}
body.an-hero .v2-hero .v2-sub{animation:an-lateral .6s ease both;animation-delay:.15s}

/* 4) linha do tempo "desenha" e os números aparecem */
body.an-timeline .v2-passos>li::before{scale:.5;opacity:0;transition:scale .5s cubic-bezier(.3,1.6,.5,1),opacity .3s ease;transition-delay:var(--d,0s)}
body.an-timeline .v2-passos>li.in::before{scale:1;opacity:1}
body.an-timeline .v2-passos>li:not(:last-child)::after{transform-origin:top;scale:1 0;transition:scale .7s ease;transition-delay:calc(var(--d,0s) + .25s)}
body.an-timeline .v2-passos>li.in:not(:last-child)::after{scale:1 1}

/* 5) iPhone sobe e desce de leve com a rolagem */
body.an-phone .v2-phone{translate:0 var(--py,0px);rotate:var(--pr,0deg);will-change:translate,rotate}

/* 6) botão principal respira de vez em quando */
@keyframes an-pulsa{0%,80%,100%{scale:1}88%{scale:1.035}94%{scale:1}}
body.an-cta #ctaHero,body.an-cta #ctaFixo{animation:an-pulsa 5.5s ease-in-out infinite}

/* 7) escolha do voucher: anel que se expande */
@keyframes an-anel{0%{box-shadow:0 0 0 0 rgba(245,155,58,.55)}100%{box-shadow:0 0 0 16px rgba(245,155,58,0)}}
body.an-select #listaVouchers .vc.pulso{animation:an-anel .55s ease-out}

/* 8) checkout: fundo com fade e cartão do voucher aparece */
@keyframes an-fade{from{opacity:0}to{opacity:1}}
@keyframes an-sobe-leve{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
body.an-sheet .sheet-fundo:not([hidden]){animation:an-fade .25s ease both}
body.an-sheet .sheet-fundo:not([hidden]) .vc--ficha{animation:an-sobe-leve .45s cubic-bezier(.2,.7,.2,1) .15s both}
body.an-sheet .sheet-fundo:not([hidden]) .grupo,body.an-sheet .sheet-fundo:not([hidden]) .campo{animation:an-sobe-leve .4s ease both}
body.an-sheet .sheet-fundo:not([hidden]) .campo:nth-of-type(1){animation-delay:.2s}
body.an-sheet .sheet-fundo:not([hidden]) .campo:nth-of-type(2){animation-delay:.25s}
body.an-sheet .sheet-fundo:not([hidden]) .campo:nth-of-type(3){animation-delay:.3s}

/* painel de teste */
.an-painel{position:fixed;top:64px;right:8px;z-index:90;font:600 13px/1.3 var(--fonte,system-ui)}
.an-botao{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:2px solid #000;background:#fff;color:#000;font:inherit;font-weight:800;cursor:pointer;box-shadow:3px 3px 0 var(--laranja)}
.an-lista{display:none;margin-top:6px;padding:10px 12px;background:#fff;color:#111;border:2px solid #000;box-shadow:3px 3px 0 var(--laranja);min-width:230px}
.an-painel.on .an-lista{display:grid;gap:8px}
.an-lista label{display:flex;align-items:center;gap:8px;cursor:pointer}
.an-lista input{width:18px;height:18px;accent-color:var(--laranja)}
.an-lista .an-acoes{display:flex;gap:8px;margin-top:4px}
.an-lista .an-acoes button{flex:1;min-height:32px;border:2px solid #000;background:#f4f1ec;font:inherit;font-weight:800;cursor:pointer}
.an-aviso{font-size:11px;color:#555}

@media (prefers-reduced-motion:reduce){
  body[class*="an-"] .rv{opacity:1!important;translate:none!important;transition:none!important}
}

/* ===== 0) Abertura: corte de luz que revela a Black e termina no botão (~1,5 s) ===== */
@keyframes an-corte{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes an-linha{0%{left:0;opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
@keyframes an-vip{from{opacity:0;translate:0 38%}to{opacity:1;translate:0 0}}
@keyframes an-brasa{0%{opacity:0}40%{opacity:.95}100%{opacity:.4}}
@keyframes an-recorte{from{background-position:100% 0}to{background-position:0 0}}
@keyframes an-voucher{
  0%{opacity:0;translate:-22px 0;box-shadow:0 0 0 0 var(--laranja)}
  60%{opacity:1}
  100%{opacity:1;translate:0 0;box-shadow:4px 4px 0 0 var(--laranja)}}
@keyframes an-assenta{from{rotate:var(--giro,14deg)}to{rotate:0deg}}
@keyframes an-reflexo{0%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(480%) skewX(-18deg)}}
@keyframes an-suave{from{opacity:0}to{opacity:1}}

/* título: BLACK aparece por uma máscara que avança junto com uma linha laranja */
body.an-abertura .hero.go .ln:nth-child(1) .brilha{transform:none;animation:brilho 6s 2.2s ease-in-out infinite}
body.an-abertura .hero.go .ln:nth-child(1){animation:an-corte .6s cubic-bezier(.65,0,.25,1) .1s both}
body.an-abertura .hero.go .ln:nth-child(2) .brilha{transform:none;animation:brilho 6s 2.4s ease-in-out infinite}
body.an-abertura .hero.go .ln:nth-child(2){animation:an-vip .5s cubic-bezier(.2,.9,.25,1) .45s both}
body.an-abertura .v2-hero .titulo::after{content:"";position:absolute;left:0;top:0;height:52%;width:5px;background:var(--laranja);box-shadow:0 0 16px 4px rgba(245,155,58,.9);pointer-events:none;animation:an-linha .6s cubic-bezier(.65,0,.25,1) .1s both}
body.an-abertura .v2-hero .titulo::before{content:"";position:absolute;inset:-25% -12%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 30% 55%,rgba(255,255,255,.14),transparent 62%);animation:an-brasa 1.2s ease-out .3s both}

/* frase de apoio e "20% a mais": recorte laranja que deixa a cor atual */
body.an-abertura .v2-hero .v2-sub{animation:an-suave .5s ease .7s both}
body.an-abertura .v2-hero .v2-sub b{background:linear-gradient(90deg,var(--laranja) 0 50%,#fff 50% 100%);background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:an-recorte .7s cubic-bezier(.65,0,.25,1) 1s both}

/* cartões: entram a cada 80 ms e a sombra laranja "encaixa" atrás */
body.an-abertura .v2-hero .v2-card{animation:an-voucher .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.8s + var(--i,0) * .08s)}
body.an-abertura .v2-hero .v2-card--iph .v2-slot img{--giro:16deg;animation:an-assenta .7s cubic-bezier(.2,.8,.3,1) 1.05s both}
body.an-abertura .v2-hero .v2-card--off .v2-slot img{--giro:-18deg;animation:an-assenta .7s cubic-bezier(.2,.8,.3,1) 1.0s both}
body.an-abertura .v2-hero .v2-card--parc .v2-slot img{--giro:12deg;animation:an-assenta .7s cubic-bezier(.2,.8,.3,1) 1.1s both}

/* botão: disponível desde o início; um único reflexo encerra a sequência; comprime ao tocar */
body.an-abertura #ctaHero::after{animation:an-reflexo .7s ease-in-out 1.35s 1 both}
body.an-abertura #ctaHero{transition:scale .1s ease}
body.an-abertura #ctaHero:active{scale:.97}

/* movimento reduzido: a mesma ordem, só com transição de opacidade */
@media (prefers-reduced-motion:reduce){
  body.an-abertura .hero.go .ln:nth-child(1),body.an-abertura .hero.go .ln:nth-child(2){animation:an-suave .6s ease .1s both}
  body.an-abertura .v2-hero .titulo::after,body.an-abertura .v2-hero .titulo::before{display:none}
  body.an-abertura .v2-hero .v2-sub b{animation:an-suave .6s ease 1s both;background:none;color:var(--laranja);-webkit-text-fill-color:currentColor}
  body.an-abertura .v2-hero .v2-card{animation:an-suave .5s ease both;animation-delay:calc(.8s + var(--i,0) * .08s)}
  body.an-abertura .v2-hero .v2-slot img{animation:none}
  body.an-abertura #ctaHero::after{animation:none;display:none}
}
/* painel de teste fica embaixo à esquerda, para não cobrir o topo */
.an-painel{top:auto;right:auto;left:8px;bottom:84px}
.an-painel .an-lista{position:absolute;left:0;bottom:44px}
/* painel no cabeçalho (lado direito, vazio no celular) */
.an-painel{top:8px;right:8px;left:auto;bottom:auto}
.an-painel .an-lista{position:absolute;left:auto;right:0;top:44px;bottom:auto}
.an-botao{min-height:34px;box-shadow:2px 2px 0 var(--laranja)}

/* ===== Loop de atenção: uma coreografia curta a cada 7 s (título, cartões, ícones, botão) ===== */
@media (prefers-reduced-motion:no-preference){
@keyframes an-glint{0%{left:0;opacity:0}3%{opacity:1}17%{left:calc(100% - 4px);opacity:0}100%{left:calc(100% - 4px);opacity:0}}
@keyframes an-neon{0%,2%{filter:drop-shadow(0 0 0 rgba(245,155,58,0))}9%{filter:drop-shadow(0 0 18px rgba(245,155,58,.9))}22%,100%{filter:drop-shadow(0 0 0 rgba(245,155,58,0))}}
@keyframes an-onda{0%,12%,100%{box-shadow:4px 4px 0 0 var(--laranja);translate:0 0}5%{box-shadow:9px 9px 0 0 var(--laranja);translate:-3px -3px}}
@keyframes an-balanca{0%,22%,100%{rotate:0deg}5%{rotate:-9deg}10%{rotate:8deg}15%{rotate:-4deg}}
@keyframes an-inclina{0%,20%,100%{rotate:0deg;translate:0 0}5%{rotate:-6deg;translate:0 -4px}12%{rotate:4deg;translate:0 -2px}}
@keyframes an-moeda{0%,16%,100%{scale:1 1}5%{scale:0 1}10%{scale:1 1}}
@keyframes an-reflexo-loop{0%,10%{transform:translateX(-160%) skewX(-18deg)}18%,100%{transform:translateX(480%) skewX(-18deg)}}

body.an-loop .v2-hero .titulo h1{position:relative}
body.an-loop .v2-hero .titulo h1::after{content:"";position:absolute;top:-4%;bottom:-4%;left:0;width:4px;background:var(--laranja);box-shadow:0 0 18px 5px rgba(245,155,58,.9);opacity:0;pointer-events:none;animation:an-glint 7s ease-in-out 5.2s infinite}
body.an-loop .hero.go .ln .brilha{animation:brilho 6s 2.2s ease-in-out infinite,an-neon 7s ease-in-out 5.2s infinite}

body.an-loop .v2-hero .v2-card{animation:an-voucher .5s cubic-bezier(.2,.8,.2,1) both,an-onda 7s ease-in-out infinite;animation-delay:calc(.8s + var(--i,0) * .08s),calc(6.2s + var(--i,0) * .2s)}
body.an-loop .v2-hero .v2-card--off .v2-slot img{animation:an-assenta .7s cubic-bezier(.2,.8,.3,1) 1.0s both,an-balanca 7s ease-in-out 6.4s infinite}
body.an-loop .v2-hero .v2-card--iph .v2-slot img{animation:an-assenta .7s cubic-bezier(.2,.8,.3,1) 1.05s both,an-inclina 7s ease-in-out 6.6s infinite}
body.an-loop .v2-hero .v2-card--parc .v2-slot img{animation:an-assenta .7s cubic-bezier(.2,.8,.3,1) 1.1s both,an-moeda 7s ease-in-out 6.8s infinite}

body.an-loop #ctaHero::after{animation:an-reflexo .7s ease-in-out 1.35s 1 both,an-reflexo-loop 7s ease-in-out 7.6s infinite}
}
@media (prefers-reduced-motion:no-preference){
body.an-loop .hero.go .ln:nth-child(n) .brilha{animation:brilho 6s 2.2s ease-in-out infinite,an-neon 7s ease-in-out 5.2s infinite}
}

/* ===== BLACK em animação de texto: letra por letra, estilo painel de embarque (split-flap) ===== */
@media (prefers-reduced-motion:no-preference){
@keyframes an-flap{
  0%,2%{transform:rotateX(0);color:#fff}
  7%{transform:rotateX(-90deg);color:#fff}
  8%{transform:rotateX(90deg);color:var(--laranja)}
  15%{transform:rotateX(0);color:var(--laranja)}
  30%{transform:rotateX(0);color:var(--laranja)}
  40%,100%{transform:rotateX(0);color:#fff}}
body.an-black .v2-hero .h1-black{perspective:520px}
body.an-black .hero.go .ln:nth-child(n) .brilha{background:none;-webkit-text-fill-color:currentColor;color:#fff;animation:an-neon 7s ease-in-out 5.2s infinite}
body.an-black .v2-hero .lt{display:inline-block;transform-origin:50% 55%;backface-visibility:hidden;animation:an-flap 7s ease-in-out infinite;animation-delay:calc(5.2s + var(--k,0) * .09s)}
}
.sr-only-txt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== Ícones dos cartões: flutuar bem de leve, sem parar (aplicado no encaixe, não na imagem) ===== */
@media (prefers-reduced-motion:no-preference){
@keyframes an-flutua-1{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -4px;rotate:2.5deg}}
@keyframes an-flutua-2{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -3px;rotate:-2deg}}
@keyframes an-flutua-3{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -4px;rotate:1.5deg}}
body.an-icones .v2-hero .v2-slot{will-change:translate,rotate}
body.an-icones .v2-hero .v2-card--off .v2-slot{animation:an-flutua-1 4.4s ease-in-out 1.8s infinite}
body.an-icones .v2-hero .v2-card--iph .v2-slot{animation:an-flutua-2 5.1s ease-in-out 2.1s infinite}
body.an-icones .v2-hero .v2-card--parc .v2-slot{animation:an-flutua-3 4.7s ease-in-out 2.4s infinite}
}