/* Animações da vitrine. O JS (TEMAS.animar) liga body.anim-on + anim-suave|anim-forte; sem isso nada fica escondido. */
body.anim-on{--a-dur:.75s;--a-dist:18px;--a-glow:.2;--a-ease:cubic-bezier(.2,.7,.2,1)}
body.anim-forte{--a-dur:1s;--a-dist:36px;--a-glow:.34}

/* luz de fundo que se move devagar (na cor de destaque) */
body.anim-on::before{content:"";position:fixed;z-index:-1;left:-25%;right:-25%;top:-30%;height:90vh;pointer-events:none;
  background:radial-gradient(45% 55% at 24% 42%,color-mix(in srgb,var(--acc) calc(var(--a-glow) * 100%),transparent),transparent 72%),
             radial-gradient(40% 50% at 80% 30%,color-mix(in srgb,var(--acc) calc(var(--a-glow) * 70%),transparent),transparent 72%);
  filter:blur(24px);animation:a-luz 18s ease-in-out infinite alternate;will-change:transform}
@keyframes a-luz{from{transform:translate3d(-6%,-2%,0) scale(1)}to{transform:translate3d(9%,7%,0) scale(1.18)}}

/* entrada da página */
body.anim-on .ab{animation:a-desce var(--a-dur) var(--a-ease) both}
body.anim-on .hb{animation:a-sobe var(--a-dur) var(--a-ease) .12s both}
@keyframes a-desce{from{opacity:0;transform:translateY(calc(var(--a-dist) * -1))}to{opacity:1;transform:none}}
@keyframes a-sobe{from{opacity:0;transform:translateY(var(--a-dist))}to{opacity:1;transform:none}}

/* banner: a luz se move atrás do aparelho (na cor dele) e o texto entra em sequência a cada destaque */
body.anim-on .hb-sl:not(.real)::after{content:"";position:absolute;inset:-35%;z-index:-1;pointer-events:none;
  background:radial-gradient(34% 44% at 72% 46%,color-mix(in srgb,var(--slc,var(--acc)) 60%,transparent),transparent 72%),
             radial-gradient(30% 40% at 18% 82%,color-mix(in srgb,var(--acc) 42%,transparent),transparent 72%);
  animation:a-luz-sl 9s ease-in-out infinite alternate;will-change:transform}
@keyframes a-luz-sl{from{transform:translate3d(-9%,-5%,0) rotate(0)}to{transform:translate3d(11%,7%,0) rotate(10deg)}}
body.anim-on .hb-sl .hb-txt>*{opacity:0}
body.anim-on .hb-sl.ativo .hb-txt>*{animation:a-sobe var(--a-dur) var(--a-ease) both}
body.anim-on .hb-sl.ativo .hb-txt>:nth-child(2){animation-delay:.08s}
body.anim-on .hb-sl.ativo .hb-txt>:nth-child(3){animation-delay:.16s}
body.anim-on .hb-sl.ativo .hb-txt>:nth-child(4){animation-delay:.24s}
body.anim-on .hb-sl.ativo .hb-txt>:nth-child(5){animation-delay:.32s}
body.anim-on .hb-sl .hb-prod{opacity:0}
body.anim-on .hb-sl.ativo .hb-prod{animation:a-prod calc(var(--a-dur) * 1.4) var(--a-ease) .1s both}
@keyframes a-prod{from{opacity:0;transform:translateY(calc(-50% + var(--a-dist) * 1.4)) scale(.9)}to{opacity:1;transform:translateY(-50%)}}

body.anim-sem-capa .hb-sl .hb-txt>*,body.anim-sem-capa .hb-sl .hb-prod{animation:none;opacity:1;transform:none}
body.anim-sem-capa .hb-sl .hb-prod{transform:translateY(-50%)}

/* os cards já sobem ao rolar (.rv); aqui só ganham um pouco mais de curso no modo marcante */
body.anim-forte .rv{transform:translateY(34px) scale(.97)}
body.anim-forte .rv.in,body.anim-forte .rv.ja{transform:none}
@media (prefers-reduced-motion:reduce){body.anim-on::before,body.anim-on .hb-sl::after{display:none}}