/* ============================================================
   VETLEE — Animations & Visual Effects
   ============================================================ */

/* ─── Fade-in animations on scroll ─── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ─── Hero entrance animations ─── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.hero-tag-animate {
  animation: fadeInUp 0.6s ease 0.1s both;
}

.hero-title-animate {
  animation: fadeInUp 0.7s ease 0.2s both;
}

.hero-subtitle-animate {
  animation: fadeInUp 0.6s ease 0.35s both;
}

.hero-ctas-animate {
  animation: fadeInUp 0.6s ease 0.5s both;
}

.hero-visual-animate {
  animation: scaleIn 1s ease 0.3s both;
}

/* ─── AI Visual Canvas Animations ─── */
@keyframes pulse-dot {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.4);
  }
}

@keyframes orbit {
  from { transform: rotate(0deg) translateX(var(--orbit-radius, 120px)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--orbit-radius, 120px)) rotate(-360deg); }
}

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

@keyframes glow-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

@keyframes line-draw {
  from { stroke-dashoffset: 1000; opacity: 0; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes counter-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ─── AI Neural Network Visual ─── */
.ai-sphere {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 0 auto;
}

.ai-sphere-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(0,210,255,0.5) 0%, rgba(0,210,255,0.1) 60%, transparent 100%);
  box-shadow: 0 0 40px rgba(0,210,255,0.4), inset 0 0 20px rgba(0,210,255,0.1);
  animation: glow-pulse 3s ease-in-out infinite;
}

.ai-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid;
}

.ai-ring--1 {
  width: 160px;
  height: 160px;
  border-color: rgba(0,210,255,0.2);
  animation: spin-slow 20s linear infinite;
}

.ai-ring--2 {
  width: 260px;
  height: 260px;
  border-color: rgba(124,92,252,0.15);
  animation: counter-spin 30s linear infinite;
}

.ai-ring--3 {
  width: 360px;
  height: 360px;
  border-color: rgba(0,210,255,0.08);
  animation: spin-slow 45s linear infinite;
}

.ai-dot {
  position: absolute;
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

.ai-dot--sm {
  width: 4px;
  height: 4px;
  background: var(--accent-cyan);
}

.ai-dot--md {
  width: 8px;
  height: 8px;
  background: var(--accent-violet);
}

.ai-node {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  animation: float 4s ease-in-out infinite;
}

/* ─── Grid Dots Background ─── */
.dots-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

/* ─── Animated Lines ─── */
.scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,210,255,0.4), transparent);
  animation: scan 6s ease-in-out infinite;
}

@keyframes scan {
  0%   { top: 0%; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ─── Loading shimmer ─── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.shimmer-text {
  background: linear-gradient(90deg,
    var(--text-secondary) 0%,
    var(--text-primary) 50%,
    var(--text-secondary) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* ─── Number counter animation ─── */
.count-up {
  display: inline-block;
}

/* ─── Hover states ─── */
.hover-lift {
  transition: transform var(--transition-default);
}

.hover-lift:hover {
  transform: translateY(-4px);
}

/* ─── Progress bar animation ─── */
@keyframes progressFill {
  from { width: 0; }
  to { width: var(--progress-width, 70%); }
}

.progress-bar {
  height: 3px;
  background: var(--border-subtle);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}

.progress-bar-fill {
  height: 100%;
  background: var(--gradient-accent);
  border-radius: 2px;
  width: 0;
  transition: width 1s ease 0.5s;
}

.progress-bar-fill.animated {
  width: var(--progress-width, 70%);
}

/* ─── Gradient border card ─── */
.gradient-border-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.gradient-border-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: var(--gradient-accent);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--transition-default);
}

.gradient-border-card:hover::before {
  opacity: 0.5;
}

/* ─── Page transition ─── */
@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-enter {
  animation: pageEnter 0.4s ease both;
}

/* ─── Glow button pulse ─── */
@keyframes btnGlowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0,210,255,0.3); }
  50% { box-shadow: 0 0 40px rgba(0,210,255,0.6); }
}

.btn--primary:not(:hover) {
  /* subtle pulsing glow on primary CTA */
}

/* ─── Topography lines ─── */
.topo-lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.04;
}

/* ─── Connection line (SVG) ─── */
.connection-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.connection-path {
  fill: none;
  stroke: rgba(0,210,255,0.2);
  stroke-width: 1;
  stroke-dasharray: 6 4;
  animation: moveDash 4s linear infinite;
}

@keyframes moveDash {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -100; }
}