/* =========================================
   HERO TEXT REVEAL (Cinematic Blur)
   ================================********* */

/* 1. The Container */
.hero-header-text {
  display: inline; 
}

/* 2. The Phrases */
.reveal-phrase {
  display: inline-block;
  opacity: 0;
  filter: blur(15px);
  transform: translateY(25px) scale(1.02);
  animation: cinematic-reveal 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* 3. Keyframes */
@keyframes cinematic-reveal {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

/* 4. Stagger Delays */
.reveal-phrase:nth-child(1) { animation-delay: 0.1s; }
.reveal-phrase:nth-child(2) { animation-delay: 0.2s; }
.reveal-phrase:nth-child(3) { animation-delay: 0.3s; }
.reveal-phrase:nth-child(4) { animation-delay: 0.4s; }
.reveal-phrase:nth-child(5) { animation-delay: 0.5s; }
.reveal-phrase:nth-child(6) { animation-delay: 0.7s; }
.reveal-phrase:nth-child(7) { animation-delay: 0.8s; }
.reveal-phrase:nth-child(8) { animation-delay: 0.9s; }
.reveal-phrase:nth-child(9) { animation-delay: 1.0s; }
.reveal-phrase:nth-child(10) { animation-delay: 1.1s; }
.reveal-phrase:nth-child(11) { animation-delay: 1.2s; }
.reveal-phrase:nth-child(12) { animation-delay: 1.3s; }


/* =========================================
   SCROLL INDICATOR ANIMATION (The Data Stream)
   ================================********* */

.scroll-line-pulse {
  /* 1. HEIGHT: Make it taller (150%) so the tail feels long and elegant.
     2. DURATION: Slow it down slightly (2.5s) for a premium feel.
  */
  height: 150%; 
  
  animation: data-stream 2.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes data-stream {
  0% {
    transform: translateY(-100%);
  }
  /* The pulse travels through the mask */
  60% {
    transform: translateY(100%);
  }
  /* It waits here invisibly for a moment before restarting.
     This "dead time" creates a rhythm (heartbeat) instead of a chaotic loop. */
  100% {
    transform: translateY(100%);
  }
}


/* =========================================
   SCROLL REVEAL (Blocks)
   ================================********* */
.animate-block {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  filter: blur(10px);

  transition: 
    opacity 0.8s ease-out,
    filter 0.8s ease-out,
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  
  will-change: opacity, transform, filter;
}

.animate-block.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}


/* =========================================
   UTILITY ANIMATIONS (Slide/Pop)
   ================================********* */

/* Slide In (Left to Right) */
.slidein {
  opacity: 0;
  animation: slide-in 600ms ease-out forwards;
}

@keyframes slide-in {
  0% { opacity: 0; transform: translateX(-20vw); }
  100% { opacity: 1; transform: none; }
}

/* Pop Down */
.popdown {
  opacity: 0;
  animation: pop-down 600ms ease-out forwards;
  animation-delay: 0.75s;
}

@keyframes pop-down {
  0% { opacity: 0; transform: translateY(-1rem); }
  100% { opacity: 1; transform: none; }
}

/* Pop Up */
.popup {
  opacity: 0;
  animation: pop-up 600ms ease-out forwards;
}

@keyframes pop-up {
  0% { opacity: 0; transform: translateY(2rem); }
  100% { opacity: 1; transform: none; }
}

/* Helper Delays */
#paragraph-two { animation-delay: 0.30s; }
#about-page-divider { animation-delay: 1.8s; }

/* Before/After Slider Arrows */
@keyframes pulse-left {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-2px); }
}

@keyframes pulse-right {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2px); }
}