/* ============================================
   ANIMATIONS — LJR Digital Studio
   Scroll Reveal, Fade Up, Fade Left, Fade Right
============================================ */

/* ——— Estado inicial de todos os elementos revelados ——— */
.reveal-fade-up,
.reveal-fade-left,
.reveal-fade-right,
.reveal-scale {
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 700ms;
  will-change: opacity, transform;
}

.reveal-fade-up    { transform: translateY(32px); }
.reveal-fade-left  { transform: translateX(-44px); }
.reveal-fade-right { transform: translateX(44px); }
.reveal-scale      { transform: scale(0.95); }

/* ——— Estado visível (adicionado via JS) ——— */
.reveal-fade-up.is-visible,
.reveal-fade-left.is-visible,
.reveal-fade-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

/* ——— Delays ——— */
.delay-1 { transition-delay: 100ms; }
.delay-2 { transition-delay: 200ms; }
.delay-3 { transition-delay: 300ms; }
.delay-4 { transition-delay: 400ms; }
.delay-5 { transition-delay: 500ms; }
.delay-6 { transition-delay: 600ms; }

/* ——— Parallax suave (aplicado via JS transform) ——— */
.parallax {
  will-change: transform;
}

/* ——— Microinterações de Hover nos Botões ——— */
.btn {
  will-change: transform;
}

/* ——— Card de Depoimento Hover ——— */
.test-card {
  will-change: transform;
}

/* ——— Animação do Hero Card Flutuante ——— */
@keyframes float {
  0%, 100% { transform: translateY(-50%) translateX(0px); }
  50%       { transform: translateY(calc(-50% - 10px)) translateX(0px); }
}

/* ——— Pulsação discreta no botão WhatsApp ——— */
@keyframes pulse-wpp {
  0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.25); }
  50%       { box-shadow: 0 4px 30px rgba(37, 211, 102, 0.45); }
}

.btn--whatsapp {
  animation: pulse-wpp 2.5s ease-in-out infinite;
}

.btn--whatsapp:hover {
  animation: none;
}

/* ——— Shine nos Cards ao Hover ——— */
.service-card,
.diff-card,
.process-step {
  overflow: hidden;
}

/* ——— Loading skeleton para placeholders ——— */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.placeholder-line {
  background: linear-gradient(
    90deg,
    var(--gray-light) 25%,
    #e9ecef 50%,
    var(--gray-light) 75%
  );
  background-size: 400px 100%;
  animation: shimmer 1.5s infinite;
}

/* ——— Transição da Navbar ——— */
.navbar {
  will-change: background, box-shadow;
}