/* Shallow extruded lettering, not a flat gradient title. The page stays warm and light. */
.hero{min-height:0;padding-top:clamp(104px,13vh,140px);padding-bottom:14px}
.hero .hero-unit{margin-bottom:18px}
.hero h1{margin-bottom:17px}
.hero .hero-cta{margin:28px 0 22px}
.hero+.compute-city,#compute-city #city-stage{transform-origin:50% 70%}
.hero[data-entrance="playing"]{overflow:visible}
.hero.hero-motion-ready h1{font-weight:450;line-height:1.105;color:#282c25;overflow:visible}
.hero h1 em.kinetic-word{position:relative;display:inline-block;isolation:isolate;white-space:nowrap;perspective:800px;background:none;-webkit-text-fill-color:currentColor;filter:none;animation:none;font-style:normal;--energy:0}
.kinetic-letter{position:relative;display:inline-block;transform-style:preserve-3d;will-change:transform;transform-origin:50% 53%}
.kinetic-solid{position:relative;display:inline-block;transform-style:preserve-3d;transform-origin:50% 53%;will-change:transform}
.kinetic-face{position:relative;display:inline-block;transform:translateZ(1px);color:#30362b;background:linear-gradient(174deg,#747c67 3%,#30362b 29%,#242a20 52%,#6f7960 55%,#313c24 61%,#3b452f 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.15px #3d4831;backface-visibility:visible}
.kinetic-depth{position:absolute;inset:0;color:#707b60;transform:translate3d(0,calc(var(--layer)*.16px),calc(var(--layer)*-.48px));-webkit-text-fill-color:#707b60;-webkit-text-stroke:.2px #78836a;pointer-events:none}
.kinetic-depth:nth-child(odd){color:#5e6c4d;-webkit-text-fill-color:#5e6c4d}
.kinetic-depth:first-child{text-shadow:0 2px 3px #31431d22}
.kinetic-light{position:absolute;inset:0;transform:translateZ(1.3px);pointer-events:none;background:linear-gradient(180deg,transparent 0%,transparent 40%,#c3eb5e22 44%,#d5ff76 47%,#edffb1 48%,#bfea4933 52%,transparent 57%);background-size:100% 360%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:idlet-type-light 4.2s linear infinite;animation-delay:var(--sweep-offset);opacity:calc(.56 + var(--energy)*.3);filter:drop-shadow(0 0 2px #c9f06866)}
.kinetic-word:after{content:"";position:absolute;left:4%;right:4%;bottom:.005em;height:1px;background:linear-gradient(90deg,transparent,#a1ad8b 35%,#c6e978 50%,transparent 64%);background-size:220% 100%;opacity:calc(.18 + var(--energy)*.3);animation:idlet-circuit-light 3.2s linear infinite;pointer-events:none}
.hero-useful-objects{position:absolute;inset:0;pointer-events:none}
.hero-useful-object{position:absolute;top:145px;width:52px;height:65px;padding:0;border:0;background:none;pointer-events:auto;cursor:pointer;transform:rotate(var(--object-angle));transition:translate .55s cubic-bezier(.2,.8,.2,1);animation:idlet-object-drift 6s ease-in-out infinite;animation-delay:var(--object-delay,0s)}
.hero-useful-object svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(2px 6px 4px #354c1b18);transition:filter .3s}
.hero-useful-object span{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,-3px);opacity:0;white-space:nowrap;font:10px var(--sans,Manrope,sans-serif);background:#fcfdf7f2;color:#778866;border:1px solid #dce5d0;border-radius:5px;padding:5px 8px;transition:opacity .25s,transform .3s;pointer-events:none}
.hero-useful-object:hover{translate:0 -5px}.hero-useful-object:hover svg{filter:drop-shadow(2px 9px 6px #354c1b27)}
.hero-useful-object:hover span,.hero-useful-object:focus-visible span{opacity:1;transform:translate(-50%,0)}
.hero-useful-object:focus-visible{outline:2px solid #8eaa60;outline-offset:6px;border-radius:6px}
.hero-useful-object.object-0{left:calc(50% - 207px);--object-angle:-14deg;--object-delay:-2s}
.hero-useful-object.object-1{left:calc(50% + 133px);top:151px;--object-angle:10deg;--object-delay:-4s}
.hero-useful-object.object-2{left:calc(50% + 280px);top:162px;width:45px;height:60px;--object-angle:17deg;--object-delay:-1s}
.hero-motion-paused .kinetic-light,.hero-motion-paused .kinetic-word:after,.hero-motion-paused .hero-useful-object{animation-play-state:paused}
@keyframes idlet-type-light{from{background-position:0 135%}to{background-position:0 -55%}}
@keyframes idlet-circuit-light{from{background-position:180% 0}to{background-position:-120% 0}}
@keyframes idlet-object-drift{0%,100%{transform:translateY(0) rotate(var(--object-angle))}50%{transform:translateY(-4px) rotate(calc(var(--object-angle) + 2deg))}}
@media(max-width:639px){.hero{padding-top:106px;padding-bottom:8px}.hero .hero-cta{margin:26px 0 20px}.hero-useful-object{width:42px;height:53px;top:145px}.hero-useful-object.object-0{left:calc(50% - 126px)}.hero-useful-object.object-1{left:calc(50% + 88px);top:151px}.hero-useful-object.object-2{display:none}.kinetic-depth:nth-child(-n+3){display:none}}
@media(prefers-reduced-motion:reduce){.kinetic-solid,.kinetic-letter{transform:none!important;will-change:auto}.kinetic-light,.kinetic-word:after,.hero-useful-object{animation:none!important}.kinetic-light{background-position:0 43%;opacity:.2}}
