/* Small WebP photos, no videos, no canvas and no frame-by-frame JavaScript. */
.metric.metric-photo{isolation:isolate;min-height:175px;background:#122337;border-color:#ffffff25;contain:paint;display:flex;flex-direction:column;gap:10px}
.metric-photo .metric-photo-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% center;z-index:-2;transform:scale(1.05);animation:photo-breathe 6s ease-in-out infinite alternate;animation-delay:var(--motion-phase,0s);animation-play-state:paused}
.metric-photo.motion-playing .metric-photo-image{animation-play-state:running}
.metric.metric-photo::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#07182bd9,#07182b6e 48%,#07182b12),linear-gradient(0deg,#061121dc,transparent 70%);border:0;border-radius:inherit;width:auto;height:auto;transform:none}
.metric.metric-photo::after{display:none}
.metric-photo.photo-grid{border-top:2px solid #709dff}.metric-photo.photo-wifi{border-top:2px solid #4ed7da}.metric-photo.photo-temp{border-top:2px solid #c8a1ef}.metric-photo.photo-file{border-top:2px solid #eea181}
.metric-photo .metric-top,.metric-photo small{color:#fff;text-shadow:0 1px 5px #02101dcc}.metric-photo .metric-value{color:#fff;text-shadow:0 2px 10px #02101d99;line-height:1.1}.metric-photo small{margin-top:auto}.metric-photo .metric-top .icon{filter:none;flex-shrink:0}
.metric-photo.photo-wifi .metric-photo-image{animation-name:photo-drift;animation-duration:8s}
.metric-photo.photo-temp .metric-photo-image{animation-duration:9s;transform-origin:80% 40%}
.metric-photo.photo-file .metric-photo-image{animation-name:photo-service;animation-duration:7s;transform-origin:75% 30%}
.hero-card.courtyard-hero,.developer-pilot .pilot-hero.courtyard-hero{background:#11213b;contain:paint}
.courtyard-hero .courtyard-scene{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;max-width:none}
.courtyard-hero .data-packet{fill:none;stroke:#c8f6ff;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:18 982;stroke-dashoffset:0;opacity:0;animation:data-stream 9s linear infinite;animation-delay:calc(var(--motion-phase,0s) - var(--packet-offset,0s));animation-play-state:paused}
.courtyard-hero .data-nodes circle{fill:#b2f3ff;opacity:.25;animation:node-glimmer 4s ease-in-out infinite;animation-delay:calc(var(--motion-phase,0s) - var(--node-offset,0s));animation-play-state:paused}
.courtyard-hero.motion-playing .data-packet{opacity:.9;animation-play-state:running}.courtyard-hero.motion-playing .data-nodes circle{animation-play-state:running}
.motion-toggle{display:block;width:max-content;max-width:100%;margin:12px 0 0;padding:5px 10px;border:1px solid #d3e8ff66;border-radius:8px;background:#0a1937a8;color:#e9f4ff;font-size:12px;line-height:1.4;position:relative;z-index:1;cursor:pointer}.motion-toggle:hover{background:#173259}.motion-toggle:focus-visible{outline:2px solid #a2deff;outline-offset:3px}
@keyframes photo-breathe{from{transform:scale(1.04) translateX(0)}to{transform:scale(1.20) translateX(-3%)}}
@keyframes photo-drift{from{transform:scale(1.16) translateX(-4.5%)}to{transform:scale(1.16) translateX(4.5%)}}
@keyframes data-stream{from{stroke-dashoffset:0}to{stroke-dashoffset:-1000}}
@keyframes node-glimmer{0%,100%{opacity:.2}50%{opacity:.85}}
@media(max-width:600px){.metric.metric-photo{min-height:180px}.metric-photo .metric-top{font-size:14px}.metric-photo small{font-size:13px}}
@media(prefers-reduced-motion:reduce){.metric-photo .metric-photo-image,.courtyard-hero .data-packet,.courtyard-hero .data-nodes circle{animation:none!important}.courtyard-hero .data-packet{display:none}.motion-toggle{display:none}}

@keyframes photo-service{from{transform:scale(1.13) translateY(3.5%)}to{transform:scale(1.20) translateY(-2%)}}
