/* ============================================================
   SafeCloud — Animations
   ============================================================ */

/* --- Keyframe Definitions --- */

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

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

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

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 136, 0.15); }
  50%       { box-shadow: 0 0 40px rgba(0, 255, 136, 0.3); }
}

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

@keyframes bounceDot {
  0%, 80%, 100% { transform: scale(0); }
  40%           { transform: scale(1); }
}

/* --- Hero entrance animations --- */

.anim-fade-up {
  opacity: 0;
  animation: fadeUp 0.7s ease-out forwards;
}

.anim-fade-in {
  opacity: 0;
  animation: fadeIn 0.6s ease-out forwards;
}

.anim-slide-right {
  opacity: 0;
  animation: slideRight 0.6s ease-out forwards;
}

/* --- Delay utilities --- */

.anim-d0 { animation-delay: 0s;    }
.anim-d1 { animation-delay: 0.1s;  }
.anim-d2 { animation-delay: 0.2s;  }
.anim-d3 { animation-delay: 0.3s;  }
.anim-d4 { animation-delay: 0.4s;  }
.anim-d5 { animation-delay: 0.5s;  }
.anim-d6 { animation-delay: 0.6s;  }
.anim-d7 { animation-delay: 0.7s;  }
.anim-d8 { animation-delay: 0.8s;  }

/* --- Persistent animations --- */

.pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

.spin-slow {
  animation: spinSlow 8s linear infinite;
}

/* --- Loading dots (for form submit state) --- */
.loading-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bg);
  animation: bounceDot 1.4s ease-in-out infinite both;
}
.loading-dot:nth-child(1) { animation-delay: -0.32s; }
.loading-dot:nth-child(2) { animation-delay: -0.16s; }
.loading-dot:nth-child(3) { animation-delay: 0s; }

/* --- Hover micro-interactions --- */

/* Link underline sweep */
.link-sweep {
  position: relative;
  transition: color 0.3s;
}
.link-sweep::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s;
}
.link-sweep:hover { color: var(--accent); }
.link-sweep:hover::after { width: 100%; }

/* Icon nudge on card hover */
.card:hover .icon-nudge {
  transform: translateX(4px);
  transition: transform 0.3s ease;
}
.icon-nudge {
  transition: transform 0.3s ease;
}

/* Float indicator cards */
.stat-float {
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  padding: 1rem;
  width: 14rem;
}
.stat-float.accent {
  border-color: rgba(0, 255, 136, 0.2);
}