/* ───────────────────────────────────────────────────────────────────────────
   «Столики» — TECH energy layer.  Pure @keyframes (transitions stall in some
   embeds; keyframe animations run reliably).  Adds: animated dot-grid fields,
   data-flow lines, live ticking floor map, channel sync beam, mono telemetry,
   scan sweeps, glow pulses.  All gated on prefers-reduced-motion.
   ─────────────────────────────────────────────────────────────────────────── */

:root{
  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --tech-line:color-mix(in srgb,var(--primary) 22%,transparent);
  --tech-dot:color-mix(in srgb,var(--primary) 28%,transparent);
}

/* ── animated dot-grid field (drop into any .section as a child) ───────────── */
.grid-field{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask:radial-gradient(120% 80% at 50% 30%, #000 30%, transparent 78%);
          mask:radial-gradient(120% 80% at 50% 30%, #000 30%, transparent 78%);opacity:.7}
.grid-field::before{content:"";position:absolute;inset:-2px;
  background-image:radial-gradient(var(--tech-dot) 1.3px, transparent 1.3px);
  background-size:26px 26px;animation:gridDrift 18s linear infinite}
.grid-field::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(90deg,var(--tech-line) 1px,transparent 1px),
                   linear-gradient(0deg,var(--tech-line) 1px,transparent 1px);
  background-size:104px 104px;opacity:.5;animation:gridDrift 26s linear infinite reverse}
@keyframes gridDrift{to{background-position:26px 26px}}

/* faint scanning sweep band */
.scan-sweep{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.scan-sweep::before{content:"";position:absolute;top:0;bottom:0;width:42%;left:-42%;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--primary) 8%,transparent),transparent);
  animation:scanX 6.5s ease-in-out infinite}
@keyframes scanX{0%{left:-42%}55%,100%{left:120%}}

/* ── mono telemetry chip (kicker companion) ────────────────────────────────── */
.telemetry{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.02em;color:var(--fg-2);background:var(--card);border-radius:999px;padding:7px 13px 7px 11px;
  box-shadow:var(--sh-sm);font-variant-numeric:tabular-nums}
.telemetry .led{width:7px;height:7px;border-radius:50%;background:var(--success);position:relative;flex:0 0 auto}
.telemetry .led::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--success);opacity:.6;animation:ledPing 2s ease-out infinite}
.telemetry b{color:var(--fg);font-weight:600}
.telemetry .sep{width:1px;height:12px;background:var(--border)}
@keyframes ledPing{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.7);opacity:0}}

/* blinking caret */
.caret{display:inline-block;width:9px;height:1.05em;vertical-align:-2px;margin-left:3px;border-radius:1px;
  background:var(--primary);animation:caretBlink 1.1s steps(1) infinite}
@keyframes caretBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* ═══════════════════════════════════════════════════════════════════════════
   LIVE FLOOR MAP — ticking, breathing
   ═══════════════════════════════════════════════════════════════════════════ */
/* a "now" scan line sweeping the room */
.fmap-room{overflow:hidden}
.fmap-room::after{content:"";position:absolute;top:0;bottom:0;width:2px;left:0;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--primary) 70%,transparent),transparent);
  box-shadow:0 0 14px 2px color-mix(in srgb,var(--primary) 45%,transparent);
  animation:roomScan 7s cubic-bezier(.6,0,.4,1) infinite;opacity:.0}
@keyframes roomScan{0%{left:2%;opacity:0}8%{opacity:.9}48%{opacity:.9}60%{left:97%;opacity:0}100%{left:97%;opacity:0}}

