/* Decorative engineering motion; no simulated metrics or live-status claims. */
.technical-circuit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transform: translateZ(-24px); color: #98c9eb; }
.technical-wire { stroke: #87b6d4; stroke-width: 1; stroke-opacity: .19; vector-effect: non-scaling-stroke; transition: stroke .4s,stroke-opacity .4s; }
.technical-packet { stroke: #bce7ff; stroke-width: 2; stroke-dasharray: 4 96; stroke-linecap: round; stroke-opacity: .28; vector-effect: non-scaling-stroke; animation: technical-transfer 6s linear infinite; animation-delay: var(--packet-delay,0s); }
.technical-channel.is-active .technical-wire { stroke: #ffb47b; stroke-opacity: .65; }
.technical-channel.is-active .technical-packet { stroke: #ffe0b4; stroke-opacity: 1; stroke-width: 2.5; }
.technical-junctions { opacity: .45; stroke-width: 1; }
.technical-waveform { display: inline-flex; align-items: center; gap: 3px; height: 17px; margin-right: 9px; vertical-align: middle; }
.technical-waveform i { width: 2px; height: 12px; background: #ffac75; border-radius: 1px; transform: scaleY(.4); animation: technical-wave 2.8s ease-in-out infinite; }
.technical-waveform i:nth-child(2) { height: 17px; animation-delay: -.4s; }.technical-waveform i:nth-child(3) { height: 10px; animation-delay: -1.4s; }.technical-waveform i:nth-child(4) { height: 15px; animation-delay: -.8s; }.technical-waveform i:nth-child(5) { height: 8px; animation-delay: -1.8s; }
.core-front { overflow: hidden; }
.core-front::after { content: ''; position: absolute; pointer-events: none; left: 8%; right: 8%; top: 12%; height: 1px; background: linear-gradient(90deg,transparent,#badfff,transparent); box-shadow: 0 -6px 12px #c1e7ff24; opacity: 0; animation: technical-core-scan 8s ease-in-out infinite; }
.service-icon { position: relative; overflow: hidden; }
.service-icon::after { content: ''; position: absolute; pointer-events: none; inset: 0; opacity: 0; background: linear-gradient(180deg,transparent 42%,#81c1ef29 48%,#e1f5ffb3 50%,transparent 53%); transform: translateY(-100%); }
.motion-ready .service-card:is(:hover,:focus-visible) .service-icon::after { animation: technical-icon-scan 2.8s ease-in-out infinite; }
.process-grid { position: relative; }
.process-grid::before { content: ''; position: absolute; pointer-events: none; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg,#b8cbdc,#dbe6ef); }
.process-grid::after { content: ''; position: absolute; pointer-events: none; left: 0; top: -1px; width: 10%; height: 3px; background: linear-gradient(90deg,transparent,#f4510b 70%,#ffbd80); border-radius: 2px; animation: technical-process 7s cubic-bezier(.4,0,.2,1) infinite; animation-play-state: paused; }
.subhero { overflow: hidden; isolation: isolate; }
.subhero>.container { position: relative; z-index: 1; }
.subhero::before { content: ''; position: absolute; pointer-events: none; width: 48%; right: -4%; top: -20%; bottom: -30%; background: linear-gradient(#87b6d417 1px,transparent 1px),linear-gradient(90deg,#87b6d417 1px,transparent 1px); background-size: 42px 42px; transform: perspective(700px) rotateY(-24deg) rotateZ(-8deg); mask-image: linear-gradient(90deg,transparent,#000); }
.subhero::after { content: ''; position: absolute; pointer-events: none; top: 0; bottom: 0; left: 48%; width: 12%; background: linear-gradient(90deg,transparent,#a4d4f509,#b8e4ff1a,#a4d4f505,transparent); transform: translateX(0) skewX(-12deg); animation: technical-grid-scan 12s ease-in-out infinite; animation-play-state: paused; }
.motion-ready .process-grid.technical-in-view::after,.motion-ready .subhero.technical-in-view::after { animation-play-state: running; }
@keyframes technical-transfer { to { stroke-dashoffset: -100; } }
@keyframes technical-wave { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes technical-core-scan { 0%,18% { transform: translateY(0); opacity: 0; } 28% { opacity: .75; } 64% { opacity: .6; } 80%,100% { transform: translateY(95px); opacity: 0; } }
@keyframes technical-icon-scan { 0% { transform: translateY(-100%); opacity: 0; } 25%,70% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
@keyframes technical-process { 0% { transform: translateX(0); opacity: 0; } 8%,90% { opacity: 1; } 100% { transform: translateX(900%); opacity: 0; } }
@keyframes technical-grid-scan { 0%,100% { transform: translateX(0) skewX(-12deg); opacity: 0; } 20%,80% { opacity: 1; } 90% { transform: translateX(350%) skewX(-12deg); opacity: 0; } }
/* Every decorative effect shares the same pause and visibility behavior. */
html:not(.motion-ready) .technical-packet,html:not(.motion-ready) .technical-waveform i,html:not(.motion-ready) .core-front::after,
html.motion-paused .technical-packet,html.motion-paused .technical-waveform i,html.motion-paused .core-front::after,html.motion-paused .service-icon::after,html.motion-paused .process-grid::after,html.motion-paused .subhero::after,
html.motion-hidden .technical-packet,html.motion-hidden .technical-waveform i,html.motion-hidden .core-front::after,html.motion-hidden .service-icon::after,html.motion-hidden .process-grid::after,html.motion-hidden .subhero::after,
html.scene-idle .core-front::after { animation-play-state: paused !important; }
@media(max-width:740px) { .process-grid::before,.process-grid::after { display: none; }.subhero::before { width: 65%; opacity: .55; }.technical-waveform { margin-right: 5px; gap: 2px; } }
@media(prefers-reduced-motion:reduce) { .technical-packet,.technical-waveform i,.core-front::after,.service-icon::after,.process-grid::after,.subhero::after { animation: none !important; }.technical-packet { stroke-dasharray: none; stroke-opacity: .2; }.core-front::after,.service-icon::after,.process-grid::after,.subhero::after { display: none; } }
@media print { .technical-circuit,.technical-waveform,.core-front::after,.service-icon::after,.process-grid::before,.process-grid::after,.subhero::before,.subhero::after { display: none; } }