/**
 * SKYPURE — Cinematic Motion & Animations (Regulated Architectural Direction)
 * Controlled, Subtle & Prestigious
 */

/* ==========================================================================
   01. HERO TITLE ENTRANCE
   ========================================================================== */

@keyframes heroRevealLetters {
  0% {
    opacity: 0;
    letter-spacing: 0.28em;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    letter-spacing: var(--tracking-widest);
    transform: translateY(0);
  }
}

@keyframes heroFadeUp {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-animate-title {
  animation: heroRevealLetters 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-animate-sub {
  animation: heroFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
  opacity: 0;
}

.hero-animate-desc {
  animation: heroFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
  opacity: 0;
}

.hero-animate-cta {
  animation: heroFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.75s forwards;
  opacity: 0;
}

/* ==========================================================================
   02. SCROLL REVEAL SYSTEM (INTERSECTION OBSERVER)
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger Delays */
.reveal-delay-1 {
  transition-delay: 0.08s;
}

.reveal-delay-2 {
  transition-delay: 0.16s;
}

.reveal-delay-3 {
  transition-delay: 0.24s;
}

.reveal-delay-4 {
  transition-delay: 0.32s;
}

.reveal-delay-5 {
  transition-delay: 0.40s;
}

.reveal-delay-6 {
  transition-delay: 0.48s;
}

/* Line Reveal */
.reveal-line {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-line.is-revealed {
  transform: scaleX(1);
}