/* Finite, keyboard-directed kinetic typography. No continuous text motion. */
.slide{--direction:1;--accent:#aebfff;transition:opacity .5s,transform 1.1s cubic-bezier(.16,1,.3,1),visibility 1.1s}
.slide.from-backward{--direction:-1}
.slide h1,.slide h2{perspective:900px;isolation:isolate;text-shadow:0 2px 0 #7987ab35,0 12px 35px #0005}
.title-word{perspective:700px;transform-style:preserve-3d}
.title-letter{backface-visibility:hidden;transform-origin:50% 70%;position:relative}
.slide.active .title-letter{animation:kinetic-fold 1.05s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--letter-index)*12ms)}
.slide[data-type=fracture].active .title-letter{animation-name:kinetic-fracture}
.slide[data-type=depth].active .title-letter{animation-name:kinetic-depth}
.slide em .title-letter,.hero .outline .title-letter{color:#b8caff;background:linear-gradient(145deg,#f0f4ff 10%,#b8caff 45%,#8498ff 80%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}
.slide.exit-forward .title-letter,.slide.exit-backward .title-letter{animation:kinetic-leave .48s cubic-bezier(.55,0,1,.45) both;animation-delay:calc(var(--letter-index)*3ms)}
.slide.exit-forward{--direction:1}.slide.exit-backward{--direction:-1}
.title-echo{position:absolute;left:6.5%;top:22%;width:87%;font:bold clamp(65px,13vw,220px)/.87 Arial,sans-serif;letter-spacing:-.065em;color:transparent;-webkit-text-stroke:1px #b3c8ff35;pointer-events:none;z-index:-1;opacity:0;white-space:normal;text-transform:uppercase}
.active .title-echo{animation:echo-travel 1.25s cubic-bezier(.16,1,.3,1) both}
#scene-lens{position:fixed;inset:0;pointer-events:none;z-index:8;opacity:0;overflow:hidden}
#scene-lens:before{content:'';position:absolute;inset:-35%;background:conic-gradient(from 45deg,transparent 0 37%,#657dff22 43%,#d7e3ff55 44%,transparent 46% 100%);transform:translateX(-35%) rotate(-15deg)}
#scene-lens:after{content:'';position:absolute;left:55%;top:50%;width:65vw;height:65vw;border:1px solid #a7bfff66;border-radius:50%;box-shadow:0 0 70px #6d8dff18,inset 0 0 70px #6d8dff18;transform:translate(-50%,-50%) scale(.3)}
#scene-lens.running{animation:lens-opacity 1.2s ease both}
#scene-lens.running:before{animation:light-sweep 1.2s cubic-bezier(.2,.65,.3,1) both}
#scene-lens.running:after{animation:lens-expand 1.2s cubic-bezier(.16,1,.3,1) both}
#scene-lens.reverse{rotate:180deg}
@keyframes kinetic-fold{0%{opacity:0;transform:translate3d(calc(var(--direction)*75px),95px,-220px) rotateX(-100deg) rotateY(calc(var(--direction)*35deg));filter:blur(7px);text-shadow:12px 10px #7e96ff33}65%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none;text-shadow:none}}
@keyframes kinetic-fracture{0%{opacity:0;transform:translate3d(calc(var(--direction)*-100px),calc(var(--scatter)*1px),-150px) rotateZ(calc(var(--scatter)*.6deg)) rotateY(85deg);filter:blur(5px)}70%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes kinetic-depth{0%{opacity:0;transform:translate3d(calc(var(--direction)*25px),-30px,300px) rotateX(40deg);filter:blur(12px)}60%{opacity:1}100%{opacity:1;transform:none;filter:none}}
@keyframes kinetic-leave{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(calc(var(--direction)*-95px),-45px,-140px) rotateY(calc(var(--direction)*-70deg));filter:blur(5px)}}
@keyframes echo-travel{0%{opacity:0;transform:translate3d(calc(var(--direction)*25%),0,-100px) scale(1.15)}25%{opacity:.65}100%{opacity:0;transform:translate3d(calc(var(--direction)*-15%),0,0) scale(.95)}}
@keyframes lens-opacity{0%,100%{opacity:0}25%{opacity:.75}65%{opacity:.3}}
@keyframes light-sweep{to{transform:translateX(40%) rotate(20deg)}}
@keyframes lens-expand{to{transform:translate(-50%,-50%) scale(1.7)}}
.reduced #scene-lens,.reduced .title-echo{display:none!important}
.reduced .slide .title-letter{animation:none!important;filter:none!important;transform:none!important;opacity:1!important}
@media(prefers-reduced-motion:reduce){#scene-lens,.title-echo{display:none}.slide.active .title-letter{animation:none!important}}