/* Cinematic motion layer. Overlays the existing design: every resting state matches the static site,
   motion only plays on entrance and hover. Hidden-until-revealed styles apply only under .motion-ready,
   which motion.js sets when JavaScript runs and reduced motion is off. */
:root{--ease-premium:cubic-bezier(0.16,1,0.3,1);--motion:all 0.7s cubic-bezier(0.16,1,0.3,1);--neon:117 66 255;--neon-alt:23 93 244;--neon-warm:255 181 27;--glow-shadow:0 0 0 1px rgb(var(--neon) / .28),0 24px 48px -22px rgb(var(--neon) / .55),0 0 38px -6px rgb(var(--neon-alt) / .35)}
:root[data-theme=dark]{--neon:176 136 255;--neon-alt:98 160 255;--glow-shadow:0 0 0 1px rgb(var(--neon) / .4),0 24px 48px -20px rgb(var(--neon) / .5),0 0 44px -4px rgb(var(--neon-alt) / .32)}

/* Scroll progress: a thin brand-bar that fills as the page is read. */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;background:var(--brand-bar);transform-origin:0 50%;transform:scaleX(var(--progress,0));pointer-events:none;box-shadow:0 0 12px rgb(var(--neon) / .55)}

/* Entrance: header settles in when arriving from another site (motion.js sets .motion-intro). */
@keyframes header-in{from{opacity:0;transform:translate3d(0,-18px,0)}to{opacity:1;transform:none}}
.motion-intro .site-header{animation:header-in .9s var(--ease-premium) both}

