/*
  Animation layer: scroll reveals, hero entrance, counters.
  All driven by a small IntersectionObserver in js/main.js toggling
  `.is-visible` — kept GPU-cheap (opacity/transform only).
*/

/* Generic scroll reveal */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--dur-slow) var(--ease-premium), transform var(--dur-slow) var(--ease-premium);
    will-change: opacity, transform;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].is-visible { transform: scale(1); }

/* Stagger children via inline --d custom property set in HTML/JS */
[data-reveal] { transition-delay: var(--d, 0ms); }

/* Hero entrance: title lines slide up from behind a mask */
.hero-title .line span {
    transform: translateY(110%);
    opacity: 0;
    animation: line-up 1s var(--ease-premium) forwards;
}
.hero-title .line:nth-child(1) span { animation-delay: 0.15s; }
.hero-title .line:nth-child(2) span { animation-delay: 0.32s; }

.hero .eyebrow, .hero-subtitle, .hero-ctas, .hero-stats {
    opacity: 0;
    transform: translateY(16px);
    animation: fade-up 0.9s var(--ease-premium) forwards;
}
.hero .eyebrow { animation-delay: 0.05s; }
.hero-subtitle { animation-delay: 0.55s; }
.hero-ctas { animation-delay: 0.72s; }
.hero-stats { animation-delay: 0.88s; }

@keyframes line-up {
    to { transform: translateY(0); opacity: 1; }
}
@keyframes fade-up {
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-title .line span,
    .hero .eyebrow, .hero-subtitle, .hero-ctas, .hero-stats {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Counter number ticking is handled in JS by mutating textContent;
   this just adds a subtle pop when a counter finishes. */
.is-counted { animation: counter-pop 0.4s var(--ease-premium); }
@keyframes counter-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* Loading fade-in for lazy images once decoded */
img[loading="lazy"] {
    transition: opacity 0.5s ease;
}
img.img-loading { opacity: 0; }
img.img-loaded { opacity: 1; }