/* AlbaChat Landing Page - Animations */
/* CSS keyframe animations and transition effects */

/* ========================================
   Page Load Animation
   ======================================== */

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body {
  animation: fade-in 0.6s ease-out;
}

/* ========================================
   Sun Rising Animation
   ======================================== */

@keyframes sun-rise {
  0% {
    transform: translateX(-50%) translateY(60px);
    opacity: 0.6;
  }
  50% {
    transform: translateX(-50%) translateY(-20px);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(60px);
    opacity: 0.6;
  }
}

.hero__sun {
  animation: sun-rise 25s linear infinite;
}

/* Sun glow pulsing */
@keyframes sun-glow {
  0%, 100% {
    box-shadow: 0 0 60px var(--color-sunrise-orange);
  }
  50% {
    box-shadow: 0 0 100px var(--color-sunrise-orange), 0 0 150px var(--color-sunrise-yellow);
  }
}

.hero__sun {
  animation: sun-rise 25s linear infinite, sun-glow 4s ease-in-out infinite;
}

/* ========================================
   Penguin Idle Animation
   ======================================== */

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

.hero__family--active {
  animation: penguin-bob 3s ease-in-out infinite;
}

/* ========================================
   Floating Orbs Animation
   ======================================== */

@keyframes float-1 {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(20px, -30px);
  }
  50% {
    transform: translate(-10px, -50px);
  }
  75% {
    transform: translate(-30px, -20px);
  }
}

@keyframes float-2 {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-30px, 20px);
  }
  50% {
    transform: translate(20px, 40px);
  }
  75% {
    transform: translate(40px, 10px);
  }
}

@keyframes float-3 {
  0%, 100% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(30px, -40px);
  }
  66% {
    transform: translate(-20px, 30px);
  }
}

.hero__orb--1 {
  animation: float-1 20s ease-in-out infinite;
}

.hero__orb--2 {
  animation: float-2 18s ease-in-out infinite;
}

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

/* ========================================
   Scroll Reveal Animations
   ======================================== */

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

@keyframes fade-in-scale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Elements waiting to be animated */
[data-animate] {
  opacity: 0;
}

/* Elements that have been animated */
[data-animate].is-visible {
  animation: fade-up 0.4s ease-out forwards;
}

/* Staggered delays for features */
[data-animate][data-delay="100"].is-visible {
  animation-delay: 100ms;
}

[data-animate][data-delay="200"].is-visible {
  animation-delay: 200ms;
}

[data-animate][data-delay="300"].is-visible {
  animation-delay: 300ms;
}

/* ========================================
   Hero Content Entrance
   ======================================== */

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

.hero__content {
  animation: slide-up-fade 0.8s ease-out 0.2s both;
}

.hero__illustration {
  animation: fade-in-scale 0.8s ease-out 0.4s both;
}

/* ========================================
   Badge Pulse Animation
   ======================================== */

@keyframes badge-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 107, 53, 0);
  }
}

.header__badge {
  animation: badge-pulse 2s ease-in-out infinite;
}

/* ========================================
   Feature Card Hover Effects
   ======================================== */

.feature__icon {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.feature:hover .feature__icon {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
}

/* ========================================
   Heart Beat Animation
   ======================================== */

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.15);
  }
  30% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.1);
  }
}

.footer__heart {
  display: inline-block;
  animation: heartbeat 1.5s ease-in-out infinite;
}

/* ========================================
   Background Shimmer Effect
   ======================================== */

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

/* ========================================
   Reduced Motion Support
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  body,
  .hero__sun,
  .hero__family--active,
  .hero__orb--1,
  .hero__orb--2,
  .hero__orb--3,
  .hero__content,
  .hero__illustration,
  .header__badge,
  .footer__heart {
    animation: none;
  }

  [data-animate] {
    opacity: 1;
  }

  [data-animate].is-visible {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .feature__icon {
    transition: none;
  }

  .feature:hover .feature__icon {
    transform: none;
    box-shadow: none;
  }
}