/* Screen effects stay on their own clocks when the scroll camera stops. */
.network-chapter .map-image{filter:saturate(calc(1 - var(--screen-amount,0)*.18)) contrast(calc(1 + var(--screen-amount,0)*.12)) brightness(calc(1 - var(--screen-amount,0)*.10))}
.service-wall-screen{position:absolute;z-index:11;overflow:hidden;border-radius:4px;pointer-events:none;isolation:isolate;color:var(--bg-gray);font:500 var(--hud-size,12px)/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand-tint) 54.902%, transparent),inset 0 0 26px color-mix(in srgb, var(--primary-dark) 41.961%, transparent);contain:paint;opacity:0}
.service-wall-screen[hidden]{display:none}
.screen-glass,.screen-lines,.screen-sweep,.screen-pixels{position:absolute;inset:0;pointer-events:none}
.screen-glass{background:linear-gradient(125deg,color-mix(in srgb, var(--primary-dark) 15.294%, transparent),color-mix(in srgb, var(--primary-light) 7.059%, transparent) 38%,color-mix(in srgb, var(--hero-deep) 14.902%, transparent)),radial-gradient(ellipse at 50% 40%,transparent 35%,color-mix(in srgb, var(--hero-deep) 21.176%, transparent) 100%);mix-blend-mode:multiply}
.screen-lines{inset:-8px 0;background:repeating-linear-gradient(0deg,color-mix(in srgb, var(--hero-deep) 14.902%, transparent) 0px,color-mix(in srgb, var(--hero-deep) 14.902%, transparent) 1px,transparent 1px,transparent 3px);opacity:.54;animation:screen-line-drift 1.8s linear infinite}
.screen-pixels{background:repeating-linear-gradient(90deg,color-mix(in srgb, var(--primary-dark) 4.706%, transparent) 0px,color-mix(in srgb, var(--primary-dark) 4.706%, transparent) 1px,transparent 1px,transparent 3px);opacity:.6}
.screen-sweep{inset:-60% 0 100%;background:linear-gradient(transparent,color-mix(in srgb, var(--primary-light) 0.000%, transparent) 25%,color-mix(in srgb, var(--primary-light) 21.176%, transparent) 76%,color-mix(in srgb, var(--primary-light) 5.882%, transparent) 85%,transparent);animation:screen-refresh 6.8s linear infinite;mix-blend-mode:screen;will-change:transform}
.screen-hud,.screen-hud-bottom{position:absolute;left:2.8%;right:2.8%;display:flex;justify-content:space-between;align-items:center;letter-spacing:.06em;text-shadow:0 1px 4px var(--hero-deep);font-variant-numeric:tabular-nums}
.screen-hud{top:5%;color:var(--hero-deep);text-shadow:0 1px 4px #ffffffad}
.screen-hud b{font-size:.8em;font-weight:500;opacity:.68}
.screen-live{display:flex;align-items:center;gap:.55em}
.screen-live i{height:.46em;width:.46em;border-radius:50%;background:#10ac88;box-shadow:0 0 8px #00eaba90;animation:screen-live 2.6s ease-in-out infinite}
.screen-live time{margin-left:.55em;letter-spacing:0;color:var(--primary-dark)}
.screen-hud-bottom{bottom:4.5%;font-size:.68em;color:var(--primary-dark);text-shadow:0 1px 5px #fff}
.screen-hud-bottom b{font-weight:600;color:#126f69}
.screen-corner{position:absolute;width:12px;height:10px;border:solid color-mix(in srgb, var(--brand-tint) 70.196%, transparent)}
.screen-corner.tl{left:1.2%;top:3%;border-width:1px 0 0 1px}.screen-corner.tr{right:1.2%;top:3%;border-width:1px 1px 0 0}.screen-corner.bl{left:1.2%;bottom:3%;border-width:0 0 1px 1px}.screen-corner.br{right:1.2%;bottom:3%;border-width:0 1px 1px 0}
@keyframes screen-refresh{from{transform:translateY(0)}to{transform:translateY(270%)}}
@keyframes screen-line-drift{to{transform:translateY(3px)}}
@keyframes screen-live{50%{opacity:.5;box-shadow:0 0 2px #00eaba50}}
.operator-displays{position:absolute;left:0;top:0;width:1672px;height:941px;max-width:none;transform-origin:0 0;z-index:2;pointer-events:none;overflow:hidden;will-change:transform;font-family:Arial,sans-serif}
.operator-displays text{fill:var(--primary-dark)}.operator-displays .op-brand{fill:#fff;font-size:10px;font-weight:700;letter-spacing:.35px}.operator-displays .op-header{fill:var(--primary-light);font-size:6.8px;letter-spacing:.6px}.operator-displays .op-label{font-size:7.5px;fill:var(--text-gray)}.operator-displays .op-value{font-size:23px;font-weight:600;letter-spacing:-.4px}.operator-displays .op-title{font-size:10.5px;font-weight:600}.operator-displays .op-amber{fill:#a15b1c;font-size:7px}.op-chart{stroke:var(--secondary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:200;animation:op-chart-flow 5s ease-in-out infinite}.op-status{animation:screen-live 2.6s ease-in-out infinite}.op-bars{animation:op-bars-glow 3.6s ease-in-out infinite}
@keyframes op-chart-flow{0%,100%{stroke-dashoffset:0;opacity:1}50%{stroke-dashoffset:18;opacity:.7}}
@keyframes op-bars-glow{50%{opacity:.6}}
.service-wall-screen:not([data-running=true]) *,.operator-displays:not([data-running=true]) *{animation-play-state:paused}
@media(orientation:portrait){.screen-hud b{display:none}.screen-hud-bottom{font-size:.64em}.screen-corner{width:7px;height:6px}}
@media(prefers-reduced-motion:reduce){.screen-sweep,.screen-lines,.screen-live i,.op-chart,.op-status,.op-bars{animation:none}}

/* Keep the copy clear of the left auxiliary monitor on wide layouts. */
@media(orientation:landscape) and (min-height:601px){.service-link{gap:8px;font-size:11px}}

/* Foreground is a sibling of the map, above its glass and below notifications. */
.service-foreground{position:absolute;inset:0;z-index:12;pointer-events:none;overflow:hidden;opacity:0}
.service-foreground[hidden]{display:none}
.service-foreground .room-fg{position:absolute;left:0;top:0;width:1672px;height:941px;max-width:none;transform-origin:0 0;will-change:transform;pointer-events:none;user-select:none}
.room-alert{z-index:13}
.op-orbit{animation:op-orbit-turn 22s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes op-orbit-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.op-orbit{animation:none}}

.service-copy-layer{z-index:14}.service-copy-layer .service-copy{z-index:1}

/* Approved medium-scale screen artwork; ambient movement without scrolling. */
@font-face{font-family:LemonMilkBold;src:url(assets/fonts/lemon-milk-bold.otf) format('opentype');font-style:normal;font-weight:700;font-display:swap}
.operator-displays .operator-shirt-logos{opacity:.94}
.op-data-trace{fill:none;stroke:var(--bg-gray);stroke-width:11;stroke-linecap:round;stroke-dasharray:2 98;opacity:.75;animation:op-data-travel var(--trace-duration,13s) linear infinite;filter:drop-shadow(0 0 5px color-mix(in srgb, var(--secondary) 46.667%, transparent))}
.op-live-dot{fill:var(--secondary);opacity:.65;animation:op-panel-live 4.8s ease-in-out infinite}
.op-panel-second{opacity:0;animation:op-panel-crossfade 36s ease-in-out infinite}
@keyframes op-data-travel{to{stroke-dashoffset:-100}}
@keyframes op-panel-live{50%{opacity:.25}}
@keyframes op-panel-crossfade{0%,45%,100%{opacity:0}49%,94%{opacity:1}98%{opacity:0}}
@media(prefers-reduced-motion:reduce){.op-data-trace,.op-live-dot,.op-panel-second{animation:none}.op-data-trace{opacity:0}}
/* All five points fit a full-screen phone map; outer city edges soften into it. */
.network-chapter[data-phase=phone]{background:linear-gradient(180deg,#fff 8%,var(--brand-tint) 48%,var(--brand-tint) 72%,var(--bg-gray))}
.network-chapter[data-phase=phone] .map-image{mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 86%,transparent)}