/* Onboarding Animations - Luana App
   Enthält alle neuen Animationen für das Onboarding-Redesign
   Diese Datei wird in style.css importiert */

/* Grüner Icon Glow - Slide 1 */
@keyframes iconGlowGreen {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.3),
                0 0 20px rgba(52, 199, 89, 0.4),
                0 0 40px rgba(52, 199, 89, 0.2);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.5),
                0 0 30px rgba(52, 199, 89, 0.6),
                0 0 50px rgba(52, 199, 89, 0.3);
  }
}

/* Blauer Icon Glow - Slide 2 */
@keyframes iconGlowBlue {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3),
                0 0 20px rgba(59, 130, 246, 0.4),
                0 0 40px rgba(59, 130, 246, 0.2);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5),
                0 0 30px rgba(59, 130, 246, 0.6),
                0 0 50px rgba(59, 130, 246, 0.3);
  }
}

/* Cyan Icon Glow - Slide 3 */
@keyframes iconGlowCyan {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.3),
                0 0 20px rgba(6, 182, 212, 0.4),
                0 0 40px rgba(6, 182, 212, 0.2);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.5),
                0 0 30px rgba(6, 182, 212, 0.6),
                0 0 50px rgba(6, 182, 212, 0.3);
  }
}

/* Icon Slide-In */
@keyframes iconSlideIn {
  from {
    transform: scale(0.9) rotate(-10deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Anwenden der Animationen auf die Slides */
.onboarding-screen .slide:nth-child(1) .icon-circle {
  animation: iconGlowGreen 3s ease-in-out infinite,
             iconSlideIn 0.6s ease-out;
  will-change: transform;
}

.onboarding-screen .slide:nth-child(2) .icon-circle {
  animation: iconGlowBlue 3s ease-in-out infinite,
             iconSlideIn 0.6s ease-out;
  will-change: transform;
}

.onboarding-screen .slide:nth-child(3) .icon-circle {
  animation: iconGlowCyan 3s ease-in-out infinite,
             iconSlideIn 0.6s ease-out;
  will-change: transform;
}

.onboarding-screen .slide:nth-child(4) .icon-circle {
  animation: iconGlowGreen 3s ease-in-out infinite,
             iconSlideIn 0.6s ease-out;
  will-change: transform;
}

/* Pagination Dots mit Glow */
.onboarding-screen .pagination .dot.active {
  transition: all 0.3s ease;
}

.onboarding-screen .slide:nth-child(1).active ~ .bottom-nav .dot:nth-child(1) {
  box-shadow: 0 0 8px rgba(52, 199, 89, 0.6);
}

.onboarding-screen .slide:nth-child(2).active ~ .bottom-nav .dot:nth-child(2) {
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}

.onboarding-screen .slide:nth-child(3).active ~ .bottom-nav .dot:nth-child(3) {
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
}

.onboarding-screen .slide:nth-child(4).active ~ .bottom-nav .dot:nth-child(4) {
  box-shadow: 0 0 8px rgba(52, 199, 89, 0.6);
}

/* Farben für die Icon-Kreise */
.onboarding-screen .icon-circle.color-cyan {
  color: #06b6d4;
}

/* Text Stagger Animation */
.onboarding-screen .slide-content h1,
.onboarding-screen .slide-content p,
.onboarding-screen .slide-content .onboarding-settings,
.onboarding-screen .slide-content .auth-buttons,
.onboarding-screen .slide-content .auth-login-hint {
  opacity: 0;
  transform: translateY(8px);
  animation: onboardingStagger 0.7s ease-out forwards;
}

.onboarding-screen .slide-content h1 { animation-delay: 0.1s; }
.onboarding-screen .slide-content p { animation-delay: 0.2s; }
.onboarding-screen .slide-content .onboarding-settings { animation-delay: 0.3s; }
.onboarding-screen .slide-content .auth-buttons { animation-delay: 0.4s; }
.onboarding-screen .slide-content .auth-login-hint { animation-delay: 0.5s; }

@keyframes onboardingStagger {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}