/**
 * Animasi halus — tetap elegan, hormati prefers-reduced-motion di main.css
 */

/* Judul hero: gradien hidup perlahan */
.gradient-text {
  background: linear-gradient(
    120deg,
    var(--accent-primary) 0%,
    #6eb5ff 35%,
    var(--accent-primary) 55%,
    #3b82f6 100%
  );
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-flow 14s var(--ease-smooth) infinite;
}

@keyframes gradient-flow {
  0%, 100% { background-position: 0% 40%; }
  50% { background-position: 100% 60%; }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-text { animation: none; background-position: 0% 50%; }
}

/* Bentuk mengambang hero */
.hero__float {
  animation: float-drift 22s var(--ease-smooth) infinite;
}
.hero__float--2 {
  animation-duration: 28s;
  animation-delay: -4s;
}

@keyframes float-drift {
  0%, 100% { transform: translate(0, 0) rotate(12deg); }
  33% { transform: translate(8px, -12px) rotate(10deg); }
  66% { transform: translate(-6px, 8px) rotate(14deg); }
}

.hero__float--2 {
  animation-name: float-drift-alt;
}
@keyframes float-drift-alt {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  50% { transform: translate(-10px, -16px) rotate(-6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__float,
  .hero__float--2 { animation: none; }
}