@property --focus{syntax:"<number>";inherits:true;initial-value:0}.ls-section{height:900svh;position:relative}.ls-section:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.25;background-image:radial-gradient(hsl(var(--primary)),#0000),url(https://raw.githubusercontent.com/cbolson/assets/refs/heads/main/codepen/star-trek/space.webp);background-size:cover;background-attachment:fixed}.ls-names{position:fixed;inset:0;margin:auto;width:100vw;display:grid;place-content:center;pointer-events:none;z-index:0}.ls-names h2{grid-area:1/1;text-align:center;font-family:Space Grotesk,sans-serif;font-size:clamp(3rem,15.5vw + .35rem,16rem);text-transform:uppercase;font-style:italic;font-weight:900;margin:0;letter-spacing:-.03em;transition:opacity .15s ease,transform .15s ease}@supports (animation-timeline:scroll()){.ls-names h2{animation-name:ls-name-fade;animation-duration:1ms;animation-delay:.2ms;animation-timeline:scroll();animation-fill-mode:both;transition:none}}@keyframes ls-name-fade{0%,to{opacity:0}15%,75%{opacity:1;translate:0 -27vh}}.ls-wrapper{position:fixed;container-type:size;inset:0;margin:auto;width:min(80vw,900px);height:30vh;color:#fff;display:grid;place-content:center;z-index:1}.ls-wrapper:after{content:"";position:absolute;top:90cqh;left:50%;translate:-50% 0;background:linear-gradient(90deg,#0000,hsl(var(--primary)),#0000);height:1px;width:90vw;z-index:-1}.ls-char{grid-area:1/1;place-self:end;width:100%;display:grid;isolation:isolate;transition:scale .3s ease-in-out,translate .3s ease-in-out,z-index .3s ease-in-out,filter .5s ease-in-out;scale:calc(.4 + var(--focus) * .8);z-index:calc(1 + var(--focus) * 100);translate:var(--item-x) 0;filter:sepia(calc(1 - var(--focus))) blur(0) hue-rotate(0deg)}@supports (animation-timeline:scroll()){.ls-char{animation-name:ls-item-focus;animation-timeline:scroll();animation-fill-mode:both}}.ls-char img{width:100%;height:auto;-o-object-fit:cover;object-fit:cover}@keyframes ls-item-focus{0%{--focus:0}30%{--focus:1}70%{--focus:1}to{--focus:0}}.ls-data{position:absolute;inset:auto 5% 10%;transition:scale .15s ease-in-out;scale:var(--focus) 1;backface-visibility:hidden;border-radius:10px;border:1px solid hsl(var(--primary)/.5);background:hsl(var(--card)/.85);backdrop-filter:blur(12px) brightness(.5);padding:1rem;display:grid;gap:1rem 2rem;grid-template-columns:1fr 1fr;grid-template-areas:"title title" "info info" "notes notes";pointer-events:none}@container (width > 600px){.ls-data{inset:auto -15% 15%;grid-template-areas:"title title" "info notes" "info notes"}}.ls-data h3{grid-area:title;font-family:Space Grotesk,sans-serif;font-size:clamp(1rem,2.5vw + .045rem,1.2rem);line-height:1;margin:0;color:hsl(var(--foreground))}.ls-data-grid{grid-area:info;display:grid;grid-template-columns:.5fr 1fr;gap:.5rem}.ls-data-grid label,.ls-data-grid p{font-size:clamp(.7rem,1.25vw + .045rem,.85rem);line-height:1.3;margin:0}.ls-data-grid label{opacity:.7;color:hsl(var(--muted-foreground))}.ls-data-grid p{color:hsl(var(--foreground))}.ls-notes{grid-area:notes;place-self:center;text-wrap:pretty;font-size:clamp(.7rem,1.25vw + .045rem,.85rem);color:hsl(var(--muted-foreground));margin:0;line-height:1.5}.ls-mouse{position:fixed;bottom:4rem;left:50%;translate:-50% 0;rotate:180deg;display:block;width:50px;height:50px;opacity:1;color:hsl(var(--foreground)/.1);animation-name:ls-mouse-move;animation-duration:1.5s;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-iteration-count:infinite;z-index:5}@supports (animation-timeline:scroll()){.ls-mouse{animation-name:ls-mouse-fade,ls-mouse-move;animation-duration:1ms,1.5s;animation-timing-function:linear,ease-in-out;animation-fill-mode:forwards,both;animation-iteration-count:1,infinite;animation-timeline:scroll(),auto}}@keyframes ls-mouse-move{50%{translate:-25px 20px}}@keyframes ls-mouse-fade{75%{opacity:1}to{opacity:0}}