/* ═══════════════════════════════════════════════
   ÓTICA SONHO DOS OLHOS — animations.css
   ═══════════════════════════════════════════════ */

/* ── SCROLL REVEAL ── */
.rev {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.rev-l {
  opacity: 0;
  transform: translateX(-56px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.rev-r {
  opacity: 0;
  transform: translateX(56px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.rev.on, .rev-l.on, .rev-r.on {
  opacity: 1;
  transform: none;
}

/* ── HERO ENTRADA ── */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* hero animations controladas via style.css (clip-reveal + fadeDown por elemento) */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── HERO SHAPES ── */
@keyframes pulse-ring {
  0%,100% { transform: translateY(-50%) scale(1); }
  50%      { transform: translateY(-50%) scale(1.07); }
}
@keyframes float-dot {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-22px) rotate(180deg); }
}

/* ── WHATSAPP PULSE (legacy — substituído por wa-ring-pulse) ── */
@keyframes pulse-wa {
  0%,100% { box-shadow: 0 6px 24px rgba(37,211,102,0.5); }
  50%      { box-shadow: 0 12px 36px rgba(37,211,102,0.65); }
}

/* ── CONTADOR ── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.counter-ready { animation: countUp 0.5s ease both; }

/* ── LINHA STEPS ── */
.steps-line {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.3s 0.3s ease;
}
.steps-line.on { transform: scaleX(1); }

/* ── MARCAS ENTRADA ── */
@keyframes slideFadeIn {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── SHAPES CTA ── */
@keyframes rotate-slow {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.cs-1 { animation: rotate-slow 40s linear infinite; }
.cs-3 { animation: rotate-slow 25s linear infinite reverse; }