/* occupied tables emit a soft pulse ring */
.ft.occ::after,.ft.soon::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 0 var(--pulse,color-mix(in srgb,#338ef7 40%,transparent));animation:tablePulse 3.2s ease-out infinite}
.ft.soon::after{--pulse:color-mix(in srgb,#f5a524 45%,transparent);animation-duration:2.6s}
.ft:nth-child(3)::after{animation-delay:.5s}.ft:nth-child(5)::after{animation-delay:1.1s}
.ft:nth-child(7)::after{animation-delay:.8s}.ft:nth-child(9)::after{animation-delay:1.6s}
@keyframes tablePulse{0%{box-shadow:0 0 0 0 var(--pulse)}70%,100%{box-shadow:0 0 0 12px transparent}}
/* live status dot in the room corner */
.fmap-live{position:absolute;top:12px;right:14px;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:10.5px;font-weight:600;color:var(--success-fg);background:var(--success-soft);padding:3px 9px;border-radius:999px;font-variant-numeric:tabular-nums}
.fmap-live .led{width:6px;height:6px;border-radius:50%;background:var(--success);animation:ledBlink 1.4s ease-in-out infinite}
@keyframes ledBlink{0%,100%{opacity:1}50%{opacity:.25}}
/* heat lens: tiles breathe */
.fmap.load .ft.l4{animation:heatBreathe 2.4s ease-in-out infinite}
.fmap.load .ft.l3{animation:heatBreathe 3s ease-in-out infinite}
@keyframes heatBreathe{0%,100%{filter:saturate(1)}50%{filter:saturate(1.5) brightness(1.04)}}

/* ═══════════════════════════════════════════════════════════════════════════
   CHANNEL SYNC BEAM — "one engine, all channels"
   ═══════════════════════════════════════════════════════════════════════════ */
.channels{position:relative}
.sync-beam{position:absolute;left:8%;right:8%;top:50%;height:2px;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--tech-line) 0 8px,transparent 8px 16px)}
.sync-beam::before{content:"";position:absolute;top:50%;left:0;width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--primary);box-shadow:0 0 16px 4px color-mix(in srgb,var(--primary) 55%,transparent);
  animation:beamRun 4.2s cubic-bezier(.5,0,.5,1) infinite}
@keyframes beamRun{0%{left:0%}100%{left:100%}}
.channels .dev{position:relative;z-index:1}
/* a record glows as the beam passes through its column */
.mini-row.sync{position:relative;overflow:hidden}
.mini-row.sync::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--primary) 0%,transparent);animation:rowSync 4.2s ease-in-out infinite}
.dev:nth-child(1) .mini-row.sync::after{animation-delay:.1s}
.dev:nth-child(2) .mini-row.sync::after{animation-delay:1.5s}
.dev:nth-child(3) .mini-row.sync::after{animation-delay:2.9s}
@keyframes rowSync{0%,40%{box-shadow:inset 0 0 0 1.5px transparent;background:transparent}
  46%{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--primary) 55%,transparent);background:var(--primary-soft)}
  60%,100%{box-shadow:inset 0 0 0 1.5px transparent;background:transparent}}

/* ═══════════════════════════════════════════════════════════════════════════
   METRICS — terminal readout
   ═══════════════════════════════════════════════════════════════════════════ */
.metric{position:relative;overflow:hidden}
.metric::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--primary),color-mix(in srgb,var(--primary) 30%,transparent))}
.metric .mtag{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:10px;display:flex;align-items:center;gap:7px}
.metric .mtag i{width:6px;height:6px;border-radius:50%;background:var(--success);animation:ledBlink 1.6s ease-in-out infinite}
.metric .mv{font-family:var(--mono)}
.metric .spark{margin-top:14px;display:flex;align-items:flex-end;gap:3px;height:26px}
.metric .spark i{flex:1;background:color-mix(in srgb,var(--primary) 22%,transparent);border-radius:2px;
  transform-origin:bottom;animation:sparkBar 2.6s ease-in-out infinite}
.metric .spark i:nth-child(1){animation-delay:0s}.metric .spark i:nth-child(2){animation-delay:.2s}
.metric .spark i:nth-child(3){animation-delay:.4s}.metric .spark i:nth-child(4){animation-delay:.6s}
.metric .spark i:nth-child(5){animation-delay:.8s}.metric .spark i:nth-child(6){animation-delay:1s}
.metric .spark i:nth-child(7){animation-delay:1.2s}
@keyframes sparkBar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* ═══════════════════════════════════════════════════════════════════════════
   GUARANTEE collide-stage — circuit feel
   ═══════════════════════════════════════════════════════════════════════════ */
.collide-stage{position:relative}
.collide-stage .cs-grid::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%, transparent 30%, color-mix(in srgb,var(--primary) 5%,transparent) 70%);
  animation:csPulse 4s ease-in-out infinite}
@keyframes csPulse{0%,100%{opacity:.4}50%{opacity:.9}}

/* ── section heading flair: animated kicker bar ────────────────────────────── */
.kicker .bar{position:relative;overflow:hidden}
.kicker .bar::after{content:"";position:absolute;inset:0;background:#fff;mix-blend-mode:overlay;
  transform:translateX(-100%);animation:barSheen 3s ease-in-out infinite}
@keyframes barSheen{0%{transform:translateX(-100%)}40%,100%{transform:translateX(220%)}}

/* card hover glow (uses box-shadow on hover; instant is fine) */
.bcard::after,.tcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--primary) 9%,transparent), transparent 60%);
  opacity:0}
.bcard:hover::after,.tcard:hover::after{opacity:1}

/* tap micro-interaction (scale on press) — uses :active, OK */
.tap{transition:transform .12s cubic-bezier(.34,1.5,.5,1)}
.tap:active{transform:scale(.95)}

@media (prefers-reduced-motion:reduce){
  .grid-field::before,.grid-field::after,.scan-sweep::before,.fmap-room::after,
  .ft.occ::after,.ft.soon::after,.fmap-live .led,.fmap.load .ft.l3,.fmap.load .ft.l4,
  .sync-beam::before,.mini-row.sync::after,.metric .spark i,.collide-stage .cs-grid::after,
  .kicker .bar::after,.telemetry .led::after,.caret{animation:none!important}
}