/* Staggered reveals. Tier 0 headings, tier 1 copy, tier 2 cards; motion.js sets --reveal-delay per batch. */
.motion-ready .reveal{transition:var(--motion);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .reveal:not(.is-revealed){opacity:0;transform:translate3d(0,28px,0)}
.motion-ready .reveal-t2:not(.is-revealed){transform:translate3d(0,44px,0) scale(.97);filter:blur(8px)}
.motion-ready .principles>.reveal-t2:not(.is-revealed){transform:translate3d(-16px,0,0);filter:none}
.motion-ready .hero-visual.reveal:not(.is-revealed){transform:translate3d(0,36px,0) scale(.94)}

/* Headings glide up line by line from behind a mask; the padding/margin pair keeps glyphs unclipped without shifting layout. */
motion-line{display:block;overflow:hidden;padding:0 .14em .14em 0;margin:0 -.14em -.14em 0}
motion-glide{display:inline-block;transition:var(--motion);transition-delay:calc(var(--reveal-delay,0ms) + var(--line,0) * 110ms)}
.motion-ready .reveal-lines:not(.is-revealed){opacity:1;transform:none;filter:none}
.motion-ready .reveal-lines:not(.is-revealed) motion-glide{opacity:0;transform:translate3d(0,110%,0) rotate(2.5deg)}
.governance h2 motion-glide>span{color:#cdb4ed}

/* Live status dot pulse in the hero eyebrow. */
@keyframes status-pulse{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(3.2)}}
.status-dot{position:relative}.status-dot:after{content:'';position:absolute;inset:0;border-radius:inherit;background:inherit;animation:status-pulse 2.4s var(--ease-premium) infinite}
.motion-stopped .status-dot:after{animation-play-state:paused}

/* Luminous cards: lift, 1.02x scale, neon glow, and a cursor-tracked spotlight (--mx/--my from motion.js). */
.service-card,.showcase-products,.product-portal,.hero-visual,.contact-card,.lab-contact,.product-card,.control-stack>div,.process-grid>li{position:relative;isolation:isolate;transition:var(--motion)}
.service-card:after,.showcase-products:after,.product-portal:after,.hero-visual:after,.contact-card:after,.lab-contact:after,.product-card:after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgb(var(--neon) / .13),transparent 62%);transition:var(--motion)}
.service-card:hover:after,.showcase-products:hover:after,.product-portal:hover:after,.hero-visual:hover:after,.contact-card:hover:after,.lab-contact:hover:after,.product-card:hover:after{opacity:1}
.service-card:nth-child(1){--neon:23 93 244}.service-card:nth-child(3){--neon:236 160 22}
[data-theme=dark] .service-card:nth-child(1){--neon:98 160 255}[data-theme=dark] .service-card:nth-child(3){--neon:255 196 80}
.service-card:hover,.showcase-products:hover,.product-portal:hover,.product-card:hover{transform:translate3d(0,-6px,0) scale(1.02);border-color:var(--accent-text);box-shadow:var(--glow-shadow)}
.service-card:hover{border-color:rgb(var(--neon) / .6)}.product-card:hover{border-color:color-mix(in srgb,var(--product-accent) 60%,transparent)}
.product-mark span{transition:var(--motion)}.product-card:hover .product-mark span{text-shadow:0 0 22px color-mix(in srgb,var(--product-accent) 70%,transparent)}
.service-card .service-icon{transition:var(--motion)}.service-card:hover .service-icon{transform:translate3d(0,-3px,0) scale(1.08);box-shadow:0 0 24px -4px rgb(var(--neon) / .55)}
/* Large panels lift and glow without scaling, so they never crowd their neighbours. */
.hero-visual:hover{box-shadow:8px 8px 0 var(--soft),9px 9px 0 var(--line),0 0 56px -10px rgb(var(--neon) / .5);border-color:rgb(var(--neon) / .55)}
.contact-card:hover,.lab-contact:hover{transform:translate3d(0,-4px,0);box-shadow:var(--glow-shadow)}
/* Server units keep their own pull-out motion and timing from rack.css; this only adds an accent glow and a brighter LED. */
.server-unit:hover,.server-unit:focus-visible,.server-unit.selected{box-shadow:inset 0 1px #89b0d2,6px 10px 0 #030812,0 0 28px -6px color-mix(in srgb,var(--unit-accent) 75%,transparent)}
.unit-led{transition:box-shadow .22s}.server-unit:hover .unit-led,.server-unit:focus-visible .unit-led,.server-unit.selected .unit-led{box-shadow:0 0 8px var(--unit-accent),0 0 18px 3px var(--unit-accent)}
/* Governance rows: a soft energy wash and a glowing step number. */
.control-stack>div:before{content:'';position:absolute;inset:0 -18px;z-index:-1;border-radius:10px;opacity:0;background:linear-gradient(90deg,rgb(var(--neon) / .16),transparent 75%);transition:var(--motion)}
.control-stack>div:hover:before{opacity:1}.control-stack>div>div{transition:var(--motion)}.control-stack>div:hover>div{transform:translate3d(8px,0,0)}
.control-number{transition:var(--motion)}.control-stack>div:hover .control-number{text-shadow:0 0 14px rgb(var(--neon-warm) / .9)}
/* Process steps: the top rule lights up with the brand bar. */
.process-grid>li:before{content:'';position:absolute;top:-2px;left:0;right:0;height:2px;background:var(--brand-bar);transform:scaleX(0);transform-origin:0 50%;box-shadow:0 0 14px rgb(var(--neon) / .6);transition:var(--motion)}
.process-grid>li:hover:before{transform:scaleX(1)}.process-grid>li:hover{transform:translate3d(0,-6px,0)}

/* Luminous buttons: lift, 1.02x scale, neon glow, and a light sheen sweep. */
.button,.theme-toggle,.motion-toggle,.robot-motion-toggle,.secondary-button,.filter-button,.product-entry,.product-entry-arrow{transition:var(--motion)}
.button{position:relative;isolation:isolate;overflow:hidden}
.button:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgb(255 255 255 / .26) 50%,transparent 70%);transform:translate3d(-120%,0,0);transition:var(--motion)}
.button:hover:before{transform:translate3d(120%,0,0)}
.button:hover{transform:translate3d(0,-3px,0) scale(1.02);box-shadow:0 12px 28px -10px rgb(var(--neon) / .75),0 0 24px -2px rgb(var(--neon-alt) / .45),inset 0 0 0 1px rgb(255 255 255 / .16)}
.button-light:hover{box-shadow:0 12px 28px -10px rgb(255 255 255 / .45),0 0 30px -2px rgb(var(--neon) / .7)}
.button:active{transform:translate3d(0,0,0) scale(.99);transition-duration:.15s}
.theme-toggle:hover,.motion-toggle:hover:not(:disabled),.robot-motion-toggle:hover,.secondary-button:hover,.filter-button:hover{transform:translate3d(0,-2px,0) scale(1.02);box-shadow:0 0 0 1px rgb(var(--neon) / .25),0 8px 22px -10px rgb(var(--neon) / .6)}
/* Header product entry keeps its pressed-key shadow and gains the glow. */
.product-entry:hover{transform:translate3d(0,-2px,0) scale(1.02);box-shadow:0 5px 0 #2c0b60,0 0 26px -2px rgb(var(--neon) / .7)}
.product-entry:active{transform:translateY(1px);box-shadow:0 1px 0 #2c0b60;transition-duration:.15s}
/* Form fields glow softly while focused; the focus outline stays as it was. */
input,select,textarea{transition:var(--motion)}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:rgb(var(--neon) / .6);box-shadow:0 0 0 4px rgb(var(--neon) / .12),0 0 24px -6px rgb(var(--neon) / .6)}

/* Arrow micro-interactions and nav underlines. */
.button>span[aria-hidden],.text-link>span[aria-hidden],.showcase-arrow,.portal-arrow,.control-stack>div>span:last-child{display:inline-block;transition:var(--motion)}
.button:hover>span[aria-hidden],.text-link:hover>span[aria-hidden],.showcase-products:hover .showcase-arrow,.product-portal:hover .portal-arrow,.control-stack>div:hover>span:last-child{transform:translate3d(3px,-3px,0)}
.hero .actions .text-link:hover>span[aria-hidden]{transform:translate3d(0,4px,0)}
.text-link,.site-header nav>a{transition:var(--motion)}
@media(min-width:801px){.site-header nav>a:not(.button){position:relative}.site-header nav>a:not(.button):after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--brand-bar);transform:scaleX(0);transform-origin:0 50%;transition:var(--motion)}.site-header nav>a:not(.button):hover:after{transform:scaleX(1)}}

