/* ============================================================
   ANIMATIONS — Amanda Domingues Advocacia
   animations.css — Animações, transições e efeitos premium
   ============================================================ */

/* ================================================================
   SCROLL REVEAL (IntersectionObserver + CSS)
   ================================================================ */

/* Estado inicial — elementos invisíveis antes de entrar no viewport */
.reveal {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity var(--duration-reveal) var(--ease-smooth),
              transform var(--duration-reveal) var(--ease-smooth);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays para cards em sequência */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger > .reveal:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger > .reveal:nth-child(8) { transition-delay: 560ms; }

/* Reveal da esquerda */
.reveal--left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity var(--duration-reveal) var(--ease-smooth),
              transform var(--duration-reveal) var(--ease-smooth);
}

.reveal--left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Reveal da direita */
.reveal--right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity var(--duration-reveal) var(--ease-smooth),
              transform var(--duration-reveal) var(--ease-smooth);
}

.reveal--right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Reveal com escala */
.reveal--scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--duration-reveal) var(--ease-smooth),
              transform var(--duration-reveal) var(--ease-smooth);
}

.reveal--scale.visible {
  opacity: 1;
  transform: scale(1);
}


/* ================================================================
   HEADLINE CLIP-PATH REVEAL
   ================================================================ */
.heading-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--duration-slow) var(--ease-smooth);
}

.heading-reveal.visible {
  clip-path: inset(0 0 0 0);
}

/* Subtitle fade-in com delay */
.subtitle-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms var(--ease-smooth) 200ms,
              transform 600ms var(--ease-smooth) 200ms;
}

.subtitle-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ================================================================
   PARALLAX (controlado via JS — classes de posição)
   ================================================================ */
.parallax-bg {
  will-change: transform;
  transition: transform 50ms linear;
}

.parallax-element {
  will-change: transform;
  transition: transform 50ms linear;
}


/* ================================================================
   HERO ANIMATIONS
   ================================================================ */

/* Scroll down indicator */
@keyframes scrollBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) translateX(-50%);
  }
  40% {
    transform: translateY(-8px) translateX(-50%);
  }
  60% {
    transform: translateY(-4px) translateX(-50%);
  }
}

.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  animation: scrollBounce 2s infinite;
}

.scroll-indicator__arrow {
  width: 20px;
  height: 20px;
}

@media (max-width: 768px) {
  .scroll-indicator {
    display: none;
  }
}


/* ================================================================
   SHIMMER (botão dourado)
   ================================================================ */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.btn--gold:hover {
  animation: shimmer 2s ease infinite;
}


/* ================================================================
   PULSE (WhatsApp flutuante)
   ================================================================ */
@keyframes pulse {
  0% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  }
  50% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4),
                0 0 0 10px rgba(37, 211, 102, 0.15);
  }
  100% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4),
                0 0 0 20px rgba(37, 211, 102, 0);
  }
}

.whatsapp-float.visible {
  animation: pulse 3s infinite;
}

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


/* ================================================================
   SLIDE-IN (entrada do WhatsApp)
   ================================================================ */
@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
  }
  60% {
    transform: translateY(-4px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.whatsapp-float.entering {
  animation: slideInUp 600ms var(--ease-bounce) forwards;
}


/* ================================================================
   COUNTER ANIMATION (números contando)
   ================================================================ */
.counter__number[data-target] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 400ms var(--ease-default),
              transform 400ms var(--ease-default);
}

.counter__number[data-target].counting {
  opacity: 1;
  transform: translateY(0);
}


/* ================================================================
   TIMELINE DRAW (linha se desenha)
   ================================================================ */
.timeline__line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.5s var(--ease-smooth);
}

.timeline__line.visible {
  stroke-dashoffset: 0;
}

.timeline__step {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms var(--ease-smooth),
              transform 500ms var(--ease-smooth);
}

.timeline__step.visible {
  opacity: 1;
  transform: translateY(0);
}

.timeline__step:nth-child(1).visible { transition-delay: 0ms; }
.timeline__step:nth-child(2).visible { transition-delay: 200ms; }
.timeline__step:nth-child(3).visible { transition-delay: 400ms; }
.timeline__step:nth-child(4).visible { transition-delay: 600ms; }


/* ================================================================
   NAV MOBILE LINKS STAGGER
   ================================================================ */
.nav__mobile-overlay .nav__link {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 300ms var(--ease-smooth),
              transform 300ms var(--ease-smooth);
}

.nav__mobile-overlay.active .nav__link:nth-child(1) { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
.nav__mobile-overlay.active .nav__link:nth-child(2) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
.nav__mobile-overlay.active .nav__link:nth-child(3) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }
.nav__mobile-overlay.active .nav__link:nth-child(4) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
.nav__mobile-overlay.active .nav__link:nth-child(5) { transition-delay: 500ms; opacity: 1; transform: translateY(0); }
.nav__mobile-overlay.active .nav__link:nth-child(6) { transition-delay: 600ms; opacity: 1; transform: translateY(0); }


/* ================================================================
   SKELETON LOADING
   ================================================================ */
@keyframes skeletonShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease infinite;
  border-radius: var(--radius-md);
}


/* ================================================================
   LOGO SHIMMER
   ================================================================ */
@keyframes logoShimmer {
  0% { background-position: -100% center; }
  100% { background-position: 200% center; }
}

.header__logo:hover .header__logo-name {
  background: linear-gradient(90deg,
    var(--color-accent) 0%,
    #fff 50%,
    var(--color-accent) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: logoShimmer 1.5s ease;
}


/* ================================================================
   CTA FINAL PULSE
   ================================================================ */
@keyframes ctaPulse {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(13, 27, 42, 0.3);
  }
  50% {
    box-shadow: 0 4px 15px rgba(13, 27, 42, 0.3),
                0 0 0 8px rgba(13, 27, 42, 0.1);
  }
}

.cta-final .btn {
  animation: ctaPulse 2.5s infinite;
}

.cta-final .btn:hover {
  animation: none;
}


/* ================================================================
   SVG DECORATIONS (wave separators, patterns)
   ================================================================ */

/* Wave separator posicionado entre seções */
.wave-separator {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.wave-separator svg {
  display: block;
  width: 100%;
  height: 40px;
}

.wave-separator--top {
  bottom: auto;
  top: -1px;
  transform: rotate(180deg);
}

/* Decorative background patterns */
.bg-pattern-dots {
  background-image: radial-gradient(circle, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
}

.bg-pattern-lines {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 40px,
    rgba(212, 175, 55, 0.04) 40px,
    rgba(212, 175, 55, 0.04) 41px
  );
}


/* ================================================================
   PREFERS-REDUCED-MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .heading-reveal,
  .subtitle-reveal,
  .timeline__step,
  .counter__number[data-target] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    clip-path: none !important;
  }

  .whatsapp-float.visible {
    animation: none;
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .scroll-indicator {
    animation: none;
  }

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

  .cta-final .btn {
    animation: none;
  }

  .parallax-bg,
  .parallax-element {
    transform: none !important;
  }

  .skeleton {
    animation: none;
    background: #f0f0f0;
  }
}