/* ============================================================ SCROLL — spatial motion for Mawhēriki's Anatomy Sister of motion.css. Adds reveals, parallax, the yellow-band sweep, and the anatomy diagram assembly. Subtle & confident: nothing here should pull the eye off the paintings. The "before" states only apply when html.scroll-js is set (added by an inline script in ). If JS fails, content is fully visible — no missing-content footgun. All effects honour prefers-reduced-motion. ============================================================ */ /* ---------- fade-up ---------- */ html.scroll-js [data-scroll="fade-up"] { opacity: 0; transform: translateY(28px); transition: opacity 800ms cubic-bezier(0.2, 0, 0, 1), transform 800ms cubic-bezier(0.2, 0, 0, 1); will-change: opacity, transform; } html.scroll-js [data-scroll="fade-up"].is-in { opacity: 1; transform: translateY(0); } /* ---------- image-rise (painting cards) ---------- */ html.scroll-js [data-scroll="image-rise"] { opacity: 0; transform: translateY(40px) scale(0.96); transition: opacity 900ms cubic-bezier(0.2, 0, 0, 1), transform 900ms cubic-bezier(0.2, 0, 0, 1); will-change: opacity, transform; } html.scroll-js [data-scroll="image-rise"].is-in { opacity: 1; transform: translateY(0) scale(1); } /* ---------- yellow-band sweep (signature gesture) ---------- */ html.scroll-js [data-scroll="band-sweep"] { transform: scaleX(0); transform-origin: left center; transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1); will-change: transform; } html.scroll-js [data-scroll="band-sweep"].is-in { transform: scaleX(1); } /* ---------- parallax background drift ---------- Bg div overshoots its container on top so the downward drift never reveals an empty strip above it. */ html.scroll-js [data-scroll="drift-bg"] { will-change: transform; } html.scroll-js .hero__bg[data-scroll="drift-bg"] { top: -120px; } /* ---------- per-element stagger ---------- */ html.scroll-js [data-scroll-delay] { transition-delay: var(--scroll-delay, 0ms); } /* ============================================================ ANATOMY DIAGRAM — staged assembly Stage 1: figure outlines + internal marks + mouth Stage 2: eyes pulse in + heart appears Stage 3: leader lines + anchors + labels fade in Stage 4: aura fades in (the outer "becoming" frame) ============================================================ */ html.scroll-js [data-scroll="anatomy"] .figure-fill, html.scroll-js [data-scroll="anatomy"] .figure-stroke, html.scroll-js [data-scroll="anatomy"] .internal, html.scroll-js [data-scroll="anatomy"] .mouth { opacity: 0; transition: opacity 700ms ease-out; } html.scroll-js [data-scroll="anatomy"] .leader, html.scroll-js [data-scroll="anatomy"] .anchor-dot, html.scroll-js [data-scroll="anatomy"] .dlabel text { opacity: 0; transition: opacity 500ms ease-out; } html.scroll-js [data-scroll="anatomy"] .eye { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 400ms ease-out; } html.scroll-js [data-scroll="anatomy"] .heart-ring, html.scroll-js [data-scroll="anatomy"] .heart-dot { opacity: 0; transition: opacity 600ms ease-out; } html.scroll-js [data-scroll="anatomy"] .aura { opacity: 0; transition: opacity 900ms ease-out; } html.scroll-js [data-scroll="anatomy"].is-stage-1 .figure-fill, html.scroll-js [data-scroll="anatomy"].is-stage-1 .figure-stroke, html.scroll-js [data-scroll="anatomy"].is-stage-1 .internal, html.scroll-js [data-scroll="anatomy"].is-stage-1 .mouth { opacity: 1; } html.scroll-js [data-scroll="anatomy"].is-stage-2 .eye { opacity: 1; animation: ms-eye-pulse 900ms ease-out 1; } html.scroll-js [data-scroll="anatomy"].is-stage-2 .heart-ring, html.scroll-js [data-scroll="anatomy"].is-stage-2 .heart-dot { opacity: 1; } html.scroll-js [data-scroll="anatomy"].is-stage-3 .leader, html.scroll-js [data-scroll="anatomy"].is-stage-3 .anchor-dot, html.scroll-js [data-scroll="anatomy"].is-stage-3 .dlabel text { opacity: 1; } html.scroll-js [data-scroll="anatomy"].is-stage-4 .aura { opacity: 0.45; } @keyframes ms-eye-pulse { 0% { transform: scale(0.6); } 45% { transform: scale(1.4); } 100% { transform: scale(1.0); } } /* ============================================================ REDUCED MOTION — everything snaps to its end state ============================================================ */ @media (prefers-reduced-motion: reduce) { html.scroll-js [data-scroll="fade-up"], html.scroll-js [data-scroll="image-rise"] { opacity: 1; transform: none; transition: none; } html.scroll-js [data-scroll="band-sweep"] { transform: scaleX(1); transition: none; } html.scroll-js [data-scroll="drift-bg"] { transform: none !important; } html.scroll-js [data-scroll="anatomy"] .figure-fill, html.scroll-js [data-scroll="anatomy"] .figure-stroke, html.scroll-js [data-scroll="anatomy"] .internal, html.scroll-js [data-scroll="anatomy"] .leader, html.scroll-js [data-scroll="anatomy"] .anchor-dot, html.scroll-js [data-scroll="anatomy"] .dlabel text, html.scroll-js [data-scroll="anatomy"] .eye, html.scroll-js [data-scroll="anatomy"] .heart-ring, html.scroll-js [data-scroll="anatomy"] .heart-dot, html.scroll-js [data-scroll="anatomy"] .mouth { opacity: 1; transition: none; animation: none; transform: none; } html.scroll-js [data-scroll="anatomy"] .aura { opacity: 0.45; } }