/* MAGMA — motion layer. The sketch specifies no animation, so this defines one: a single cinematic language shared by every surface. Two ideas only — 1. ENTRANCE. Above the fold the composition assembles itself once, on load: the display lines rise line by line, the loose prints drift onto the wall, the photo band opens from its own horizon. Nothing loops, nothing bounces. 2. ARRIVAL. Below the fold each section's parts rise 26px and fade in as the section enters the viewport, staggered left-to-right in reading order. Everything is scoped to prefers-reduced-motion: no-preference and armed by `.mg-ready`, which tokens/motion.js puts on . That gate matters: if the runtime never loads, nothing is hidden and the page renders statically. The runtime also adds `.mg-in` per section and writes `--mg-p`, a rAF-throttled scroll offset used only by inner photo layers with no transform of their own. */ :root{ /* long decelerate — the house ease */ --ease-cine:cubic-bezier(0.16,1,0.3,1); /* @kind other */ --dur-rise:900ms; /* @kind other */ --dur-drift:1400ms; /* @kind other */ /* scroll offset written by motion.js */ --mg-p:0px; /* @kind spacing */ } @media (prefers-reduced-motion:no-preference){ /* ── arrival ─────────────────────────────────────────────────────── */ .mg-ready section h2, .mg-ready section [data-r="split"] > *, .mg-ready section [data-r="cards"] > *, .mg-ready section [data-r="feed"] > *, .mg-ready section [data-r="rows"] > *, .mg-ready section [data-r="faq"] > *, .mg-ready section [data-r~="umbrella"], .mg-ready section [data-r="slider"], .mg-ready section [data-r~="strip"], .mg-ready section [data-r~="rise"]{ opacity:0;transform:translate3d(0,26px,0); transition:opacity var(--dur-rise) var(--ease-cine),transform var(--dur-drift) var(--ease-cine); will-change:opacity,transform; } section.mg-in h2, section.mg-in [data-r="split"] > *, section.mg-in [data-r="cards"] > *, section.mg-in [data-r="feed"] > *, section.mg-in [data-r="rows"] > *, section.mg-in [data-r="faq"] > *, section.mg-in [data-r~="umbrella"], section.mg-in [data-r="slider"], section.mg-in [data-r~="strip"], section.mg-in [data-r~="rise"]{opacity:1;transform:none} /* reading-order stagger — no per-element markup needed */ [data-r="split"] > *:nth-child(2), [data-r="faq"] > *:nth-child(2){transition-delay:110ms} [data-r="cards"] > *:nth-child(2),[data-r="feed"] > *:nth-child(2),[data-r="rows"] > *:nth-child(2){transition-delay:90ms} [data-r="cards"] > *:nth-child(3),[data-r="feed"] > *:nth-child(3),[data-r="rows"] > *:nth-child(3){transition-delay:180ms} [data-r="cards"] > *:nth-child(4),[data-r="feed"] > *:nth-child(4){transition-delay:270ms} /* the solution rows arrive as a deck being squared up */ .mg-ready section [data-r="rows"] > *{transform:translate3d(0,26px,0) scale(0.994)} section.mg-in [data-r="rows"] > *{transform:none} /* ── entrance ────────────────────────────────────────────────────── */ /* Display lines rise line by line, in reading order. */ [data-r="headline"] > span:not([data-r="hero-art"]),[data-r="hero-script"]{ display:block;animation:mg-rise 1150ms var(--ease-cine) both; } /* The print keeps its own angle: mg-rise ends on transform:none, and an animation always beats the inline transform. */ [data-r="hero-art"]{animation:mg-fade 1150ms var(--ease-cine) both;animation-delay:240ms} [data-r="headline"] > span:nth-child(1){animation-delay:80ms} [data-r="headline"] > span:nth-child(2){animation-delay:180ms} [data-r="headline"] > span:nth-child(3){animation-delay:240ms} [data-r="hero-script"]{animation-delay:320ms} [data-r="hero-facts"] > *{animation:mg-lift 900ms var(--ease-cine) both} [data-r="hero-facts"] > *:nth-child(1){animation-delay:520ms} [data-r="hero-facts"] > *:nth-child(2){animation-delay:600ms} [data-r="hero-facts"] > *:nth-child(3){animation-delay:680ms} [data-r="hero-cta"]{animation:mg-lift 900ms var(--ease-cine) both;animation-delay:780ms} /* A page whose first screen is a photo lead gets the same entrance: the title lines rise line by line, the meta row follows, and the photograph itself opens from its own horizon under them. */ [data-r~="lead-line"]{display:block;animation:mg-rise 1150ms var(--ease-cine) both} [data-r~="lead-line"]:nth-of-type(1){animation-delay:120ms} [data-r~="lead-line"]:nth-of-type(2){animation-delay:220ms} [data-r~="lead-eyebrow"]{animation:mg-lift 900ms var(--ease-cine) both;animation-delay:60ms} [data-r~="lead-meta"]{animation:mg-lift 900ms var(--ease-cine) both;animation-delay:420ms} [data-r~="lead-photo"]{animation:mg-open 1800ms var(--ease-cine) both} /* Hairlines draw themselves rather than appearing. */ [data-r~="rule"]{transform-origin:0 50%;animation:mg-draw 1100ms var(--ease-cine) both;animation-delay:300ms} /* The prints are pinned at an angle, so they drift in on their own axis. */ [data-r="decor"]{animation:mg-pin 1600ms var(--ease-cine) both;animation-delay:420ms} [data-r="hero-map"]{animation:mg-open 1800ms var(--ease-cine) both;animation-delay:560ms} /* ── parallax (inner photo layers only — they carry no transform) ── */ [data-r="hero-map"] > div:first-child, [data-r~="umbrella"] > div:first-child{ transform:translate3d(0,var(--mg-p),0) scale(1.06); will-change:transform; } /* ── the Umbrella panel breathes, very slowly ────────────────────── */ [data-r~="umbrella"] > div:first-child{animation:mg-breathe 28s ease-in-out infinite alternate} } @keyframes mg-rise{from{opacity:0;transform:translate3d(0,34px,0)}to{opacity:1;transform:none}} @keyframes mg-fade{from{opacity:0}to{opacity:1}} @keyframes mg-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes mg-lift{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:none}} @keyframes mg-pin{from{opacity:0;transform:translate3d(0,-28px,0) rotate(0deg) scale(0.9)}} @keyframes mg-open{from{opacity:0;clip-path:inset(46% 0 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}} @keyframes mg-breathe{from{scale:1}to{scale:1.05}}