.scroll-visualiser.svelte-4yn84j{z-index:5;--timeline-height:clamp(200px, 50vh, 500px);height:var(--timeline-height);--btn-size:clamp(14px, 3vw, 20px);--gap:calc((var(--timeline-height) - (var(--num-tiles) * var(--btn-size))) / (var(--num-tiles) - 1));--cycle:calc(var(--btn-size) + var(--gap));position:fixed;top:50%;right:clamp(16px,5vw,50px);transform:translateY(-50%)}.scroll-visualiser.svelte-4yn84j .nav-button:where(.svelte-4yn84j){all:unset;cursor:pointer;opacity:0;justify-content:center;width:100%;padding:10px 0;transition:opacity 1s;display:flex;position:absolute}.scroll-visualiser.svelte-4yn84j .nav-button.visible:where(.svelte-4yn84j){opacity:.6}.scroll-visualiser.svelte-4yn84j .nav-button.visible:where(.svelte-4yn84j):hover{opacity:1}.scroll-visualiser.svelte-4yn84j .nav-button.up:where(.svelte-4yn84j){bottom:100%}.scroll-visualiser.svelte-4yn84j .nav-button.down:where(.svelte-4yn84j){top:100%}.scroll-visualiser.svelte-4yn84j .subtitles-window:where(.svelte-4yn84j){--window-height:30px;width:200px;height:var(--window-height);--current-offset:calc((var(--tile) / (var(--num-tiles) - 1)) * (var(--timeline-height) - var(--btn-size)) + (var(--btn-size) / 2));right:calc(100% + clamp(10px,2vw,20px));top:calc(var(--current-offset) - var(--window-height) / 2);transition:top 3s cubic-bezier(0,1,.35,1);position:absolute;overflow:hidden}.scroll-visualiser.svelte-4yn84j .subtitles-window:where(.svelte-4yn84j) .subtitles-holder:where(.svelte-4yn84j){width:100%;top:calc(-1 * (var(--current-offset) - var(--window-height) / 2));transition:top 3s cubic-bezier(0,1,.35,1);position:absolute}.scroll-visualiser.svelte-4yn84j .subtitles-window:where(.svelte-4yn84j) .subtitles-holder:where(.svelte-4yn84j) h3:where(.svelte-4yn84j){width:100%;height:var(--window-height);text-align:right;opacity:0;letter-spacing:3px;--h3-offset:calc((var(--offset) / (var(--num-tiles) - 1)) * (var(--timeline-height) - var(--btn-size)) + (var(--btn-size) / 2));right:0;top:calc(var(--h3-offset) - var(--window-height) / 2);justify-content:flex-end;align-items:center;margin:0;font-family:DM Sans Variable,sans-serif;font-size:clamp(.7rem,1.5vw,.8rem);transition:opacity 1s cubic-bezier(0,1,.35,1);display:flex;position:absolute}.scroll-visualiser.svelte-4yn84j .subtitles-window:where(.svelte-4yn84j) .subtitles-holder:where(.svelte-4yn84j) h3.active:where(.svelte-4yn84j){opacity:.8}.scroll-visualiser.svelte-4yn84j .buttons:where(.svelte-4yn84j){z-index:2;flex-direction:column;justify-content:space-between;align-items:center;height:100%;display:flex;position:relative}.scroll-visualiser.svelte-4yn84j .buttons:where(.svelte-4yn84j) button:where(.svelte-4yn84j){width:var(--btn-size);height:var(--btn-size);border:unset;outline:unset;cursor:pointer;background-color:#0000;border-radius:999px;transition:transform 2s cubic-bezier(0,1,.35,1),box-shadow 2s cubic-bezier(0,1,.35,1),filter 2s cubic-bezier(0,1,.35,1);position:relative;box-shadow:inset 0 0 0 clamp(2px,.5vw,4px) #fff6}.scroll-visualiser.svelte-4yn84j .buttons:where(.svelte-4yn84j) button:where(.svelte-4yn84j):after{content:"";position:absolute;inset:-10px}.scroll-visualiser.svelte-4yn84j .buttons:where(.svelte-4yn84j) button:where(.svelte-4yn84j):focus-visible{box-shadow:inset 0 0 0 clamp(2px,.5vw,4px) #fffc}.scroll-visualiser.svelte-4yn84j .buttons:where(.svelte-4yn84j) button.active:where(.svelte-4yn84j){filter:drop-shadow(0 0 8px #ffffff80);transform:scale(1.3)}.scroll-visualiser.svelte-4yn84j .buttons:where(.svelte-4yn84j) button:where(.svelte-4yn84j):hover{transform:scale(1.1);box-shadow:inset 0 0 0 clamp(2px,.5vw,4px) #fffc}.scroll-visualiser.svelte-4yn84j .buttons:where(.svelte-4yn84j) button.active:where(.svelte-4yn84j),.scroll-visualiser.svelte-4yn84j .buttons:where(.svelte-4yn84j) button.passed:where(.svelte-4yn84j){box-shadow:inset 0 0 0 clamp(5px,1.5vw,10px) #fff}.scroll-visualiser.svelte-4yn84j .timeline:where(.svelte-4yn84j){z-index:1;width:3px;height:100%;position:absolute;top:0;left:50%;transform:translate(-50%)}.scroll-visualiser.svelte-4yn84j .timeline:where(.svelte-4yn84j) .background:where(.svelte-4yn84j){width:100%;height:100%;-webkit-mask-image:repeating-linear-gradient(to bottom, transparent 0px, transparent var(--btn-size), black var(--btn-size), black var(--cycle));mask-image:repeating-linear-gradient(to bottom, transparent 0px, transparent var(--btn-size), black var(--btn-size), black var(--cycle));-webkit-mask-image:repeating-linear-gradient(to bottom, transparent 0px, transparent var(--btn-size), black var(--btn-size), black var(--cycle));background-color:#fff6;position:absolute}.scroll-visualiser.svelte-4yn84j .timeline:where(.svelte-4yn84j) .foreground:where(.svelte-4yn84j){width:6px;height:calc(100% * var(--tile) / (var(--num-tiles) - 1));background-color:#fff;transition:height 1s cubic-bezier(0,1,.35,1);position:absolute;left:50%;transform:translate(-50%);box-shadow:0 0 10px 1px #fff6}@media (width<=900px){.scroll-visualiser.svelte-4yn84j .subtitles-window:where(.svelte-4yn84j){display:none}}@media (height<=600px) and (orientation:landscape){.scroll-visualiser.svelte-4yn84j{--timeline-height:70vh}}.content.svelte-h61ce8{display:contents}.main-content.svelte-h61ce8{color:#fff;background:#000;width:100vw;height:100vh;position:relative;overflow:hidden}.main-content.svelte-h61ce8 .foreground:where(.svelte-h61ce8){z-index:3;position:absolute;inset:0}.main-content.svelte-h61ce8 .foreground:where(.svelte-h61ce8) .mover:where(.svelte-h61ce8){width:100%;height:100%;transform:translateY(calc(-100vh * var(--tile)));will-change:transform;transition:transform 2.5s cubic-bezier(.22,1,.36,1)}.main-content.svelte-h61ce8 .foreground:where(.svelte-h61ce8) .foreground-tile:where(.svelte-h61ce8){padding-left:clamp(16px,5vw,50px);padding-right:16px;opacity:.1;flex-direction:column;justify-content:center;gap:clamp(12px,2.5vh,24px);max-width:min(100vw - 3*clamp(16px,5vw,50px) - 20px,650px);height:100vh;padding-block:clamp(30px,6vh,80px);transition:opacity 1.5s,transform 2.5s cubic-bezier(.22,1,.36,1);display:flex;transform:translateY(20px)}.main-content.svelte-h61ce8 .foreground:where(.svelte-h61ce8) .foreground-tile.active:where(.svelte-h61ce8){opacity:1;transform:translateY(0)}.main-content.svelte-h61ce8 .foreground:where(.svelte-h61ce8) .foreground-tile:where(.svelte-h61ce8) h1:where(.svelte-h61ce8){text-shadow:0 2px 10px #000c;font-size:clamp(1.4rem,5vw,2.2rem);line-height:1.1}.main-content.svelte-h61ce8 .foreground:where(.svelte-h61ce8) .foreground-tile:where(.svelte-h61ce8) .subtitle:where(.svelte-h61ce8){opacity:.7;margin-bottom:-.5em;font-family:DM Sans Variable;font-size:.9rem;display:none}.main-content.svelte-h61ce8 .foreground:where(.svelte-h61ce8) .foreground-tile:where(.svelte-h61ce8) .paragraph-wrapper:where(.svelte-h61ce8){flex-direction:column;gap:clamp(8px,1.5vh,12px);width:100%;display:flex}.main-content.svelte-h61ce8 .foreground:where(.svelte-h61ce8) .foreground-tile:where(.svelte-h61ce8) .paragraph-wrapper:where(.svelte-h61ce8) p:where(.svelte-h61ce8){text-shadow:0 2px 10px #000c;opacity:.9;max-width:600px;font-size:clamp(.85rem,2.5vw,1.05rem);line-height:1.4}.main-content.svelte-h61ce8 .foreground:where(.svelte-h61ce8) .foreground-tile:where(.svelte-h61ce8) .quote:where(.svelte-h61ce8){text-transform:none;text-shadow:0 3px 15px #000c;font-family:DM Serif Text;font-size:clamp(1.2rem,4vw,1.8rem);font-style:italic;font-weight:400;line-height:1.25}.main-content.svelte-h61ce8 .foreground:where(.svelte-h61ce8) .foreground-tile:where(.svelte-h61ce8) .qualitative:where(.svelte-h61ce8){opacity:.65;max-width:600px;font-size:clamp(.75rem,2vw,.9rem);font-style:italic;line-height:1.3}.main-content.svelte-h61ce8 .background:where(.svelte-h61ce8){z-index:1;position:absolute;inset:0}.main-content.svelte-h61ce8 .background:where(.svelte-h61ce8) .mover:where(.svelte-h61ce8){width:100%;height:100%;transform:translateY(calc(-100vh * var(--tile)));backface-visibility:hidden;will-change:transform;transition:transform 2.5s cubic-bezier(.22,1,.36,1)}.main-content.svelte-h61ce8 .background:where(.svelte-h61ce8) .background-tile:where(.svelte-h61ce8){width:100vw;height:calc(100vh + 2px);margin-bottom:-2px;position:relative;overflow:hidden}.main-content.svelte-h61ce8 .background:where(.svelte-h61ce8) .background-tile.image-background:where(.svelte-h61ce8) .img{object-fit:cover;object-position:center;width:100%;height:100%;transform:scale(1.05) translateY(calc(15vh * (var(--tile) - var(--index))));backface-visibility:hidden;will-change:transform;transition:transform 2.5s cubic-bezier(.22,1,.36,1);display:block}.main-content.svelte-h61ce8 .background:where(.svelte-h61ce8) .background-tile.image-background.active:where(.svelte-h61ce8) .img{transform:scale(1.15) translateY(calc(15vh * (var(--tile) - var(--index))));display:block}@media (width<=900px){.foreground-tile.svelte-h61ce8 h2:where(.svelte-h61ce8){display:block!important}}
