/* The light texture is rasterized once; only its position and opacity move. */
.motion-photo-light{inset:-20%;background:radial-gradient(ellipse at 50% 50%,#ffd17199 0,#ffb40033 22%,transparent 60%);translate:calc(var(--light-x,50%) - 50%) calc(var(--light-y,50%) - 50%)}
.motion-photo.motion-in-view>.motion-photo-light{will-change:translate,opacity}
.portrait-tilt{will-change:auto}
.field-active .portrait-tilt{will-change:transform}
/* Pausing a hidden scene keeps its position intact for the next visit. */
body[data-page-hidden=true] *,body[data-page-hidden=true] *::before,body[data-page-hidden=true] *::after{animation-play-state:paused!important}
.gx:not([data-visible=true]) .gx-map *,.gx:not([data-visible=true]) .gx-map *::before,.gx:not([data-visible=true]) .gx-map *::after{animation-play-state:paused!important}
@media(max-width:700px){
 .cyber .header:not(.case-header){height:auto;min-height:108px;gap:18px}
 .cyber .header:not(.case-header) nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 10px;flex:1;font-size:9px;line-height:1.5}
 .cyber .header:not(.case-header) nav a{display:flex;align-items:center;min-height:44px;padding:8px 0}
 .cyber .header:not(.case-header) .logo{flex:none}
 .cyber-title{min-width:0;width:100%}
 .hero-motion-actions button,.cyber-line [data-motion-toggle]{min-height:44px}
 .cyber .comparison nav a{min-height:38px;display:flex;align-items:center}
 .cyber .comparison{padding-block:0}
 .cyber .case-page-link,.cyber .hero-contact,.cyber .hero-demo-link{min-height:44px;align-content:center}
 .cyber #layer-range,.cyber .gx input[type=range]{min-height:44px;touch-action:pan-y}
 .cyber #contact-draft input:not([type=radio]),.cyber #contact-message{font-size:16px}
 .cyber #contact-draft input[type=text],.cyber #contact-draft input[type=email]{min-height:48px}
 .case-page .case-chapter-nav{backdrop-filter:none;background:#11110f}
 .case-object{box-shadow:0 18px 36px #0008}
 .case-plane{box-shadow:0 8px 16px #0006}
 .case-plane.is-active{box-shadow:0 0 20px #ffb40018,0 8px 16px #0006}
 .cyber-viewer .project-layer{box-shadow:0 4px 0 #42413d,0 6px 0 #131312,6px 16px 25px #0009}
 .cyber-viewer .project-layer.selected{box-shadow:0 4px 0 #6c6a64,0 6px 0 #131312,6px 16px 25px #000a,0 0 24px #ffb40012}
 .viewer-head>div:first-child{min-width:0;flex:1}
 .viewer-head h2{overflow-wrap:anywhere}
 .viewer-head #close-modal{flex:none;min-width:44px;justify-content:center}
 .case-motion-ready[data-motion-mode=full] .case-intro>*{animation-name:case-intro-mobile}
 @keyframes case-intro-mobile{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
}
@media(max-width:420px){.viewer-head #close-modal>span{display:none}.viewer-head #close-modal{width:44px}}
@media(max-width:360px){.cyber-title h1{font-size:24vw}.viewer-head h2{font-size:30px}}