.city{--city-slant:atan2(7vw, 100svh);--city-autoplay:7s;--city-move:1.2s;--city-rise:50%;--city-ease-out:cubic-bezier(.5, 1, .89, 1);--city-ease-in:cubic-bezier(.11, 0, .5, 0);view-timeline:--city block}.city__slider{block-size:100%;position:relative}.city__frames{position:absolute;inset:0}.city__frames:after{content:"";z-index:3;background:linear-gradient(0deg, rgba(var(--c-black-rgb), .25) 0%, transparent 22%);position:absolute;inset:0}.city__frame{z-index:var(--city-layer,0);visibility:hidden;position:absolute;inset:0;overflow:clip}.city__frame:not([data-state=idle]){visibility:visible}.city__mask,.city__content{transform-origin:0 0;position:absolute;inset:0}.city__mask{overflow:clip}.city__swing{transform-origin:var(--city-focus,50% 50%);position:absolute;inset:0}@media (max-aspect-ratio:3/4){.city__swing{transform-origin:50% 62%}}.city__img{object-fit:cover;object-position:var(--city-focus,50% 50%);block-size:100%;inline-size:100%;position:absolute;inset:0}@media (prefers-reduced-motion:no-preference){.city__frame[data-state=enter] .city__mask{animation:city-mask-next var(--city-move) var(--ease-in-out-cubic) both}.city__frame[data-state=enter] .city__content{animation:city-content-next var(--city-move) var(--ease-in-out-cubic) both}.city__frame[data-state=enter] .city__swing{animation:city-settle var(--city-move) var(--ease-in-out-cubic) both}.city__frame[data-state=enter][data-dir=prev] .city__mask{animation-name:city-mask-prev}.city__frame[data-state=enter][data-dir=prev] .city__content{animation-name:city-content-prev}.city__frame[data-state=leave] .city__swing{animation:city-push var(--city-move) var(--ease-in-out-cubic) both}@supports (animation-timeline:view()){.city__slider{animation:city-rise var(--city-ease-out) both;animation-timeline:--city;animation-range:contain 0% contain calc(100% / (var(--scene-screens) - 1))}.city__frames{animation:city-arrive var(--city-ease-out) both, city-drift var(--city-ease-in) both;animation-timeline:--city,--city;animation-range:contain 0% contain calc(100% / (var(--scene-screens) - 1)), exit 0% exit 100%}}}@keyframes city-mask-next{0%{transform:translateX(100%) skewX(var(--city-slant))}to{transform:translate(0)skew(0)}}@keyframes city-content-next{0%{transform:translateX(-100%) skewX(calc(-1 * var(--city-slant)))}to{transform:translate(0)skew(0)}}@keyframes city-mask-prev{0%{transform:translateX(-100%) skewX(calc(-1 * var(--city-slant)))}to{transform:translate(0)skew(0)}}@keyframes city-content-prev{0%{transform:translateX(100%) skewX(var(--city-slant))}to{transform:translate(0)skew(0)}}@keyframes city-settle{0%{scale:1.08}to{scale:1}}@keyframes city-push{to{scale:1.04}}@keyframes city-arrive{0%{scale:1.2}to{scale:1}}@keyframes city-drift{0%{translate:0}to{translate:0 8%}}@keyframes city-rise{0%{translate:0 var(--city-rise)}to{translate:0}}.city__navs{z-index:3;touch-action:pan-y;position:absolute;inset:0}.city__nav{background:0 0;border:0;outline:none;inline-size:50%;padding:0;position:absolute;inset-block:0}.city__nav_prev{inset-inline-start:0}.city__nav_next{inset-inline-end:0}.city__nav_pause{z-index:1;inline-size:20%;display:none;inset-inline-start:40%}@media (hover:hover) and (pointer:fine){.city__nav_pause{display:block}}.city__stories{z-index:4;gap:var(--space-1);pointer-events:none;inline-size:clamp(10rem,22vw,20rem);display:flex;position:absolute;inset-block-end:calc(var(--space-10) + 1.25rem + var(--tabbar-h));inset-inline-start:50%;translate:-50%}.city__story{background:rgba(var(--c-sand-rgb), .3);border-radius:1px;flex:1;block-size:2px;overflow:clip}.city__story-fill{background:var(--c-sand);transform-origin:0;block-size:100%;display:block;scale:0 1}.city__story[data-state=done] .city__story-fill{scale:1}@media (prefers-reduced-motion:reduce){.city__story[data-state=current] .city__story-fill{scale:1}}@media (prefers-reduced-motion:no-preference){.city__story[data-state=current] .city__story-fill{animation:city-story var(--city-autoplay) linear both paused}.city__slider[data-playing] .city__story[data-state=current] .city__story-fill{animation-play-state:running}}@keyframes city-story{0%{scale:0 1}to{scale:1}}.city__keys{z-index:4;gap:var(--space-1);display:none;position:absolute;inset-block-end:var(--space-10);inset-inline-start:85%;translate:-50%}@media (hover:hover) and (pointer:fine){.city__keys{display:flex}}.city__key{background:rgba(var(--c-black-rgb), .55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);block-size:2.5rem;inline-size:2.5rem;box-shadow:inset 0 1px 0 rgba(var(--c-sand-rgb), .08), 0 1px 0 rgba(var(--c-black-rgb), .6);color:var(--c-sand);cursor:pointer;transition:translate .12s var(--ease-smooth), background-color .12s var(--ease-smooth), box-shadow .12s var(--ease-smooth);border:0;border-radius:.375rem;place-items:center;padding:0;display:grid}.city__key:hover{background:rgba(var(--c-black-rgb), .7)}.city__key[data-pressed]{background:rgba(var(--c-sand-rgb), .16);box-shadow:inset 0 1px 2px rgba(var(--c-black-rgb), .5);translate:0 1px}.city__key-arrow{fill:currentColor;block-size:.5rem;inline-size:.5rem}.city__status{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.city__lip{z-index:3;pointer-events:none;position:absolute;inset-block-start:var(--sheet-overlap);inset-inline:0}.city__veil{block-size:var(--sheet-overlap);background:var(--c-black);opacity:0;position:absolute;inset-block-start:0;inset-inline:0}.city__arc{transform-origin:50% 0;position:absolute;inset-block-start:0;inset-inline:0;scale:1 -1}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){.city__veil{animation:linear both city-veil;animation-timeline:view();animation-range:entry}}}@keyframes city-veil{0%{opacity:.3}to{opacity:0}}