/* antare-event-feed — scoped component styles */

.antare-event-feed{
  position:relative;
  width:100%;
  aspect-ratio:688/516;
  overflow:hidden;
}

/* ============================================================
     ANTARE — incident feed, looping card cycle
     Design frame = 688 x 516. Authored 1:1 in design px inside
     .stage, then the whole stage is scaled to fit its container.

     The card component is authored at its native 303px width and
     each stage in the cycle carries its own scale factor.
     ============================================================ */
.antare-event-feed{
    --frame-w: 688;
    --frame-h: 516;

    --ui-bg:#ffffff;
    --ui-radius:12px;
    --surface-800:#1e293b;
    --surface-500:#64748b;
    --surface-400:#94a3b8;
    --surface-200:#e2e8f0;
    --content:#334155;

    --bar-orange:#ff8904;
    --bar-yellow:#fdc700;
    --bar-red:#ff6467;

    --sw-positive:#7dcdbb;
    --sw-concern:#fde047;
    --sw-risk:#fdba74;
    --sw-critical:#f87171;
    --sw-unusual:#cdd2d5;

    /* motion --------------------------------------------------- */
    --cycle:        4000ms;  /* time between advances            */
    --move:         1500ms;  /* travel duration                  */
    --fade:          900ms;  /* opacity duration                 */
    --ease-move:    cubic-bezier(.22,1,.36,1);   /* expo-ish out  */
    --ease-fade:    cubic-bezier(.33,0,.25,1);
    --stagger:       150ms;  /* trail between stack members      */

    --bg-blur: 0px;
  }

.antare-event-feed,
.antare-event-feed *{box-sizing:border-box;margin:0;padding:0}
.antare-event-feed .stage{
    position:absolute; top:0; left:0;
    width:688px; height:516px;
    overflow:hidden;
    transform-origin: top left;
    background:#0f172a;
  }

  /* ---------- background ---------- */
.antare-event-feed .bg{
    position:absolute; left:-161px; top:-34px;
    width:937px; height:702px;
    object-fit:cover; object-position:center;
    filter:blur(var(--bg-blur));
  }

  /* ---------- card stack ----------
     Slots share one left edge and scale from top-centre, so every
     card in the cycle stays centred on x = 237.5 automatically.  */
  /* With the filter panel gone the deck owns the whole frame, so it
     centres on 344 rather than sitting left of the sidebar. */
.antare-event-feed .card-slot{
    position:absolute;
    left:192.5px; top:0;
    width:303px;
    transform-origin: top center;
    will-change: transform, opacity;
    transition:
      transform  var(--move) var(--ease-move),
      opacity    var(--fade) var(--ease-fade);
  }
.antare-event-feed .card-slot.no-anim{ transition:none !important; }

.antare-event-feed .card{
    width:303px;
    background:var(--ui-bg);
    border-radius:var(--ui-radius);
    padding:12px;
    display:flex; flex-direction:column; gap:12px;
    backdrop-filter:blur(20px);
    transition: box-shadow var(--move) var(--ease-move);
  }

.antare-event-feed .card-date{
    display:flex; align-items:center; justify-content:space-between;
    font-size:12px; line-height:16px; white-space:nowrap;
  }
.antare-event-feed .card-date .when{ font-weight:600; color:var(--surface-800); }
.antare-event-feed .card-date .ref{ font-weight:400; color:var(--surface-400); }

  /* 281:170 still frame — 279 x 168.8 at the card's native width */
.antare-event-feed .card-media{ position:relative; width:100%; }
.antare-event-feed .card-media .shot{
    position:relative;
    width:100%; aspect-ratio:281/170;
    border-radius:3.515px; overflow:hidden;
    background:#0f172a;
  }
.antare-event-feed .card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.antare-event-feed .play{
    position:absolute; left:50%; top:50%;
    width:60.48px; height:60.48px; transform:translate(-50%,-50%);
  }

