/* BFIA impact revision: legible operations and visible motion on the same screens. */
.bfs-system-preview.bfs-cinematic-panel {
  --bfs-cinematic-panel-rgb: 78,207,255;
  --bfs-cinematic-caption-height: 38px;
  --bfs-cinematic-image-height: 160px;
  --bfs-cinematic-scan-delay: 0s;
  isolation: isolate;
  border-color: rgba(var(--bfs-cinematic-panel-rgb),.84);
  box-shadow: 0 16px 38px #00091880,0 0 25px rgba(var(--bfs-cinematic-panel-rgb),.24),inset 0 0 0 1px rgba(var(--bfs-cinematic-panel-rgb),.3);
  transition: border-color .6s ease,box-shadow .7s ease;
}
.bfs-system-preview.bfs-cinematic-panel > img {
  filter: saturate(1.14) contrast(1.08);
  transform-origin: center top;
  animation: bfs-cinematic-screen-drift 9s ease-in-out infinite alternate;
  animation-delay: var(--bfs-cinematic-scan-delay);
}
.bfs-system-preview.bfs-cinematic-panel > figcaption { position:relative; z-index:6; }
.bfs-system-preview.bfs-cinematic-panel > .bfs-live-feed[hidden] { display:none!important; }
.bfs-system-preview.bfs-cinematic-panel > .bfs-cinematic-screen-scan {
  position:absolute;inset:0 0 var(--bfs-cinematic-caption-height);z-index:3;overflow:hidden;
  pointer-events:none;margin:0;background:linear-gradient(180deg,rgba(0,32,58,.03),rgba(0,27,45,.08));
}
.bfs-cinematic-screen-scan::before {
  content:"";position:absolute;left:0;right:0;top:-35%;height:32%;
  background:linear-gradient(180deg,transparent,rgba(var(--bfs-cinematic-panel-rgb),.04) 40%,rgba(var(--bfs-cinematic-panel-rgb),.28) 96%,rgba(217,252,255,.92));
  border-bottom:2px solid rgba(var(--bfs-cinematic-panel-rgb),.95);
  box-shadow:0 5px 22px rgba(var(--bfs-cinematic-panel-rgb),.5);
  animation:bfs-cinematic-screen-scan 5.8s cubic-bezier(.3,.05,.55,1) infinite;
  animation-delay:var(--bfs-cinematic-scan-delay);
}
.bfs-system-preview.bfs-cinematic-panel > .bfs-cinematic-feed {
  box-sizing:border-box;position:absolute;z-index:4;left:4px;right:4px;
  bottom:calc(var(--bfs-cinematic-caption-height) + 3px);
  height:calc(var(--bfs-cinematic-image-height) * .54);max-height:110px;
  display:grid;grid-template-rows:11px 23px minmax(0,1fr) 3px;gap:2px;
  margin:0;padding:4px 9px;overflow:hidden;
  border:1px solid rgba(var(--bfs-cinematic-panel-rgb),.7);border-radius:6px;
  background:linear-gradient(110deg,rgba(2,22,37,.97),rgba(5,32,48,.95));
  box-shadow:0 5px 20px #000b1880,inset 0 1px rgba(255,255,255,.09);
  pointer-events:none;text-shadow:none;font-family:Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.bfs-cinematic-panel .bfs-cinematic-feed span {
  box-sizing:border-box;margin:0;padding:0;min-width:0;border:0;background:none;
  font:inherit;letter-spacing:normal;text-shadow:none;
}
.bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-feed-top { display:flex;align-items:center;gap:6px;min-height:0; }
.bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-signal {
  display:block;width:5px;height:5px;flex:0 0 5px;border-radius:50%;
  background:rgb(var(--bfs-cinematic-panel-rgb));box-shadow:0 0 7px rgba(var(--bfs-cinematic-panel-rgb),.8);
}
.bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-feed-title {
  flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  color:#ebfaff;font-size:10px;line-height:11px;font-weight:800;letter-spacing:.05em;
}
.bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-demo { font-size:7px;line-height:1;color:#91adbb;letter-spacing:.08em; }
.bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-dashboard { display:flex;justify-content:space-between;align-items:center;gap:10px; }
.bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-metric { display:flex;align-items:baseline;gap:6px; }
.bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-metric-number { color:#fff;font-size:24px;line-height:25px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.04em; }
.bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-metric-unit { font-size:8px;line-height:1;color:#b8d3e1;font-weight:650;letter-spacing:.025em; }
.bfs-cinematic-panel .bfs-cinematic-chart { display:block;width:96px;height:25px;flex:0 0 96px;overflow:visible; }
.bfs-cinematic-chart-line { fill:none;stroke:rgb(var(--bfs-cinematic-panel-rgb));stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke; }
.bfs-cinematic-chart-area { fill:rgba(var(--bfs-cinematic-panel-rgb),.27); }
.bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-feed-viewport { display:block;height:100%;max-height:37px;overflow:hidden;contain:paint;border-top:1px solid rgba(var(--bfs-cinematic-panel-rgb),.2); }
.bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-feed-track { display:block; }
.bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-feed-row { display:flex;align-items:center;justify-content:space-between;gap:5px;height:18px;min-height:18px;line-height:18px;font-size:11px; }
.bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-entry-label { color:#f4fbff;flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:650; }
.bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-entry-value { color:rgb(var(--bfs-cinematic-panel-rgb));flex:0 0 auto;font-size:8px;line-height:12px;font-weight:750;white-space:nowrap;padding:1px 4px;border:1px solid rgba(var(--bfs-cinematic-panel-rgb),.3);border-radius:3px;background:rgba(var(--bfs-cinematic-panel-rgb),.08); }
.bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-feed-row:nth-child(n+2) { opacity:.68; }
.bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-feed-rail { display:block;overflow:hidden;width:100%;height:3px;border-radius:2px;background:rgba(162,215,241,.15); }
.bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-feed-fill { display:block;width:100%;height:100%;background:linear-gradient(90deg,rgba(var(--bfs-cinematic-panel-rgb),.4),rgb(var(--bfs-cinematic-panel-rgb)));transform:scaleX(.08);transform-origin:left;transition:transform .95s cubic-bezier(.22,1,.36,1); }
.bfs-system-preview.bfs-cinematic-panel.bfs-cinematic-panel-active { border-color:#d8f8ff;box-shadow:0 16px 38px #00091880,0 0 42px rgba(var(--bfs-cinematic-panel-rgb),.5),inset 0 0 0 1px rgba(var(--bfs-cinematic-panel-rgb),.8); }
.bfs-cinematic-panel-active .bfs-cinematic-feed { border-color:rgba(215,249,255,.85)!important; }
.bfs-system-preview.bfs-cinematic-panel.bfs-cinematic-panel-ready { border-color:#8ce9d9;box-shadow:0 16px 38px #00091880,0 0 36px #75ebd954; }
.bfs-cinematic-panel-ready .bfs-cinematic-feed .bfs-cinematic-signal { background:#8bf0c8; }
.bfs-cinematic-panels-paused .bfs-cinematic-feed *, .bfs-cinematic-panels-paused .bfs-cinematic-panel { transition:none!important; }
.bfs-cinematic-panels-paused .bfs-cinematic-panel > img,
.bfs-cinematic-panels-paused .bfs-cinematic-screen-scan::before { animation-play-state:paused!important; }
@keyframes bfs-cinematic-screen-scan { 0% { transform:translateY(0);opacity:0; } 9% { opacity:.88; } 73% { transform:translateY(415%);opacity:.9; } 80%,100% { transform:translateY(415%);opacity:0; } }
@keyframes bfs-cinematic-screen-drift { from { transform:scale(1.015) translateY(0); } to { transform:scale(1.035) translateY(-2px); } }
@media (max-width:1400px) {
 .bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-feed-viewport { max-height:33px; }
 .bfs-system-preview.bfs-cinematic-panel > .bfs-cinematic-feed { grid-template-rows:10px 19px minmax(0,1fr) 3px;padding:3px 6px;gap:2px; }
 .bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-metric-number { font-size:21px;line-height:21px; }
 .bfs-cinematic-panel .bfs-cinematic-chart { width:78px;height:21px;flex-basis:78px; }
 .bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-feed-row { height:16px;min-height:16px;line-height:16px;font-size:10px; }
 .bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-entry-value { font-size:7px;padding:0 3px; }
}
@media (max-width:1100px) {
 .bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-feed-viewport { max-height:15px; }
 .bfs-system-preview.bfs-cinematic-panel > .bfs-cinematic-feed { left:3px;right:3px;grid-template-rows:9px 19px minmax(0,1fr) 2px;padding:3px 4px;gap:2px; }
 .bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-feed-title { font-size:8px;line-height:9px; }
 .bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-metric-number { font-size:19px;line-height:19px; }
 .bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-metric-unit { font-size:6px; }
 .bfs-cinematic-panel .bfs-cinematic-chart { width:56px;height:19px;flex-basis:56px; }
 .bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-feed-row { height:14px;min-height:14px;line-height:14px;font-size:8px; }
 .bfs-cinematic-panel .bfs-cinematic-feed .bfs-cinematic-entry-value { font-size:6px;padding:0 2px; }
}
@media (max-width:640px) { .bfs-system-preview.bfs-cinematic-panel { display:none; } }
@media (prefers-reduced-motion:reduce) {
 .bfs-system-preview.bfs-cinematic-panel,
 .bfs-system-preview.bfs-cinematic-panel > img,
 .bfs-system-preview.bfs-cinematic-panel .bfs-cinematic-feed *,
 .bfs-cinematic-screen-scan::before { animation:none!important;transition:none!important; }
 .bfs-cinematic-screen-scan { display:none!important; }
}
