/* ==========================================================================
   WhyNotNow Foundation — Animations & Micro-Interactions
   Awwwards-Grade Motion System & Smooth Scroll Transitions
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Lenis Smooth Scroll Engine
   -------------------------------------------------------------------------- */
html.lenis, html.lenis-smooth {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   2. Scroll Reveal System (IntersectionObserver driven)
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s var(--ease-premium),
              transform 0.85s var(--ease-premium);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal Direction Variations */
[data-reveal="fade"] {
  opacity: 0;
  transform: none;
  transition: opacity 0.8s var(--ease-premium);
}

[data-reveal="fade"].is-visible {
  opacity: 1;
  transform: none;
}

[data-reveal="scale"] {
  opacity: 0;
  transform: scale(0.95) translateY(18px);
  transition: opacity 0.85s var(--ease-premium),
              transform 0.85s var(--ease-premium);
}

[data-reveal="scale"].is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

[data-reveal="left"] {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.9s var(--ease-premium),
              transform 0.9s var(--ease-premium);
}

[data-reveal="left"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

[data-reveal="right"] {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.9s var(--ease-premium),
              transform 0.9s var(--ease-premium);
}

[data-reveal="right"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* --------------------------------------------------------------------------
   3. Horizontal Split Slide-In Cards (Scroll Driven)
   -------------------------------------------------------------------------- */
.horizontal-scroll-left,
.horizontal-scroll-right,
.horizontal-card-reveal {
  opacity: 0;
  transition: opacity 0.85s var(--ease-premium),
              transform 0.85s var(--ease-premium),
              box-shadow 0.35s var(--ease-premium),
              border-color 0.3s ease;
  will-change: transform, opacity;
}

.horizontal-scroll-left {
  transform: translateX(-35px);
}

.horizontal-scroll-right {
  transform: translateX(35px);
}

.horizontal-card-reveal {
  transform: translateY(28px);
}

.horizontal-scroll-left.is-visible,
.horizontal-scroll-right.is-visible,
.horizontal-card-reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* --------------------------------------------------------------------------
   4. Staggered Cascade Entrances (80ms - 100ms progressive wave)
   -------------------------------------------------------------------------- */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.85s var(--ease-premium),
              transform 0.85s var(--ease-premium),
              box-shadow 0.35s var(--ease-premium),
              border-color 0.3s ease;
  transition-delay: calc(var(--stagger-index, 0) * 85ms);
  will-change: opacity, transform;
}

[data-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Progressive Stagger Item Delays */
[data-stagger] > *:nth-child(1)  { --stagger-index: 1; }
[data-stagger] > *:nth-child(2)  { --stagger-index: 2; }
[data-stagger] > *:nth-child(3)  { --stagger-index: 3; }
[data-stagger] > *:nth-child(4)  { --stagger-index: 4; }
[data-stagger] > *:nth-child(5)  { --stagger-index: 5; }
[data-stagger] > *:nth-child(6)  { --stagger-index: 6; }
[data-stagger] > *:nth-child(7)  { --stagger-index: 7; }
[data-stagger] > *:nth-child(8)  { --stagger-index: 8; }
[data-stagger] > *:nth-child(9)  { --stagger-index: 9; }
[data-stagger] > *:nth-child(10) { --stagger-index: 10; }
[data-stagger] > *:nth-child(11) { --stagger-index: 11; }
[data-stagger] > *:nth-child(12) { --stagger-index: 12; }

/* --------------------------------------------------------------------------
   5. 3D Micro-Hover Lift & Soft Colored Ambient Shadow
   -------------------------------------------------------------------------- */
.program-card,
.testimonial-card,
.blog-story-card,
.explore-card,
.glance-card,
.about-stat-card,
.step-3sec-card,
.card-hover-lift,
.horizontal-scroll-left,
.horizontal-scroll-right {
  transition: transform 0.35s var(--ease-premium),
              box-shadow 0.35s var(--ease-premium),
              border-color 0.3s ease;
}

.program-card:hover,
.testimonial-card:hover,
.blog-story-card:hover,
.explore-card:hover,
.glance-card:hover,
.about-stat-card:hover,
.step-3sec-card:hover,
.card-hover-lift:hover,
.horizontal-scroll-left:hover,
.horizontal-scroll-right:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(44, 183, 176, 0.15), 0 6px 14px rgba(0, 0, 0, 0.04);
  border-color: rgba(44, 183, 176, 0.45);
}

/* --------------------------------------------------------------------------
   6. Inner Image Scale on Hover & Scroll
   -------------------------------------------------------------------------- */
.program-card img,
.testimonial-card img,
.blog-story-card img,
.explore-card img,
.img-hover-zoom img,
.horizontal-scroll-left img,
.horizontal-scroll-right img,
div[style*="overflow: hidden"] > img {
  transition: transform 0.5s var(--ease-premium);
}

.program-card:hover img,
.testimonial-card:hover img,
.blog-story-card:hover img,
.explore-card:hover img,
.img-hover-zoom:hover img,
.horizontal-scroll-left:hover img,
.horizontal-scroll-right:hover img,
div[style*="overflow: hidden"]:hover > img {
  transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   7. SVG Donut Ring Drawing on Scroll
   -------------------------------------------------------------------------- */
.donut-ring-path {
  transition: stroke-dasharray 1.6s var(--ease-premium);
  will-change: stroke-dasharray;
}

/* --------------------------------------------------------------------------
   8. Fade & Smooth State Swapping (Filter Transitions)
   -------------------------------------------------------------------------- */
.state-fade-item {
  transition: opacity 0.28s var(--ease-premium),
              transform 0.28s var(--ease-premium);
  will-change: opacity, transform;
}

.state-fade-item.fade-out {
  opacity: 0;
  transform: scale(0.97) translateY(8px);
  pointer-events: none;
}

.state-fade-item.fade-in {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Button Slide on Hover */
.btn-hover-slide .btn-icon,
.explore-card-link span,
.explore-card-link svg {
  transition: transform 0.25s var(--ease-premium);
}

.explore-card-link:hover svg,
.btn-hover-slide:hover .btn-icon {
  transform: translateX(5px);
}

/* --------------------------------------------------------------------------
   9. Reduced Motion Accessibility Support
   -------------------------------------------------------------------------- */
@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;
  }

  [data-reveal],
  [data-reveal="left"],
  [data-reveal="right"],
  [data-reveal="scale"],
  [data-stagger] > *,
  .horizontal-scroll-left,
  .horizontal-scroll-right,
  .horizontal-card-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .program-card:hover,
  .testimonial-card:hover,
  .blog-story-card:hover,
  .explore-card:hover,
  .card-hover-lift:hover {
    transform: none !important;
  }
}