/* N31 / signal field — decorative motion never carries essential information. */
.signal-scene{isolation:isolate;position:relative;overflow:hidden}
.signal-scene>.wrap{position:relative;z-index:2}
.signal-field{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;background:radial-gradient(ellipse at 90% 25%,#37d6be19,transparent 60%)}
.signal-field::before{content:"";position:absolute;inset:-20%;background:radial-gradient(ellipse at 70% 30%,#57e9c92e,transparent 35%),radial-gradient(ellipse at 35% 75%,#479dcc19,transparent 40%);animation:signal-drift 18s ease-in-out infinite alternate}
.signal-field svg{position:absolute;width:75%;height:100%;right:-8%;top:0;opacity:.65}
.signal-track{fill:none;stroke:#84e4d3;stroke-width:.65;opacity:.2}
.signal-current{fill:none;stroke:#9af5dc;stroke-width:1.3;stroke-dasharray:4 96;animation:signal-flow 14s linear infinite;filter:drop-shadow(0 0 5px #73dec7)}
.signal-current:nth-child(3n){animation-delay:-5s;animation-duration:19s}
.signal-current:nth-child(3n + 1){animation-delay:-9s}
.signal-node{fill:#9af5dc;opacity:.65}
.motion-toggle{display:inline-flex;align-items:center;gap:8px;background:#0b202ce6;border:1px solid #73dec73d;border-radius:30px;padding:9px 13px;color:#bfe5df;font:inherit;font-size:.68rem;cursor:pointer;min-height:40px;margin-top:20px;position:relative;z-index:3}
.motion-toggle::before{content:"";width:6px;height:6px;border-radius:50%;background:#73dec7}
.motion-toggle:focus-visible{outline:2px solid #73dec7;outline-offset:4px}
.sales-preview{position:relative;transform:perspective(1200px) rotateY(-7deg) rotateX(2deg);border-color:#8bedd659;box-shadow:0 35px 100px #0005,0 0 75px #45c8b00d;transition:transform .7s ease}
.sales-preview:hover{transform:perspective(1200px) rotateY(-2deg)}
.sales-preview-body{position:relative;overflow:hidden}
.sales-preview-body::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 25%,#a4f9e30c 48%,transparent 65%);transform:translateX(-100%);animation:signal-sheen 10s ease-in-out infinite}
.signal-graphic{height:100px;margin:0 22px 24px;position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #ffffff18;padding-top:20px}
.signal-graphic::before{content:"";position:absolute;left:10%;right:10%;height:1px;background:linear-gradient(90deg,#73dec722,#73dec7,#73dec722)}
.signal-step{position:relative;display:grid;place-items:center;gap:8px;background:#102c36;border:1px solid #73dec74a;border-radius:10px;padding:12px;width:30%;font-size:.58rem;color:#b4ddd5;letter-spacing:.06em;animation:signal-step 6s ease-in-out infinite}
.signal-step:nth-child(2){animation-delay:2s}.signal-step:nth-child(3){animation-delay:4s}
.signal-step .icon{width:20px;height:20px;color:#91efd5}
.home-intro-grid:not([hidden]) .hero-system-copy{animation:signal-enter .65s ease both}
.home-intro-grid:not([hidden])>.ecosystem{animation:signal-enter .8s ease both}
.route-card,.project-card{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
@media(hover:hover){.route-card:hover,.project-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px #102d3214;border-color:#64bdaa}.project-card img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}.project-card:hover img{transform:scale(1.035)}}
@keyframes signal-drift{from{transform:translate(-3%,1%) rotate(-5deg)}to{transform:translate(4%,-3%) rotate(8deg)}}
@keyframes signal-flow{to{stroke-dashoffset:-100}}
@keyframes signal-sheen{0%,35%{transform:translateX(-100%)}85%,100%{transform:translateX(100%)}}
@keyframes signal-step{0%,65%,100%{border-color:#73dec730;box-shadow:0 0 0 transparent}25%{border-color:#73dec7b0;box-shadow:0 0 24px #73dec71a}}
@keyframes signal-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
html[data-motion=paused] *,html[data-motion=paused] *::before,html[data-motion=paused] *::after{animation-play-state:paused!important}
html[data-motion=paused] .sales-preview{transform:none}
html[data-motion=paused] .home-intro-grid .hero-system-copy,html[data-motion=paused] .home-intro-grid>.ecosystem{animation:none!important;opacity:1}
.signal-scene[data-scene-visible=false] *, .signal-scene[data-scene-visible=false] *::before,.signal-scene[data-scene-visible=false] *::after{animation-play-state:paused!important}
@media(max-width:760px){.signal-field svg{width:125%;right:-65%;opacity:.3}.signal-field::before{animation-duration:24s}.motion-toggle{margin-top:12px}.sales-preview{transform:none}}
@media(prefers-reduced-motion:reduce){.signal-field *, .signal-field::before,.sales-preview-body::after,.signal-step,.home-intro-grid:not([hidden]) .hero-system-copy,.home-intro-grid:not([hidden])>.ecosystem{animation:none!important}.sales-preview,.route-card,.project-card,.project-card img{transform:none!important;transition:none!important}.signal-current{opacity:.3}.motion-toggle{display:none}}
