/* home-layer2.css (V4 homepage hero, right side, second idea; Verlin 2026-10-23, test page /home-test-2/).
   "The operating layer", calmer and larger: your people along the top, the systems you already run along the bottom
   (generic icons, no named systems), and Instant's operating layer between them, a wide glass band reading
   See · Know · Intervene. Signals drift up from the systems into the layer; now and then the layer brings a decision
   to a person, they approve it, and the action flows back down to a system. No box or background of its own.
   Laid out on a 520 x 488 grid. */
.inst-home-layer2 { background: none !important; }
.hl2 { position: relative; width: 100%; max-width: 580px; margin-left: auto; font-family: var(--wp--preset--font-family--instrument, sans-serif); }
.hl2-svg { display: block; width: 100%; height: auto; overflow: visible; }

.hl2-cap { font-size: 13px; font-weight: 700; letter-spacing: 2.6px; fill: #6e6e73; }
.hl2-con { stroke: rgba(56, 58, 59, .2); stroke-width: 1.2; stroke-dasharray: 3 5; }

/* the layer */
.hl2-glow { fill: #0066cc; opacity: .1; }
.hl2-band { fill: url(#hl2-fill); stroke: url(#hl2-edge); stroke-width: 1.4; }
.hl2-sweep { fill: url(#hl2-sweep); animation: hl2-sweep 7s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes hl2-sweep { from { transform: translateX(-200px); } to { transform: translateX(560px); } }
.hl2-kick { font-size: 12px; font-weight: 700; letter-spacing: 2.8px; fill: #0066cc; }
.hl2-words { font: 500 26px var(--wp--preset--font-family--jost, sans-serif); fill: #1d1d1f; }
.hl2-words tspan { transition: fill .5s; }
.hl2-words .hl2-sep { fill: rgba(56, 58, 59, .35); }
.hl2-words tspan.on { fill: #0066cc; }

/* people and systems */
.hl2-person circle.hl2-ring, .hl2-tile rect { fill: rgba(255, 255, 255, .7); stroke: rgba(56, 58, 59, .22); stroke-width: 1.2; transition: stroke .4s, stroke-width .4s; }
.hl2-glyph { fill: none; stroke: #383a3b; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .72; transition: stroke .4s, opacity .4s; }
.hl2-person.on circle.hl2-ring, .hl2-tile.on rect { stroke: #0066cc; stroke-width: 1.8; }
.hl2-person.on .hl2-glyph, .hl2-tile.on .hl2-glyph { stroke: #0066cc; opacity: 1; }
.hl2-ok { opacity: 0; transform: scale(.5); transform-box: fill-box; transform-origin: center; transition: opacity .35s, transform .4s cubic-bezier(.22, 1, .36, 1); }
.hl2-ok circle { fill: #0066cc; }
.hl2-ok path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hl2-ok.on { opacity: 1; transform: none; }

/* signals */
.hl2-dot { fill: #0066cc; }
.hl2-halo { fill: #0066cc; opacity: .16; }
.hl2-ripple { fill: none; stroke: #0066cc; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: hl2-ripple .9s ease-out forwards; }
@keyframes hl2-ripple { from { opacity: .7; transform: scale(.3); } to { opacity: 0; transform: scale(1.6); } }

@media (prefers-reduced-motion: reduce) { .hl2-sweep { animation: none; opacity: 0; } }