/* ==========================================================================
   Animations & Scroll Transitions
   ========================================================================== */

@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}

@keyframes pulseSubtle {
  0%, 100% {
    transform: scale(1);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.04);
    opacity: 0.7;
  }
}

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

.float-animation {
  animation: floatSlow 6s ease-in-out infinite;
}

.ambient-blob-1 {
  animation: pulseSubtle 10s ease-in-out infinite alternate;
}

.ambient-blob-2 {
  animation: pulseSubtle 12s ease-in-out 2s infinite alternate;
}

/* Scroll Reveal Classes (Driven by IntersectionObserver) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger Delays */
.reveal-delay-100 { transition-delay: 100ms; }
.reveal-delay-200 { transition-delay: 200ms; }
.reveal-delay-300 { transition-delay: 300ms; }
.reveal-delay-400 { transition-delay: 400ms; }
.reveal-delay-500 { transition-delay: 500ms; }

/* Scale In Variant */
.scale-on-scroll {
  opacity: 0;
  transform: scale(0.95) translateY(20px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.scale-on-scroll.revealed {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Smooth Focus Ring */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Toast Message */
.toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 2500;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

.toast {
  padding: 1rem 1.5rem;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--font-size-sm);
  font-weight: 500;
  pointer-events: auto;
  transform: translateY(30px);
  opacity: 0;
  transition: all var(--transition-normal);
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast-success {
  background: var(--color-primary);
  border-left: 4px solid var(--color-primary-fixed);
}

.toast-error {
  background: var(--color-error);
}