/* ============================================================
   Agência Bazcar — animations.css
   Keyframes, sistema de reveal e micro-interações
   Estilos estruturais → style.css
   ============================================================ */

/* === KEYFRAMES === */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes floatY {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0   rgba(232,101,26,0.45); }
  50%       { box-shadow: 0 0 0 16px rgba(232,101,26,0); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes pulseWhatsapp {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === REVEAL SYSTEM === */

/* Fade + slide up (padrão) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  600ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Fade + slide da esquerda */
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity  600ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Fade + scale */
.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity  600ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* === WHATSAPP PULSE (ícone dos botões) === */
.btn-wa i {
  animation: pulseWhatsapp 2.2s ease-in-out infinite;
}

/* === FLOATING WA — TOOLTIP === */
.wa-float::before {
  content: 'Falar agora';
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  background: rgba(10, 10, 15, 0.92);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  font-family: var(--font-body);
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  border: 1px solid var(--glass-bdr);
}
.wa-float:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* === TYPEWRITER CURSOR === */
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.tw-cursor {
  display: inline;
  color: var(--gold);
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.82em;
  margin-left: 3px;
  vertical-align: middle;
  animation: blink-cursor 0.7s step-end infinite;
}

.tw-cursor.done {
  animation-duration: 1.5s;
  opacity: 0.45;
}

/* === ACCESSIBILITY — prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .reveal-left,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}