.duo-intro{position:fixed;inset:0;z-index:1000;overflow:hidden;pointer-events:none;background:#080808;opacity:1;isolation:isolate;transition:opacity 1s cubic-bezier(.22,1,.36,1)}
.duo-intro.is-leaving{opacity:0}
.intro-depth,.intro-streaks{position:absolute;inset:0}
.intro-thumb{position:absolute;left:50%;top:50%;width:clamp(150px,20vw,300px);aspect-ratio:16/9;opacity:0;transform:translate(-50%,-50%) translate(var(--start-x),var(--start-y)) scale(var(--start-scale))}
.intro-thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:5px;filter:blur(var(--softness));box-shadow:0 12px 30px #1c242416}
.is-ready .intro-thumb{animation:intro-depth-flight 3.6s cubic-bezier(.4,0,.2,1) var(--delay) both}
.intro-wordmark{position:absolute;left:50%;top:50%;width:clamp(145px,17vw,240px);height:auto;transform:translate(-50%,-50%);filter:none;opacity:1;z-index:2}
.intro-streaks i{position:absolute;top:50%;left:50%;width:clamp(12px,2.5vw,40px);height:2px;background:#e7e7e2;filter:blur(1.5px);opacity:0;transform-origin:left center}
.is-ready .intro-streaks i{animation:intro-depth-streak 3.5s cubic-bezier(.4,0,.2,1) var(--delay) both}
@keyframes intro-depth-flight{0%{opacity:0;transform:translate(-50%,-50%) translate(var(--start-x),var(--start-y)) scale(var(--start-scale))}20%{opacity:.32}58%{opacity:.36;transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(var(--scale))}100%{opacity:0;transform:translate(-50%,-50%) translate(var(--end-x),var(--end-y)) scale(var(--end-scale))}}
@keyframes intro-depth-streak{0%{opacity:0;transform:rotate(var(--angle)) translateX(var(--distance)) scaleX(.4)}25%{opacity:.06}65%{opacity:.09}100%{opacity:0;transform:rotate(var(--angle)) translateX(calc(var(--distance) + 42vmin)) scaleX(1.8)}}
@media(max-width:600px){.intro-thumb{width:38vw}.intro-thumb:nth-child(n+9){display:none}.intro-wordmark{width:38vw;max-width:190px}}
@media(prefers-reduced-motion:reduce){.duo-intro{display:none}}