/* ==========================================================================
   SKY — Animations
   ========================================================================== */

@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(24px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
@keyframes drawLine{
  from{ stroke-dashoffset: var(--len, 1000); }
  to{ stroke-dashoffset: 0; }
}
@keyframes floatSlow{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
@keyframes pulseGlow{
  0%,100%{ opacity: 0.55; }
  50%{ opacity: 1; }
}
@keyframes horizonShift{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

.hero-title span{
  display: inline-block;
  animation: fadeUp 0.9s var(--ease) both;
}
.hero-title span:nth-child(1){ animation-delay: 0.05s; }
.hero-title span:nth-child(2){ animation-delay: 0.16s; }
.hero-title span:nth-child(3){ animation-delay: 0.27s; }

.hero-lede{ animation: fadeUp 0.9s var(--ease) both; animation-delay: 0.4s; }
.hero-ctas{ animation: fadeUp 0.9s var(--ease) both; animation-delay: 0.52s; }
.hero-visual{ animation: fadeIn 1.4s var(--ease) both; animation-delay: 0.3s; }

.hero-path-anim path{
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  animation: drawLine 2.4s var(--ease) forwards;
  animation-delay: 0.5s;
}

.glow-dot{ animation: pulseGlow 3s ease-in-out infinite; }
.float{ animation: floatSlow 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .hero-title span, .hero-lede, .hero-ctas, .hero-visual, .hero-path-anim path, .glow-dot, .float{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}