/* ============================================================
   VitaService — Animations & Transitions
   animations.css  ·  v1.0
   ============================================================ */

/* ── KEYFRAMES ────────────────────────────────────────────── */

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

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

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

/* Hero gradient breath */
@keyframes heroGlow {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

/* Floating effect */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

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

/* Stat count up — voor JS-ondersteuning */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── SCROLL-TRIGGERED ANIMATIE KLASSEN ───────────────────── */
/* Worden via Intersection Observer geactiveerd (zie animations.js) */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-fade-in {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.animate-fade-in.visible { opacity: 1; }

.animate-scale-in {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate-scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

.animate-slide-left {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.animate-slide-right {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delay voor groepen (via data-delay of inline style) */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.10s; }
.stagger-3 { transition-delay: 0.15s; }
.stagger-4 { transition-delay: 0.20s; }
.stagger-5 { transition-delay: 0.25s; }
.stagger-6 { transition-delay: 0.30s; }

/* ── GLOW EFFECT VOOR ACCENT-ELEMENTEN ───────────────────── */

.glow-accent {
  box-shadow: 0 0 30px rgba(194, 65, 12, 0.15),
              0 0 60px rgba(194, 65, 12, 0.08);
}

.glow-accent-hover {
  transition: box-shadow var(--transition-slow);
}
.glow-accent-hover:hover {
  box-shadow: 0 0 40px rgba(194, 65, 12, 0.20),
              0 0 80px rgba(194, 65, 12, 0.10);
}

/* ── HERO ACHTERGROND GLOW ───────────────────────────────── */

.hero-glow {
  position: absolute;
  top: -20%;
  left: 50%;
  margin-left: -400px; /* centreren zonder transform: laat transform vrij voor heroGlow-animatie en de JS-parallax */
  width: 800px;
  height: 600px;
  max-width: none;
  background: radial-gradient(ellipse,
    rgba(194, 65, 12, 0.10) 0%,
    rgba(194, 65, 12, 0.04) 40%,
    transparent 70%);
  pointer-events: none;
  animation: heroGlow 8s ease-in-out infinite;
}

@media (max-width: 640px) {
  .hero-glow { width: 480px; height: 400px; margin-left: -240px; }
}

/* ── FLOATING ELEMENTEN ──────────────────────────────────── */

.float-slow { animation: float 6s ease-in-out infinite; }
.float-medium { animation: float 4s ease-in-out infinite; }

/* ── HOVER TRANSFORMATIES ─────────────────────────────────── */

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

.hover-scale {
  transition: transform var(--transition-base);
}
.hover-scale:hover { transform: scale(1.03); }

.hover-bright {
  transition: filter var(--transition-base);
}
.hover-bright:hover { filter: brightness(1.15); }

/* ── LIJN ANIMATIE (voor Process Flow) ───────────────────── */

.animate-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.2s ease-out;
}
.animate-line.visible {
  stroke-dashoffset: 0;
}

/* ── CIJFER TELLER (voor statistieken) ───────────────────── */

.count-up {
  display: inline-block;
  animation: countUp 0.4s ease-out both;
}

/* ── GRADIENT BORDER (animated) ──────────────────────────── */

.gradient-border {
  position: relative;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-indigo), var(--color-accent));
  background-size: 200% 200%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: gradientBorder 4s linear infinite;
  opacity: 0;
  transition: opacity var(--transition-slow);
}
.gradient-border:hover::before { opacity: 1; }

@keyframes gradientBorder {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── PAGE TRANSITION ─────────────────────────────────────── */

.page-enter {
  animation: fadeIn 0.3s ease-out;
}