/* Lightweight geometric art: real page content is visible before motion starts. */
.hero{isolation:isolate}
.hero-copy,.hero-feature,.hero-foot{z-index:1}
.hero-copy,.hero-feature,.hero-foot{animation:none}
.hero-foot{position:relative;align-items:center;padding-block:19px;gap:20px}
.outline-word{-webkit-text-stroke:1.3px var(--ink)}
.hero h1{margin-bottom:30px}
.hero-scene{position:absolute;inset:-1px -56px 0;z-index:0;pointer-events:none;overflow:hidden;contain:layout paint}
.circuit-map{position:absolute;inset:0;width:100%;height:100%;opacity:.65}
.circuit-route{stroke:#00b8e9;stroke-width:1;opacity:.32}
.route-muted{opacity:.25}
.circuit-node{fill:var(--mint);opacity:.7}
.circuit-ticks{stroke:#8e8e8e;stroke-width:1;opacity:.36}
.horizon-grid{position:absolute;width:1050px;height:270px;left:26%;bottom:-106px;transform:perspective(420px) rotateX(56deg) rotateZ(-8deg);opacity:.18;mask-image:linear-gradient(transparent 2%,#000 50%,transparent 98%)}
.grid-plane{position:absolute;inset:-30px;background-image:linear-gradient(#00b8e975 1px,transparent 1px),linear-gradient(90deg,#00b8e975 1px,transparent 1px);background-size:58px 48px;transform:translateY(0);animation:grid-travel 12s linear infinite}
.orbital-frame{position:absolute;width:460px;height:460px;right:-45px;top:92px;border:1px solid #ffc44728;transform:rotate(28deg);animation:orbit-turn 64s linear infinite}
.orbital-frame span{position:absolute;inset:29px;border:1px solid #2dddb416;transform:rotate(24deg)}
.orbital-frame i{position:absolute;width:7px;height:7px;background:var(--yellow);top:-4px;left:80px;box-shadow:0 0 14px #2dddb45c}
.wire-cube{position:absolute;width:78px;height:88px;left:47%;top:53%;stroke:#00b8e955;stroke-width:1.2;transform:translate3d(0,0,0) rotate(-14deg);animation:cube-drift 10s ease-in-out infinite}
.wire-cube .cube-edge{stroke:var(--mint);opacity:.75}
.wire-triangle{position:absolute;width:52px;height:48px;left:47%;top:9%;stroke:var(--pink);stroke-width:1;opacity:.48;transform:rotate(22deg);animation:triangle-drift 14s ease-in-out infinite}
.speed-lane{position:absolute;width:300px;height:4px;overflow:hidden;transform:rotate(-35deg)}
.speed-lane i{position:absolute;top:1px;left:0;width:95px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),var(--cyan));animation:line-travel 7s cubic-bezier(.5,0,.2,1) infinite}
.speed-lane i:after{content:'';position:absolute;right:0;top:-1px;width:3px;height:3px;background:var(--cyan)}
.speed-lane-one{top:70%;left:30%}
.speed-lane-two{top:15%;right:4%;width:230px;transform:rotate(0)}
.speed-lane-two i{animation-delay:-3.5s;animation-duration:9s;background:linear-gradient(90deg,transparent,var(--pink))}
.speed-lane-two i:after{background:var(--pink)}
.scene-coordinates{position:absolute;inset:auto 3% 20% auto;display:flex;flex-direction:column;gap:10px;font:500 7px/1.5 var(--font);letter-spacing:.14em;color:#777;transform:rotate(90deg);transform-origin:right center;opacity:.65}
.hero-image-wrap{border-color:#9a9a9a55;box-shadow:0 18px 70px #0008}
.hero-image-wrap:after{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--cyan) 25%,var(--pink) 25% 50%,var(--yellow) 50% 75%,var(--mint) 75%);pointer-events:none}
.image-corner{border-color:var(--cyan)}
.image-corner.bottom-right{border-color:var(--mint)}
.hero-feature{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.hero-feature:hover{transform:rotate(0deg) translateY(-5px)}
.feature-topline{letter-spacing:.14em}
.hero-note{font-size:9px}
.button{position:relative;overflow:hidden;transition:background .2s,transform .2s}
.button-primary{box-shadow:inset 0 1px 0 #ffffff35;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.button-primary:after{content:'';position:absolute;inset:-20px auto -20px -55px;width:25px;background:#ffffff38;transform:translateX(0) skewX(-25deg);opacity:0;pointer-events:none;transition:transform .55s,opacity .15s}
.button-primary:hover:after{transform:translateX(340px) skewX(-25deg);opacity:1}
.button-primary:hover{box-shadow:inset 0 1px 0 #ffffff35}
.motion-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 12px;background:transparent;border:1px solid #292929;color:#aaa;font:500 9px/1 var(--font);letter-spacing:.06em;cursor:pointer}
.motion-toggle[hidden]{display:inline-flex;visibility:hidden}
.motion-toggle:disabled{cursor:default;opacity:.65}
.motion-toggle:hover{color:var(--ink);border-color:#515151}
.motion-toggle .motion-glyph{font-size:12px;color:var(--accent);width:10px;text-align:center}
.statement-strip{background:#090909;border-color:#252525;position:relative}
.statement-strip:before{content:'';position:absolute;left:0;top:0;width:100%;height:1px;background:linear-gradient(90deg,var(--cyan) 25%,var(--pink) 25% 50%,var(--yellow) 50% 75%,var(--mint) 75%);opacity:.55}
.studio-section{position:relative;overflow:hidden;background:#0a0a0a}
.studio-mark:before{content:'';position:absolute;width:300px;height:300px;inset:0 auto auto 45px;border:1px solid #ffc44722;transform:rotate(28deg);z-index:-1;animation:studio-orbit 55s linear infinite}
.studio-mark:after{content:'';position:absolute;left:0;right:0;bottom:20px;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.community-banner{--accent:var(--mint);--accent-hover:#74efd0;background:#0c0c0c;color:var(--ink);border:1px solid #343434;padding-block:50px;isolation:isolate}
.community-banner:before{content:'';position:absolute;left:-1px;top:30px;bottom:30px;width:2px;background:linear-gradient(var(--cyan) 25%,var(--pink) 25% 50%,var(--yellow) 50% 75%,var(--mint) 75%);opacity:.9}
.community-banner:after{content:'';width:240px;height:240px;border:1px solid #00b8e933;right:28%;top:-12px;transform:rotate(32deg);z-index:-1;animation:banner-orbit 45s linear infinite}
.community-banner .eyebrow{color:var(--accent)}
.community-banner p:not(.eyebrow){color:var(--muted)}
.community-banner .button-dark{background:var(--accent);color:#050505;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.community-banner .button-dark:hover{background:var(--accent-hover)}
.game-gallery{background:#0b0b0b}
.gallery-arrow{width:44px;height:44px;top:calc(50% - 22px)}
.gallery-indicators button{height:44px;width:36px;padding:18px 5px}
.gallery-indicators button:after{width:26px}
.gallery-indicators{bottom:13px}
.gallery-counter{bottom:29px}
.game-description>p:not(.eyebrow){font-size:14px}
.game-tags span{border-color:#353535}
.upcoming-game{background:#101110;border-color:#303330}
.contact-scribble{color:var(--accent)}
[data-motion-zone] .grid-plane,[data-motion-zone] .orbital-frame,[data-motion-zone] .wire-cube,[data-motion-zone] .wire-triangle,[data-motion-zone] .speed-lane i,.studio-mark:before,.community-banner:after{animation-play-state:paused}
[data-motion-zone].motion-running .grid-plane,[data-motion-zone].motion-running .orbital-frame,[data-motion-zone].motion-running .wire-cube,[data-motion-zone].motion-running .wire-triangle,[data-motion-zone].motion-running .speed-lane i,.studio-mark.motion-running:before,.community-banner.motion-running:after{animation-play-state:running}
@keyframes grid-travel{to{transform:translateY(48px)}}
@keyframes orbit-turn{from{transform:rotate(28deg)}to{transform:rotate(388deg)}}
@keyframes cube-drift{0%,100%{transform:translate3d(0,0,0) rotate(-14deg)}50%{transform:translate3d(-7px,-18px,0) rotate(8deg)}}
@keyframes triangle-drift{0%,100%{transform:translate3d(0,0,0) rotate(22deg)}50%{transform:translate3d(12px,9px,0) rotate(60deg)}}
@keyframes line-travel{0%{transform:translateX(-100px);opacity:0}12%{opacity:.9}70%,100%{transform:translateX(320px);opacity:0}}
@keyframes studio-orbit{from{transform:rotate(28deg)}to{transform:rotate(388deg)}}
@keyframes banner-orbit{from{transform:rotate(32deg)}to{transform:rotate(392deg)}}
@media(max-width:1150px){.hero-scene{inset:-1px -36px 0}.wire-cube{left:46%;width:60px;height:68px;top:59%}.horizon-grid{left:16%;opacity:.12}.orbital-frame{right:-60px;width:370px;height:370px}.hero-description{font-size:14px}.scene-coordinates{display:none}.hero-foot{font-size:7px}}
@media(max-width:850px){.hero-foot{gap:15px}.hero-foot>span{max-width:190px}.hero-foot a{gap:12px}.wire-cube{left:44%;top:70%}.wire-triangle{left:43%;top:7%;width:36px}.orbital-frame{width:320px;height:320px}.hero-description{font-size:13px}.community-banner{padding-block:36px}.community-banner:after{right:24%;width:200px;height:200px}.studio-mark:before{width:240px;height:240px}.motion-toggle{font-size:8px;padding-inline:9px}}
@media(max-width:600px){
  .hero-scene{inset:-1px -20px 0;contain:strict}
  .hero-copy{padding-top:0}
  .hero-description{font-size:14px}
  .hero h1{margin-bottom:24px}
  .circuit-map{opacity:.45}
  .circuit-route{opacity:.33}
  .orbital-frame,.horizon-grid,.wire-triangle,.speed-lane-two,.scene-coordinates{display:none}
  .wire-cube{width:48px;height:54px;left:auto;right:28px;top:128px;opacity:.58;animation-duration:14s}
  .speed-lane-one{top:47%;left:15%;width:220px;transform:rotate(-15deg)}
  .speed-lane-one i{animation-duration:11s}
  .hero-feature{margin-top:5px}
  .hero-image-wrap{box-shadow:none}
  .hero-foot{gap:8px;flex-wrap:wrap;padding:7px 0 20px;justify-content:space-between;font-size:6px}
  .hero-foot>span{max-width:140px}
  .hero-foot .motion-toggle{order:3;width:100%;justify-content:center;min-height:44px;border-color:#202020;font-size:9px}
  .studio-mark:before{width:215px;height:215px;left:5px;top:9px;animation:none}
  .studio-mark:after{bottom:0}
  .community-banner{padding:31px 25px}
  .community-banner:after{right:-55px;top:50px;width:180px;height:180px;animation:none;opacity:.6}
  .gallery-prev{left:8px}.gallery-next{right:8px}
  .gallery-indicators{bottom:5px;left:12px}.gallery-counter{bottom:21px}
  .gallery-arrow{backdrop-filter:none;background:#080808ca}
  dialog::backdrop{backdrop-filter:none;background:#000d}
  .button-primary:hover:after{opacity:0}
}
@media(max-width:360px){.wire-cube{right:21px;top:126px;width:38px;height:44px}.hero-foot>span{max-width:120px}}
@media(prefers-reduced-motion:reduce){[data-motion-zone] *,[data-motion-zone]:before,[data-motion-zone]:after{animation:none!important}.hero-feature,.hero-feature:hover{transform:none}.motion-toggle .motion-glyph{color:#aaa}}