/**
 * iHeal Theme - Animations
 * 
 * All animation and transition styles
 */

/* ==========================================================================
   Keyframe Animations
   ========================================================================== */

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

@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);
  }
}

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

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

@keyframes bounce {
  0%, 100% {
    transform: translateY(-5%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* ==========================================================================
   Animation Classes
   ========================================================================== */

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce {
  animation: bounce 1s infinite;
}

/* Intersection Observer based animations */
.animate-on-scroll {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.fade-up {
  transform: translateY(40px);
}

.animate-on-scroll.fade-down {
  transform: translateY(-40px);
}

.animate-on-scroll.fade-left {
  transform: translateX(-40px);
}

.animate-on-scroll.fade-right {
  transform: translateX(40px);
}

.animate-on-scroll.scale {
  transform: scale(0.9);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Staggered animations */
.animate-on-scroll.delay-1 { transition-delay: 0.1s; }
.animate-on-scroll.delay-2 { transition-delay: 0.2s; }
.animate-on-scroll.delay-3 { transition-delay: 0.3s; }
.animate-on-scroll.delay-4 { transition-delay: 0.4s; }
.animate-on-scroll.delay-5 { transition-delay: 0.5s; }
.animate-on-scroll.delay-6 { transition-delay: 0.6s; }

/* ==========================================================================
   Hero Overlay Animations
   ========================================================================== */

.hero-overlay {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hero-overlay.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-overlay[data-align="center"].is-visible {
  transform: translateX(-50%) translateY(-50%);
}

/* ==========================================================================
   Section Animations
   ========================================================================== */

/* Bundle section */
.bundle-section__title,
.bundle-section__subtitle,
.bundle-section__description,
.bundle-section__cta {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.bundle-section.is-visible .bundle-section__title {
  opacity: 1;
  transform: translateY(0);
}

.bundle-section.is-visible .bundle-section__subtitle {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.bundle-section.is-visible .bundle-section__description {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.bundle-section.is-visible .bundle-section__cta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

/* Products section */
.products-section__header {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.products-section.is-visible .products-section__header {
  opacity: 1;
  transform: translateY(0);
}

.product-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease;
}

.products-section.is-visible .product-card {
  opacity: 1;
  transform: translateY(0);
}

.products-section.is-visible .product-card:nth-child(1) { transition-delay: 0.1s; }
.products-section.is-visible .product-card:nth-child(2) { transition-delay: 0.2s; }
.products-section.is-visible .product-card:nth-child(3) { transition-delay: 0.3s; }
.products-section.is-visible .product-card:nth-child(4) { transition-delay: 0.4s; }

/* Benefits section */
.benefits-section__header {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.benefits-section.is-visible .benefits-section__header {
  opacity: 1;
  transform: translateY(0);
}

.benefit-item {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.benefit-item:nth-child(odd) {
  transform: translateX(-40px);
}

.benefit-item:nth-child(even) {
  transform: translateX(40px);
}

.benefits-section.is-visible .benefit-item {
  opacity: 1;
  transform: translateX(0);
}

.benefits-section.is-visible .benefit-item:nth-child(1) { transition-delay: 0.2s; }
.benefits-section.is-visible .benefit-item:nth-child(2) { transition-delay: 0.4s; }
.benefits-section.is-visible .benefit-item:nth-child(3) { transition-delay: 0.6s; }

/* Featured section */
.featured-content {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.featured-image {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: 0.2s;
}

.featured-section.is-visible .featured-content,
.featured-section.is-visible .featured-image {
  opacity: 1;
  transform: translateX(0);
}

/* Story section */
.story-section__header,
.story-timeline,
.story-brand,
.story-values {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.story-section.is-visible .story-section__header { 
  opacity: 1; 
  transform: translateY(0); 
}

.story-section.is-visible .story-timeline { 
  opacity: 1; 
  transform: translateY(0);
  transition-delay: 0.1s;
}

.story-section.is-visible .story-brand { 
  opacity: 1; 
  transform: translateY(0);
  transition-delay: 0.2s;
}

.story-section.is-visible .story-values { 
  opacity: 1; 
  transform: scale(1);
  transition-delay: 0.3s;
}

.story-values {
  transform: scale(0.9);
}

/* Milestones section */
.milestones-section__header {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.milestones-section.is-visible .milestones-section__header {
  opacity: 1;
  transform: translateY(0);
}

.milestone {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.milestone[data-milestone="2"] {
  transform: translateX(-40px);
}

.milestone[data-milestone="3"] {
  transform: translateY(40px);
}

.milestones-section.is-visible .milestone {
  opacity: 1;
  transform: translate(0, 0);
}

.milestones-section.is-visible .milestone:nth-child(1) { transition-delay: 0.1s; }
.milestones-section.is-visible .milestone:nth-child(2) { transition-delay: 0.2s; }
.milestones-section.is-visible .milestone:nth-child(3) { transition-delay: 0.3s; }

.milestones-timeline__final-dot,
.milestones-timeline__tree {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.milestones-timeline__final-dot {
  transform: scale(0);
}

.milestones-timeline__tree {
  transform: translateY(20px);
}

.milestones-section.is-visible .milestones-timeline__final-dot {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.5s;
}

.milestones-section.is-visible .milestones-timeline__tree {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

/* ==========================================================================
   Button Hover Effects
   ========================================================================== */

.btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.btn:hover {
  transform: scale(1.02);
}

.btn:active {
  transform: scale(0.98);
}

/* Ripple effect */
.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
}

.btn:active::after {
  width: 200px;
  height: 200px;
}

/* ==========================================================================
   Navbar Animations
   ========================================================================== */

.navbar {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar__list li a {
  position: relative;
}

.navbar__list li a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width 0.3s ease;
}

.navbar__list li a:hover::after {
  width: 100%;
}

/* Mobile menu animation */
.navbar__menu {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.navbar__menu.is-open {
  transform: translateY(0);
  opacity: 1;
}

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

.product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-8px);
}

.product-card__img {
  transition: transform 0.5s ease;
}

.product-card:hover .product-card__img {
  transform: scale(1.05);
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.loading-state {
  transition: opacity 0.5s ease;
}

.loading-state.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   Scroll Progress
   ========================================================================== */

.scroll-progress {
  transition: width 50ms linear;
}

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

@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;
  }
  
  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }
  
  .hero-overlay {
    opacity: 1;
    transform: none;
  }
  
  .bundle-section__title,
  .bundle-section__subtitle,
  .bundle-section__description,
  .bundle-section__cta,
  .products-section__header,
  .product-card,
  .benefits-section__header,
  .benefit-item,
  .featured-content,
  .featured-image,
  .story-section__header,
  .story-timeline,
  .story-brand,
  .story-values,
  .milestones-section__header,
  .milestone,
  .milestones-timeline__final-dot,
  .milestones-timeline__tree {
    opacity: 1;
    transform: none;
  }
}