/* ============================================================
   Industrial reveal motion layer (Manufacturing Factory PP).
   Progressive enhancement: motion.js adds `html.motion` ONLY when JS runs and
   the user hasn't asked for reduced motion. Every "hidden" start state is scoped
   under `.motion`, so without JS (or with prefers-reduced-motion) all content is
   fully visible — no stuck-invisible elements, SEO-safe. GPU-friendly
   (transform/opacity only). Easing is industrial: cubic-bezier(.2,.6,.2,1).
   ============================================================ */

/* ---- Scroll reveal ---- */
.motion .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s cubic-bezier(.2,.6,.2,1), transform .6s cubic-bezier(.2,.6,.2,1);
    will-change: opacity, transform;
}
.motion .reveal.in { opacity: 1; transform: none; }
.motion .reveal-left  { transform: translateX(-32px); }
.motion .reveal-right { transform: translateX(32px); }
.motion .reveal-left.in, .motion .reveal-right.in { transform: none; }

/* ---- Staggered children (grids, hero content) — stagger .07s ---- */
.motion .reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s cubic-bezier(.2,.6,.2,1), transform .6s cubic-bezier(.2,.6,.2,1);
    will-change: opacity, transform;
}
.motion .reveal-stagger.in > * { opacity: 1; transform: none; }
.motion .reveal-stagger.in > *:nth-child(1) { transition-delay: .00s; }
.motion .reveal-stagger.in > *:nth-child(2) { transition-delay: .07s; }
.motion .reveal-stagger.in > *:nth-child(3) { transition-delay: .14s; }
.motion .reveal-stagger.in > *:nth-child(4) { transition-delay: .21s; }
.motion .reveal-stagger.in > *:nth-child(5) { transition-delay: .28s; }
.motion .reveal-stagger.in > *:nth-child(6) { transition-delay: .35s; }
.motion .reveal-stagger.in > *:nth-child(7) { transition-delay: .42s; }
.motion .reveal-stagger.in > *:nth-child(8) { transition-delay: .49s; }

/* ---- Image clip-wipe reveal (blueprint slide) ---- */
.motion .reveal-img { clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(.76,0,.24,1); will-change: clip-path; }
.motion .reveal-img.in { clip-path: inset(0 0 0 0); }

/* ---- Amber/hazard rule draws in from the left ---- */
.motion .mfp-rule, .motion .draw-rule {
    transform: scaleX(0); transform-origin: left;
    transition: transform .7s cubic-bezier(.76,0,.24,1) .1s;
}
.motion .mfp-rule.in, .motion .draw-rule.in { transform: scaleX(1); }

/* ---- Hover lift / image zoom (applies regardless of JS) ---- */
.mfp-card, .product-card, .process-card, .cert-card, .facility-card, .case-card, .service-card, .team-card, .blog-card { transition: transform .4s cubic-bezier(.2,.6,.2,1), box-shadow .4s ease, border-color .4s ease; }
.mfp-card:hover, .product-card:hover, .process-card:hover, .case-card:hover, .service-card:hover, .blog-card:hover { transform: translateY(-5px); }
figure img, .product-card figure img, .gallery-item img, .case-card img { transition: transform 1s cubic-bezier(.2,.6,.2,1); }
.product-card:hover figure img, .case-card:hover img, .gallery-item:hover img, figure:hover > img { transform: scale(1.05); }

/* ---- Hero: slow Ken-Burns zoom on the active slide ---- */
.hero-slide.active { animation: mfp-kenburns 16s ease-out forwards; }
@keyframes mfp-kenburns { from { transform: scale(1.001); } to { transform: scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
    .hero-slide.active { animation: none; }
    .mfp-card, .product-card, figure img { transition: none; }
}