/* Motion is a material: paper, flexible photographs, and typography with mass. */
.choreography{--spatial-ease:cubic-bezier(.18,.85,.22,1)}
.choreography .kinetic-letter{display:inline-block;transform-origin:50% 80%;backface-visibility:hidden}
.choreography .hero-copy h1{perspective:900px}
.choreography .hero-copy .motion-line{overflow:visible}
.choreography .hero-copy .motion-line-inner{will-change:auto}
.choreography .hero-copy h1 .motion-line,.choreography .hero-copy h1 .motion-line-inner,.choreography .hero-copy h1 .kinetic-letter{color:inherit}
.choreography .section-heading .motion-line{perspective:800px}
.choreography .choreo-word{display:inline-block;transform-origin:50% 100%;backface-visibility:hidden}
.choreography .editorial-button{translate:var(--magnet-x,0px) var(--magnet-y,0px)}

.photo-lamina{position:fixed;pointer-events:none;background-position:center;background-size:cover;z-index:80;backface-visibility:hidden;transform-origin:50% 50%;will-change:transform,clip-path}

/* The index is built as independent paper shutters, followed by rolling type. */
.choreography #kinetic-index{background:transparent;animation:none;overflow-x:hidden}
.choreography #kinetic-index.closing{animation:none}
.index-shutters{position:fixed;inset:0;display:flex;z-index:-1;pointer-events:none}
.index-shutters>i{display:block;flex:1;background:var(--paper);margin-right:-1px}
.choreography .index-links a{perspective:700px}
.choreography .index-links a>span{transform-origin:0 50%}
.choreography .index-links .kinetic-letter{transform-origin:50% 100%}
.index-link-ghost{position:absolute;right:5%;top:21%;width:23vw;height:38vh;pointer-events:none;z-index:-1;overflow:hidden;opacity:0}
.index-link-ghost img{width:100%;height:100%;object-fit:cover;filter:saturate(.4);opacity:.15}
.choreography .index-links a>span{position:relative;z-index:2}

.choreography #experience-dialog{perspective:none}
.choreography #experience-dialog.closing{animation:none}
.choreography #experience-dialog.closing::backdrop{animation:none}
.choreography .dialog-cover{transform-origin:0 50%}
.choreography .case-flight{display:none}
.portal-shard{position:fixed;pointer-events:none;background-size:cover;background-position:center;z-index:12;transform-origin:50% 50%;backface-visibility:hidden;will-change:transform}
.choreography .favorite-preview{perspective:800px;position:relative;overflow:visible}
.choreography .favorite-cover{backface-visibility:hidden;transform-origin:50% 50%}
.poster-echo{position:absolute;pointer-events:none;z-index:3;object-fit:cover;transform-origin:50% 50%;backface-visibility:hidden}
.atlas-flip{position:absolute;inset:0;display:flex;pointer-events:none;z-index:2;perspective:1000px}
.atlas-flip-panel{flex:1;position:relative;transform-style:preserve-3d;min-width:0}
.atlas-flip-panel>i{position:absolute;inset:0;display:block;backface-visibility:hidden;background-repeat:no-repeat;background-size:var(--atlas-width) 100%;background-position:var(--atlas-x) center}
.atlas-flip-panel>.atlas-back{transform:rotateY(180deg)}
.choreography .country-photo-frame{perspective:1000px;position:relative}

@media(max-width:760px){.index-link-ghost{display:none}.choreography .hero-copy .motion-line{overflow:hidden}}