/* css/animations.css */

/* === Scroll reveal === */
[data-anim] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-anim="pop"] {
  transform: scale(0.92);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-anim="slide-left"] {
  transform: translateX(-32px);
}

[data-anim="slide-right"] {
  transform: translateX(32px);
}

[data-anim].is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* === Stagger delays (applied by JS) === */
[data-anim-delay="1"] { transition-delay: 0.1s; }
[data-anim-delay="2"] { transition-delay: 0.2s; }
[data-anim-delay="3"] { transition-delay: 0.3s; }
[data-anim-delay="4"] { transition-delay: 0.4s; }
[data-anim-delay="5"] { transition-delay: 0.5s; }
[data-anim-delay="6"] { transition-delay: 0.6s; }

/* === Hover states === */
.vd-card,
.vd-bento-card,
.vd-bento-card-hero,
.vd-step-card,
.vd-sec-card,
.vd-testimonial-screenshot,
.vd-pricing-card,
.vd-comment {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.vd-card:hover,
.vd-bento-card:hover,
.vd-bento-card-hero:hover,
.vd-step-card:hover,
.vd-sec-card:hover,
.vd-testimonial-screenshot:hover,
.vd-pricing-card:hover,
.vd-comment:hover {
  transform: translateY(-3px);
  box-shadow: var(--vd-shadow-md);
  border-color: var(--vd-primary-border);
  will-change: transform;
}

/* === Marquee animations === */
@keyframes vd-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* === Playhead animation === */
@keyframes vd-playhead {
  0% { left: 15%; }
  100% { left: 85%; }
}

/* === Caption highlight animation === */
@keyframes vd-caption-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.vd-mock-caption-word.is-active {
  animation: vd-caption-pulse 2s ease-in-out infinite;
}

/* === Caption word-by-word highlight === */
@keyframes vd-word-highlight {
  0%, 14% { color: var(--vd-primary); }
  15%, 100% { color: var(--vd-text-muted); }
}

.vd-cw-1 { animation: vd-word-highlight 3.5s linear infinite 0s; }
.vd-cw-2 { animation: vd-word-highlight 3.5s linear infinite 0.5s; }
.vd-cw-3 { animation: vd-word-highlight 3.5s linear infinite 1s; }
.vd-cw-4 { animation: vd-word-highlight 3.5s linear infinite 1.5s; }
.vd-cw-5 { animation: vd-word-highlight 3.5s linear infinite 2s; }
.vd-cw-6 { animation: vd-word-highlight 3.5s linear infinite 2.5s; }
.vd-cw-7 { animation: vd-word-highlight 3.5s linear infinite 3s; }

/* === Face tracking pulse === */
@keyframes vd-face-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.08); opacity: 0.9; }
}

.vd-mock-face-circle {
  animation: vd-face-pulse 3s ease-in-out infinite;
}

/* === Niche player progress bar === */
@keyframes vd-playerProgress {
  0% { width: 0; }
  100% { width: 100%; }
}

/* === Como Funciona step animations === */

/* Step 1: Typing animation */
@keyframes vd-typing {
  0%, 15% { width: 0; }
  40% { width: 100%; }
  85% { width: 100%; }
  100% { width: 0; }
}

/* Step 1: Cursor blink */
@keyframes vd-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Step 1: Button reacts to mouse click */
@keyframes vd-btnReact {
  0%, 55% { transform: scale(1); box-shadow: none; }
  60% { transform: scale(1); box-shadow: none; }
  63% { transform: scale(0.92); box-shadow: 0 0 0 3px rgba(255,107,0,0.2); }
  66% { transform: scale(1.02); box-shadow: 0 0 20px rgba(255,107,0,0.15); }
  72% { transform: scale(1); box-shadow: 0 0 10px rgba(255,107,0,0.1); }
  85%, 100% { transform: scale(1); box-shadow: none; }
}

/* Step 1: Mouse cursor animation */
@keyframes vd-mouseAnim {
  0% { top: 30%; left: 20%; opacity: 0; }
  5% { top: 30%; left: 20%; opacity: 1; }
  18% { top: 72%; left: 40%; opacity: 1; }
  40% { top: 72%; left: 40%; opacity: 1; }
  55% { top: 72%; left: 82%; opacity: 1; }
  60% { top: 72%; left: 82%; opacity: 1; transform: scale(1); }
  63% { transform: scale(0.85); }
  66% { transform: scale(1); }
  85% { top: 72%; left: 82%; opacity: 1; }
  100% { top: 72%; left: 82%; opacity: 0; }
}

/* Step 2: Scan line */
@keyframes vd-scanLine {
  0% { left: 0; }
  45% { left: 100%; }
  46% { left: 0; opacity: 0; }
  50% { opacity: 1; }
  95% { left: 100%; }
  96%, 100% { left: 100%; opacity: 0; }
}

