/* ==========================================================================
   Aspire International — motion
   One orchestrated hero entrance on load; restrained, single-use scroll reveals
   driven by IntersectionObserver (interactions.js adds .is-visible).
   Everything here is disabled under prefers-reduced-motion.
   ========================================================================== */

/* --- Hero entrance (home) --- */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes skyline-up {
  from {
    opacity: 0;
    transform: translateY(36px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lattice-in {
  from {
    opacity: 0;
    transform: rotate(-8deg) scale(0.92);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

.hero .hero__licence,
.hero h1,
.hero .hero__lead,
.hero .btn-row,
.hero .hero__aside,
.hero .hero__services {
  animation: rise-in 720ms var(--ease-out) both;
}
.hero .hero__licence {
  animation-delay: 60ms;
}
.hero h1 {
  animation-delay: 140ms;
}
.hero .hero__lead {
  animation-delay: 240ms;
}
.hero .btn-row {
  animation-delay: 320ms;
}
.hero .hero__aside {
  animation-delay: 380ms;
}
.hero .hero__services {
  animation-delay: 440ms;
}
.hero .hero__skyline {
  animation: skyline-up 1100ms var(--ease-out) 200ms both;
}
.hero .hero__lattice {
  animation: lattice-in 1400ms var(--ease-out) both;
}

/* --- Scroll reveal (single use, see interactions.js) --- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Stagger groups: children of .reveal-group get incremental delays */
.reveal-group > .reveal:nth-child(2) {
  transition-delay: 70ms;
}
.reveal-group > .reveal:nth-child(3) {
  transition-delay: 140ms;
}
.reveal-group > .reveal:nth-child(4) {
  transition-delay: 210ms;
}
.reveal-group > .reveal:nth-child(5) {
  transition-delay: 280ms;
}

/* --- Subtle parallax on decorative lattices (interactions.js sets --parallax) --- */
.hero__lattice,
.page-hero__lattice,
.cta-band__lattice {
  will-change: transform;
}
.page-hero__lattice,
.cta-band__lattice {
  transform: translateY(calc(-50% + var(--parallax, 0px)));
}

/* --- Reduced motion: honour the user's preference everywhere --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .page-hero__lattice,
  .cta-band__lattice {
    transform: translateY(-50%);
  }
}

/* Without JavaScript nothing should stay hidden */
.no-js .reveal {
  opacity: 1;
  transform: none;
}