/* Dialog: scale in from the robot's call to action. */
@keyframes dialog-in{from{opacity:0;transform:translate3d(0,24px,0) scale(.96)}to{opacity:1;transform:none}}
@keyframes backdrop-in{from{opacity:0}}
dialog[open]{animation:dialog-in .7s var(--ease-premium)}dialog[open]::backdrop{animation:backdrop-in .7s var(--ease-premium)}

/* Touch screens never get sticky hover transforms. */
@media(hover:none){.service-card:hover,.showcase-products:hover,.product-portal:hover,.product-card:hover,.contact-card:hover,.lab-contact:hover,.secondary-button:hover,.filter-button:hover,.product-entry:hover,.control-stack>div:hover>div,.process-grid>li:hover,.button:hover,.theme-toggle:hover,.motion-toggle:hover,.robot-motion-toggle:hover{transform:none}}

/* Reduced motion: no movement anywhere. Glow and colour feedback remain, since they convey state without motion. */
@media(prefers-reduced-motion:reduce){
.scroll-progress{display:none}
.motion-intro .site-header,.status-dot:after,dialog[open],dialog[open]::backdrop{animation:none}
.reveal,motion-glide{opacity:1!important;transform:none!important;filter:none!important}
.service-card:hover,.showcase-products:hover,.product-portal:hover,.product-card:hover,.contact-card:hover,.lab-contact:hover,.secondary-button:hover,.filter-button:hover,.product-entry:hover,.product-entry:active,.control-stack>div:hover>div,.process-grid>li:hover,.button:hover,.button:active,.theme-toggle:hover,.motion-toggle:hover,.robot-motion-toggle:hover,.service-card:hover .service-icon{transform:none}
.button:before{display:none}
.button:hover>span[aria-hidden],.text-link:hover>span[aria-hidden],.showcase-products:hover .showcase-arrow,.product-portal:hover .portal-arrow,.control-stack>div:hover>span:last-child{transform:none}
}
@media(forced-colors:active){.scroll-progress,.service-card:after,.showcase-products:after,.product-portal:after,.hero-visual:after,.contact-card:after,.lab-contact:after,.product-card:after,.control-stack>div:before,.button:before{display:none}}