/* ==========================================================================
   Tandem Animation Keyframes & Entrance Defaults
   ========================================================================== */

/* --- 1. Keyframes --- */

/* Text Outline Shimmer */
@keyframes outlineShimmer {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Organic Morphing Shape Blob */
@keyframes morphBlob {
  0% {
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  }

  33% {
    border-radius: 70% 30% 52% 48% / 60% 40% 60% 40%;
  }

  66% {
    border-radius: 50% 50% 30% 70% / 40% 60% 40% 60%;
  }

  100% {
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  }
}

/* Spin/Rotate Animation for Shimmer */
@keyframes spinBlob {
  0% {
    rotate: 0deg;
  }

  100% {
    rotate: 360deg;
  }
}


/* --- 2. Initial States for Scroll-Entrance Reveals (Class-Based) --- */

/* Exclude hero section from initial hidden states so they are visible on load to pass Lighthouse LCP audits */
body:not(.no-animations) .page-section:not(.hero-section) .reveal-on-scroll,
body:not(.no-animations) .page-section .slider-img {
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}

body:not(.no-animations) .page-section .cta-video-wrapper {
  opacity: 0;
}

body:not(.no-animations) .page-section:not(.hero-section) .reveal-word-solid {
  display: inline-block;
  vertical-align: bottom;
  opacity: 0;
  transform: translateY(15px);
  will-change: transform, opacity;
  white-space: nowrap;
}

body:not(.no-animations) .page-section:not(.hero-section) .reveal-on-scroll,
body:not(.no-animations) .page-section:not(.hero-section) .section-header h1~*,
body:not(.no-animations) .page-section:not(.hero-section) .section-header h2~* {
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
}

body:not(.no-animations) .page-section .feature-item {
  opacity: 0;
  transform: translateY(15px);
  will-change: transform, opacity;
}


/* --- 3. Word Reveal & Hover Glow Transitions --- */

.clip-reveal {
  display: inline;
}

body:not(.no-animations) .page-section:not(.hero-section) .reveal-word {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  vertical-align: bottom;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  white-space: nowrap;
}

.has-glow::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: var(--glow-size);
  height: var(--glow-size);
  background: var(--gradient-purple-glow);
  z-index: -1;
  pointer-events: none;
  filter: blur(var(--glow-blur));

  /* Apply morphing blob shape and rotating shimmer animations */
  animation:
    morphBlob 12s ease-in-out infinite,
    spinBlob 20s linear infinite;
  animation-play-state: paused;
  will-change: transform, border-radius;
}

/* Play animations only when the section is active/visible */
.page-section.is-active .has-glow::before,
.page-section.is-active .title-h2-outline {
  animation-play-state: running;
}

/* --- 4. Android Device & No-Animations Instant Display Overrides --- */
.is-android .page-section .reveal-on-scroll,
.is-android .page-section .slider-img,
.is-android .page-section .reveal-word-solid,
.is-android .page-section .reveal-word,
.is-android .page-section .feature-item,
body.no-animations .page-section .reveal-on-scroll,
body.no-animations .page-section .slider-img,
body.no-animations .page-section .reveal-word-solid,
body.no-animations .page-section .reveal-word,
body.no-animations .page-section .feature-item,
html.low-perf .reveal-on-scroll,
html.low-perf .slider-img,
html.low-perf .reveal-word-solid,
html.low-perf .reveal-word,
html.low-perf .feature-item {
  opacity: 1 !important;
  transform: none !important;
  clip-path: inset(0 0% 0 0) !important;
  -webkit-clip-path: inset(0 0% 0 0) !important;
  will-change: auto !important;
  animation: none !important;
  transition: none !important;
}

.is-android .title-h2-outline,
body.no-animations .title-h2-outline,
html.low-perf .title-h2-outline {
  clip-path: inset(0 0% 0 0) !important;
  -webkit-clip-path: inset(0 0% 0 0) !important;
  opacity: 1 !important;
}

.is-android .hero-video {
  display: none !important;
}

.is-android .hero-lcp-image {
  display: block !important;
  opacity: 1 !important;
}