/* ============================================================
   LP Carmelo 2200 — animações (scroll reveal, hover, Ken Burns)
   Não altera layout: usa só opacity + translate/scale (propriedades
   individuais, não conflitam com transform do Tailwind).
   ============================================================ */
:root{
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);
}

/* ---------- estado inicial (só quando o JS ativou) ---------- */
html.anim .rv{ opacity:0; will-change:opacity,translate,scale; }
html.anim .rv-up   { translate:0 34px; }
html.anim .rv-down { translate:0 -26px; }
html.anim .rv-left { translate:-40px 0; }
html.anim .rv-right{ translate:40px 0; }
html.anim .rv-zoom { scale:.86; }
html.anim .rv-pop  { scale:.6; }

/* ---------- estado revelado ---------- */
html.anim .rv.in{
  opacity:1; translate:0 0; scale:1;
  transition: opacity .8s var(--ease-out), translate .9s var(--ease-out), scale .9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.anim .rv-pop.in{ transition-timing-function: var(--ease-back); transition-duration:.7s; }

/* ---------- hero: entrada mais lenta ---------- */
html.anim .rv-hero.in{ transition-duration:1.1s; }

/* ---------- Ken Burns nas fotos das seções ---------- */
html.anim .kb img{ transition: scale 14s linear; scale:1; transform-origin:center; }
html.anim .kb.in img{ scale:1.08; }

/* ---------- hover / toque ---------- */
.hv-lift{ transition: translate .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.hv-lift:hover{ translate:0 -5px; box-shadow:0 18px 40px -18px rgba(0,0,0,.45); }
.hv-scale{ transition: scale .35s var(--ease-out), filter .35s; }
.hv-scale:hover{ scale:1.025; filter:brightness(1.05); }
.hv-scale:active{ scale:.985; transition-duration:.12s; }
.hv-btn{ transition: scale .25s var(--ease-out), background-color .25s, color .25s; }
.hv-btn:hover{ scale:1.04; }
.hv-btn:active{ scale:.97; }

/* links sublinhados dos cards */
.d-cta, .lp-cta{ transition: opacity .25s, translate .25s var(--ease-out); display:inline-block; }
.d-cta:hover, .lp-cta:hover{ opacity:.8; translate:3px 0; }

/* chevron "SAIBA MAIS" pulsando */
html.anim .saiba svg{ animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ translate:0 0 } 50%{ translate:0 3px } }

/* ---------- menu mobile ---------- */
#menu{ transition: opacity .3s ease; }
#menu.flex{ animation: fadeIn .3s ease both; }
#menu.flex a{ animation: menuItem .5s var(--ease-out) both; }
#menu.flex a:nth-child(2){ animation-delay:.05s }
#menu.flex a:nth-child(3){ animation-delay:.10s }
#menu.flex a:nth-child(4){ animation-delay:.15s }
#menu.flex a:nth-child(5){ animation-delay:.20s }
#menu.flex a:nth-child(6){ animation-delay:.25s }
#menu a{ transition: color .2s, translate .2s; }
#menu a:hover{ color:#dee832; translate:4px 0; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes menuItem{ from{ opacity:0; translate:0 18px } to{ opacity:1; translate:0 0 } }

/* header: logo respira levemente ao carregar */
html.anim .logo-in{ animation: logoIn .9s var(--ease-out) both; }
@keyframes logoIn{ from{ opacity:0; translate:0 -8px } to{ opacity:1; translate:0 0 } }

/* ---------- acessibilidade ---------- */
@media (prefers-reduced-motion: reduce){
  html.anim .rv{ opacity:1; translate:0 0; scale:1; transition:none; }
  html.anim .kb img{ transition:none; scale:1; }
  html.anim .saiba svg{ animation:none; }
  #menu.flex, #menu.flex a, html.anim .logo-in{ animation:none; }
}