/* Background motion is decorative, pausable, and independent of reading and controls. */
main { position:relative; isolation:isolate; }
.ambient-scene { position:absolute; z-index:-1; top:0; left:0; right:0; height:1050px; overflow:hidden; pointer-events:none; }
.ambient-orb { display:block; position:absolute; border-radius:50%; }
.ambient-orb-blue { width:790px; height:790px; right:-220px; top:-60px; background:radial-gradient(circle,#dbe8ff75 0%,#e9f0fc44 42%,transparent 70%); animation:ambient-drift 18s ease-in-out infinite alternate; }
.ambient-orb-white { width:650px; height:650px; left:-200px; top:170px; background:radial-gradient(circle,#ffffffdb 0%,#fff7 38%,transparent 70%); animation:ambient-drift 23s ease-in-out -6s infinite alternate-reverse; }
.ambient-grid { position:absolute; width:550px; height:450px; top:20px; right:0; background-image:linear-gradient(#a5bfeb0b 1px,transparent 1px),linear-gradient(90deg,#a5bfeb0b 1px,transparent 1px); background-size:55px 55px; -webkit-mask-image:radial-gradient(ellipse,#000,transparent 72%); mask-image:radial-gradient(ellipse,#000,transparent 72%); transform:perspective(700px) rotateX(28deg) rotateZ(-8deg); }
.hero-art { animation:scene-breathe 13s ease-in-out infinite; transform-origin:50% 60%; }
.visual-label { animation:label-float 6.5s ease-in-out infinite; }
.visual-label strong { color:#163765; }
.visual-topline .status-dot { position:relative; }
.visual-topline .status-dot::after { content:''; position:absolute; inset:-4px; border:1px solid #1d66ed55; border-radius:50%; animation:signal-ring 3.4s ease-out infinite; }
.visual-bottom i { overflow:visible; }
.visual-bottom i::before { content:''; position:absolute; left:0; top:-1.5px; width:4px; height:4px; border-radius:50%; background:#276aeb; box-shadow:0 0 7px #2a70ff55; animation:route-point 4.5s ease-in-out infinite; }
.visual-bottom i:nth-of-type(2)::before { animation-delay:1.4s; }
.motion-control { display:flex; align-items:center; gap:5px; padding:6px 8px; border:1px solid #c8d4e5; border-radius:5px; background:#ffffffb8; color:#61748f; font-size:8px; font-weight:550; cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .2s,color .2s; }
.motion-control:hover { background:#fff; color:#1a60d5; }
.motion-symbol { font-size:10px; line-height:1; }
.motion-control:disabled { cursor:default; opacity:.7; }
.hero-actions .button { position:relative; overflow:hidden; }
.hero-actions .button::before { content:''; position:absolute; top:-40%; bottom:-40%; width:34%; left:-60%; background:linear-gradient(90deg,transparent,#ffffff24,transparent); transform:skewX(-18deg); pointer-events:none; animation:button-light 8s ease-in-out 2s infinite; }
.approach-card .line-icon { transition:transform .4s,box-shadow .4s; }
.button>span:last-child { transition:transform .25s; }
@media(hover:hover) and (pointer:fine) { .approach-card:hover .line-icon { transform:translateY(-3px) rotate(-6deg); box-shadow:inset 0 1px 0 #fff9,5px 9px 12px #1b55a420; }.button:hover>span:last-child { transform:translate(2px,-2px); } }
.motion-paused .hero-art,.motion-paused .visual-label,.motion-paused .ambient-orb,.motion-paused .visual-topline .status-dot::after,.motion-paused .visual-bottom i::before,.motion-paused .hero-actions .button::before,
.document-hidden .hero-art,.document-hidden .visual-label,.document-hidden .ambient-orb,.document-hidden .visual-topline .status-dot::after,.document-hidden .visual-bottom i::before,.document-hidden .hero-actions .button::before,
.hero-out-of-view .hero-art,.hero-out-of-view .visual-label,.hero-out-of-view .ambient-orb,.hero-out-of-view .visual-topline .status-dot::after,.hero-out-of-view .visual-bottom i::before,.hero-out-of-view .hero-actions .button::before { animation-play-state:paused; }
.motion-paused .hero-scene { transform:none; }
@keyframes ambient-drift { from { transform:translate(0,0) scale(1); } to { transform:translate(-50px,35px) scale(1.08); } }
@keyframes scene-breathe { 0%,100% { transform:translateY(0) scale(1.005); } 50% { transform:translateY(-5px) scale(1.035); } }
@keyframes label-float { 0%,100% { transform:translateY(-2px) rotate(-1deg); } 50% { transform:translateY(-9px) rotate(.3deg); } }
@keyframes signal-ring { 0% { transform:scale(.65); opacity:.8; } 75%,100% { transform:scale(1.7); opacity:0; } }
@keyframes route-point { 0%,12% { left:0; opacity:0; } 25% { opacity:1; } 78% { opacity:1; } 90%,100% { left:calc(100% - 3px); opacity:0; } }
@keyframes button-light { 0%,70% { left:-60%; opacity:0; } 72% { opacity:1; } 90%,100% { left:125%; opacity:0; } }
@media(max-width:800px) { .motion-control { font-size:7px; gap:4px; padding:5px 6px; }.motion-symbol { font-size:8px; }.ambient-orb-blue { right:-390px; } }
@media(max-width:600px) { .hero-art { animation-duration:16s; }.visual-label { animation-name:label-float-mobile; animation-duration:7.5s; }.motion-control { font-size:7px; padding:6px; min-height:27px; }.visual-topline { gap:8px; }.ambient-scene { height:1300px; }.ambient-grid { opacity:.5; }.ambient-orb-blue { width:650px; height:650px; top:480px; right:-290px; } }
@keyframes label-float-mobile { 0%,100% { transform:translateY(-1px); } 50% { transform:translateY(-5px); } }
@media(prefers-reduced-motion:reduce) { .hero-art,.visual-label,.ambient-orb,.visual-topline .status-dot::after,.visual-bottom i::before,.hero-actions .button::before { animation:none!important; }.hero-art,.visual-label { transform:none!important; }.approach-card:hover .line-icon,.button:hover>span:last-child { transform:none; } }
.hero-art { object-fit:cover; object-position:56% center; background:#e9eef4; }
@media(max-width:600px) { .hero-visual { min-height:300px; }.motion-control { min-height:32px; font-size:8px; } }
@media(max-width:370px) { .hero-visual { min-height:250px; } }