/* ============================================================
   Motion layer — slow, editorial, cinematic (a landmark-building
   portfolio, not a bouncy consumer brand). Scroll-reveal, counters,
   hover-lift, header shrink-on-scroll. GPU-friendly (transform/opacity
   only). Fully neutralised under prefers-reduced-motion and when the
   headless-screenshot flag `html.motion-off` is set (PP-WORKFLOW §9.63).
   ============================================================ */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: none; }

.reveal-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal-stagger.in-view > * { opacity: 1; transform: none; }
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: .05s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: .15s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: .25s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: .35s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: .45s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: .55s; }

.hover-lift { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; }
.hover-lift:hover { transform: translateY(-6px); }

.hover-zoom { overflow: hidden; }
.hover-zoom img { transition: transform 1.1s cubic-bezier(.16,1,.3,1); }
.hover-zoom:hover img { transform: scale(1.06); }

.ken-burns { overflow: hidden; }
.ken-burns img, .ken-burns .kb-bg {
    animation: kenburns 24s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes kenburns {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.12) translate(-1%, -1%); }
}

.site-header { transition: padding .35s ease, box-shadow .35s ease, background-color .35s ease; }
.site-header.scrolled { box-shadow: 0 8px 24px rgba(0,0,0,.08); }

.blueprint-divider {
    height: 2px;
    background: repeating-linear-gradient(90deg, currentColor 0 10px, transparent 10px 18px);
    opacity: .35;
    color: var(--brand-accent, #E8A33D);
}

@media (prefers-reduced-motion: reduce), (max-width: 0px) {
    .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
    .ken-burns img, .ken-burns .kb-bg { animation: none !important; }
    .hover-lift, .hover-zoom img { transition: none !important; }
    .hero-underline path { animation: none !important; stroke-dashoffset: 0 !important; }
    .hero-badge, .pulse-dot, .cu-item.is-latest .cu-dot { animation: none !important; }
}

/* Screenshot/QA escape hatch — add html.motion-off to force everything visible
   without waiting for scroll (PP-WORKFLOW §9.63). */
html.motion-off .reveal, html.motion-off .reveal-stagger > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
}
html.motion-off .ken-burns img, html.motion-off .ken-burns .kb-bg { animation: none !important; }
html.motion-off .hero-underline path { animation: none !important; stroke-dashoffset: 0 !important; }
html.motion-off .hero-badge, html.motion-off .pulse-dot { animation: none !important; }