/* Branded, compact motion. No full-screen loader or scroll blocking. */
.hero-visual{isolation:isolate;background:radial-gradient(ellipse at 48% 50%,#fff 0,#f4f8fc 64%,#edf3f9 100%)}
.hero-visual>canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .3s ease;touch-action:pan-y}
.hero-visual>img{transition:opacity .3s ease;animation:none}
.hero-visual.matrix-ready>canvas{opacity:1}
.hero-visual.matrix-ready>img{opacity:0}
.visual-caption,.visual-bottom{z-index:2;pointer-events:none}
.visual-caption{padding-right:0}
.visual-bottom{right:24px;left:auto;max-width:62%}
.matrix-toggle{position:absolute;bottom:13px;left:15px;z-index:3;display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--navy);min-width:44px;min-height:44px;font:11px Arial,sans-serif;padding:10px;cursor:pointer;border-radius:4px}
.matrix-toggle:hover{background:#1d71b809}
.matrix-toggle:before{content:'';width:8px;height:10px;border-inline:2px solid currentColor}
.matrix-toggle[aria-pressed=true]:before{width:0;height:0;border:5px solid transparent;border-left:8px solid currentColor;border-right:0}
.matrix-toggle[hidden]{display:none}
.matrix-loader{position:absolute;z-index:3;bottom:30px;left:27px;display:flex;align-items:center;gap:5px;opacity:0;pointer-events:none;transition:opacity .18s ease}
.matrix-loading .matrix-loader{opacity:1}
.matrix-loader i{width:5px;height:5px;background:var(--blue);animation:module-load 1s ease-in-out infinite}
.matrix-loader i:nth-child(2){background:var(--navy);animation-delay:.12s}.matrix-loader i:nth-child(3){background:var(--coral);animation-delay:.24s}
@keyframes module-load{0%,75%,100%{transform:translateY(0);opacity:.35}35%{transform:translateY(-5px);opacity:1}}
.matrix-loading .matrix-toggle{visibility:hidden}
.reveal{opacity:0;transform:translateY(12px);transition:opacity .3s ease var(--reveal-delay,0ms),transform .3s var(--ease) var(--reveal-delay,0ms)}
.reveal.is-revealed{opacity:1;transform:none}
.direction-card,.product-card{position:relative;isolation:isolate;transition:transform .24s var(--ease),border-color .24s ease,box-shadow .24s ease}
.direction-card:before,.product-card:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(300px circle at var(--light-x,50%) var(--light-y,50%),#1d71b812,transparent 80%);transition:opacity .24s ease}
.direction-card:after,.product-card:after{content:'';position:absolute;bottom:-1px;left:-1px;height:3px;width:calc(100% + 2px);background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .26s var(--ease)}
.direction-card .product-icon{transition:transform .3s var(--ease)}
.direction-card:focus-visible:after,.product-card:focus-visible:after{transform:scaleX(1)}
.btn{transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s var(--ease)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn:disabled{cursor:wait}
.btn.is-loading{opacity:1;position:relative}
.btn.is-loading:after{content:'';width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:request-spin .7s linear infinite}
@keyframes request-spin{to{transform:rotate(360deg)}}
.text-link svg,.card-foot svg,.industry-grid>a>svg,.btn svg{transition:transform .24s var(--ease)}
.nav-direction>summary>span:last-child,.nav-product>summary>span:last-child{transition:transform .2s var(--ease)}
.mega-menu:not([hidden]),#mobile-nav:not([hidden]){animation:panel-in .2s var(--ease) both}
@keyframes panel-in{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
dialog[open]{animation:dialog-in .24s var(--ease) both}
dialog[open]::backdrop{animation:backdrop-in .24s ease both}
dialog.dialog-closing[open]{animation:dialog-out .15s ease both}
dialog.dialog-closing[open]::backdrop{animation:backdrop-out .15s ease both}
@keyframes dialog-in{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes dialog-out{to{opacity:0;transform:translateY(8px) scale(.99)}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}@keyframes backdrop-out{to{opacity:0}}
.field-error{display:block;font:12px/1.45 Arial,sans-serif;color:#a52525;margin:7px 0 0}
input[aria-invalid=true],textarea[aria-invalid=true],select[aria-invalid=true]{border-color:#b33636;box-shadow:0 0 0 1px #b3363615}
.nav-progress{height:3px;transition:width .2s ease,opacity .2s ease;box-shadow:0 0 10px #fc6d5f40}
.nav-progress.active{width:85%;animation:navigation-pulse 1.1s ease-in-out infinite}
@keyframes navigation-pulse{50%{opacity:.5}}
main{transition:opacity .15s ease,transform .15s ease}
.page-leaving main{opacity:0;transform:translateY(-6px)}
.site-header{view-transition-name:site-header}
main{view-transition-name:page-content}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(site-header),::view-transition-new(site-header){animation:none}
::view-transition-old(page-content){animation:page-out .18s ease both}
::view-transition-new(page-content){animation:page-in .28s cubic-bezier(.22,.8,.25,1) both}
@keyframes page-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes page-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(hover:hover){
 .direction-card:hover,.product-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px #2d2e8308}
 .direction-card:hover:before,.product-card:hover:before{opacity:1}
 .direction-card:hover:after,.product-card:hover:after{transform:scaleX(1)}
 .direction-card:hover .product-icon{transform:translateY(-3px) rotate(-4deg)}
 .btn:hover{box-shadow:0 5px 14px #fc6d5f20}
 .text-link:hover svg,.card-foot:hover svg,.industry-grid>a:hover>svg,.btn:hover svg{transform:translateX(4px)}
}
@media(max-width:600px){
 .hero-visual{height:265px}
 .matrix-toggle{left:8px;bottom:3px;font-size:10px}
 .matrix-loader{bottom:22px;left:21px}
 .visual-bottom{bottom:20px;right:18px;font-size:7px}
 .nav-actions>.icon-button{width:44px;height:44px}
 .hero .text-link{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
 .reveal{opacity:1;transform:none}.page-leaving main{opacity:1;transform:none}
 ::view-transition-old(page-content),::view-transition-new(page-content){animation:none!important}
 .matrix-loader{display:none}
}
/* Capability studies: original line icons remain visible until WebGL is ready. */
.direction-art{isolation:isolate;overflow:hidden;min-height:320px;background:radial-gradient(ellipse at 50% 40%,#fff,#f3f7fb 78%)}
.direction-art>.direction-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;transition:opacity .4s ease;touch-action:pan-y}
.direction-art>.product-icon{transition:opacity .25s ease}
.direction-art.direction-ready>.direction-canvas{opacity:1}
.direction-art.direction-ready>.product-icon{opacity:0}
.direction-art>span{position:absolute;top:18px;left:18px;right:52px;text-align:left;padding:0;font:11px/1.45 Arial,sans-serif;z-index:2;pointer-events:none}
.direction-art:after{z-index:2;width:7px;height:7px;right:22px;top:21px}
.direction-art .detail-motion-toggle{bottom:6px;left:9px}
.network-motion{position:absolute;pointer-events:none;z-index:1}
.network-visual .detail-motion-toggle{left:auto;right:12px;bottom:60px;font-size:10px}
.network-visual>span{padding-right:75px}
@media(max-width:600px){
 .direction-art{min-height:260px}
 .direction-art>span{font-size:10px;top:15px;left:16px}
 .direction-art:after{top:18px;right:18px}
 .network-visual .detail-motion-toggle{bottom:56px;right:10px}
}
@media(prefers-reduced-motion:reduce){
 .direction-art>.direction-canvas,.direction-art>.product-icon{transition:none}
 .network-motion{display:none}
}
@media print{.reveal{opacity:1;transform:none}.hero-visual>canvas,.matrix-toggle,.direction-canvas,.network-motion{display:none}.hero-visual.matrix-ready>img,.direction-art.direction-ready>.product-icon{opacity:1}}
