@property --morph{syntax:"<time>";inherits:true;initial-value:0s}.shared-scenes{--motion-ease-out:cubic-bezier(.23, 1, .32, 1);--motion-ease-in-out:cubic-bezier(.77, 0, .175, 1);--morph:.76s;--enter:.56s;--exit:.22s;--stagger-step:60ms;--handoff:calc(var(--morph) * .45);--scene-trigger:50%;--scene-top:0px;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,80px);display:grid}.scene-steps{grid-area:1/1;position:relative}.scene-stage{top:var(--scene-top);grid-area:1/2;align-self:start;position:sticky}.scene-viewport{aspect-ratio:var(--scene-ratio,16 / 9);isolation:isolate;position:relative;overflow:hidden;container:scene-viewport/size}.scene-canvas{inset:var(--scene-inset,clamp(20px, 8cqmin, 72px));position:absolute;container:scene-canvas/size}@property --x{syntax:"<number>";inherits:false;initial-value:0}@property --y{syntax:"<number>";inherits:false;initial-value:0}@property --w{syntax:"<number>";inherits:false;initial-value:0}@property --h{syntax:"<number>";inherits:false;initial-value:0}@property --a{syntax:"<number>";inherits:false;initial-value:1}.placed{--fw:min(100cqw, 100cqh * var(--a));--fh:calc(var(--fw) / var(--a));left:calc((100cqw - var(--fw)) / 2 + var(--x) * var(--fw));top:calc((100cqh - var(--fh)) / 2 + var(--y) * var(--fh));width:calc(var(--w) * var(--fw));height:calc(var(--h) * var(--fh));position:absolute}.actor{--box-ms:0s;--fade-ms:0s;--fade-delay:0s;--rise:4%;--origin-x:50%;--origin-y:50%;opacity:0;scale:.95;translate:0 var(--rise);transform-origin:var(--origin-x) var(--origin-y);filter:blur(4px);transition:--x var(--box-ms) var(--motion-ease-in-out), --y var(--box-ms) var(--motion-ease-in-out), --w var(--box-ms) var(--motion-ease-in-out), --h var(--box-ms) var(--motion-ease-in-out), --a var(--box-ms) var(--motion-ease-in-out), z-index var(--box-ms) var(--motion-ease-in-out), opacity var(--fade-ms) var(--motion-ease-out) var(--fade-delay), scale var(--fade-ms) var(--motion-ease-out) var(--fade-delay), translate var(--fade-ms) var(--motion-ease-out) var(--fade-delay), filter var(--fade-ms) var(--motion-ease-out) var(--fade-delay);grid-template:minmax(0,1fr)/minmax(0,1fr);display:grid;container:layout-region/size}.actor>*{width:100%;min-width:0;height:100%;min-height:0}.actor[data-present]{opacity:1;filter:blur();translate:0;scale:1}.actor[data-cut]{--rise:0%}.actor[data-cut~=top]{--origin-y:0%}.actor[data-cut~=bottom]{--origin-y:100%}.actor[data-cut~=left]{--origin-x:0%}.actor[data-cut~=right]{--origin-x:100%}.actor[data-motion=morph]{--box-ms:var(--morph);--fade-ms:var(--enter)}.actor[data-motion=enter]{--fade-ms:var(--enter);--fade-delay:calc(var(--stagger,0) * var(--stagger-step))}.scene-canvas:has(>[data-motion=morph])>[data-motion=enter]{--fade-delay:calc(var(--handoff) + var(--stagger,0) * var(--stagger-step))}.actor[data-motion=exit]{--box-ms:var(--morph);--fade-ms:var(--exit)}@media (prefers-reduced-motion:reduce){.shared-scenes{--morph:0s;--stagger-step:0s;--handoff:0s;--enter:.2s;--exit:.15s}.actor{filter:none;translate:none;scale:1}}