[{"data":1,"prerenderedAt":82},["ShallowReactive",2],{"room:13-parallax":3},{"path":4,"meta":5,"html":71,"css":72,"snippets":73},"13-parallax",{"id":6,"slug":4,"title":7,"years":8,"summary":9,"context":10,"traits":14,"tech":30,"thenVsNow":35,"snippets":36,"sources":52,"cta":65,"recreated":68},"13","Parallax & one-page storytelling","2012–2017","Long single pages told a story as you scrolled: layered scenes moving at different speeds, full-screen heroes, giant type and a sticky nav that tracked your chapter.",{"screens":11,"connection":12,"browsers":13},"Wide laptop and desktop screens plus touch phones, where scroll effects were often switched off","Fast broadband; hero background videos and multi-megabyte pages became normal","Chrome, Safari, Firefox and IE10+; scroll-jacking libraries and jQuery plugins drove the effects",[15,18,21,24,27],{"id":16,"label":17},"parallax","Layered scenes scrolling at different speeds",{"id":19,"label":20},"hero","Full-bleed animated hero",{"id":22,"label":23},"sticky-nav","Sticky nav that highlights the current section",{"id":25,"label":26},"reveal","Content that fades in as you scroll",{"id":28,"label":29},"chapters","Chapter numbers and giant headline type",[31,32,33,34],"Scroll event handlers throttled with requestAnimationFrame (2011+)","translate3d() to push layers onto the GPU","position: sticky, and before it, JavaScript that toggled position: fixed","IntersectionObserver (2016+) for scroll spies and reveal-on-scroll","Heavy scroll-jacking fell out of favour for performance and motion-sickness reasons; CSS scroll-driven animations now do the same job without JavaScript, and must respect prefers-reduced-motion.",[37,41,46,49],{"file":38,"lang":39,"caption":40,"region":16},"era.client.ts","typescript","Parallax: shift each layer by scroll × depth",{"file":42,"lang":43,"caption":44,"region":45},"era.css","css","Scenes are stacks of absolutely positioned SVG layers","scene",{"file":38,"lang":39,"caption":47,"region":48},"A scroll spy with IntersectionObserver","spy",{"file":42,"lang":43,"caption":50,"region":51},"Today’s way: a scroll-driven progress bar in pure CSS","progress",[53,56,59,62],{"label":54,"url":55},"Parallax scrolling (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FParallax_scrolling",{"label":57,"url":58},"Intersection Observer API (MDN)","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FIntersection_Observer_API",{"label":60,"url":61},"prefers-reduced-motion (MDN)","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002F@media\u002Fprefers-reduced-motion",{"label":63,"url":64},"Scroll-driven animations (MDN)","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_scroll-driven_animations",{"next":66,"prev":67},"Continue the story","Previous chapter",[69,70],"Period sites often used a looping background video in the hero; here an animated dawn gradient and SVG mountains stand in for it.","Parallax and reveal effects are switched off for visitors who prefer reduced motion.","\u003Cdiv class=\"px\" id=\"px-top\">\n  \u003Cheader class=\"px-scene px-hero\" data-trait=\"hero parallax\" aria-labelledby=\"px-h\">\n    \u003Cp class=\"era-stamp\">\u003Cspan class=\"era-stamp__no\">Era 13\u002F17\u003C\u002Fspan> \u003Cspan class=\"era-stamp__years\">2012–2017\u003C\u002Fspan> \u003Cspan class=\"era-stamp__title\">Parallax & one-page storytelling\u003C\u002Fspan>\u003C\u002Fp>\n    \u003Csvg class=\"px-layer\" data-depth=\"0.15\" viewBox=\"0 0 1600 900\" preserveAspectRatio=\"xMidYMax slice\" aria-hidden=\"true\">\n      \u003Ccircle cx=\"1120\" cy=\"300\" r=\"70\" fill=\"#ffe6a8\" opacity=\".9\"\u002F>\n      \u003Cpath d=\"M0 620 L260 380 L420 500 L640 250 L820 430 L1000 300 L1240 520 L1420 360 L1600 470 V900 H0z\" fill=\"#a9b7d9\"\u002F>\n    \u003C\u002Fsvg>\n    \u003Csvg class=\"px-layer\" data-depth=\"0.35\" viewBox=\"0 0 1600 900\" preserveAspectRatio=\"xMidYMax slice\" aria-hidden=\"true\">\n      \u003Cpath d=\"M0 700 L180 560 L380 650 L700 330 L860 470 L980 400 L1300 640 L1600 540 V900 H0z\" fill=\"#6c7fae\"\u002F>\n      \u003Cpath d=\"M700 330 L760 390 L735 395 L790 450 L700 400 L640 410z\" fill=\"#eef2fb\"\u002F>\n    \u003C\u002Fsvg>\n    \u003Csvg class=\"px-layer\" data-depth=\"0.6\" viewBox=\"0 0 1600 900\" preserveAspectRatio=\"xMidYMax slice\" aria-hidden=\"true\">\n      \u003Cpath d=\"M0 800 L300 640 L520 760 L760 620 L1000 760 L1280 650 L1600 780 V900 H0z\" fill=\"#3c4a72\"\u002F>\n    \u003C\u002Fsvg>\n    \u003Cdiv class=\"px-hero__copy\">\n      \u003Cp class=\"px-kicker\">An expedition in five chapters\u003C\u002Fp>\n      \u003Ch1 id=\"px-h\" class=\"px-hero__title\">The Ascent\u003C\u002Fh1>\n      \u003Cp class=\"px-hero__sub\">Four climbers. Kestrel Peak, 6,812 metres. Thirty-one days.\u003C\u002Fp>\n      \u003Cnav class=\"era-cta\" aria-label=\"Travel through time\">\u003Ca class=\"era-cta__next\" rel=\"next\" href=\"\u002Feras\u002F14-material\u002F\">\u003Cspan class=\"era-cta__label\">Continue the story\u003C\u002Fspan> \u003Cspan class=\"era-cta__to\">2014–2019 · Material Design\u003C\u002Fspan>\u003C\u002Fa> \u003Ca class=\"era-cta__prev\" rel=\"prev\" href=\"\u002Feras\u002F12-flat-metro\u002F\">\u003Cspan class=\"era-cta__label\">Previous chapter\u003C\u002Fspan> \u003Cspan class=\"era-cta__to\">2012–2016 · Flat & Metro\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fnav>\n      \u003Ca class=\"px-scroll\" href=\"#px-ch1\">\u003Cspan>Scroll to begin\u003C\u002Fspan>\u003Cspan class=\"px-scroll__arrow\" aria-hidden=\"true\">↓\u003C\u002Fspan>\u003C\u002Fa>\n    \u003C\u002Fdiv>\n  \u003C\u002Fheader>\n\n  \u003Cnav class=\"px-nav\" data-trait=\"sticky-nav\" aria-label=\"Chapters\">\n    \u003Ca class=\"px-nav__brand\" href=\"#px-top\">The Ascent\u003C\u002Fa>\n    \u003Col>\n      \u003Cli>\u003Ca href=\"#px-ch1\">\u003Cb>01\u003C\u002Fb> Approach\u003C\u002Fa>\u003C\u002Fli>\n      \u003Cli>\u003Ca href=\"#px-ch2\">\u003Cb>02\u003C\u002Fb> Base camp\u003C\u002Fa>\u003C\u002Fli>\n      \u003Cli>\u003Ca href=\"#px-ch3\">\u003Cb>03\u003C\u002Fb> The ridge\u003C\u002Fa>\u003C\u002Fli>\n      \u003Cli>\u003Ca href=\"#px-ch4\">\u003Cb>04\u003C\u002Fb> Summit\u003C\u002Fa>\u003C\u002Fli>\n      \u003Cli>\u003Ca href=\"#px-ch5\">\u003Cb>05\u003C\u002Fb> Gear\u003C\u002Fa>\u003C\u002Fli>\n    \u003C\u002Fol>\n  \u003C\u002Fnav>\n\n  \u003Csection class=\"px-chapter\" id=\"px-ch1\" aria-labelledby=\"px-ch1-h\">\n    \u003Cdiv class=\"px-text\" data-trait=\"reveal\">\n      \u003Cp class=\"px-num\" data-trait=\"chapters\">01\u003C\u002Fp>\n      \u003Ch2 id=\"px-ch1-h\">The approach\u003C\u002Fh2>\n      \u003Cp class=\"px-big\">Nine days on foot through pine and rhododendron, the peak hiding behind cloud every afternoon.\u003C\u002Fp>\n      \u003Cp>We carried what we could and hired the rest to a string of patient yaks. Each morning the trail climbed another four hundred metres; each evening the air got thinner and the tea got weaker.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\n  \u003Cdiv class=\"px-scene px-forest\" data-trait=\"parallax\" role=\"img\" aria-label=\"Layered pine forest in morning mist\">\n    \u003Csvg class=\"px-layer\" data-depth=\"0.1\" viewBox=\"0 0 1600 700\" preserveAspectRatio=\"xMidYMax slice\" aria-hidden=\"true\">\n      \u003Cpath d=\"M0 420 Q400 300 800 400 T1600 360 V700 H0z\" fill=\"#9fc3b4\"\u002F>\n    \u003C\u002Fsvg>\n    \u003Csvg class=\"px-layer\" data-depth=\"0.3\" viewBox=\"0 0 1600 700\" preserveAspectRatio=\"xMidYMax slice\" aria-hidden=\"true\">\n      \u003Cg fill=\"#5e8f7c\">\u003Cpath id=\"px-pine\" d=\"M60 520 L100 380 L140 520z\"\u002F>\u003Cuse href=\"#px-pine\" x=\"160\"\u002F>\u003Cuse href=\"#px-pine\" x=\"330\" y=\"-30\"\u002F>\u003Cuse href=\"#px-pine\" x=\"520\"\u002F>\u003Cuse href=\"#px-pine\" x=\"700\" y=\"-20\"\u002F>\u003Cuse href=\"#px-pine\" x=\"880\"\u002F>\u003Cuse href=\"#px-pine\" x=\"1050\" y=\"-40\"\u002F>\u003Cuse href=\"#px-pine\" x=\"1230\"\u002F>\u003Cuse href=\"#px-pine\" x=\"1400\" y=\"-10\"\u002F>\u003C\u002Fg>\n      \u003Crect y=\"515\" width=\"1600\" height=\"200\" fill=\"#5e8f7c\"\u002F>\n    \u003C\u002Fsvg>\n    \u003Csvg class=\"px-layer\" data-depth=\"0.55\" viewBox=\"0 0 1600 700\" preserveAspectRatio=\"xMidYMax slice\" aria-hidden=\"true\">\n      \u003Crect y=\"560\" width=\"1600\" height=\"160\" fill=\"#c9ddd4\" opacity=\".55\"\u002F>\n    \u003C\u002Fsvg>\n    \u003Csvg class=\"px-layer\" data-depth=\"0.8\" viewBox=\"0 0 1600 700\" preserveAspectRatio=\"xMidYMax slice\" aria-hidden=\"true\">\n      \u003Cg fill=\"#24463b\">\u003Cpath d=\"M-20 700 L60 420 L140 700z\"\u002F>\u003Cpath d=\"M180 700 L280 360 L380 700z\"\u002F>\u003Cpath d=\"M1180 700 L1290 380 L1400 700z\"\u002F>\u003Cpath d=\"M1400 700 L1500 340 L1620 700z\"\u002F>\u003Cpath d=\"M820 700 L880 520 L940 700z\"\u002F>\u003C\u002Fg>\n    \u003C\u002Fsvg>\n  \u003C\u002Fdiv>\n\n  \u003Csection class=\"px-chapter px-chapter--alt\" id=\"px-ch2\" aria-labelledby=\"px-ch2-h\">\n    \u003Cdiv class=\"px-text\" data-trait=\"reveal\">\n      \u003Cp class=\"px-num\">02\u003C\u002Fp>\n      \u003Ch2 id=\"px-ch2-h\">Base camp, 4,950 m\u003C\u002Fh2>\n      \u003Cp class=\"px-big\">A town of yellow tents on a glacier moraine. We waited eleven days for the wind to drop.\u003C\u002Fp>\n      \u003Cul class=\"px-stats\">\n        \u003Cli>\u003Cspan class=\"px-stats__n\">11\u003C\u002Fspan> days waiting\u003C\u002Fli>\n        \u003Cli>\u003Cspan class=\"px-stats__n\">−24°\u003C\u002Fspan> coldest night\u003C\u002Fli>\n        \u003Cli>\u003Cspan class=\"px-stats__n\">3\u003C\u002Fspan> decks of cards, worn out\u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\n  \u003Cdiv class=\"px-scene px-clouds\" data-trait=\"parallax\" role=\"img\" aria-label=\"A summit ridge rising above a sea of clouds\">\n    \u003Csvg class=\"px-layer\" data-depth=\"0.12\" viewBox=\"0 0 1600 700\" preserveAspectRatio=\"xMidYMid slice\" aria-hidden=\"true\">\n      \u003Cpath d=\"M300 700 L760 170 L900 300 L1000 240 L1400 700z\" fill=\"#f4f1ff\"\u002F>\n      \u003Cpath d=\"M760 170 L900 300 L1000 240 L1400 700 H1080 L900 380z\" fill=\"#c7c3e6\"\u002F>\n    \u003C\u002Fsvg>\n    \u003Csvg class=\"px-layer\" data-depth=\"0.4\" viewBox=\"0 0 1600 700\" preserveAspectRatio=\"xMidYMid slice\" aria-hidden=\"true\">\n      \u003Cg fill=\"#fff\" opacity=\".85\">\u003Cellipse cx=\"200\" cy=\"520\" rx=\"320\" ry=\"60\"\u002F>\u003Cellipse cx=\"900\" cy=\"560\" rx=\"420\" ry=\"70\"\u002F>\u003Cellipse cx=\"1500\" cy=\"500\" rx=\"300\" ry=\"55\"\u002F>\u003C\u002Fg>\n    \u003C\u002Fsvg>\n    \u003Csvg class=\"px-layer\" data-depth=\"0.75\" viewBox=\"0 0 1600 700\" preserveAspectRatio=\"xMidYMid slice\" aria-hidden=\"true\">\n      \u003Cg fill=\"#fff\">\u003Cellipse cx=\"400\" cy=\"640\" rx=\"520\" ry=\"90\"\u002F>\u003Cellipse cx=\"1200\" cy=\"660\" rx=\"560\" ry=\"100\"\u002F>\u003C\u002Fg>\n    \u003C\u002Fsvg>\n  \u003C\u002Fdiv>\n\n  \u003Csection class=\"px-chapter\" id=\"px-ch3\" aria-labelledby=\"px-ch3-h\">\n    \u003Cdiv class=\"px-text\" data-trait=\"reveal\">\n      \u003Cp class=\"px-num\">03\u003C\u002Fp>\n      \u003Ch2 id=\"px-ch3-h\">The ridge\u003C\u002Fh2>\n      \u003Cp class=\"px-big\">Above the clouds, the world went quiet. One step, four breaths. One step, four breaths.\u003C\u002Fp>\n      \u003Cblockquote class=\"px-quote\">\u003Cp>“You stop thinking about the top. You think about the next fixed rope, and then the one after that.”\u003C\u002Fp>\u003Cfooter>Mara Lindqvist, expedition lead\u003C\u002Ffooter>\u003C\u002Fblockquote>\n    \u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\n  \u003Cdiv class=\"px-scene px-summit\" data-trait=\"parallax\" role=\"img\" aria-label=\"A flag on the summit at sunrise\">\n    \u003Csvg class=\"px-layer\" data-depth=\"0.1\" viewBox=\"0 0 1600 700\" preserveAspectRatio=\"xMidYMax slice\" aria-hidden=\"true\">\n      \u003Ccircle cx=\"800\" cy=\"520\" r=\"160\" fill=\"#ffcf73\"\u002F>\n    \u003C\u002Fsvg>\n    \u003Csvg class=\"px-layer\" data-depth=\"0.35\" viewBox=\"0 0 1600 700\" preserveAspectRatio=\"xMidYMax slice\" aria-hidden=\"true\">\n      \u003Cpath d=\"M0 640 L400 560 L800 600 L1200 540 L1600 620 V700 H0z\" fill=\"#b8577a\"\u002F>\n    \u003C\u002Fsvg>\n    \u003Csvg class=\"px-layer\" data-depth=\"0.65\" viewBox=\"0 0 1600 700\" preserveAspectRatio=\"xMidYMax slice\" aria-hidden=\"true\">\n      \u003Cpath d=\"M520 700 L800 470 L1080 700z\" fill=\"#3b1f3f\"\u002F>\n      \u003Cpath d=\"M800 470 V380\" stroke=\"#3b1f3f\" stroke-width=\"5\"\u002F>\n      \u003Cpath d=\"M802 382 h70 l-14 18 l14 18 h-70z\" fill=\"#ff6b4a\"\u002F>\n    \u003C\u002Fsvg>\n  \u003C\u002Fdiv>\n\n  \u003Csection class=\"px-chapter px-chapter--alt\" id=\"px-ch4\" aria-labelledby=\"px-ch4-h\">\n    \u003Cdiv class=\"px-text\" data-trait=\"reveal\">\n      \u003Cp class=\"px-num\">04\u003C\u002Fp>\n      \u003Ch2 id=\"px-ch4-h\">Summit, 6:42 am\u003C\u002Fh2>\n      \u003Cp class=\"px-big\">Twelve minutes on top. Enough for one photo, one flag and one very bad sandwich.\u003C\u002Fp>\n      \u003Cp>Then the long way down, which, every climber will tell you, is where the real work begins.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\n  \u003Csection class=\"px-chapter px-gear\" id=\"px-ch5\" aria-labelledby=\"px-ch5-h\">\n    \u003Cdiv class=\"px-text\" data-trait=\"reveal\">\n      \u003Cp class=\"px-num\">05\u003C\u002Fp>\n      \u003Ch2 id=\"px-ch5-h\">Made for the climb\u003C\u002Fh2>\n      \u003Cp class=\"px-big\">Every jacket on this expedition was a Northwall Ridgeline shell. Now it’s yours.\u003C\u002Fp>\n      \u003Cdiv class=\"px-cta\">\n        \u003Ca class=\"px-btn\" href=\"#px-ch5\">Shop the Ridgeline — $349\u003C\u002Fa>\n        \u003Ca class=\"px-btn px-btn--line\" href=\"#px-top\">Back to the top ↑\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\n  \u003Cfooter class=\"px-foot\">\n    \u003Cp>© 2015 Northwall Outfitters · The Ascent is a fictional expedition · Best viewed in Chrome with your speakers on (just kidding, there’s no sound)\u003C\u002Fp>\n  \u003C\u002Ffooter>\n\u003C\u002Fdiv>\n","@layer era, shell;\n@layer era {\n\u002F* Era 13: parallax storytelling. One long page, layered scenes, big type, a sticky chapter nav. *\u002F\n[data-era=\"13\"] {\n  --ink: #1d2233;\n  --paper: #f7f4ee;\n  --night: #141a2e;\n  --accent: #ff6b4a;\n  background: var(--paper);\n  color: var(--ink);\n  font-family: 'Helvetica Neue', 'Avenir Next', Avenir, 'Segoe UI', system-ui, sans-serif;\n  overflow-x: clip;\n\n  :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }\n\n  .px-scene {\n    position: relative;\n    overflow: hidden;\n    height: 70cqh;\n    min-height: 360px;\n  }\n  .px-layer {\n    position: absolute;\n    left: 0;\n    width: 100%;\n    top: -25%;\n    height: 150%;\n    will-change: transform;\n    \u002F* era.client.ts sets --shift per layer: (scroll offset) × data-depth *\u002F\n    transform: translate3d(0, var(--shift, 0px), 0);\n  }\n\n  .px-hero {\n    height: auto;\n    min-height: max(560px, 100cqh);\n    max-height: 1100px;\n    background: linear-gradient(180deg, #2b2f5c, #6a5b9a 40%, #f2a07b 75%, #ffd3a1);\n    background-size: 100% 300%;\n    animation: e13-dawn 18s ease-in-out infinite alternate;\n    color: #fff;\n  }\n  .px-hero__copy {\n    position: relative;\n    z-index: 2;\n    display: grid;\n    justify-items: center;\n    align-content: center;\n    min-height: inherit;\n    padding: 96px 16px 10cqh;\n    box-sizing: border-box;\n    text-align: center;\n    text-shadow: 0 2px 20px rgb(20 26 46 \u002F 0.6);\n  }\n  .px-kicker {\n    margin: 0;\n    font-size: 14px;\n    text-transform: uppercase;\n    letter-spacing: 0.3em;\n  }\n  .px-hero__title {\n    margin: 8px 0 12px;\n    font-size: clamp(64px, 15cqw, 190px);\n    font-weight: 800;\n    line-height: 0.9;\n    letter-spacing: -0.04em;\n    text-transform: uppercase;\n  }\n  .px-hero__sub {\n    margin: 0 0 40px;\n    font-size: clamp(18px, 2.4cqw, 26px);\n    font-weight: 300;\n  }\n  .px-scroll {\n    display: grid;\n    justify-items: center;\n    gap: 6px;\n    color: #fff;\n    text-decoration: none;\n    font-size: 13px;\n    text-transform: uppercase;\n    letter-spacing: 0.2em;\n  }\n  .px-scroll__arrow {\n    display: grid;\n    place-items: center;\n    width: 44px;\n    height: 44px;\n    border: 2px solid #fff;\n    border-radius: 50%;\n    font-size: 20px;\n    animation: e13-bob 2s ease-in-out infinite;\n  }\n\n  \u002F* Era stamp: a transparent header floating over the hero, as these sites had *\u002F\n  .era-stamp {\n    position: absolute;\n    z-index: 3;\n    inset: 0 0 auto;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 6px 14px;\n    margin: 0;\n    padding: 22px clamp(16px, 4cqw, 48px);\n    font-size: 13px;\n    text-transform: uppercase;\n    letter-spacing: 0.18em;\n    color: #fff;\n    text-shadow: 0 1px 8px rgb(20 26 46 \u002F 0.6);\n  }\n  .era-stamp__no {\n    padding: 5px 10px;\n    font-weight: 800;\n    border: 2px solid #fff;\n  }\n  .era-stamp__title { font-weight: 300; }\n  .era-stamp__title::before { content: '\u002F '; }\n\n  \u002F* Travel CTA: ghost buttons over the full-bleed hero *\u002F\n  .era-cta {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: 14px;\n    margin: 0 0 36px;\n  }\n  .era-cta__next,\n  .era-cta__prev {\n    display: grid;\n    gap: 4px;\n    padding: 14px 26px 13px;\n    text-decoration: none;\n    text-shadow: none;\n    transition: background-color 200ms, color 200ms;\n  }\n  .era-cta__label {\n    font-size: 14px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.12em;\n  }\n  .era-cta__to { font-size: 13px; }\n  .era-cta__next {\n    background: var(--accent);\n    color: #1d1010;\n  }\n  .era-cta__next .era-cta__label::after { content: ' \\2192'; }\n  .era-cta__next:hover { background: #fff; }\n  .era-cta__prev {\n    color: #fff;\n    background: rgb(20 26 46 \u002F 0.35);\n    box-shadow: inset 0 0 0 2px #fff;\n  }\n  .era-cta__prev .era-cta__label::before { content: '\\2190  '; }\n  .era-cta__prev:hover { background: #fff; color: var(--ink); }\n  .era-cta a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }\n\n  .px-nav {\n    position: sticky;\n    top: 0;\n    z-index: 20;\n    display: flex;\n    align-items: center;\n    gap: 8px 24px;\n    padding: 0 clamp(16px, 4cqw, 48px);\n    background: rgb(20 26 46 \u002F 0.92);\n    backdrop-filter: blur(6px);\n    color: #fff;\n  }\n  @supports (animation-timeline: scroll()) {\n    .px-nav::after {\n      content: '';\n      position: absolute;\n      inset: auto 0 0 0;\n      height: 3px;\n      background: var(--accent);\n      transform-origin: 0 50%;\n      animation: e13-progress linear both;\n      animation-timeline: scroll(nearest);\n    }\n  }\n  .px-nav__brand {\n    flex: none;\n    color: #fff;\n    text-decoration: none;\n    font-weight: 800;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n  }\n  .px-nav ol {\n    display: flex;\n    margin: 0 0 0 auto;\n    padding: 0;\n    list-style: none;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n  .px-nav ol a {\n    display: block;\n    padding: 18px 12px 15px;\n    color: #c9cde0;\n    text-decoration: none;\n    font-size: 14px;\n    white-space: nowrap;\n    border-bottom: 3px solid transparent;\n  }\n  .px-nav ol a b { color: var(--accent); margin-right: 4px; }\n  .px-nav ol a:hover { color: #fff; }\n  .px-nav ol a.is-active {\n    color: #fff;\n    border-bottom-color: var(--accent);\n  }\n\n  .px-chapter {\n    padding: clamp(64px, 12cqw, 140px) clamp(16px, 6cqw, 80px);\n  }\n  .px-chapter--alt {\n    background: var(--night);\n    color: #e9ebf5;\n  }\n  .px-text {\n    max-width: 760px;\n    margin: 0 auto;\n  }\n  .px-num {\n    margin: 0;\n    font-size: clamp(80px, 16cqw, 160px);\n    font-weight: 800;\n    line-height: 0.8;\n    letter-spacing: -0.05em;\n    color: transparent;\n    -webkit-text-stroke: 2px var(--accent);\n  }\n  .px-chapter h2 {\n    margin: 16px 0 18px;\n    font-size: clamp(34px, 6cqw, 64px);\n    font-weight: 800;\n    letter-spacing: -0.03em;\n    line-height: 1;\n    text-transform: uppercase;\n  }\n  .px-big {\n    margin: 0 0 18px;\n    font-size: clamp(21px, 2.8cqw, 30px);\n    font-weight: 300;\n    line-height: 1.35;\n  }\n  .px-text > p:not(.px-big, .px-num) {\n    font-size: 18px;\n    line-height: 1.6;\n    max-width: 620px;\n  }\n\n  .js-reveal [data-trait~='reveal'] {\n    opacity: 0;\n    transform: translateY(60px);\n    transition: opacity 900ms ease, transform 900ms cubic-bezier(.2, .8, .2, 1);\n  }\n  .js-reveal [data-trait~='reveal'].is-in {\n    opacity: 1;\n    transform: none;\n  }\n\n  .px-stats {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 28px 48px;\n    margin: 30px 0 0;\n    padding: 0;\n    list-style: none;\n    font-size: 16px;\n    color: #b7bdd6;\n  }\n  .px-stats__n {\n    display: block;\n    font-size: 54px;\n    font-weight: 800;\n    color: #fff;\n    letter-spacing: -0.03em;\n  }\n  .px-quote {\n    margin: 30px 0 0;\n    padding-left: 22px;\n    border-left: 4px solid var(--accent);\n  }\n  .px-quote p { margin: 0 0 8px; font-size: 22px; font-style: italic; line-height: 1.45; }\n  .px-quote footer { font-size: 14px; text-transform: uppercase; letter-spacing: 0.15em; color: #5b6078; }\n\n  .px-forest { background: linear-gradient(#dfece6, #b9d4c8); }\n  .px-clouds { background: linear-gradient(#7c8fd6, #c9c6f0); }\n  .px-summit { background: linear-gradient(#5a3a7a, #e2789a 60%, #ffb27a); }\n\n  .px-gear { background: #fff; }\n  .px-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }\n  .px-btn {\n    display: inline-block;\n    padding: 16px 28px;\n    background: var(--accent);\n    color: #1d1010;\n    font-weight: 700;\n    text-decoration: none;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    font-size: 14px;\n  }\n  .px-btn--line {\n    background: transparent;\n    color: var(--ink);\n    box-shadow: inset 0 0 0 2px var(--ink);\n  }\n  .px-foot {\n    padding: 28px clamp(16px, 4cqw, 48px);\n    background: var(--night);\n    color: #b7bdd6;\n    font-size: 14px;\n    text-align: center;\n  }\n  .px-foot p { margin: 0; }\n\n  @container screen (max-width: 700px) {\n    .px-nav { padding: 0 0 0 16px; }\n    .px-nav__brand { display: none; }\n    .px-nav ol { margin: 0; }\n    .px-nav ol a { padding: 16px 10px 13px; }\n    .px-scene { height: 52cqh; }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .px-layer { transform: none; }\n    .js-reveal [data-trait~='reveal'] { opacity: 1; transform: none; }\n  }\n}\n\n@keyframes e13-dawn {\n  from { background-position: 0 0; }\n  to { background-position: 0 100%; }\n}\n@keyframes e13-progress {\n  from { transform: scaleX(0); }\n  to { transform: scaleX(1); }\n}\n@keyframes e13-bob {\n  50% { transform: translateY(8px); }\n}\n\n}",[74,76,78,80],{"caption":40,"file":38,"html":75},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">function\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> update\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  frame \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> { \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">top\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">vh\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> } \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> viewport\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  for\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">const\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> { \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">el\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">layers\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> } \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">of\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> scenes) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">    const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> r\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> el.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">getBoundingClientRect\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">    const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> r.top \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">-\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> top\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">    if\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (y \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">+\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> r.height \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"><\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> ||\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> y \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">>\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> vh) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">continue\u003C\u002Fspan>\u003Cspan style=\"color:#768390\"> \u002F\u002F off screen: skip the work\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">    const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> d\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> el.classList.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">contains\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'px-hero'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">?\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> y \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">:\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> y \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">+\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> r.height \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 2\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> -\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> vh \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 2\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">    for\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">const\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> { \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">l\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">depth\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> } \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">of\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> layers) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">      \u002F\u002F Far layers (low depth) lag behind the page; near layers rush past it.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      l.style.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">setProperty\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'--shift'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">`${\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">-\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">d\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> *\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0.6\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> -\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> depth\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">*\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0.35\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">).\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">toFixed\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">1\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">)\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">}px`\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">const\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> onScroll\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> () \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  if\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">frame) frame \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> requestAnimationFrame\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(update)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":44,"file":42,"html":77},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.px-scene\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  position\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">relative\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  overflow\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">hidden\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">70\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">vh\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  min-height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">360\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.px-layer\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  position\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">absolute\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  left\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">100\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  top\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">-25\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">150\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  will-change\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: transform;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">  \u002F* era.client.ts sets --shift per layer: (scroll offset) × data-depth *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  transform\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">translate3d\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">var\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--shift\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">), \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":47,"file":38,"html":79},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> spy\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> new\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> IntersectionObserver\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  (\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">entries\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">    for\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> e\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> of\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> entries) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">      if\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">e.isIntersecting) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">continue\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      links.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">forEach\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">((\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">        const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> on\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> id \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">===\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> e.target.id\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        a.classList.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">toggle\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'is-active'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, on)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">        if\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (on) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">          a.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">setAttribute\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'aria-current'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'location'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">          const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> ol\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> a.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">closest\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'ol'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">          if\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (ol.scrollWidth \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">>\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> ol.clientWidth) ol.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">scrollTo\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">({ left: a.offsetLeft \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">-\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> ol.offsetLeft \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">-\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 16\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> })\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">        else\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> a.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">removeAttribute\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'aria-current'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      })\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  { rootMargin: \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'-45% 0px -50% 0px'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":50,"file":42,"html":81},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">@supports\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">animation-timeline\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">scroll\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">()) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  .px-nav::after\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    content\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">''\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    position\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">absolute\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    inset\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">auto\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">3\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    background\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">var\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--accent\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    transform-origin\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 50\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    animation\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: e13-progress \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">linear\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> both\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    animation-timeline\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">scroll\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(root);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",1791232160975]