/* Scroll-driven animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes initial-fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-200px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(200px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* Hero section animations */
.hero {
  animation: initial-fade-in 1s ease-out forwards;
}

.hero-left {
  view-timeline-name: --hero;
  view-timeline-axis: block;
  animation: initial-fade-in 1s ease-out 0.3s backwards;
}

.hero-image {
  view-timeline-name: --hero-image;
  view-timeline-axis: block;
  animation: initial-fade-in 1s ease-out 0.6s backwards;
}

/* Features section animations */
.card {
  opacity: 0;
  view-timeline-name: --card;
  view-timeline-axis: block;
  animation-timeline: --card;
  animation-name: fade-in;
  animation-range: entry 20% contain 50%;
  animation-fill-mode: both;
}

/* Alternate card animations */
.card:nth-child(odd) {
  animation-name: slide-in-left;
}

.card:nth-child(even) {
  animation-name: slide-in-right;
}

/* Section titles animation */
.section-title {
  opacity: 0;
  view-timeline-name: --title;
  view-timeline-axis: block;
  animation-timeline: --title;
  animation-name: scale-in;
  animation-range: entry 20% contain 50%;
  animation-fill-mode: both;
}

.section-subtitle {
  opacity: 0;
  view-timeline-name: --subtitle;
  view-timeline-axis: block;
  animation-timeline: --subtitle;
  animation-name: fade-in;
  animation-range: entry 20% contain 50%;
  animation-fill-mode: both;
}

/* Pricing cards animation */
.sp-tab-item {
  opacity: 0;
  view-timeline-name: --pricing;
  view-timeline-axis: block;
  animation-timeline: --pricing;
  animation-name: fade-in;
  animation-range: entry 20% contain 50%;
  animation-fill-mode: both;
  animation-delay: calc(var(--animation-order, 0) * 100ms);
}

.sp-tab-item:nth-child(1) { --animation-order: 1; }
.sp-tab-item:nth-child(2) { --animation-order: 2; }
.sp-tab-item:nth-child(3) { --animation-order: 3; }

/* Feature detection for scroll-driven animations */
@supports (animation-timeline: view()) {
  .animate-on-scroll {
    view-timeline-name: --scroll;
    view-timeline-axis: block;
    animation-timeline: --scroll;
    animation-range: entry 25% cover 50%;
  }

  .hero-left {
    view-timeline-name: --hero;
    view-timeline-axis: block;
    animation: initial-fade-in 1s ease-out 0.3s backwards;
  }

  .hero-image {
    view-timeline-name: --hero-image;
    view-timeline-axis: block;
    animation: initial-fade-in 1s ease-out 0.6s backwards;
  }
}

/* Fallback animations for browsers that don't support scroll-driven animations */
@supports not (animation-timeline: view()) {
  .animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
  }

  .animate-on-scroll.visible {
    animation: fade-in 1s ease-out forwards;
  }

  .hero-left {
    animation: initial-fade-in 1s ease-out 0.3s backwards;
  }

  .hero-image {
    animation: initial-fade-in 1s ease-out 0.6s backwards;
  }
}

/* Ensure proper support */
@supports not (animation-timeline: scroll()) {
  .hero-left,
  .hero-image,
  .card,
  .section-title,
  .section-subtitle,
  .sp-tab-item {
    /* animation: none; */
    opacity: 1;
    transform: none;
  }
}