*{box-sizing:border-box}:root{--base-coat: hsl(0 0% 0%)}body{display:grid;place-items:center;min-height:100vh;height:500vh;background:#b3c8e6}.map{--size: 80vmin;width:var(--size);display:grid;grid-template-columns:repeat(4,calc(var(--size) / 4));aspect-ratio:841 / 595;transform-style:preserve-3d;position:fixed;top:50%;left:50%;translate:-50% -50%;animation:scale-in both ease-in;animation-timeline:scroll(root);animation-range:0 20%;transform-origin:80% 50%}@keyframes scale-in{0%{scale:.5;rotate:25deg}}.map img{height:100%;-o-object-fit:cover;object-fit:cover}.map>img{display:none}.map .map__section{width:100%}.segment{transform-style:preserve-3d;perspective:100vmin;transform-origin:100% 50%}.segment>.segment{position:absolute;height:100%;width:100%;right:100%;top:0;bottom:0}.map img{translate:calc(var(--index) * -25%) 0}h1{position:fixed;top:50%;left:50%;translate:-50% -50%;font-size:4rem;margin:0;font-family:sans-serif,system-ui}.map>.segment{--index: 3;--destination: 0deg}.map>.segment>.segment{--index: 2;--destination: 180deg}.map>.segment>.segment>.segment{--index: 1;--destination: -180deg}.map>.segment>.segment>.segment>.segment{--index: 0;--destination: 180deg}.segment__side--back{transform:rotateY(180deg);background:#fff;backface-visibility:hidden;display:grid;place-items:center;align-content:center;text-transform:uppercase;font-size:1rem;text-align:left}.segment__side--back:before{content:"";position:absolute;inset:0;background-image:url(/demos/assets/images-amsterdam-map.CCYfg90C.jpg);background-size:cover;opacity:.75;filter:saturate(.5)}.watermark-bear{width:35%;height:auto}.watermark-bear__eyes{transform-box:fill-box;transform-origin:50% 50%;animation:blink 6s -2s infinite}@keyframes blink{0%,46%,48%,50%,to{scale:1 1}47%,49%{scale:1 .01}}h2{rotate:-90deg;margin:0;position:absolute;left:calc(100% - 1rem);bottom:1rem;transform-origin:0 100%;transform:translateY(0) skew(-8deg);font-size:3rem;font-family:sans-serif,system-ui;background:#e63b19;padding:.5rem;color:#fff}svg{width:45%;position:absolute;top:0;right:0;translate:50% 25%}@keyframes fold{0%{transform:rotateY(var(--destination, 180deg)) translateZ(calc((4 - var(--index)) * -1px))}}.segment{animation:fold both linear;animation-timeline:scroll(root);animation-range:20% 100%}.segment__side{height:100%;width:100%;overflow:hidden;position:absolute;inset:0}.map>.map__section{grid-column:4;position:relative}