/* ============================================
   DCV - Animations CSS
   ============================================ */

/* ==========
   Reveal Animations
   ========== */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }

/* Title line animation */
.hero-title .title-line {
  position: relative;
}
.hero-title .title-line > * {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
[data-reveal].revealed .title-line > *,
.hero-title.revealed .title-line {
  opacity: 1;
  transform: translateY(0);
}

/* ==========
   Hero SVG Animations (Scroll-driven)
   ========== */
.hero-svg {
  transition: transform 0.1s linear;
}

/* Floating circles */
.floating-circle {
  animation: floatCircle 6s ease-in-out infinite;
}
.floating-circle.c1 { animation-delay: 0s; }
.floating-circle.c2 { animation-delay: 1.5s; }
.floating-circle.c3 { animation-delay: 3s; }
.floating-circle.c4 { animation-delay: 4.5s; }

@keyframes floatCircle {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(10px, -15px); }
  50% { transform: translate(-5px, -25px); }
  75% { transform: translate(-15px, -10px); }
}

/* Monitor frame subtle pulse */
.monitor-frame {
  animation: monitorPulse 4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes monitorPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(0, 102, 204, 0)); }
  50% { filter: drop-shadow(0 0 20px rgba(0, 102, 204, 0.3)); }
}

/* Animated blocks inside monitor */
.anim-block {
  transform-origin: left;
  animation: blockReveal 2s ease-in-out infinite;
}
.anim-block.block-1 { animation-delay: 0s; }
.anim-block.block-2 { animation-delay: 0.3s; }
.anim-block.block-3 { animation-delay: 0.6s; }
@keyframes blockReveal {
  0%, 30%, 100% { transform: scaleX(1); opacity: 1; }
  15% { transform: scaleX(0); opacity: 0.5; }
}

/* Animated bars (chart) */
.anim-bar {
  transform-origin: bottom;
  animation: barGrow 3s ease-in-out infinite;
}
.anim-bar.bar-1 { animation-delay: 0s; }
.anim-bar.bar-2 { animation-delay: 0.2s; }
.anim-bar.bar-3 { animation-delay: 0.4s; }
.anim-bar.bar-4 { animation-delay: 0.6s; }
.anim-bar.bar-5 { animation-delay: 0.8s; }

@keyframes barGrow {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.6); }
}

/* Progress ring animation */
.progress-ring {
  animation: progressFill 4s ease-in-out infinite;
}
@keyframes progressFill {
  0%, 100% { stroke-dashoffset: 220; }
  50% { stroke-dashoffset: 33; }
}

/* Floating elements */
.floating-phone {
  animation: floatPhone 5s ease-in-out infinite;
  transform-origin: center;
}
@keyframes floatPhone {
  0%, 100% { transform: translate(0, 0) rotate(-5deg); }
  50% { transform: translate(0, -20px) rotate(5deg); }
}

.floating-code {
  animation: floatCode 4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes floatCode {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(0, -15px) scale(1.1); }
}

.floating-check {
  animation: floatCheck 3s ease-in-out infinite;
  transform-origin: center;
}
@keyframes floatCheck {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-10px, -10px) scale(1.1); }
}

/* ==========
   Stats Counter Animation
   ========== */
.stat-value {
  counter-reset: num 0;
}
.stat-value.animated {
  animation: popIn 0.8s var(--ease-out);
}
@keyframes popIn {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ==========
   Service Card Stagger
   ========== */
.service-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.service-card.revealed {
  opacity: 1;
  transform: translateY(0);
}
.service-card:nth-child(1).revealed { transition-delay: 0.1s; }
.service-card:nth-child(2).revealed { transition-delay: 0.2s; }
.service-card:nth-child(3).revealed { transition-delay: 0.3s; }
.service-card:nth-child(4).revealed { transition-delay: 0.4s; }
.service-card:nth-child(5).revealed { transition-delay: 0.5s; }
.service-card:nth-child(6).revealed { transition-delay: 0.6s; }

/* ==========
   Testimonial Stagger
   ========== */
.testimonial-card {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s var(--ease-out);
}
.testimonial-card.revealed {
  opacity: 1;
  transform: translateY(0);
}
.testimonial-card:nth-child(1).revealed { transition-delay: 0.1s; }
.testimonial-card:nth-child(2).revealed { transition-delay: 0.25s; }
.testimonial-card:nth-child(3).revealed { transition-delay: 0.4s; }

/* ==========
   Visual Card Animations (Why Us)
   ========== */
.visual-card {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all 0.6s var(--ease-out);
}
.visual-card.revealed {
  opacity: 1;
}
.visual-card:nth-child(1).revealed { transform: translateY(-20px); transition-delay: 0s; }
.visual-card:nth-child(2).revealed { transform: translateY(0); transition-delay: 0.15s; }
.visual-card:nth-child(3).revealed { transform: translateY(0); transition-delay: 0.3s; }
.visual-card:nth-child(4).revealed { transform: translateY(-20px); transition-delay: 0.45s; }

/* ==========
   Scroll-linked rotation for hero visual
   ========== */
.hero-anim-wrapper {
  transform: translateY(var(--scroll-y, 0)) rotate(var(--scroll-rot, 0deg));
}

/* ==========
   Page transitions
   ========== */
.page-entering {
  animation: pageEnter 0.6s var(--ease-out);
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========
   Back-to-top footer animation
   ========== */
.back-to-top {
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  transition: all 0.4s var(--ease-out);
}
.back-to-top.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

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