/* ============================================================
   Cinematic editorial motion layer (Architect Interior 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).
   ============================================================ */

/* ---- Scroll reveal ---- */
.motion .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s cubic-bezier(.22,.8,.3,1), transform 1s cubic-bezier(.22,.8,.3,1);
    will-change: opacity, transform;
}
.motion .reveal.in { opacity: 1; transform: none; }
.motion .reveal-left  { transform: translateX(-42px); }
.motion .reveal-right { transform: translateX(42px); }
.motion .reveal-left.in, .motion .reveal-right.in { transform: none; }

/* ---- Staggered children (grids, hero content) ---- */
.motion .reveal-stagger > * {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .85s cubic-bezier(.22,.8,.3,1), transform .85s cubic-bezier(.22,.8,.3,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: .09s; }
.motion .reveal-stagger.in > *:nth-child(3) { transition-delay: .18s; }
.motion .reveal-stagger.in > *:nth-child(4) { transition-delay: .27s; }
.motion .reveal-stagger.in > *:nth-child(5) { transition-delay: .36s; }
.motion .reveal-stagger.in > *:nth-child(6) { transition-delay: .45s; }
.motion .reveal-stagger.in > *:nth-child(7) { transition-delay: .54s; }
.motion .reveal-stagger.in > *:nth-child(8) { transition-delay: .63s; }

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

/* ---- Brass rule / divider draws in from the left ---- */
.motion .brass-rule, .motion .draw-rule {
    transform: scaleX(0); transform-origin: left;
    transition: transform .9s cubic-bezier(.76,0,.24,1) .15s;
}
.motion .brass-rule.in, .motion .draw-rule.in { transform: scaleX(1); }

/* ---- Hover lift / image zoom (cinematic, applies regardless of JS) ---- */
.project-card, .pc, .svc-card, .team-card, .blog-card, .material-card, .award-card { transition: transform .5s cubic-bezier(.22,.8,.3,1), box-shadow .5s ease; }
.project-card:hover, .pc:hover, .svc-card:hover, .team-card:hover, .blog-card:hover { transform: translateY(-6px); }
figure img, .pc figure img, .gallery-item img, .project-card img { transition: transform 1.1s cubic-bezier(.22,.8,.3,1); }
.pc:hover figure img, .project-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: aic-kenburns 16s ease-out forwards; }
@keyframes aic-kenburns { from { transform: scale(1.001); } to { transform: scale(1.09); } }

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