/* ============================================
   Marshal Shopfitters & Construction Ltd
   Animation Stylesheet - animation.css
   Loaded deferred (non-render-blocking).
   All entrance animations depend on JS adding
   the .visible class via IntersectionObserver.
   ============================================ */

/* --- Keyframes --- */
@keyframes kenBurns {
    from { transform: scale(1); }
    to   { transform: scale(1.06); }
}

@keyframes pulseOnce {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}

@keyframes scrollLine {
    0%   { transform: scaleY(0); transform-origin: top; }
    50%  { transform: scaleY(1); transform-origin: top; }
    51%  { transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --- Entrance animation base states --- */
.animate {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate.fade-up    { transform: translateY(30px); }
.animate.fade-left  { transform: translateX(-40px); }
.animate.fade-right { transform: translateX(40px); }
.animate.scale-in   { transform: scale(0.9); }

.animate.visible {
    opacity: 1;
    transform: none;
}

/* --- Hero entrance stagger (plays on load, not scroll) --- */
.hero .animate:nth-child(1) { transition-delay: 0.2s; }
.hero .animate:nth-child(2) { transition-delay: 0.4s; }
.hero .animate:nth-child(3) { transition-delay: 0.6s; }
.hero .animate:nth-child(4) { transition-delay: 0.8s; }

/* --- Hero background Ken Burns --- */
.hero__bg {
    animation: kenBurns 20s ease-out forwards;
}

/* --- Hero scroll indicator --- */
.hero__scroll-line {
    animation: scrollLine 2s ease-in-out infinite;
}

/* --- CTA banner button pulse (once) --- */
.cta-banner.animated .btn--primary {
    animation: pulseOnce 2s ease-in-out 0.5s 1;
}

/* --- Process connecting line draw --- */
@media (min-width: 992px) {
    .process__line {
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
    }
    .process__line.visible {
        transform: scaleX(1);
    }
}

/* --- Reduced motion: disable everything --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .animate {
        opacity: 1;
        transform: none;
    }
    .hero__bg { animation: none; }
}

/* --- No-JS fallback: if JS never runs, show everything --- */
@media (scripting: none) {
    .animate {
        opacity: 1;
        transform: none;
    }
}