/* =============================================
   HUBLE — Animations & Keyframes
   ============================================= */

/* Blob floating */
@keyframes blobFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-30px, 20px) scale(1.05); }
  66% { transform: translate(20px, -15px) scale(0.95); }
}

@keyframes blobFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(25px, -20px) scale(1.03); }
  66% { transform: translate(-15px, 25px) scale(0.97); }
}

@keyframes blobFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(15px, -25px) scale(1.06); }
}

/* Glass shape floating */
@keyframes glassFloat1 {
  0%, 100% { transform: translateY(0) rotate(15deg); }
  50% { transform: translateY(-20px) rotate(20deg); }
}

@keyframes glassFloat2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
}

@keyframes glassFloat3 {
  0%, 100% { transform: translateY(0) rotate(-20deg); }
  50% { transform: translateY(-25px) rotate(-15deg); }
}

/* Scroll indicator bounce */
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.4; }
  50% { transform: translateX(-50%) translateY(10px); opacity: 0.7; }
}

/* Pulse for CTA focus */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--mint-glow-strong); }
  50% { box-shadow: 0 0 0 12px rgba(124, 226, 160, 0); }
}

.btn-primary:focus-visible {
  animation: pulse 1.5s ease-in-out infinite;
  outline: 2px solid var(--mint-dark);
  outline-offset: 2px;
}

/* Loading state */
.loading-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(26, 26, 26, 0.2);
  border-top-color: var(--black);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-right: 0.5rem;
}

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

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}