/* ============================================================
   HUPFAST ANIMATIONS — animations.css
   Scroll-triggered entrance animations and micro-interactions
   ============================================================ */

/* ── Entrance Animations ─────────────────────────────────────── */
[data-animate] {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-animate="fade-up"] {
  transform: translateY(28px);
}

[data-animate="fade-down"] {
  transform: translateY(-28px);
}

[data-animate="fade-left"] {
  transform: translateX(28px);
}

[data-animate="fade-right"] {
  transform: translateX(-28px);
}

[data-animate="fade"] {
  transform: none;
}

[data-animate="scale"] {
  transform: scale(0.96);
}

[data-animate].animated {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Delay Classes */
[data-delay="100"] { transition-delay: 0.10s; }
[data-delay="150"] { transition-delay: 0.15s; }
[data-delay="200"] { transition-delay: 0.20s; }
[data-delay="300"] { transition-delay: 0.30s; }
[data-delay="400"] { transition-delay: 0.40s; }
[data-delay="500"] { transition-delay: 0.50s; }
[data-delay="600"] { transition-delay: 0.60s; }
[data-delay="700"] { transition-delay: 0.70s; }
[data-delay="800"] { transition-delay: 0.80s; }

/* ── Ecosystem Visual Animations ────────────────────────────── */
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

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

@keyframes float-x {
  0%, 100% { transform: translateX(0px); }
  50%       { transform: translateX(-8px); }
}

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

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

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

@keyframes dash-flow {
  to { stroke-dashoffset: -48; }
}

@keyframes node-appear {
  0%   { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(48, 86, 208, 0.20); }
  50%       { box-shadow: 0 0 40px rgba(48, 86, 208, 0.40); }
}

@keyframes line-draw {
  from { stroke-dashoffset: 200; }
  to   { stroke-dashoffset: 0; }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes counter-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Ecosystem Node Pulse ────────────────────────────────────── */
.eco-pulse {
  position: absolute;
  border-radius: 50%;
  animation: pulse-ring 2s cubic-bezier(0.2, 0, 0.8, 1) infinite;
}

/* ── Floating Elements ───────────────────────────────────────── */
.float-y {
  animation: float-y 6s ease-in-out infinite;
}

.float-y-slow {
  animation: float-y 9s ease-in-out infinite;
}

.float-x {
  animation: float-x 7s ease-in-out infinite;
}

/* ── Gradient Animated Background ───────────────────────────── */
.gradient-animated {
  background-size: 200% 200%;
  animation: gradient-shift 6s ease infinite;
}

/* ── Shimmer Effect ──────────────────────────────────────────── */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--bg-light) 25%,
    rgba(255,255,255,0.8) 50%,
    var(--bg-light) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ── Hero Gradient Orb ───────────────────────────────────────── */
.orb {
  border-radius: 50%;
  filter: blur(60px);
  position: absolute;
  pointer-events: none;
}

.orb-blue {
  background: radial-gradient(circle, rgba(48, 86, 208, 0.35) 0%, transparent 70%);
  animation: float-y 10s ease-in-out infinite;
}

.orb-violet {
  background: radial-gradient(circle, rgba(120, 101, 206, 0.20) 0%, transparent 70%);
  animation: float-y 13s ease-in-out infinite reverse;
}

.orb-light {
  background: radial-gradient(circle, rgba(23, 139, 214, 0.20) 0%, transparent 70%);
  animation: float-y 8s ease-in-out infinite;
}

/* ── SVG Path Animation ──────────────────────────────────────── */
.animate-path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: line-draw 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-flow {
  stroke-dasharray: 8 8;
  animation: dash-flow 1.2s linear infinite;
}

/* ── Hover Lift ──────────────────────────────────────────────── */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ── Glow On Hover ───────────────────────────────────────────── */
.hover-glow:hover {
  box-shadow: var(--shadow-brand);
}

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

  .float-y, .float-y-slow, .float-x,
  .gradient-animated, .eco-pulse, .orb-blue, .orb-violet, .orb-light {
    animation: none;
  }
}