*,*:after,*:before{box-sizing:border-box;transform-style:preserve-3d;touch-action:none}:root{--size: 20;--fighter-rotation-y: 4;--fighter-rotation-x: 0;--fighter--one: hsl(0 0% 60%);--fighter--two: hsl(0 0% 55%);--fighter--three: hsl(0 0% 50%);--fighter--four: hsl(0 0% 45%);--fighter--five: hsl(0 0% 40%);--fighter--six: hsl(0 0% 35%);--wing--one: hsl(10 80% 60%);--wing--two: hsl(10 80% 55%);--wing--three: hsl(10 80% 50%);--wing--four: hsl(10 80% 45%);--wing--five: hsl(10 80% 40%);--wing--six: hsl(10 80% 35%);--transition-speed: 1s}body{display:grid;place-items:center;min-height:100vh;overflow:hidden;font-family:Google Sans,sans-serif,system-ui;perspective:500vmin;background:#000}.scene{position:relative}.scene--fighter{z-index:2;transform:translateZ(200vmin) rotateX(calc(var(--fighter-rotation-y, 0) * 1deg)) rotateY(calc(var(--fighter-rotation-x, 0) * 1deg)) rotateX(90deg) scale(var(--fighter-scale, 1)) scaleZ(var(--fighter-scale, 1));transition:transform var(--transition-speed)}.scene--fighter{--fighter-width: 15;--fighter-height-ratio: 2.25;--fighter-body-depth: calc(var(--fighter-width) * .2);width:calc(var(--fighter-width) * 1vmin);aspect-ratio:1 / var(--fighter-height-ratio)}.fighter{width:100%;height:100%}.fighter__body{width:40%;position:absolute;left:50%;height:80%;top:0;translate:-50% 0;background:none;--depth: var(--fighter-body-depth)}.cuboid__side--no-filter{filter:none!important}.fighter__body .cuboid__side:nth-of-type(5){background:none}.fighter__body .cuboid__side:nth-of-type(1){display:none}.fighter__body .cuboid__side:nth-of-type(2),.fighter__body .cuboid__side:nth-of-type(4){background:none}.fighter__body .cuboid__side:nth-of-type(6){z-index:-1;background:#4d4d4d;clip-path:polygon(50% 0,100% 80%,0 80%)}.fighter__body .cuboid__side:nth-of-type(3){z-index:-1;background:transparent;--burner-translate: calc(((var(--fighter-width) * var(--fighter-height-ratio)) * .8) * .2vmin)}.fighter__body .cuboid__side:nth-of-type(3):after{content:"";position:absolute;inset:0;background:red;clip-path:polygon(50% 50%,100% 0%,0 0%);transform:translateZ(var(--burner-translate));animation:burn .5s infinite linear}.fighter__body .cuboid__side:nth-of-type(3):before{content:"";position:absolute;inset:0;background:#000;clip-path:polygon(50% 90%,100% 0%,0 0%);transform:translateZ(var(--burner-translate))}@keyframes burn{50%{background:orange}}.hood-rear{--hood-tilt: -12deg;position:absolute;height:20.1%;background:#d3d3d3;bottom:0%;width:71%}.hood-rear--right{transform-origin:0 0;left:50%;transform:rotateY(45deg) rotateX(var(--hood-tilt));clip-path:polygon(0 0,100% 0,26% 100%);background:gray}.hood-rear--left{transform-origin:100% 0%;right:50%;background:#404040;transform:rotateY(-45deg) rotateX(var(--hood-tilt));clip-path:polygon(0 0,100% 0,74% 100%)}.hood-front{--hood-tilt: 5.6deg;bottom:20%;position:absolute;height:81%;width:71%}.hood-front--left{right:50%;background:#737373;transform-origin:100% 100%;transform:rotateY(-45deg) rotateX(var(--hood-tilt));clip-path:polygon(0 100%,100% 100%,50% 0%)}.hood-front--right:after,.hood-front--left:after{content:"";height:10%;width:80%;bottom:5%;right:50%;translate:50% 0;background:url(/demos/assets/bear-2022--black.Cj_Y_8B0.png);background-size:contain;background-repeat:no-repeat;rotate:90deg;position:absolute}.hood-front--right:after{rotate:270deg}.hood-front--right{left:50%;background:#a6a6a6;transform-origin:0% 100%;transform:rotateY(45deg) rotateX(var(--hood-tilt));clip-path:polygon(0 100%,100% 100%,50% 0%)}.fighter__wing{position:absolute;transform:translateZ(calc(var(--fighter-body-depth) * -.5vmin));height:36%;width:55%;bottom:0%}.fighter__wing--right{left:70%}.fighter__wing--left{right:70%}.wing--top .cuboid__side:nth-of-type(4){display:none}.wing--top .cuboid__side:nth-of-type(5),.wing--top .cuboid__side:nth-of-type(6){background:transparent}.wing--top .cuboid__side:nth-of-type(1),.wing--top .cuboid__side:nth-of-type(3){background:transparent}.wing--top .cuboid__side:nth-of-type(1):after,.wing--top .cuboid__side:nth-of-type(3):after{width:265%;content:"";position:absolute;height:100%;background:var(--wing--two);right:0;transform:rotateY(68deg);transform-origin:100% 50%;clip-path:polygon(0 50%,100% 100%,100% 0)}.wing--top .cuboid__side:nth-of-type(1):after{transform:rotateY(-68deg)}.wing--top .cuboid__side:nth-of-type(5):after{content:"";position:absolute;inset:0;background:var(--wing--four);transform-origin:100% 50%;clip-path:polygon(100% 0,100% 100%,0 50%);transform:rotateY(-4deg)}.wing--top .cuboid__side:nth-of-type(6):after{content:"";position:absolute;inset:0;background:var(--wing--five);transform-origin:0% 50%;clip-path:polygon(0% 0,0% 100%,100% 50%);transform:rotateY(4deg)}.wing--top{--depth: .5;--color: var(--wing--six);position:absolute;left:0;height:150%;width:45%;transform-origin:0 50%;transform:translateY(-50%) rotate(-20deg) rotateY(-25deg) rotateX(20deg) rotateX(0) rotate(-0deg)}.fighter__wing--left .wing--top{left:100%;transform:translateY(-50%) rotateY(180deg) rotate(-20deg) rotateY(25deg) rotateX(-20deg)}.wing--bottom .cuboid__side:nth-of-type(1),.wing--bottom .cuboid__side:nth-of-type(2),.wing--bottom .cuboid__side:nth-of-type(3),.wing--bottom .cuboid__side:nth-of-type(5),.wing--bottom .cuboid__side:nth-of-type(6),.wing--bottom .cuboid__side:nth-of-type(4){background:transparent}.wing--bottom{width:135%;position:absolute;height:100%;transform:translateZ(-2vmin);--depth: calc(var(--fighter-body-depth) * 1.34);--color: hsl(0 100% 50% / .25)}.fighter__wing--right .wing--bottom{left:0}.fighter__wing--left .wing--bottom{right:0}.wing--bottom .wing__hood--top{position:absolute;top:0;width:100%;height:106%;background:var(--fighter--four);transform-origin:50% 0;transform:rotateX(-18deg)}.fighter__wing--right .wing--bottom .wing__hood--top{clip-path:polygon(0 0,40% 0,100% 100%);left:0}.fighter__wing--left .wing--bottom .wing__hood--top{clip-path:polygon(60% 0,100% 0,0% 100%);right:0}.blaster{position:absolute;height:80%;width:40%;bottom:0;transform-origin:50% 100%;transform:rotateX(30deg)}.fighter__wing--right .blaster{left:0;clip-path:polygon(0 100%,100% 100%,100% 0);background:radial-gradient(circle at 65% 50%,white,transparent),#0080ff}.fighter__wing--left .blaster{right:0;clip-path:polygon(0 100%,100% 100%,0 0);background:radial-gradient(circle at 35% 50%,white,transparent),#0080ff}.fighter__wing--right .wing--bottom .wing__hood--right{width:22%;height:120%;position:absolute;left:40%;transform-origin:0 0%;transform:rotateY(90deg) rotateX(28.5deg) rotate(-16deg)}.fighter__wing--left .wing--bottom .wing__hood--left{width:22%;height:120%;position:absolute;left:60%;transform-origin:0 0%;transform:rotateY(90deg) rotateX(-28.5deg) rotate(-16deg)}.fighter__wing--left .wing--bottom .wing__hood--left:after{background:var(--fighter--one);content:"";position:absolute;inset:0;transform-origin:0 50%;transform:rotateY(-18deg);clip-path:polygon(0 0,100% 14%,0 100%)}.fighter__wing--right .wing--bottom .wing__hood--left{width:26%;height:140%;position:absolute;left:0%;transform-origin:0 0%;transform:rotateY(90deg) rotateX(42.5deg) rotate(-13.5deg)}.fighter__wing--left .wing--bottom .wing__hood--right{width:26%;height:140%;position:absolute;left:100%;transform-origin:0% 0%;transform:rotateY(90deg) rotateX(-42.5deg) rotate(-13.5deg)}.fighter__wing--left .wing--bottom .wing__hood--right:after{content:"";position:absolute;inset:0;background:var(--fighter--two);transform-origin:0 50%;transform:rotateY(52deg);clip-path:polygon(0 0,0 100%,100% 28%)}.fighter__wing--right .wing--bottom .wing__hood--left:after{content:"";position:absolute;inset:0;background:var(--fighter--two);transform-origin:0 50%;transform:rotateY(-52deg);clip-path:polygon(0 0,0 100%,100% 28%)}.fighter__wing--right .wing--bottom .wing__hood--right:after{background:var(--fighter--one);content:"";position:absolute;inset:0;transform-origin:0 50%;transform:rotateY(18deg);clip-path:polygon(0 0,100% 14%,0 100%)}.cuboid{width:100%;height:100%;position:relative}.cuboid__side{background:var(--color);filter:brightness(var(--b, 1));position:absolute}.cuboid__side:nth-of-type(1){--b: 1.1;height:calc(var(--depth, 20) * 1vmin);width:100%;top:0;transform:translateY(-50%) rotateX(90deg)}.cuboid__side:nth-of-type(2){--b: .9;height:100%;width:calc(var(--depth, 20) * 1vmin);top:50%;right:0;transform:translate(50%,-50%) rotateY(90deg)}.cuboid__side:nth-of-type(3){--b: .5;width:100%;height:calc(var(--depth, 20) * 1vmin);bottom:0;transform:translateY(50%) rotateX(90deg)}.cuboid__side:nth-of-type(4){--b: 1;height:100%;width:calc(var(--depth, 20) * 1vmin);left:0;top:50%;transform:translate(-50%,-50%) rotateY(90deg)}.cuboid__side:nth-of-type(5){--b: .8;height:100%;width:100%;transform:translateZ(calc(var(--depth, 20) * .5vmin));top:0;left:0}.cuboid__side:nth-of-type(6){--b: 1.2;height:100%;width:100%;transform:translateZ(calc(var(--depth, 20) * -.5vmin)) rotateY(180deg);top:0;left:0}.scene--fighter-roll{height:100%;width:100%;transform:rotateY(0)}.scene--fighter-floater{height:100%;width:100%;animation:float 3s infinite ease-in-out}@keyframes float{50%{transform:translateZ(-2vmin)}}.hover-patch{transform:translateZ(200vmin);z-index:2}.hover-spots{width:200vw;height:200vh;position:fixed;display:grid;z-index:2;transform:translateZ(-500vmin);grid-template:repeat(3,1fr) / repeat(3,1fr)}:root{--fighter-x-rotation: 15;--fighter-y-rotation: 15;--fighter-x-translation: 120;--fighter-y-translation: 60}:root:has(.hover-patch:nth-of-type(1):hover),:root:has(.hover-patch:nth-of-type(4):hover),:root:has(.hover-patch:nth-of-type(7):hover){--fighter-rotation-x: calc(var(--fighter-x-rotation) * -1) !important}:root:has(.hover-patch:nth-of-type(1):hover),:root:has(.hover-patch:nth-of-type(2):hover),:root:has(.hover-patch:nth-of-type(3):hover){--fighter-rotation-y: var(--fighter-y-rotation) !important}:root:has(.hover-patch:nth-of-type(3):hover),:root:has(.hover-patch:nth-of-type(6):hover),:root:has(.hover-patch:nth-of-type(9):hover){--fighter-rotation-x: var(--fighter-x-rotation) !important}:root:has(.hover-patch:nth-of-type(7):hover),:root:has(.hover-patch:nth-of-type(8):hover),:root:has(.hover-patch:nth-of-type(9):hover){--fighter-rotation-y: calc(var(--fighter-y-rotation) * -1) !important}:root:has(.hover-patch:nth-of-type(1):hover) .scene--fighter-translate,:root:has(.hover-patch:nth-of-type(2):hover) .scene--fighter-translate,:root:has(.hover-patch:nth-of-type(3):hover) .scene--fighter-translate{--y: calc(var(--fighter-y-translation) * -1)}:root:has(.hover-patch:nth-of-type(1):hover) .scene--fighter-translate,:root:has(.hover-patch:nth-of-type(4):hover) .scene--fighter-translate,:root:has(.hover-patch:nth-of-type(7):hover) .scene--fighter-translate{--x: calc(var(--fighter-x-translation) * -1)}:root:has(.hover-patch:nth-of-type(3):hover) .scene--fighter-translate,:root:has(.hover-patch:nth-of-type(6):hover) .scene--fighter-translate,:root:has(.hover-patch:nth-of-type(9):hover) .scene--fighter-translate{--x: var(--fighter-x-translation)}:root:has(.hover-patch:nth-of-type(7):hover) .scene--fighter-translate,:root:has(.hover-patch:nth-of-type(8):hover) .scene--fighter-translate,:root:has(.hover-patch:nth-of-type(9):hover) .scene--fighter-translate{--y: var(--fighter-y-translation)}.scene--fighter-translate{translate:calc(var(--x, 0) * 1%) calc(var(--y, 0) * 1%);transition:translate var(--transition-speed)}.blaster-bay{perspective:100vmin;width:100%;height:0%;top:64%;position:absolute;transform:translateZ(calc((var(--fighter-body-depth) + (var(--fighter-body-depth) * 1.34) * .75) * -.5vmin)) rotateX(0)}.blaster-shell{width:90%;aspect-ratio:1 / 1;transform:translate(-50%,-100%);position:absolute;background:radial-gradient(circle at 50% 50%,white,transparent),#9cf;top:0;left:50%;clip-path:polygon(0 30%,50% 0,100% 30%,50% 100%)}.scene--fighter-intro{height:100%;width:100%;transform:rotate(-130deg) rotateX(6deg) rotateY(-8deg) scale(.75) scaleZ(.75) translateY(40vw);transition:transform 1s}.dialog{position:fixed;top:50%;left:50%;translate:-50% -50%;transition:transform 1s;color:#fff;font-family:monospace;font-weight:700;font-size:2rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:root:has(#start:checked) .dialog{transform:translateY(100vh)}@keyframes ready{0%,to{transform:rotate(-100deg) rotateX(6deg) rotateY(-8deg) scale(.5) scaleZ(.5) translateY(0)}25%{transform:rotate(-100deg) rotateX(6deg) rotateY(-18deg) scale(.5) scaleZ(.5) translateY(0)}50%{transform:rotate(-100deg) rotateX(6deg) rotateY(8deg) scale(.75) scaleZ(.75) translateY(0)}75%{transform:rotate(-90deg) rotateX(4deg) rotateY(-18deg) scale(.5) scaleZ(.5) translateY(0)}}@keyframes deploy{0%,40%{transform:rotate(-100deg) rotateX(6deg) rotateY(80deg) scale(1.5) scaleZ(1.5) translateY(0) translate(-100%)}10%{transform:rotate(-100deg) rotateX(6deg) rotateY(80deg) scale(1.5) scaleZ(1.5) translateY(5%) translate(-100%)}30%{transform:rotate(-100deg) rotateX(8deg) rotateY(80deg) scale(1.75) scaleZ(1.75) translateY(-10%) translate(-100%)}85%{transform:rotate(0) rotateX(0) rotateY(0) scale(.25) scaleZ(.25) translateY(0) translate(0)}to{transform:rotate(0) rotateX(0) rotateY(0) scale(1) scaleZ(1) translateY(0) translate(0)}}.curtain{width:200vw;height:100vh;background:linear-gradient(90deg,black 75%,transparent);position:fixed;translate:-100% 0}.road{position:absolute;left:55%;width:2%;height:100%;background:#666;border-left:.5vmin solid hsl(0 0% 70%);border-right:.5vmin solid hsl(0 0% 70%);-webkit-mask:linear-gradient(transparent 0 1vmin,white 15vmin);mask:linear-gradient(transparent 0 1vmin,white 15vmin)}:root:has(#start:checked) .scene--fighter-intro{transform:rotate(-100deg) rotateX(6deg) rotateY(-8deg) scale(.5) scaleZ(.5) translateY(0);animation:ready 2s 1s,deploy 7s 4s forwards}:root:has(#start:checked) .curtain{animation:close 2s 3s forwards}:root:has(#start:checked) .screen{animation:unveil 2s 4s forwards}@keyframes close{0%{translate:-100% 0}50%{translate:0 0}to{translate:100% 0}}.screen{position:fixed;inset:0;display:grid;place-items:center;background:#0a000f}@keyframes unveil{0%{clip-path:inset(0 0 0 0);background:#0a000f}25%{background:#1980e6;clip-path:inset(100% 100% 100% 100%)}to{background:#1980e6;clip-path:inset(0 0 0 0)}}.hover-spots{scale:0}:root:has(#start:checked) .hover-spots{animation:enable-actions .25s 11s forwards}@keyframes enable-actions{to{scale:1}}.scene--ground{position:fixed;inset:0;perspective:100vmin;transform:translateZ(200vmin) translateY(400%);z-index:-1}.ground-wrap{height:100%;width:100%;transform:translateY(var(--mountain-drop, 0));transition:transform var(--transition-speed)}:root:has(#start:checked) .scene--ground{animation:descend calc(7s * .35) calc(4s + (.35 * 7s)) forwards}@keyframes descend{to{transform:translateZ(200vmin) translateY(0)}}.ground{height:200%;width:200vw;position:absolute;left:50%;top:55%;translate:-50% 0;transform-origin:50% 0%;transform:translateZ(-10vmin) rotateX(70deg) rotateY(var(--mountain-rotate, 0deg));transition:transform var(--transition-speed)}:root:has(.hover-patch:nth-of-type(3):hover),:root:has(.hover-patch:nth-of-type(6):hover),:root:has(.hover-patch:nth-of-type(9):hover){--mountain-rotate: 8deg}:root:has(.hover-patch:nth-of-type(1):hover),:root:has(.hover-patch:nth-of-type(4):hover),:root:has(.hover-patch:nth-of-type(7):hover){--mountain-rotate: -8deg}:root:has(.hover-patch:nth-of-type(7):hover),:root:has(.hover-patch:nth-of-type(8):hover),:root:has(.hover-patch:nth-of-type(9):hover){--mountain-drop: -15%}:root:has(.hover-patch:nth-of-type(1):hover),:root:has(.hover-patch:nth-of-type(2):hover),:root:has(.hover-patch:nth-of-type(3):hover){--mountain-drop: 15%}.ground:before{content:"";position:absolute;top:0;left:0;height:200%;width:100%;background:linear-gradient(180deg,hsl(0 0% 100% / .25) 0 5%,transparent 20%),repeating-linear-gradient(0deg,#28624b 0 5%,#154733 10%);transform-origin:50% 0;transform:scaleY(.45)}.ground:after{content:"";position:absolute;inset:0;background:linear-gradient(#ffffffa6 0,#ffffff40 10vmin,#000)}:root:has(#start:checked) .ground:before{animation:grow 1.05s 9.95s forwards}.light-container,.buildings{width:100%;height:100%;opacity:0;position:absolute;inset:0}.buildings{opacity:1}:root:has(#start:checked) .light-container{animation:turn-on 1.05s 9.95s forwards}@keyframes turn-on{to{opacity:1}}@keyframes grow{to{transform:scaleY(.25)}}.mountains{position:absolute;height:75%;width:100%;top:0;left:0;background:linear-gradient(#a3ccf5,#1980e6);transform-origin:50% 0;transform:rotateX(80deg)}.mountains:after{content:"";position:absolute;top:0;left:0;width:100%;height:3%;translate:0 -40%;background:linear-gradient(transparent,hsl(0 0% 100% / .5),transparent)}.mountains img{position:absolute;top:0;width:100%;rotate:180deg;left:50%;translate:-50% 0;opacity:.35;-o-object-fit:cover;object-fit:cover}.lights{position:absolute;width:1vmin;height:100%;left:var(--x, 50%);top:0;background:repeating-linear-gradient(0deg,hsl(0 0% 100% / .5) 0 1vmin,transparent 1vmin 20vmin) 50% 0% / 100% 200%;animation:scale 20s infinite linear}.lights--two{--x: 30%}.lights--three{--x: 40%}.lights--four{--x: 60%}.lights--five{--x: 70%}@keyframes scale{to{background-position:50% -200%}}.buildings{--travel-speed: 6s}.building--one{--delay: 5s;--depth: 20;--color: gray;width:4vmin;aspect-ratio:1;left:61%;transform:translateZ(10vmin)}.building--two{--delay: 2s;--depth: 20;--color: hsl(240 100% 50%);width:4vmin;left:41%;aspect-ratio:1}.building--three{--delay: 8s;--depth: 4;--color: darkorchid;width:10vmin;left:50%;aspect-ratio:3 / 2;transform:translateZ(2vmin)}.building--four{--delay: 0s;--depth: 12;--color: orange;width:8vmin;left:45%;aspect-ratio:3 / 6;transform:translateZ(6vmin)}.building{top:0;position:absolute}:root:has(#start:checked) .building{animation:pass-by var(--travel-speed) var(--delay, 5s) infinite linear}.building .cuboid__side{opacity:0;background:transparent}:root:has(#start:checked) .building .cuboid__side{animation:turn-on 1.05s 9.95s both}[for=start]{text-transform:uppercase;cursor:pointer}[for=start]:hover{color:orange}.dialog{display:grid;gap:1rem;place-items:center}.dialog img{height:10vh}.building .cuboid__side:after{content:"";position:absolute;inset:0;opacity:0;height:100%;width:100%;background:var(--color)}:root:has(#start:checked) .building .cuboid__side:after{animation:build var(--travel-speed) var(--delay, 5s) infinite linear both}.debugger{top:1rem;left:50%;z-index:99999;color:#fff;font-weight:700;font-family:monospace;display:flex;align-items:center;gap:1rem;font-size:1.5rem;font-variant:small-caps}@keyframes build{0%{opacity:0}10%,to{opacity:1}}@keyframes pass-by{to{translate:0 calc(100cqh + 100%)}}:root:has(#start:checked) .instruction{animation:show 1s 12s both steps(1)}@keyframes show{to{opacity:1}}.instruction{opacity:0;position:fixed;bottom:1rem;left:50%;translate:-50% 0;color:#fff;font-family:monospace;font-size:2rem;font-weight:700;display:flex;align-items:center;gap:1rem;z-index:99999}.avatar{height:8vmin;aspect-ratio:1;background:#306;border-radius:.5vmin;overflow:hidden;border:.35vmin solid hsl(0 0% 90%)}.avatar img{width:120%;position:absolute;left:50%;translate:-50% 10%}p{width:20ch;line-height:1;font-variant:small-caps;margin:0}:root:has(#debug:checked) .hover-patch{border:1vmin dashed orange}div.tp-dfwv{z-index:9999}div.tp-dfwv .tp-rotv{max-height:calc(100vh - 16px);overflow:auto;border-radius:var(--bs-br)}div.tp-dfwv .tp-rotv>.tp-rotv_b{position:sticky;top:0;z-index:2;background:#45474c}