/* ==========================================================================
   ICC Berlin Church Website - Animations & Keyframes
   ==========================================================================
   This file contains all @keyframes definitions, animation classes,
   micro-interactions, and motion-related styles.
   Base states (.reveal, .reveal-left, etc.) and their transitions
   are defined in style.css.

   Table of Contents:
   1.  Fade Keyframes
   2.  Scale & Blur Keyframes
   3.  Hero Keyframes
   4.  Gradient & Shimmer Keyframes
   5.  Pulse Keyframes
   6.  Float Keyframe
   7.  Spin Keyframe
   8.  Counter Keyframe
   9.  Underline Slide Keyframe
   10. Wave Keyframe
   11. Chatbot Keyframes (Slide Up / Down)
   12. Typing Indicator Keyframe
   13. Hero Animation Classes
   14. Hero Overlay Gradient Animation
   15. Pulse Animation Classes
   16. Chatbot Animations
   17. Floating Icon Animation
   18. Stagger Delays for Grids
   19. Counter Animation
   20. Typing Indicator Styles
   21. Parallax Section
   22. Section Transitions & Shapes
   23. Micro-Interactions: Buttons
   24. Micro-Interactions: Cards
   25. Micro-Interactions: Links
   26. Micro-Interactions: Icons
   27. Micro-Interactions: Overlay Reveal
   28. Page Transition
   29. Reduced Motion (Accessibility)
   ========================================================================== */


/* ==========================================================================
   1. Fade Keyframes
   ========================================================================== */

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

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

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* ==========================================================================
   2. Scale & Blur Keyframes
   ========================================================================== */

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

@keyframes blurIn {
  from {
    opacity: 0;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}


/* ==========================================================================
   3. Hero Keyframes
   ========================================================================== */

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

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

@keyframes heroBtnAppear {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: none;
  }
}


/* ==========================================================================
   4. Gradient & Shimmer Keyframes
   ========================================================================== */

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


/* ==========================================================================
   5. Pulse Keyframes
   ========================================================================== */

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(90, 50, 182, 0.4);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(90, 50, 182, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(90, 50, 182, 0);
  }
}

@keyframes pulseDot {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}


/* ==========================================================================
   6. Float Keyframe
   ========================================================================== */

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


/* ==========================================================================
   7. Spin Keyframe (Loading)
   ========================================================================== */

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


/* ==========================================================================
   8. Counter Keyframe
   ========================================================================== */

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


/* ==========================================================================
   9. Underline Slide Keyframe (Nav)
   ========================================================================== */

@keyframes slideUnderline {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}


/* ==========================================================================
   10. Wave Keyframe (Dividers)
   ========================================================================== */

@keyframes waveMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


/* ==========================================================================
   11. Chatbot Keyframes (Slide Up / Down)
   ========================================================================== */

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

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


/* ==========================================================================
   12. Typing Indicator Keyframe
   ========================================================================== */

@keyframes typingDot {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-5px);
  }
}


/* ==========================================================================
   13. Hero Animation Classes
   ========================================================================== */

.hero__content .hero__logo {
  animation: fadeIn 1s ease forwards;
}

.hero__content .hero__title {
  opacity: 0;
  animation: heroTitleSlide 0.8s ease 0.3s forwards;
}

.hero__content .hero__subtitle {
  opacity: 0;
  animation: heroSubtitleSlide 0.8s ease 0.5s forwards;
}

.hero__content .btn {
  opacity: 0;
  animation: heroBtnAppear 0.8s ease 0.7s forwards;
}


/* ==========================================================================
   14. Hero Overlay Gradient Animation
   ========================================================================== */

.hero__overlay {
  background: linear-gradient(
    135deg,
    rgba(61, 31, 138, 0.85),
    rgba(90, 50, 182, 0.7),
    rgba(26, 16, 64, 0.8)
  );
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}


/* ==========================================================================
   15. Pulse Animation Classes
   ========================================================================== */

