/* Motion utilities — visible without JS; animated only when html.js-motion is present */

.js-motion .hero-enter {
    opacity: 0;
    transform: translateY(24px);
    animation: fadeUp var(--motion-reveal) var(--ease-emphasized) forwards;
}
.js-motion .hero-badge.hero-enter { animation-delay: 80ms; }
.js-motion .hero-title.hero-enter { opacity: 1; transform: none; animation: none; }
.js-motion .hero-copy.hero-enter { animation-delay: 420ms; }
.js-motion .hero-cta-group.hero-enter { animation-delay: 540ms; }
.js-motion .hero-services-link.hero-enter { animation-delay: 640ms; }
.js-motion .proof-strip.hero-enter { animation-delay: 720ms; }
.js-motion .hero-scroll-indicator.hero-enter { animation-delay: 820ms; }
.js-motion .hero-visual.hero-enter {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    animation-delay: 380ms;
    animation-name: scaleFade;
}

.js-motion .hero-title .mask-line > span {
    transform: translateY(105%);
    animation: maskUp var(--motion-reveal) var(--ease-emphasized) forwards;
}
.js-motion .hero-title .mask-line:nth-child(1) > span { animation-delay: 160ms; }
.js-motion .hero-title .mask-line:nth-child(2) > span { animation-delay: 280ms; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleFade {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes maskUp {
    from { transform: translateY(105%); }
    to { transform: translateY(0); }
}

.js-motion .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity var(--motion-slow) var(--ease-emphasized),
        transform var(--motion-slow) var(--ease-emphasized);
}
.js-motion .reveal.reveal-left { transform: translateX(-28px); }
.js-motion .reveal.reveal-right { transform: translateX(28px); }
.js-motion .reveal.reveal-scale { transform: scale(0.97); }
.js-motion .reveal.is-in {
    opacity: 1;
    transform: none;
}
.js-motion .stagger-item {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity var(--motion-slow) var(--ease-emphasized),
        transform var(--motion-slow) var(--ease-emphasized);
}
.js-motion .stagger.is-in .stagger-item { opacity: 1; transform: none; }
.js-motion .stagger.is-in .stagger-item:nth-child(1) { transition-delay: 0ms; }
.js-motion .stagger.is-in .stagger-item:nth-child(2) { transition-delay: 90ms; }
.js-motion .stagger.is-in .stagger-item:nth-child(3) { transition-delay: 180ms; }
.js-motion .stagger.is-in .stagger-item:nth-child(4) { transition-delay: 270ms; }
.js-motion .stagger.is-in .stagger-item:nth-child(5) { transition-delay: 360ms; }
.js-motion .stagger.is-in .stagger-item:nth-child(6) { transition-delay: 450ms; }
.js-motion .stagger.is-in .stagger-item:nth-child(7) { transition-delay: 540ms; }
.js-motion .stagger.is-in .stagger-item:nth-child(8) { transition-delay: 630ms; }

.js-motion .navbar {
    transform: translateY(-12px);
    opacity: 0;
    animation: fadeUp var(--motion-slow) var(--ease-emphasized) 40ms forwards;
}

@media (max-width: 767px) {
    .js-motion .reveal,
    .js-motion .stagger-item { transform: translateY(16px); }
}

@media (prefers-reduced-motion: reduce) {
    .js-motion .reveal,
    .js-motion .stagger-item,
    .js-motion .hero-enter,
    .js-motion .hero-title .mask-line > span,
    .js-motion .navbar {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}