/* 
 * Animation Styles - Scroll reveals, transitions, keyframes
 */

/* === Scroll Reveal Animations === */
.reveal-hidden {
  opacity: 0;
  transform: translateY(30px);
}

.reveal-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

[data-reveal="fade-up"].reveal-hidden {
  transform: translateY(30px);
}

[data-reveal="fade-in"].reveal-hidden {
  transform: none;
}

[data-reveal="slide-left"].reveal-hidden {
  transform: translateX(-30px);
}

[data-reveal="slide-right"].reveal-hidden {
  transform: translateX(30px);
}

[data-reveal="scale-up"].reveal-hidden {
  transform: scale(0.95);
}

/* Stagger children */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
}

[data-reveal-stagger].reveal-visible > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

[data-reveal-stagger].reveal-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].reveal-visible > *:nth-child(2) { transition-delay: 100ms; }
[data-reveal-stagger].reveal-visible > *:nth-child(3) { transition-delay: 200ms; }
[data-reveal-stagger].reveal-visible > *:nth-child(4) { transition-delay: 300ms; }
[data-reveal-stagger].reveal-visible > *:nth-child(5) { transition-delay: 400ms; }
[data-reveal-stagger].reveal-visible > *:nth-child(6) { transition-delay: 500ms; }

/* === Keyframe Animations === */
@keyframes bounce {
  0%, 100% { 
    transform: translateY(0); 
  }
  50% { 
    transform: translateY(10px); 
  }
}

@keyframes pulse {
  0%, 100% { 
    opacity: 1; 
  }
  50% { 
    opacity: 0.5; 
  }
}

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

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

@keyframes scaleIn {
  from { 
    opacity: 0;
    transform: scale(0.9); 
  }
  to { 
    opacity: 1;
    transform: scale(1); 
  }
}

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

@keyframes glow {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.3); 
  }
  50% { 
    box-shadow: 0 0 40px rgba(255, 107, 107, 0.5); 
  }
}

/* === Animation Utilities === */
.animate-bounce {
  animation: bounce 2s infinite;
}

.animate-pulse {
  animation: pulse 2s infinite;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

.animate-fade-in {
  animation: fadeIn 0.5s ease forwards;
}

.animate-slide-up {
  animation: slideUp 0.5s ease forwards;
}

/* === Scroll Indicator === */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
  opacity: 0.6;
}

.scroll-indicator svg {
  width: 24px;
  height: 24px;
  color: var(--color-text-secondary);
}

/* === Carousel Animations === */
.carousel-track {
  display: flex;
  transition: transform var(--transition-slow);
}

.carousel-slide {
  flex: 0 0 100%;
  padding: var(--space-6);
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-text-secondary);
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.carousel-dot:hover {
  transform: scale(1.2);
}

.carousel-dot.active {
  background: var(--color-primary);
}

/* === Tab Animations === */
.tab-panel {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--transition-base), transform var(--transition-base);
  display: none;
}

.tab-panel.active {
  opacity: 1;
  transform: translateY(0);
  display: block;
}

/* === Modal Animations === */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
  z-index: var(--z-modal);
}

.modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  max-width: 500px;
  width: 90%;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  z-index: calc(var(--z-modal) + 1);
}

.modal-backdrop.active .modal-content,
.modal-content.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  .reveal-hidden,
  [data-reveal-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  
  .animate-bounce,
  .animate-pulse,
  .animate-float,
  .animate-glow {
    animation: none;
  }
  
  .carousel-track,
  .tab-panel,
  .modal-backdrop,
  .modal-content {
    transition: none;
  }
}