/* Each scene has its own movement, timing, and stopping point. */
#stage{overflow:hidden;perspective:1200px}#slide{z-index:1}.page-outgoing{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}.page-outgoing *,.page-outgoing *:before,.page-outgoing *:after{animation-play-state:paused!important}.band-track{display:flex;width:max-content}.band-track>span{flex:none;white-space:nowrap}.sideband{overflow:hidden}
/* 01 — orbital opening */
.scene-01 .galaxy{animation:cosmic-birth 1.2s ease both,cosmic-wander 18s ease-in-out infinite;will-change:transform}.scene-01 .orbit{animation:cosmic-ring 1s ease .15s both}.scene-01 .corner{animation:cosmic-corner .85s cubic-bezier(.2,.8,.2,1) both}.scene-01 .c0{--cx:-36px;--cy:-35px}.scene-01 .c1{--cx:36px;--cy:-35px;animation-delay:.1s}.scene-01 .c2{--cx:-36px;--cy:35px;animation-delay:.2s}.scene-01 .c3{--cx:36px;--cy:35px;animation-delay:.3s}.scene-01 .cover-stamp{animation:cosmic-seal .9s cubic-bezier(.16,.8,.2,1.15) .35s both}.scene-01 .cover-slogan{animation:cosmic-copy .65s ease .8s both}.scene-01 .cover-years{animation:cosmic-copy .65s ease .95s both}.scene-01 .cover-location{animation:cosmic-copy .65s ease 1.1s both}.scene-01 .cover-event{animation:cosmic-copy .75s ease 1.2s both}
@keyframes cosmic-birth{from{opacity:0;clip-path:ellipse(0% 0% at 50% 50%)}to{opacity:.83;clip-path:ellipse(70% 70% at 50% 50%)}}@keyframes cosmic-wander{0%,100%{transform:rotate(-3deg) scale(1.025)}50%{transform:rotate(4deg) scale(1.12)}}@keyframes cosmic-ring{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}@keyframes cosmic-corner{from{opacity:0;translate:var(--cx) var(--cy)}to{opacity:1;translate:0 0}}@keyframes cosmic-seal{0%{opacity:0;transform:scale(1.65) rotate(-9deg)}70%{opacity:1;transform:scale(.96) rotate(1deg)}100%{opacity:1;transform:scale(1) rotate(0)}}@keyframes cosmic-copy{from{opacity:0;clip-path:inset(50% 0)}to{opacity:1;clip-path:inset(0)}}
/* 02 — impact and printed impression */
.scene-02 .statement-bg{animation:impact-quake .42s ease .48s both}.scene-02 .statement-english,.scene-02 .statement-small{animation:impact-ink .4s steps(4,end) .08s both}.scene-02 .brand-block{animation:impact-ink .3s steps(3,end) .3s both}.scene-02 .statement-copy h1{animation:impact-title .82s cubic-bezier(.15,.75,.2,1.12) .12s both}.scene-02 .power-tag{animation:impact-press .48s cubic-bezier(.15,.8,.2,1.15) .62s both}.scene-02 .statement-lines{animation:impact-ink .5s steps(6,end) .82s both}.scene-02 .statement-logo{animation:impact-logo .4s ease 1s both}.scene-02 .statement-slogan{animation:impact-ink .3s ease 1.12s both}.scene-02 .band-track{animation:impact-band .7s ease .25s both}
@keyframes impact-title{0%{opacity:0;transform:translateY(-135px) rotate(-4deg) scale(1.35)}58%{opacity:1;transform:translateY(5px) rotate(1deg) scale(.98)}78%{transform:translateY(-3px) rotate(0) scale(1.02)}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}@keyframes impact-press{from{opacity:0;transform:scale(1.4)}70%{opacity:1;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes impact-ink{from{opacity:0}to{opacity:1}}@keyframes impact-quake{0%,100%{translate:0 0}20%{translate:-4px 2px}45%{translate:4px -2px}70%{translate:-2px 0}}@keyframes impact-logo{from{opacity:0;scale:1.3}to{opacity:1;scale:1}}@keyframes impact-band{from{translate:-65px 0;opacity:0}to{translate:0 0;opacity:1}}
/* 03 — mirrored fan, opening from the centre */
.scene-03 .statement-copy{perspective:800px}.mirror-char{display:inline-block;transform-origin:center;animation:mirror-letter .85s cubic-bezier(.2,.8,.2,1) calc(.23s + var(--char)*.1s) both}.scene-03 .statement-english,.scene-03 .statement-small{animation:mirror-bloom .7s ease .05s both}.scene-03 .brand-block{animation:mirror-bloom .6s ease .2s both}.scene-03 .power-tag{animation:mirror-frame .85s cubic-bezier(.2,.7,.2,1) .6s both}.scene-03 .statement-lines{animation:mirror-lines .7s ease .9s both}.scene-03 .statement-logo,.scene-03 .statement-slogan{animation:mirror-bloom .6s ease 1s both}.scene-03 .band-track{animation:mirror-belt 24s linear infinite}.scene-03 .right .band-track{animation-direction:reverse}.scene-03 .pattern-layer{animation:mirror-aura 7s ease-in-out infinite}
@keyframes mirror-letter{from{opacity:0;transform:translateX(calc(var(--mirror)*30px)) rotateY(calc(var(--mirror)*85deg))}to{opacity:1;transform:translateX(0) rotateY(0)}}@keyframes mirror-bloom{from{opacity:0;scale:.65 1}to{opacity:1;scale:1 1}}@keyframes mirror-frame{from{clip-path:inset(0 50%);opacity:0}to{clip-path:inset(0);opacity:1}}@keyframes mirror-lines{from{opacity:0;letter-spacing:12px}to{opacity:1;letter-spacing:4px}}@keyframes mirror-belt{from{transform:translateX(0)}to{transform:translateX(-50%)}}@keyframes mirror-aura{0%,100%{opacity:.08}50%{opacity:.23}}
/* 04 — diagonal sprint */
.scene-04 .statement-bg{animation:sprint-pan 9s ease-in-out infinite alternate}.scene-04 .statement-english,.scene-04 .statement-small,.scene-04 .brand-block{animation:sprint-label .6s ease .1s both}.scene-04 .statement-copy h1{animation:sprint-title .72s cubic-bezier(.15,.8,.2,1) .2s both}.scene-04 .power-tag{animation:sprint-catch .62s cubic-bezier(.18,.8,.25,1) .45s both}.scene-04 .statement-lines{animation:sprint-finish .65s ease .7s both}.scene-04 .statement-logo{animation:sprint-logo .7s ease .8s both}.scene-04 .statement-slogan{animation:sprint-finish .5s ease .95s both}.scene-04 .band-track{animation:sprint-belt 9s linear infinite}.scene-04 .right .band-track{animation-direction:reverse}
@keyframes sprint-title{from{opacity:0;transform:translate(-260px,45px) skewX(-24deg);text-shadow:35px 0 #ffffff60}70%{opacity:1;transform:translate(8px,-2px) skewX(3deg);text-shadow:-12px 0 #ffffff30}to{opacity:1;transform:translate(0) skewX(0);text-shadow:0 0 transparent}}@keyframes sprint-catch{from{opacity:0;transform:translate(250px,-30px) skewX(20deg)}to{opacity:1;transform:translate(0) skewX(0)}}@keyframes sprint-pan{from{transform:scale(1.05) translate(-6px,7px)}to{transform:scale(1.09) translate(7px,-8px)}}@keyframes sprint-label{from{opacity:0;translate:-32px 7px}to{opacity:1;translate:0 0}}@keyframes sprint-finish{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}@keyframes sprint-logo{from{opacity:0;translate:65px 32px;rotate:-12deg}to{opacity:1;translate:0 0;rotate:0deg}}@keyframes sprint-belt{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* 05 — history, outline to solid, rolling year digits */
.scene-05 .century-top{animation:heritage-print .7s steps(6,end) .1s both}.scene-05 .century-title{animation:heritage-draw 1.3s ease .15s both}.scene-05 .century-title span:first-child{animation:heritage-fill 7.2s steps(1,end) 1.4s infinite}.scene-05 .century-sub{animation:heritage-emboss .85s ease .65s both}.scene-05 .century-slogan{animation:heritage-print .7s steps(7,end) 1s both}.scene-05 .century-shoe{animation:heritage-sketch 1.3s ease .8s both}.scene-05 .century-bottom>span{display:inline-flex;overflow:hidden}.year-digit{display:inline-block;animation:heritage-digit .75s cubic-bezier(.2,.8,.2,1) calc(1s + var(--digit)*.1s) both}.scene-05 .century-bottom i{transform-origin:left;animation:heritage-line 1s ease 1.1s both}
@keyframes heritage-draw{from{clip-path:polygon(0 0,0 0,0 100%,0 100%)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}@keyframes heritage-fill{0%,49%{color:transparent}50%,100%{color:#fff}}@keyframes heritage-print{from{opacity:0}to{opacity:1}}@keyframes heritage-emboss{from{opacity:0;transform:perspective(500px) rotateX(-80deg);transform-origin:top}to{opacity:1;transform:perspective(500px) rotateX(0);transform-origin:top}}@keyframes heritage-sketch{from{clip-path:inset(0 100% 0 0);opacity:.2}to{clip-path:inset(0);opacity:1}}@keyframes heritage-digit{from{translate:0 -120%;opacity:0}to{translate:0 0;opacity:1}}@keyframes heritage-line{from{scale:0 1}to{scale:1 1}}
/* 06 — product plinth and a subtle 3D turntable */
.scene-06 .warrior-word{animation:product-spread .85s cubic-bezier(.2,.7,.2,1) .1s both}.scene-06 .product-brand{animation:product-brand-flip .9s ease .25s both}.scene-06 .product-title{animation:product-panel .8s ease .5s both}.scene-06 .product-theme{animation:product-panel .8s ease .65s both}.scene-06 .product-years,.scene-06 .product-brand-label{animation:product-panel .7s ease .8s both}.scene-06 .product-shoe{animation:product-lift 1.2s cubic-bezier(.2,.75,.2,1) .65s both;perspective:800px}.scene-06 .collage-shoe{animation:product-turntable 6s ease-in-out 1.85s infinite}.scene-06 .pattern-layer{opacity:.2;animation:product-wall 15s ease-in-out infinite alternate}
@keyframes product-spread{from{opacity:0;letter-spacing:20px;scale:.8 1}to{opacity:1;letter-spacing:-2px;scale:1 1}}@keyframes product-brand-flip{from{opacity:0;transform:perspective(700px) rotateX(85deg)}to{opacity:1;transform:perspective(700px) rotateX(0)}}@keyframes product-panel{from{opacity:0;clip-path:inset(100% 0 0 0)}to{opacity:1;clip-path:inset(0)}}@keyframes product-lift{from{opacity:0;translate:0 105px;rotate:-14deg}to{opacity:1;translate:0 0;rotate:0deg}}@keyframes product-turntable{0%,100%{transform:rotateY(-9deg) rotateZ(0)}50%{transform:rotateY(9deg) rotateZ(-1.5deg)}}@keyframes product-wall{from{transform:scale(1.03) translateX(-4px)}to{transform:scale(1.07) translateX(4px)}}
/* 07 — showroom Venetian shutters */
.scene-07 .gallery-heading{animation:showroom-sign .7s ease .1s both}.scene-07 .photo-strips{perspective:900px}.scene-07 .photo-strips button{transform-origin:top;backface-visibility:hidden;animation:showroom-shutter .95s cubic-bezier(.2,.7,.2,1) calc(.22s + var(--order)*.17s) both}.scene-07 figcaption{animation:showroom-caption .5s ease calc(.12s + var(--order)*.17s) both}.scene-07 .album-controls{animation:showroom-controls .65s ease 1.1s both}
@keyframes showroom-shutter{0%{opacity:0;transform:rotateX(-88deg);clip-path:inset(0 0 100% 0)}100%{opacity:1;transform:rotateX(0deg);clip-path:inset(0)}}@keyframes showroom-caption{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes showroom-sign{from{opacity:0;translate:0 -24px}to{opacity:1;translate:0 0}}@keyframes showroom-controls{from{opacity:0;scale:.7}to{opacity:1;scale:1}}
/* 08 — activity photos passing left to right */
.scene-08 .gallery-heading{animation:review-heading .7s ease .1s both}.scene-08 .photo-strips figure{--side:-1;--tilt:-4deg;animation:review-relay .9s cubic-bezier(.2,.75,.2,1) calc(.18s + var(--order)*.18s) both}.scene-08 .photo-strips figure:nth-child(even){--side:1;--tilt:4deg}.scene-08 .photo-strips img{animation:review-pan 9s ease-in-out 1.8s infinite alternate;scale:1.055}.scene-08 .photo-strips figure:nth-child(even) img{animation-direction:alternate-reverse}.scene-08 .album-controls{animation:review-tabs .6s ease 1.2s both}
@keyframes review-relay{from{opacity:0;transform:translateX(calc(var(--side)*115%)) rotate(var(--tilt))}to{opacity:1;transform:translateX(0) rotate(0)}}@keyframes review-heading{from{opacity:0;clip-path:inset(0 0 0 100%)}to{opacity:1;clip-path:inset(0)}}@keyframes review-pan{from{translate:-1.5% 0}to{translate:1.5% 0}}@keyframes review-tabs{from{opacity:0;translate:22px 0}to{opacity:1;translate:0 0}}
/* 09 — open the envelope, unfold the letter, stamp it */
.scene-09 .paper{animation:letter-unfold 1.15s ease .2s both;transform-origin:top;perspective:900px}.scene-09 .paper:before{content:'';position:absolute;top:6px;left:6px;right:6px;height:210px;background:linear-gradient(#e9edf5,#fff);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;z-index:4;pointer-events:none;animation:letter-flap 1.05s ease .15s both}.scene-09 .letter-stamp{animation:letter-seal .6s cubic-bezier(.2,.8,.2,1.1) .85s both}.scene-09 .stamp-a,.scene-13 .stamp-a{animation:none;opacity:1}.scene-09 .stamp-b,.scene-13 .stamp-b{animation:none;opacity:0}.scene-09 .letter-event,.scene-09 .invitation h1{animation:letter-writing .85s steps(10,end) 1.1s both}.scene-09 .letter-theme,.scene-09 .letter-details{animation:letter-writing .85s ease 1.3s both}.scene-09 .letter-slogan,.scene-09 .letter-logo,.scene-09 .letter-years{animation:letter-signature .7s ease 1.6s both}
@keyframes letter-unfold{from{opacity:0;transform:perspective(900px) rotateX(-35deg) scaleY(.55)}to{opacity:1;transform:perspective(900px) rotateX(0) scaleY(1)}}@keyframes letter-flap{0%,25%{opacity:1;transform:rotateX(0)}85%,100%{opacity:0;transform:rotateX(-165deg)}}@keyframes letter-seal{from{opacity:0;scale:1.5;rotate:-12deg}to{opacity:1;scale:1;rotate:0deg}}@keyframes letter-writing{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}@keyframes letter-signature{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
/* 10 — a time axis that draws and lights each appointment */
.scene-10 .paper-heading{animation:schedule-heading .75s ease .1s both}.scene-10 .agenda ol{position:relative}.scene-10 .agenda ol:before{content:'';position:absolute;left:-9px;top:0;bottom:0;width:2px;background:#c8232b40;transform-origin:top;animation:schedule-axis 1.3s ease .25s both}.scene-10 .agenda li{position:relative;animation:schedule-row .5s ease calc(.35s + var(--order)*.18s) both}.scene-10 .agenda li:before{content:'';position:absolute;left:-12px;top:27px;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px #fff;animation:schedule-dot 4.5s ease calc(2s + var(--order)*.55s) infinite}.scene-10 .agenda time{animation:schedule-time .55s steps(7,end) calc(.4s + var(--order)*.18s) both}.scene-10 .paper-note,.scene-10 .agenda-logo{animation:schedule-footer .6s ease 1.45s both}
@keyframes schedule-heading{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes schedule-axis{from{scale:1 0}to{scale:1 1}}@keyframes schedule-row{from{opacity:0;translate:10px 0}to{opacity:1;translate:0 0}}@keyframes schedule-time{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}@keyframes schedule-dot{0%,15%,100%{scale:1;box-shadow:0 0 0 3px #fff}7%{scale:1.15;box-shadow:0 0 0 5px #c8232b20}}@keyframes schedule-footer{from{opacity:0}to{opacity:1}}
/* 11 — a single camera pullback to the real map */
.scene-11 .paper-heading{animation:location-heading .75s ease .15s both}.scene-11 .venue h2,.scene-11 .venue address{animation:location-label .7s ease .4s both}.scene-11 .map-photo{position:relative;overflow:hidden}.scene-11 .map-photo img{animation:location-camera 1.6s cubic-bezier(.2,.65,.2,1) .25s both}.scene-11 .map-photo:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--blue),var(--blue)) left top/0% 2px no-repeat,linear-gradient(var(--blue),var(--blue)) right top/2px 0% no-repeat,linear-gradient(var(--blue),var(--blue)) right bottom/0% 2px no-repeat,linear-gradient(var(--blue),var(--blue)) left bottom/2px 0% no-repeat;animation:location-frame 1.3s linear .5s both}.scene-11 .primary-button{animation:location-nav .65s ease 1.35s both}
@keyframes location-camera{from{opacity:0;transform:scale(1.5) translate(-8px,18px);filter:blur(2px)}to{opacity:1;transform:scale(1) translate(0);filter:blur(0)}}@keyframes location-heading{from{opacity:0;letter-spacing:6px}to{opacity:1;letter-spacing:normal}}@keyframes location-label{from{opacity:0;translate:0 -9px}to{opacity:1;translate:0 0}}@keyframes location-frame{0%{background-size:0% 2px,2px 0%,0% 2px,2px 0%}25%{background-size:100% 2px,2px 0%,0% 2px,2px 0%}50%{background-size:100% 2px,2px 100%,0% 2px,2px 0%}75%{background-size:100% 2px,2px 100%,100% 2px,2px 0%}100%{background-size:100% 2px,2px 100%,100% 2px,2px 100%}}@keyframes location-nav{from{opacity:0;transform:scaleX(.35)}to{opacity:1;transform:scaleX(1)}}
/* 12 — form fields opening from lines, focus led by a blue rule */
.scene-12 .outline-brand{animation:register-outline 1s ease .1s both}.scene-12 .rsvp-english{animation:register-brand .55s ease .15s both}.scene-12 .rsvp-title,.scene-12 .rsvp-event{animation:register-heading .7s ease .35s both}.scene-12 .rsvp-form label{position:relative;transform-origin:top;animation:register-field .7s cubic-bezier(.2,.75,.2,1) calc(.4s + var(--order)*.14s) both}.scene-12 .rsvp-form label:after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:#233fab;transform:scaleX(0);transform-origin:left;transition:transform .24s ease;pointer-events:none}.scene-12 .rsvp-form label:focus-within:after{transform:scaleX(1)}.scene-12 .rsvp-form .primary-button{animation:register-submit .65s ease 1.2s both}.scene-12 .rsvp-logo{animation:register-logo .65s ease 1.3s both}
@keyframes register-outline{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes register-brand{from{opacity:0;translate:0 -14px}to{opacity:1;translate:0 0}}@keyframes register-heading{from{opacity:0;letter-spacing:10px}to{opacity:1;letter-spacing:4px}}@keyframes register-field{0%{opacity:0;scale:1 .02}35%{opacity:1;scale:1 .02}to{opacity:1;scale:1 1}}@keyframes register-submit{from{opacity:0;scale:.9}to{opacity:1;scale:1}}@keyframes register-logo{from{opacity:0;clip-path:inset(100% 0 0)}to{opacity:1;clip-path:inset(0)}}
/* 13 — corners gather into a seal, the galaxy recedes, then hold */
.scene-13 .end-galaxy{animation:closing-galaxy 1.8s ease both}.scene-13 .corner{animation:closing-gather 1.1s cubic-bezier(.3,.4,.2,1) .1s both}.scene-13 .c0{--gx:111px;--gy:190px}.scene-13 .c1{--gx:-111px;--gy:190px;animation-delay:.18s}.scene-13 .c2{--gx:111px;--gy:-373px;animation-delay:.26s}.scene-13 .c3{--gx:-111px;--gy:-373px;animation-delay:.34s}.scene-13 .end-stamp{animation:closing-seal .9s cubic-bezier(.2,.8,.2,1.15) .75s both}.scene-13 .end-theme{animation:closing-type .8s ease 1.15s both}.scene-13 .end-slogan{animation:closing-type .7s ease 1.4s both}.scene-13 .end-event,.scene-13 .end-location{animation:closing-copy .7s ease 1.65s both}.scene-13 .replay-button{animation:closing-copy .55s ease 2s both}
@keyframes closing-gather{from{opacity:.7;translate:0 0;scale:1}to{opacity:0;translate:var(--gx) var(--gy);scale:.4}}@keyframes closing-galaxy{from{opacity:.65;transform:scale(1.2)}to{opacity:.24;transform:scale(.78)}}@keyframes closing-seal{from{opacity:0;transform:scale(.2) rotate(20deg)}65%{opacity:1;transform:scale(1.08) rotate(-2deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes closing-type{from{opacity:0;clip-path:inset(0 50%)}to{opacity:1;clip-path:inset(0)}}@keyframes closing-copy{from{opacity:0}to{opacity:1}}
/* Shared interaction affordances only. */
#next{animation:swipe-guide 2.7s ease 2s infinite}.photo-lightbox[open],.confirmation-dialog[open]{animation:dialog-open .24s ease both}.confirmation-dialog{border:0;border-radius:0;padding:25px 24px;background:#fff;color:var(--blue);width:min(88vw,360px);max-height:85dvh}.confirmation-dialog::backdrop{background:#000b}.confirmation-dialog h2{font-size:23px;margin:0 0 20px}.confirmation-dialog dl{margin:0}.confirmation-dialog dl>div{display:flex;gap:16px;border-top:1px solid #e2e6f0;padding:11px 0;font-size:14px;line-height:1.5}.confirmation-dialog dt{color:#6a7283;width:78px;flex-shrink:0}.confirmation-dialog dd{margin:0;overflow-wrap:anywhere}.confirmation-actions{display:flex;gap:10px;margin-top:23px}.confirmation-actions button{border:1px solid var(--blue);padding:10px 13px;font-size:14px;flex:1;background:white;color:var(--blue)}.confirmation-actions button:last-child{background:var(--blue);color:white}
@keyframes swipe-guide{0%,60%,100%{translate:0 0}75%{translate:0 -5px}85%{translate:0 0}}@keyframes dialog-open{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.stamp-a{opacity:1}.stamp-b{opacity:0}.century-title span:first-child{color:#fff}.scene-01 .galaxy{opacity:.83}.scene-13 .end-galaxy{opacity:.55}.photo-strips img{scale:1}}