/* Pulsing CTA buttons */
.btn--primary.btn--pulse {
  animation: pulse 2s infinite;
}


/* ==========================================================================
   16. Chatbot Animations
   ========================================================================== */

/* Toggle button pulse */
.chatbot__toggle {
  animation: pulse 3s infinite;
}

/* Window open animation */
.chatbot__window.open {
  animation: slideUp 0.3s ease forwards;
}

/* Window close animation */
.chatbot__window.closing {
  animation: slideDown 0.3s ease forwards;
}


/* ==========================================================================
   17. Floating Icon Animation
   ========================================================================== */

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


/* ==========================================================================
   18. Stagger Delays for Grids
   ========================================================================== */

.reveal-stagger > *:nth-child(1) {
  transition-delay: 0s;
}

.reveal-stagger > *:nth-child(2) {
  transition-delay: 0.1s;
}

.reveal-stagger > *:nth-child(3) {
  transition-delay: 0.2s;
}

.reveal-stagger > *:nth-child(4) {
  transition-delay: 0.3s;
}

.reveal-stagger > *:nth-child(5) {
  transition-delay: 0.4s;
}

.reveal-stagger > *:nth-child(6) {
  transition-delay: 0.5s;
}

.reveal-stagger > *:nth-child(7) {
  transition-delay: 0.6s;
}

.reveal-stagger > *:nth-child(8) {
  transition-delay: 0.7s;
}


/* ==========================================================================
   19. Counter Animation
   ========================================================================== */

.counter.revealed .counter__number {
  animation: countUp 0.6s ease forwards;
}


/* ==========================================================================
   20. Typing Indicator Styles
   ========================================================================== */

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.5rem 0;
}

.typing-indicator span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typingDot 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}


/* ==========================================================================
   21. Parallax Section
   ========================================================================== */

.parallax-section {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Disable parallax on mobile for performance */
@media (max-width: 768px) {
  .parallax-section {
    background-attachment: scroll;
  }
}


/* ==========================================================================
   22. Section Transitions & Shapes
   ========================================================================== */

/* Diagonal clip section */
.section--diagonal {
  clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
  padding: 8rem 0;
}

/* Section with gradient transition */
.section--gradient-transition {
  background: linear-gradient(180deg, var(--bg-white) 0%, var(--bg-light) 100%);
}


/* ==========================================================================
   23. Micro-Interactions: Buttons
   ========================================================================== */

/* Button press effect */
.btn:active {
  transform: scale(0.97);
}


/* ==========================================================================
   24. Micro-Interactions: Cards
   ========================================================================== */

/* Card hover image zoom */
.card__image-wrapper {
  overflow: hidden;
}

.card__image-wrapper img {
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}

.card:hover .card__image-wrapper img {
  transform: scale(1.08);
}


/* ==========================================================================
   25. Micro-Interactions: Links
   ========================================================================== */

/* Link hover with underline grow */
.link-animated {
  position: relative;
  display: inline-block;
}

.link-animated::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.link-animated:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}


/* ==========================================================================
   26. Micro-Interactions: Icons
   ========================================================================== */

/* Icon rotation on card hover */
.card:hover .feature-card__icon svg {
  transform: rotate(5deg) scale(1.1);
  transition: transform 0.3s ease;
}


/* ==========================================================================
   27. Micro-Interactions: Overlay Reveal
   ========================================================================== */

.overlay-reveal {
  position: relative;
  overflow: hidden;
}

.overlay-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.overlay-reveal:hover::after {
  opacity: 0.1;
}


/* ==========================================================================
   28. Page Transition
   ========================================================================== */

.page-transition {
  animation: fadeIn 0.5s ease;
}

body {
  animation: fadeIn 0.4s ease;
}


/* ==========================================================================
   29. Reduced Motion (Accessibility)
   ==========================================================================
   Respects the user's OS-level preference for reduced motion.
   Disables all animations and transitions globally.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}