/* ==========================================================================
   Averra Security — ui.css
   Camera feeds, detection overlays and dashboard widgets drawn in CSS.
   These primitives are reused across hero, feature, use-case and dashboard.
   ========================================================================== */

/* ---- Camera feed frame ---------------------------------------------- */
.feed {
  position: relative; overflow: hidden;
  border-radius: var(--r-md);
  background: #0B1219;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 10;
  isolation: isolate;
}
.feed__bar {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.04em; color: var(--fg-2);
  background: linear-gradient(180deg, rgba(10,15,20,.75), rgba(10,15,20,0));
}
.feed__bar b { color: var(--fg); font-weight: 700; }
.feed__live { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); }
.feed__time { font-variant-numeric: tabular-nums; }

/* Scene: a stylised environment rendered with gradients ---------------- */
.scene {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(63,211,122,0.06), transparent 60%),
    linear-gradient(180deg, #121B25 0%, #0D141B 55%, #0A1016 100%);
}
.scene::before { /* floor perspective grid */
  content: ""; position: absolute; inset: 45% 0 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(148,163,184,.09) 0 1px, transparent 1px 14.28%),
    repeating-linear-gradient(0deg, rgba(148,163,184,.09) 0 1px, transparent 1px 22%);
  transform: perspective(300px) rotateX(58deg);
  transform-origin: top center;
  opacity: .9;
}
.scene::after { /* scanline + vignette */
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    radial-gradient(100% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.45) 100%);
  pointer-events: none;
}
.scene--lot { background: linear-gradient(180deg, #0F1A26 0%, #0C141C 60%, #0A1016 100%); }
.scene--corridor::before { inset: 38% 0 0 0; transform: perspective(240px) rotateX(64deg); }
.scene--retail { background: linear-gradient(180deg, #16202B 0%, #0E161E 60%, #0A1016 100%); }
.scene--plant { background: linear-gradient(180deg, #131A20 0%, #0D1319 60%, #0A1016 100%); }
.scene--night { background: linear-gradient(180deg, #0A1119 0%, #0A0F14 100%); }

/* Structural props */
.prop { position: absolute; background: rgba(148,163,184,.10); border: 1px solid rgba(148,163,184,.12); border-radius: 4px; }
.prop--pillar { width: 6%; height: 52%; top: 8%; }
.prop--shelf { width: 28%; height: 10%; background: rgba(148,163,184,.14); }
.prop--door { width: 12%; height: 42%; top: 12%; border-radius: 6px 6px 0 0; background: rgba(63,211,122,.05); border-color: rgba(63,211,122,.18); }
.prop--fence { width: 100%; height: 3px; left: 0; background: repeating-linear-gradient(90deg, rgba(148,163,184,.25) 0 10px, transparent 10px 20px); border: 0; }
.prop--light { width: 10px; height: 10px; border-radius: 50%; background: #FDE68A; box-shadow: 0 0 18px 6px rgba(253,230,138,.35); border: 0; }

/* Figures ----------------------------------------------------------------- */
.fig { position: absolute; bottom: 12%; will-change: transform; }
.fig--person { width: 5.2%; aspect-ratio: 1 / 2.6; }
.fig--person::before { /* head */
  content: ""; position: absolute; top: 0; left: 50%; width: 62%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; background: #2B3946;
}
.fig--person::after { /* body */
  content: ""; position: absolute; top: 34%; left: 0; right: 0; bottom: 0;
  border-radius: 40% 40% 12% 12% / 22% 22% 6% 6%; background: linear-gradient(180deg, #34434F, #202B35);
}
.fig--vehicle { width: 22%; aspect-ratio: 2.4 / 1; }
.fig--vehicle::before { /* body */
  content: ""; position: absolute; inset: 22% 0 0 0; border-radius: 12px 12px 6px 6px;
  background: linear-gradient(180deg, #3A4653, #222D37);
}
.fig--vehicle::after { /* cabin */
  content: ""; position: absolute; left: 22%; right: 22%; top: 0; height: 42%;
  border-radius: 40% 40% 0 0 / 100% 100% 0 0; background: #2A343F;
}
.fig--vehicle .lamp { position: absolute; bottom: 22%; width: 7%; height: 12%; border-radius: 3px; background: #FDE68A; box-shadow: 0 0 10px 3px rgba(253,230,138,.4); }
.fig--vehicle .lamp--l { left: 3%; } .fig--vehicle .lamp--r { right: 3%; }
.fig--crowd { display: flex; gap: 6%; width: 34%; bottom: 14%; }
.fig--crowd i { flex: 1; aspect-ratio: 1 / 2.4; position: relative; }
.fig--crowd i::before { content: ""; position: absolute; top: 0; left: 50%; width: 62%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #2B3946; }
.fig--crowd i::after { content: ""; position: absolute; top: 34%; left: 0; right: 0; bottom: 0; border-radius: 40% 40% 12% 12% / 22% 22% 6% 6%; background: linear-gradient(180deg, #34434F, #202B35); }

/* Walking loop (runs only when feed has .is-live) */
.is-live .fig--walk { animation: walk 9s linear infinite; }
@keyframes walk { from { transform: translateX(0); } to { transform: translateX(var(--walk, 140px)); } }
.is-live .fig--drive { animation: drive 11s var(--ease-io) infinite alternate; }
@keyframes drive { from { transform: translateX(0); } to { transform: translateX(var(--drive, 60px)); } }

/* Detection box ------------------------------------------------------------ */
.det {
  position: absolute; z-index: 4;
  border: 1.5px solid var(--green);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(63,211,122,.15), inset 0 0 24px -10px rgba(63,211,122,.5);
  opacity: 0; transform: scale(1.08);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.det::before, .det::after { /* bracket corners */
  content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid var(--green);
}
.det::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.det::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.det--on, .is-detecting .det { opacity: 1; transform: scale(1); }
.det--alert { border-color: var(--red); box-shadow: 0 0 0 1px rgba(248,113,113,.2), inset 0 0 24px -10px rgba(248,113,113,.5); }
.det--alert::before, .det--alert::after { border-color: var(--red); }
.det__tag {
  position: absolute; left: -1.5px; bottom: calc(100% + 6px);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 4px 8px; border-radius: 5px;
  background: var(--green); color: var(--green-ink);
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: .05em;
}
.det--alert .det__tag { background: var(--red); color: #2B0A0A; }
.det__tag small { font-weight: 600; opacity: .8; }
.det__scan { /* single vertical sweep when detection appears */
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none;
}
.det__scan::after {
  content: ""; position: absolute; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg, transparent, rgba(63,211,122,.28), transparent);
  transform: translateY(-120%);
}
.det--on .det__scan::after, .is-detecting .det__scan::after { animation: scan 900ms var(--ease) 1 forwards; }
@keyframes scan { to { transform: translateY(260%); } }

/* Meta chips that accompany a detection */
.meta {
  position: absolute; z-index: 5;
  display: grid; gap: 4px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: rgba(10,15,20,.78); border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: var(--fs-micro); color: var(--fg-2);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--t-med) var(--ease) 120ms, transform var(--t-med) var(--ease) 120ms;
}
.meta b { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.meta span { display: flex; justify-content: space-between; gap: 18px; white-space: nowrap; }
.meta--on, .is-detecting .meta { opacity: 1; transform: none; }

/* Restricted zone overlay */
.zone {
  position: absolute; z-index: 3; border-radius: 8px;
  background: repeating-linear-gradient(135deg, rgba(248,113,113,.16) 0 8px, rgba(248,113,113,.05) 8px 16px);
  border: 1.5px dashed rgba(248,113,113,.7);
  opacity: 0; transition: opacity var(--t-med) var(--ease);
}
.zone__lbl { position: absolute; top: 8px; left: 10px; font-size: var(--fs-micro); font-weight: 800; letter-spacing: .06em; color: var(--red); }
.zone--on { opacity: 1; }

/* Motion trail (behavioural analysis) */
.trail { position: absolute; z-index: 3; opacity: 0; transition: opacity var(--t-med) var(--ease); }
.trail--on { opacity: 1; }
.trail path { fill: none; stroke: var(--green); stroke-width: 2; stroke-dasharray: 4 6; stroke-linecap: round; }
.trail circle { fill: var(--green); }

/* ---- Dashboard widgets --------------------------------------------- */
.panel {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
}
.panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  font-size: var(--fs-small); color: var(--fg-2);
}
.panel__head b { color: var(--fg); font-weight: 700; }
.stat { display: grid; gap: 4px; }
.stat__lbl { font-size: var(--fs-small); color: var(--fg-2); }
.stat__val { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__val--green { color: var(--green); }
.stat__sub { font-size: var(--fs-micro); color: var(--fg-3); }

/* Event row */
.evt {
  display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small);
}
.evt:last-child { border-bottom: 0; }
.evt__t { color: var(--fg-3); font-variant-numeric: tabular-nums; }
.evt b { display: block; font-weight: 700; color: var(--fg); }
.evt small { color: var(--fg-2); }

/* Sparkline bars */
.bars { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.bars i { flex: 1; background: linear-gradient(180deg, var(--green), rgba(63,211,122,.25)); border-radius: 3px 3px 0 0; height: var(--h, 40%); transform-origin: bottom; transform: scaleY(0); transition: transform var(--t-slow) var(--ease); }
.bars i:nth-child(n) { transition-delay: calc(var(--i, 0) * 40ms); }
.is-in .bars i, .bars--on i { transform: scaleY(1); }

/* Risk meter */
.risk { position: relative; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--green) 0 45%, var(--amber) 45% 75%, var(--red) 75% 100%); opacity: .75; }
.risk__pin { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--fg); border: 3px solid var(--bg-2); transform: translate(-50%, -50%); left: var(--x, 30%); transition: left var(--t-slow) var(--ease); box-shadow: 0 0 0 1px var(--line-strong); }

/* Notification toast */
.toast {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 12px 14px; border-radius: var(--r-md);
  background: rgba(15,23,32,.9); border: 1px solid var(--line-strong);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.7);
  font-size: var(--fs-small);
}
.toast__ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(248,113,113,.14); color: var(--red); }
.toast__ico--green { background: rgba(63,211,122,.14); color: var(--green); }
.toast b { display: block; font-weight: 700; }
.toast small { color: var(--fg-2); }