/**
 * Meridian CSS Scroll-Driven Animations Library
 * Powered by progress-enhanced CSS View Timelines.
 * Fallback: default state is fully visible (Firefox stable + older browsers).
 */

/* --- Default States (Fallback) --- */
.tag,
[data-tag-anim],
h2,
[data-title-anim],
[data-text-anim],
[words-rotate-in],
[data-img-scale],
[data-img-curtain],
[data-reveal]:not(.navbar_component):not(.nav_menu):not(.nav_menu-button):not(
    .nav_menu-link-wrapper
  ):not(.section) {
  opacity: 1;
  transform: none;
  visibility: visible;
}

/* --- Scroll-Driven Animations (Chrome, Safari 18+, Edge) --- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* 1. Standard Fade & Slide Up */
    .tag,
    [data-tag-anim],
    h2,
    [data-title-anim],
    [data-text-anim],
    [data-reveal]:not(.navbar_component):not(.nav_menu):not(.nav_menu-button):not(
        .nav_menu-link-wrapper
      ):not(.section) {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 40%;
    }

    /* 2. 3D Rotation Reveal for Hero Title */
    [words-rotate-in] {
      transform-origin: top center;
      animation: rotate-in linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 40%;
    }

    /* 3. Image Zoom Out Scale */
    [data-img-scale] {
      animation: reveal-s linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }

    /* 4. Curtain Scale Reveal */
    [data-img-curtain] {
      transform-origin: left;
      animation: reveal-c linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 45%;
    }

    /* 5. Slow Parallax Effect */
    .parallax-slow {
      animation: parallax-s linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }

    /* --- Animation Keyframes --- */
    @keyframes reveal-up {
      from {
        opacity: 0;
        transform: translateY(24px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes reveal-s {
      from {
        opacity: 0.5;
        transform: scale(1.15);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes reveal-c {
      from {
        transform: scaleX(0);
        opacity: 0.8;
      }
      to {
        transform: scaleX(1);
        opacity: 1;
      }
    }

    @keyframes rotate-in {
      from {
        opacity: 0;
        transform: perspective(1000px) rotateX(-30deg) translateY(15px);
      }
      to {
        opacity: 1;
        transform: perspective(1000px) rotateX(0deg) translateY(0);
      }
    }

    @keyframes parallax-s {
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY(60px);
      }
    }
  }
}

/* Premium CSS Infinite Marquee for About Page Values */
.image-looping {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  display: flex;
}

.image-looping .image-wrapper {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
  gap: 1.5rem;
  padding: 0.5rem 0;
  animation: marquee-loop 30s linear infinite;
}

.image-looping .image {
  flex-shrink: 0;
  width: 24rem !important;
  height: 28rem !important;
  object-fit: cover;
  border-radius: 12px;
}

@keyframes marquee-loop {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@media screen and (max-width: 767px) {
  .image-looping .image {
    width: 16rem !important;
    height: 20rem !important;
  }
}