.antare-event-feed .card-body{ display:flex; flex-direction:column; gap:6px; }
.antare-event-feed .card-heading{ display:flex; gap:8px; align-items:stretch; }
.antare-event-feed .card-heading .bar{ width:6px; border-radius:3.84px; flex:0 0 6px; }
.antare-event-feed .card-heading h3{
    flex:1 1 0; min-width:0;
    font-size:18px; line-height:24px; font-weight:600;
    color:var(--content);
    overflow-wrap:break-word;
  }
.antare-event-feed .card-desc{
    font-size:12px; line-height:16px; font-weight:400;
    color:var(--content);
    height:31px; overflow:hidden;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  }

.antare-event-feed .card-meta{
    display:flex; align-items:center; justify-content:space-between;
    border-top:1px solid var(--surface-200);
    padding:12px 8px 0;
  }
.antare-event-feed .card-meta .item{ display:flex; align-items:center; gap:6px; }
.antare-event-feed .card-meta .item svg{ width:10px; height:10px; display:block; flex:0 0 10px; }
.antare-event-feed .card-meta .item span{
    font-size:12px; line-height:16px; color:var(--surface-500); white-space:nowrap;
  }

  /* ---------- filter panel ---------- */
.antare-event-feed .panel{
    position:absolute; left:468px; top:-6.5px;
    width:220px;
    padding:0 16px 15.36px;
    display:flex; flex-direction:column; gap:12px;
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    color:#fff;
    z-index:20;
  }
.antare-event-feed .panel .group{ display:flex; flex-direction:column; gap:9.6px; }
.antare-event-feed .panel .stack{ display:flex; flex-direction:column; gap:6.24px; }
.antare-event-feed .panel .label{ font-size:12px; line-height:20.966px; font-weight:600; }

.antare-event-feed .pill{
    background:rgba(255,255,255,.2);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border-radius:23.962px;
    padding:7.987px 11.981px;
    display:flex; align-items:center; gap:10.483px;
  }
.antare-event-feed .pill .txt{ flex:1 1 0; min-width:0; font-size:13.978px; line-height:normal; }
.antare-event-feed .pill svg{ display:block; flex:0 0 auto; }

.antare-event-feed .cat{
    background:rgba(255,255,255,.2);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border-radius:37.44px;
    height:37.44px;
    padding:0 11.981px;
    display:flex; align-items:center; justify-content:space-between;
  }
.antare-event-feed .cat.is-active{ background:rgba(255,255,255,.38); }
.antare-event-feed .cat .left{ display:flex; align-items:center; gap:7.987px; }
.antare-event-feed .cat .swatch{ width:15.974px; height:15.974px; border-radius:3.994px; flex:0 0 15.974px; }
.antare-event-feed .cat .name{ font-size:13.978px; line-height:20.966px; }
.antare-event-feed .cat .count{ font-size:10.982px; line-height:20.966px; color:rgba(255,255,255,.4); }

.antare-event-feed .toggle-row{ display:flex; align-items:center; gap:7.987px; }
.antare-event-feed .toggle{
    width:31.949px; height:15.974px; border-radius:29.952px;
    background:rgba(255,255,255,.1);
    border:.998px solid rgba(0,0,0,0);
    display:flex; align-items:center; padding-left:1.997px;
    flex:0 0 31.949px;
  }
.antare-event-feed .toggle .handle{ width:11.981px; height:11.981px; border-radius:7.987px; background:#fff; }
.antare-event-feed .toggle-row .t{ font-size:13.978px; line-height:20.966px; white-space:nowrap; }

  /* ---------- alignment checker (dev only) ---------- */
.antare-event-feed .refoverlay{
    position:absolute; inset:0; width:688px; height:516px;
    z-index:99; pointer-events:none; display:none;
  }
.antare-event-feed.ref-ghost .refoverlay{ display:block; opacity:.5; }
.antare-event-feed.ref-diff  .refoverlay{ display:block; mix-blend-mode:difference; }

@media (prefers-reduced-motion: reduce){
.antare-event-feed .card-slot,
.antare-event-feed .card{ transition:none !important; }
  }