/* Step 2: Scan overlay that follows beam */
@keyframes vd-scanOverlay {
  0% { width: 0; }
  45% { width: 100%; }
  46% { width: 0; }
  50% { width: 0; }
  95% { width: 100%; }
  96%, 100% { width: 0; }
}

/* Step 2: Waveform bars */
@keyframes vd-waveAnim {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* Step 2: Progress bar fill */
@keyframes vd-progressFill {
  0% { width: 0; }
  80% { width: 100%; }
  100% { width: 100%; }
}

/* Step 2: Status dot pulse */
@keyframes vd-dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* Step 2: Marker appear (synced with scan pass) */
@keyframes vd-markerAppear {
  0%, 15% { opacity: 0; transform: scaleY(0.5); }
  20% { opacity: 1; transform: scaleY(1); }
  80% { opacity: 1; }
  90%, 100% { opacity: 0; }
}

/* Step 3: Clip cards appear */
/* Flow arrow pulse */
@keyframes vd-flowPulse {
  0%, 100% { opacity: 0.5; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(3px); }
}

/* Bento hero: clips slide in from right */
@keyframes vd-clipSlideIn {
  0% { opacity: 0; transform: translateX(30px) scale(0.9); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* Bento hero: float + glow on clips */
@keyframes vd-clipFloat {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
  50% {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2), 0 0 0 3px rgba(255,107,0,0.12);
  }
}

/* Reframe: crop overlays shift left/right (simulating face tracking) */
@keyframes vd-reframeCropL {
  0%, 100% { width: 36%; }
  30% { width: 32%; }
  70% { width: 40%; }
}

@keyframes vd-reframeCropR {
  0%, 100% { width: 36%; }
  30% { width: 40%; }
  70% { width: 32%; }
}

@keyframes vd-reframeCropBox {
  0%, 100% { left: 36%; right: 36%; }
  30% { left: 32%; right: 40%; }
  70% { left: 40%; right: 32%; }
}

/* Face tracking box — visible tracking movement */
@keyframes vd-faceTrack {
  0%, 100% { transform: translate(0, 0) scale(1); }
  20% { transform: translate(6px, -2px) scale(1.02); }
  40% { transform: translate(-4px, 3px) scale(0.98); }
  60% { transform: translate(3px, -4px) scale(1.01); }
  80% { transform: translate(-5px, 1px) scale(0.99); }
}

/* Reframe: overlays + crop move together (single person) */
@keyframes vd-trackOverlayL {
  0%, 100% { width: 53%; }
  30% { width: 50%; }
  60% { width: 56%; }
}

@keyframes vd-trackOverlayR {
  0%, 100% { width: 17%; }
  30% { width: 20%; }
  60% { width: 14%; }
}

@keyframes vd-trackCropBox {
  0%, 100% { left: 53%; right: 17%; }
  30% { left: 50%; right: 20%; }
  60% { left: 56%; right: 14%; }
}

/* Reframe: face tracking on person left */
@keyframes vd-trackLeft {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(3px, -2px); }
  60% { transform: translate(-3px, 1px); }
}

/* Reframe: face tracking on person right */
@keyframes vd-trackRight {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(-3px, 1px); }
  60% { transform: translate(4px, -2px); }
}

@keyframes vd-reframeScan {
  0% { left: 30%; opacity: 0; }
  10% { opacity: 1; }
  50% { left: 70%; opacity: 1; }
  60% { opacity: 0; }
  100% { left: 70%; opacity: 0; }
}

@keyframes vd-reframePhoneAppear {
  0%, 20% { transform: scale(0.95); opacity: 0.7; }
  50%, 80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.7; }
}

@keyframes vd-reframeGlow {
  0%, 20% { opacity: 0; }
  50%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes vd-clipAppear {
  0% { opacity: 0; transform: translateY(16px) scale(0.9); }
  12% { opacity: 1; transform: translateY(0) scale(1); }
  85% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-4px) scale(0.97); }
}

/* Step 3: Floating reactions */
@keyframes vd-floatUp {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  15% { opacity: 1; transform: translateY(-20px) scale(1); }
  70% { opacity: 0.8; transform: translateY(-80px) scale(1); }
  100% { opacity: 0; transform: translateY(-120px) scale(0.7); }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  [data-anim] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .vd-card:hover,
  .vd-bento-card:hover,
  .vd-bento-card-hero:hover,
  .vd-step-card:hover,
  .vd-sec-card:hover,
  .vd-testimonial-screenshot:hover,
  .vd-pricing-card:hover,
  .vd-comment:hover {
    transform: none;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .vd-logos-container,
  .vd-showcase-marquee {
    animation: none !important;
  }

  .vd-mock-face-circle,
  .vd-mock-playhead,
  .vd-caption-word {
    animation: none !important;
  }
}