:root{--gray-0: #f8f9fa;--radius-3: 1rem}*,*:after,*:before{box-sizing:border-box}body{display:grid;place-items:center;min-height:100vh;font-family:Google Sans,sans-serif,system-ui;width:100vw;overflow-x:hidden}ul{--width: 100vw;width:var(--width);height:100vh;padding:0;margin:0;list-style-type:none;display:grid;place-items:center;grid-auto-flow:column;gap:1rem;overflow:auto;scroll-snap-type:x mandatory;padding:0 calc((var(--width, 80vw) * .5) - (var(--card-size, 300px) * .5));scroll-timeline:--rad;scroll-timeline-axis:inline}li{view-timeline:--item inline;scroll-snap-align:center}article{width:var(--card-size, 300px);aspect-ratio:3 / 4;border-radius:var(--radius-3);background:var(--surface-4);position:relative;overflow:hidden;scale:.8;animation:scalify both ease-in-out;animation-timeline:--item;animation-range:cover 40% cover 60%}@keyframes scalify{50%{scale:1;background-position:100% 100%}}.backdrop{position:absolute;inset:0;filter:grayscale(1);background-image:var(--bg);background-size:200% 200%;background-position:0% 50%;animation:colorify both linear,shift-bg both linear;animation-timeline:--item;animation-range:cover 40% cover 60%}@keyframes colorify{0%,to{filter:grayscale(1)}50%{filter:grayscale(0)}}@keyframes shift-bg{0%{background-position:0% 50%}to{background-position:100% 50%}}.word{clip-path:inset(0 0 0 0)}span>span{display:inline-block;translate:0 100%;animation:move-on-up both ease-in-out;animation-timeline:--item;animation-range:cover 40% cover 60%}@keyframes move-on-up{0%{translate:0 100%}50%{translate:0 0}to{translate:0 -100%}}a>span{background:#0006;position:absolute;inset:0;display:grid;place-items:center}span{font-size:2.5rem;font-weight:300;letter-spacing:.5rem;text-transform:uppercase;color:var(--gray-0)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}