/* ========================================================================= McMURRY & HUGHES — motion.css The advanced layer. Everything here is native browser technology doing work that used to need a library and a main-thread scroll listener: 1 CROSS-DOCUMENT VIEW TRANSITIONS — the site navigates like one application. The mark and the navigation hold their position while the page underneath them changes. The hero's drift lives with the window in components.css. What is deliberately NOT here any more (brand book part eight; production notes): the rail filling like a progress bar, photograph parallax, rules and step marks drawing themselves, the tally building square by square, a magnetic button, the line drawn to a hovered marker, and the idle sweep that crossed the map every twenty seconds. Nothing on this site loops. Every block is feature-detected. Where the browser does not support it, the JavaScript in motion.js does the same job, and where neither is available the page is simply static and completely usable. Nothing in this file runs under prefers-reduced-motion. ========================================================================= */ /* ── registered properties: the ones a timeline animates ───────────────── */ /* ══ 1 · VIEW TRANSITIONS ═══════════════════════════════════════════════ */ /* The whole site is one document as far as the reader is concerned: the mark and the navigation are continuous, and only the argument changes. */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto } ::view-transition-group(root) { animation-duration: .5s } ::view-transition-old(root) { animation: vt-out .32s cubic-bezier(.4,0,1,1) both; } ::view-transition-new(root) { animation: vt-in .52s cubic-bezier(.22,.61,.36,1) both; } @keyframes vt-out { to { opacity: 0; transform: translateY(-8px) } } @keyframes vt-in { from { opacity: 0; transform: translateY(16px) } } /* these do not cross-fade — they stay put and the page moves around them */ .nav { view-transition-name: mh-nav } .nav .mark{ view-transition-name: mh-mark } .rail { view-transition-name: mh-rail } .foot { view-transition-name: mh-foot } ::view-transition-group(mh-nav), ::view-transition-group(mh-mark), ::view-transition-group(mh-rail), ::view-transition-group(mh-foot) { animation-duration: .45s } ::view-transition-old(mh-nav), ::view-transition-new(mh-nav), ::view-transition-old(mh-mark), ::view-transition-new(mh-mark), ::view-transition-old(mh-rail), ::view-transition-new(mh-rail), ::view-transition-old(mh-foot), ::view-transition-new(mh-foot) { animation: none; mix-blend-mode: normal; } } /* ══ 2 · SCROLL-LINKED — FOCUS IN, FOCUS OUT ════════════════════════════ */ /* One behaviour, driven only by the reader's scroll: things come into focus as they arrive (opacity up, a light blur clearing, a short rise) and go out of focus as they leave the top — late and lightly, so nothing is ever blurry while it is still being read. Scroll back and it reverses. Groups (steps, documents, profiles, figures) cascade: each item's range starts a little later than the one before, so a row assembles left to right instead of arriving as a block. Nothing scales, nothing slides sideways, nothing moves on its own. Feature-detected; absent under reduced motion (the one-time reveals in main.css apply). */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* the timed reveal stands down: the scroll does this job now */ .js [data-reveal]:not(.shead){opacity:1;transform:none;transition:none; -webkit-mask-image:none;mask-image:none} @keyframes focus-in{ from{opacity:0;filter:blur(5px);transform:translateY(24px)} to {opacity:1;filter:blur(0);transform:none} } @keyframes focus-out{ from{opacity:1;filter:blur(0);transform:none} to {opacity:0;filter:blur(3px);transform:translateY(-12px)} } @keyframes fade-in {from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @keyframes fade-out{from{opacity:1}to{opacity:0}} /* TYPE, BLOCKS AND PHOTOGRAPHS */ .say:not(.hero__say), .js [data-reveal]:not(.shead):not(.map):not(.compare):not(.sheets):not(.steps), .steps > .step, .sheets > .sheet, .talent > .tcard, .figs > div{ animation:focus-in linear both, focus-out linear forwards; animation-timeline:view(), view(); animation-range:entry 0% entry 70%, exit 60% exit 100%; } /* THE CASCADE: the 2nd, 3rd and 4th item in a row start a beat later */ .steps > :nth-child(4n+2), .sheets > :nth-child(3n+2), .talent > :nth-child(3n+2), .figs > :nth-child(n+2){ animation-range:entry 8% entry 78%, exit 60% exit 100%; } .steps > :nth-child(4n+3), .sheets > :nth-child(3n+3), .talent > :nth-child(3n+3), .figs > :nth-child(n+3){ animation-range:entry 16% entry 86%, exit 60% exit 100%; } .steps > :nth-child(4n+4), .figs > :nth-child(n+4){ animation-range:entry 24% entry 94%, exit 60% exit 100%; } /* LARGE INTERACTIVE PIECES — the same rhythm, no blur (cost) */ .js .map[data-reveal],.js .compare[data-reveal]{ animation:fade-in linear both, fade-out linear forwards; animation-timeline:view(), view(); animation-range:entry 0% entry 55%, exit 65% exit 100%; } /* THE HERO lets go late and quietly: no blur, a short lift */ .hero > .wrap{ animation:hero-out linear forwards; animation-timeline:view(); animation-range:exit 45% exit 100%; } @keyframes hero-out{to{opacity:0;transform:translateY(-32px)}} } } /* ══ 3 · SECTION RULES ══════════════════════════════════════════════════ */ /* Every section rule draws in ink from the left, once, when its section head arrives — the same on every section however the reader got there (scrolling, a link, a jump). It used to be tied to the scroll position, so a section reached by a link was already drawn and looked different. */ @media (prefers-reduced-motion: no-preference) { .js .shead{border-bottom-color:var(--hair)} .js .shead::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:var(--ink);transform-origin:0 50%;transform:scaleX(0); transition:transform 1.1s cubic-bezier(.16,.84,.30,1) .15s; } .js .shead.is-in::after{transform:scaleX(1)} .section--ink .shead::after{background:var(--paper)} }