/* Layout and presentation for the interactive hero NAM preview. */

.hero-visual { position: relative; z-index: 1; overflow: hidden; padding: 1px; border: 1px solid var(--line-strong); border-radius: 14px; background: linear-gradient(145deg, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 38%, color-mix(in srgb, var(--violet) 13%, transparent)); box-shadow: var(--shadow); transform: perspective(1200px) rotateY(-4deg) rotateX(1deg); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.hero-visual:hover { transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-4px); }
.visual-topline, .visual-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 0 16px; background: var(--panel-solid); border-radius: 19px 19px 0 0; color: var(--muted); font-size: 9px; }
.window-controls { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.window-control { display: grid; width: 12px; height: 12px; padding: 0; place-items: center; border: 0; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); transition: filter .16s, transform .16s; }
.window-control::before { color: rgba(0,0,0,.66); font: 800 9px/1 Arial, sans-serif; opacity: 0; }
.window-control:not(:disabled):hover::before, .window-control:not(:disabled):focus-visible::before { opacity: 1; }
.window-control:not(:disabled):hover { filter: brightness(1.12); transform: scale(1.12); }
.window-control:disabled { opacity: .38; cursor: default; filter: none; transform: none; }
.window-control:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.window-close { background: #ff5f57; }.window-close::before { content: "×"; }.window-minimize { background: #febc2e; }.window-minimize::before { content: "−"; }.window-zoom { background: #28c840; }.window-zoom::before { content: "+"; }
.visual-topline .window-title { text-align: center; }
.live-label { color: var(--cyan); font: 9px var(--mono); letter-spacing: .1em; }
.visual-stage { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 330px; cursor: grab; touch-action: none; user-select: none; background: radial-gradient(ellipse at var(--network-glow-x, 55%) var(--network-glow-y, 58%), color-mix(in srgb, var(--cyan) 18%, transparent), transparent 63%), radial-gradient(ellipse at var(--network-glow-x, 55%) var(--network-glow-y, 58%), color-mix(in srgb, var(--blue) 12%, #0a121a), transparent 68%), #0a121a; }
.visual-stage::after { content: ""; position: absolute; z-index: 3; inset: auto 0 0; height: 60px; background: linear-gradient(to bottom, color-mix(in srgb, var(--panel-solid) 4%, transparent), color-mix(in srgb, var(--panel-solid) 92%, transparent)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 22%, #000 65%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 22%, #000 65%, #000 100%); pointer-events: none; }
.visual-stage.is-panning { cursor: grabbing; }
[data-theme="light"] .visual-stage { background: radial-gradient(ellipse at var(--network-glow-x, 55%) var(--network-glow-y, 58%), color-mix(in srgb, var(--cyan) 15%, transparent), transparent 63%), radial-gradient(ellipse at var(--network-glow-x, 55%) var(--network-glow-y, 58%), color-mix(in srgb, var(--blue) 10%, #d5e7e9), transparent 70%), #f5fafa; }
.visual-stage::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--blue) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--cyan) 7%, transparent) 1px, transparent 1px); background-size: var(--grid-size, 28px) var(--grid-size, 28px); background-position: calc(50% + var(--pan-x, 0px)) calc(50% + var(--pan-y, 0px)); mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); }
.scanline { position: absolute; z-index: 1; inset: -20% 0 auto; height: 30%; background: linear-gradient(transparent, color-mix(in srgb, color-mix(in srgb, var(--cyan) 80%, var(--blue)) 5%, transparent), transparent);  pointer-events: none; }
.route-overlay { position: relative; z-index: 2; width: min(96%, 620px); height: auto; overflow: visible; transform: translate(var(--pan-x, 0px), var(--pan-y, 0px)) scale(var(--zoom, 1)); transform-origin: center; will-change: transform; }
.draggable-node { cursor: grab; outline: none; }
.visual-stage.is-node-dragging .draggable-node { cursor: grabbing; }
.draggable-node:focus-visible circle { stroke-width: 3; }
.route { fill: none; stroke: color-mix(in srgb, var(--muted) 52%, transparent); stroke-width: 1; stroke-dasharray: 5 7; }
.node { fill: #0d1922; stroke: var(--blue); stroke-width: 2; filter: url(#glow); }
.receiver-node { fill: #0d1922; }.red-node { stroke: var(--red); }.green-node { stroke: var(--green); }.amber-node { stroke: var(--amber); }
[data-theme="light"] .node, [data-theme="light"] .receiver-node { fill: #f5fbfc; }
.route-overlay text { fill: var(--ink); font: 14px var(--mono); }.route-overlay .node-label { fill: var(--muted); font-size: 9px; letter-spacing: 1.5px; }
.packet { filter: drop-shadow(0 0 7px currentColor); }.packet-blue { fill: var(--cyan); color: var(--cyan); }.packet-red { fill: var(--red); color: var(--red); }.packet-amber { fill: var(--amber); color: var(--amber); }
.visual-caption { position: absolute; z-index: 4; left: 17px; right: 17px; bottom: 13px; display: flex; justify-content: space-between; color: var(--muted); font: 8px var(--mono); letter-spacing: .06em; }
.visual-caption > span:first-child { display: flex; align-items: center; gap: 7px; }.visual-caption .status-dot { width: 5px; height: 5px; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.visual-foot { position: relative; z-index: 4; min-height: 38px; margin-top: -1px; border-radius: 0 0 19px 19px; font: 8px var(--mono); letter-spacing: .04em; }.visual-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), var(--cyan), var(--line-strong)); opacity: .55; }
.hero-visual.is-maximized { position: fixed; z-index: 1202; inset: 4vh 3vw; display: flex; flex-direction: column; width: auto; height: auto; opacity: 1; filter: none; border-radius: 18px; background: var(--panel-solid); box-shadow: 0 24px 64px rgba(0,0,0,.36); will-change: transform, opacity; }
.hero-visual.is-maximized .visual-topline { flex: 0 0 54px; min-height: 54px; }
.hero-visual.is-maximized .visual-stage { flex: 1 1 auto; min-height: 0; }
.hero-visual.is-maximized .visual-foot { flex: 0 0 42px; }
.hero-visual.is-maximized .node { filter: none; }
html.has-maximized-preview { overflow: hidden; }
html.has-maximized-preview::after { position: fixed; z-index: 1200; inset: 0; background: rgba(3,7,13,.76); content: ""; pointer-events: none;  }
html.has-maximized-preview.is-restoring-preview::after { opacity: 0;  transition: opacity .21s ease; }
html.has-maximized-preview .hero { position: relative; z-index: 1201; }

@media (max-width: 980px) {.visual-stage { min-height: 280px; }}
@media (max-width: 760px) {.hero-visual { transform: none; }.hero-visual:hover { transform: translateY(-3px); }.visual-stage { min-height: 275px; }}
@media (max-width: 430px) {.visual-stage { min-height: 225px; }.visual-topline { padding-inline: 10px; }.visual-caption { left: 9px; right: 9px; font-size: 7px; }.visual-foot { padding-inline: 9px; gap: 7px; font-size: 7px; }}
[data-theme="light"] .visual-stage::before { background-image: linear-gradient(color-mix(in srgb, var(--blue) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--cyan) 9%, transparent) 1px, transparent 1px); }
@media (max-width: 600px) {.visual-stage { min-height: 245px; }.visual-caption { left: 10px; right: 10px; bottom: 10px; font-size: 7px; }.visual-foot { gap: 6px; font-size: 7px; }.visual-foot .mono { white-space: nowrap; }}
@media (max-width: 380px) {.visual-topline { padding-inline: 8px; font-size: 8px; }.visual-foot { gap: 4px; font-size: 7px; }.visual-line { min-width: 8px; }}
@media (hover: none) {.hero-visual:hover { transform: none; }}
.js .hero .hero-visual.reveal { transition-delay: .18s; }
.js .hero .hero-visual.reveal.is-visible:hover { transform: translate3d(0, -4px, 0) scale(1); }
@media (max-width: 760px) {.js .hero .hero-visual.reveal.is-visible:hover { transform: none; }}
html.animations-off .visual-stage { cursor: default !important; }
html.animations-off .route-overlay { will-change: auto !important; }
html.animations-off .window-zoom { opacity: .38; cursor: default; filter: none; transform: none; }
.js .hero .hero-visual.reveal.is-visible.is-maximized,
.js .hero .hero-visual.reveal.is-visible.is-maximized:hover { transform: none; }
@media (max-width: 760px) {.hero-visual.is-maximized { inset: 10px; }.hero-visual.is-maximized .visual-stage { min-height: 0; }}