/* Photo-registered service previews. All animated elements use the shared engine. */
.service-photo-art{position:relative;aspect-ratio:16/9}
.service-photo-art>.service-hero-photo{display:block;width:100%;height:100%;object-fit:fill}
.service-hero-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.service-hero .scene-motion{pointer-events:none}
.svc-control-tile{fill:#addde8;opacity:.02;animation:svc-tile 8s ease-in-out infinite;animation-delay:var(--svc-delay,0s)}
.svc-panel-line{opacity:.2;stroke-dasharray:1;stroke-dashoffset:1;animation:svc-panel 8s ease-in-out infinite}
.svc-room-light{opacity:.2;animation:svc-light 8s ease-in-out infinite}
@keyframes svc-tile{0%,12%,48%,100%{opacity:.01}20%,38%{opacity:.34}}
@keyframes svc-panel{0%,10%,90%,100%{opacity:0;stroke-dashoffset:1}30%,70%{opacity:.8;stroke-dashoffset:0}}
@keyframes svc-light{0%,12%,100%{opacity:.12}30%,60%{opacity:.85}80%{opacity:.3}}
.svc-view-zone{opacity:.2;animation:svc-zone 6s ease-in-out infinite}
.svc-camera-sweep{opacity:0;transform-origin:1383px 146px;animation:svc-sweep 6s ease-in-out infinite}
.svc-camera-ring{opacity:0;transform-origin:0 0;animation:svc-camera 4.8s ease-out infinite;animation-delay:var(--svc-delay,0s)}
@keyframes svc-zone{0%,100%{opacity:.15}35%,65%{opacity:.65}}
@keyframes svc-sweep{0%,100%{opacity:0;transform:rotate(21deg)}20%{opacity:.32}80%{opacity:.3}90%{opacity:0;transform:rotate(-22deg)}}
@keyframes svc-camera{0%{opacity:0;transform:scale(1)}15%{opacity:.6}100%{opacity:0;transform:scale(3.4)}}
/* Cinematic example readouts: no live analytics or object detection. */
.svc-entry-zone{opacity:0;animation:svc-entry-zone 16s ease-in-out infinite;animation-delay:-2s}
.svc-analytics{position:absolute;left:6%;bottom:9%;width:clamp(255px,25vw,354px);color:#f1fcff;pointer-events:none;font-variant-numeric:tabular-nums;line-height:1.35;border-left:1px solid #bdeaf1b3;background:linear-gradient(110deg,#071b23eb,#091d26d9);box-shadow:0 8px 35px #0213191a;padding:18px 21px 15px}
.svc-analytics:before,.svc-analytics:after{content:"";position:absolute;left:-1px;width:13px;height:1px;background:#c5f5ff}
.svc-analytics:before{top:0}.svc-analytics:after{bottom:0}
.svc-analytics-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:13px;margin-bottom:12px;border-bottom:1px solid #c3eaf12b;font:10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:#c4edf4}
.svc-camera-id{display:flex;align-items:center;gap:7px;white-space:nowrap}
.svc-camera-id:before{content:"";width:4px;height:4px;border-radius:50%;background:#b3edf8;box-shadow:0 0 8px #bcf4ff5c}
.svc-event-stack{display:grid}
.svc-analytics-event{grid-area:1/1;min-width:0;animation:svc-event-fade 16s ease-in-out infinite;animation-delay:-2s}
.svc-event-package{opacity:1}.svc-event-person{opacity:0;animation-delay:-10s}
.svc-event-meta{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px;font:10px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.11em;color:#9bd4e0}
.svc-event-title{font-size:clamp(14px,1.4vw,20px);font-weight:500;letter-spacing:.01em;line-height:1.4}
.svc-event-detail{margin-top:4px;font-size:clamp(11px,1vw,13px);line-height:1.4;color:#d0e1e7;letter-spacing:.01em}
.svc-event-signal{display:flex;align-items:center;gap:4px;margin-top:15px;height:9px;color:#a7d5df;font:9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em}
.svc-event-signal i{display:block;width:3px;height:3px;background:#a6dbe6;opacity:.7}.svc-event-signal i:nth-child(2){height:6px}.svc-event-signal i:nth-child(3){height:9px}.svc-event-signal i:nth-child(4){height:5px}.svc-event-signal i:nth-child(5){height:7px}.svc-event-signal span{margin-left:auto}
@keyframes svc-event-fade{0%,48%,100%{opacity:0}10%,34%{opacity:1}44%{opacity:0}}
@keyframes svc-entry-zone{0%,46%,100%{opacity:0}12%,30%{opacity:.65}58%,76%{opacity:.4}88%{opacity:0}}
@media(max-width:700px){.svc-analytics{left:14px;bottom:14px;width:calc(100% - 139px);min-width:0;max-width:285px;padding:11px 12px 10px}.svc-analytics-header{gap:6px;padding-bottom:7px;margin-bottom:7px;font-size:9px;letter-spacing:.04em}.svc-event-meta{font-size:8px;margin-bottom:6px;letter-spacing:.06em}.svc-event-title{font-size:13px}.svc-event-detail{font-size:11px;margin-top:3px}.svc-event-signal{margin-top:9px;font-size:8px}.svc-entry-zone text{display:none}}
@media(max-width:350px){.svc-analytics{left:10px;bottom:10px;width:calc(100% - 137px);padding:9px 10px}.svc-analytics-header{gap:4px}.svc-event-title{font-size:12px}.svc-event-detail{font-size:10px}.svc-event-signal{display:none}}
.svc-keypad-wake{opacity:.02;animation:svc-keypad 7s ease-in-out infinite}
.svc-keypad-content{opacity:0;animation:svc-keypad-content 7s ease-in-out infinite}
.svc-sensor-halo{opacity:0;transform-origin:0 0;animation:svc-sensor 7s ease-in-out infinite}
.svc-sensor-dot{opacity:.15;animation:svc-sensor-dot 7s ease-in-out infinite}
.svc-entry-edge{opacity:0;stroke-dasharray:.06 .94;stroke-dashoffset:1;animation:svc-entry 7s ease-in-out infinite}
@keyframes svc-keypad{0%,10%,90%,100%{opacity:.015}27%,64%{opacity:.2}}
@keyframes svc-keypad-content{0%,15%,85%,100%{opacity:0}30%,64%{opacity:.9}}
@keyframes svc-sensor{0%,30%,80%,100%{opacity:0;transform:scale(1)}45%{opacity:.65;transform:scale(1.1)}68%{opacity:0;transform:scale(2.1)}}
@keyframes svc-sensor-dot{0%,25%,80%,100%{opacity:.1}42%,60%{opacity:.8}}
@keyframes svc-entry{0%,32%{opacity:0;stroke-dashoffset:1}42%{opacity:.4}68%{opacity:.35;stroke-dashoffset:0}75%,100%{opacity:0;stroke-dashoffset:0}}
/* Perspective-scaled binary streams emerge from the photographed access point. */
.svc-binary-field{pointer-events:none}
.svc-binary-packet{opacity:0;transform-box:view-box;transform-origin:0 0;animation:svc-binary-stream var(--binary-duration,3s) linear infinite;animation-delay:var(--binary-delay,0s)}
.svc-binary-digits{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;font-size:29px;font-weight:600;letter-spacing:2px;fill:#b8edff;stroke:#123f53;stroke-width:.8px;paint-order:stroke fill;filter:drop-shadow(0 0 3px #147eac88)}
.svc-binary-packet:nth-child(3n+2) .svc-binary-digits{fill:#f0fcff}
@keyframes svc-binary-stream{
  0%{opacity:0;transform:translate(0,0) scale(.16) rotate(0deg)}
  12%{opacity:.12;transform:translate(calc(var(--binary-x)*.12),calc(var(--binary-y)*.12)) scale(.34) rotate(var(--binary-tilt))}
  28%{opacity:.92;transform:translate(calc(var(--binary-x)*.28),calc(var(--binary-y)*.28)) scale(.65) rotate(var(--binary-tilt))}
  72%{opacity:.86;transform:translate(calc(var(--binary-x)*.72),calc(var(--binary-y)*.72)) scale(.92) rotate(var(--binary-tilt))}
  100%{opacity:0;transform:translate(var(--binary-x),var(--binary-y)) scale(1.06) rotate(var(--binary-tilt))}
}
@media(max-width:700px){.svc-binary-digits{font-size:42px;letter-spacing:1.7px;stroke-width:1.1px}.svc-binary-packet:nth-child(3n){display:none}}
.svc-wifi-wave{opacity:0;transform-origin:0 0;animation:svc-wireless 4.2s ease-out infinite;animation-delay:var(--svc-delay,0s)}
.svc-ap-dot{opacity:.1;animation:svc-device 4.2s ease-in-out infinite}
.svc-laptop-light{opacity:.01;animation:svc-laptop 4.2s ease-in-out infinite}
.svc-laptop-connection{opacity:0;animation:svc-connection 4.2s ease-in-out infinite}
@keyframes svc-wireless{0%{opacity:0;transform:translateY(0) scale(.8)}15%{opacity:.68}100%{opacity:0;transform:translateY(68px) scale(3.6)}}
@keyframes svc-device{0%,100%{opacity:.2}35%,65%{opacity:.9}}
@keyframes svc-laptop{0%,100%{opacity:.02}40%,72%{opacity:.15}}
@keyframes svc-connection{0%,18%,100%{opacity:0}48%,70%{opacity:.85}}
.svc-theater-sound{opacity:0;transform-origin:0 0;animation:svc-cinema-sound 3.8s ease-out infinite;animation-delay:var(--svc-delay,0s)}
.svc-cinema-ambient{opacity:.15;animation:svc-cinema-light 9s ease-in-out infinite}
@keyframes svc-cinema-sound{0%{opacity:0;transform:scale(.7)}20%{opacity:.5}100%{opacity:0;transform:scale(3)}}
@keyframes svc-cinema-light{0%,100%{opacity:.15}35%,65%{opacity:.75}}
/* Higher-specificity shared controls always win over individual animation names. */
.motion-art .scene-motion{animation-play-state:paused}
.motion-running .motion-art .scene-motion{animation-play-state:running}
html.motion-paused .motion-art .scene-motion{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.service-hero .scene-motion{animation:none!important}.svc-binary-field,.svc-camera-sweep,.svc-camera-ring,.svc-wifi-wave,.svc-theater-sound,.svc-entry-edge,.svc-sensor-halo{opacity:0}.svc-keypad-content,.svc-laptop-connection{opacity:.55}.service-hero-home-theater .premium-tv-frame:first-child{opacity:1}}

@media(prefers-reduced-motion:reduce){.svc-entry-zone{opacity:0}.svc-event-package{opacity:1}.svc-event-person{opacity:0}}