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

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

/* ============================================================
     ANTARE — Incident review
     Design frame = 688 x 516 (Figma 4007:27070)

     Concept: the tape has already been watched. The clip is opened
     FROM the source strip — you pick a camera and it grows into the
     frame — and once it is running, the panel beside it is not a
     transcript but an index of it: every highlight, every tag, keyed
     to the playhead. Part way through the furniture clears and you
     get the footage on its own, then the analysis comes back.

     The real 36s clip drives everything. Nothing is on a separate
     schedule; the panel reads video.currentTime.
     ============================================================ */
.antare-event-detail{
    --frame-w: 688;
    --frame-h: 516;

    --t-date:    9.6px;
    --t-meta:    9.6px;
    --t-head:   11.2px;
    --t-body:   11.2px;
    --t-code:    9.6px;
    --t-tagtime:  10px;

    --rule: rgba(255,255,255,.22);
    --err:  #ffa2a2;
    --ok:   #4dd16c;

    --ease:      cubic-bezier(.22,1,.36,1);
    --ease-soft: cubic-bezier(.4,0,.2,1);

    /* motion knobs ------------------------------------------------ */
    --grow:  900ms;   /* strip -> frame, and back            */
    --swap:  760ms;   /* into and out of full screen         */
  }

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

  /* ---------- the still that holds the frame before playback ------ */
.antare-event-detail .feature{
    position:absolute; inset:0;
    width:688px; height:516px;
    object-fit:cover;
    transition:opacity 620ms var(--ease-soft), transform 900ms var(--ease);
    transform:scale(1.02);
  }
.antare-event-detail .feature.gone{ opacity:0; transform:scale(1.06); }

  /* ---------- the clip. Geometry animates; it IS the transition --- */
.antare-event-detail .player{
    position:absolute;
    overflow:hidden;
    background:#05080b;
    transition:
      left var(--grow) var(--ease), top var(--grow) var(--ease),
      width var(--grow) var(--ease), height var(--grow) var(--ease),
      border-radius var(--grow) var(--ease),
      box-shadow var(--grow) var(--ease);
    will-change:left,top,width,height;
  }
.antare-event-detail .player video{
    width:100%; height:100%;
    object-fit:cover; display:block;
    /* parked left so the action sits in the visible half while the
       panel is up; recentres when the panel clears */
    transform:translateX(-100px) scale(1.02);
    transition:transform var(--swap) var(--ease);
  }
.antare-event-detail .player.full video{ transform:translateX(0) scale(1.05); }

.antare-event-detail .vignette{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 22%,
                                       rgba(0,0,0,0) 52%, rgba(0,0,0,.55) 100%);
    pointer-events:none;
    transition:opacity var(--swap) var(--ease-soft);
  }

  /* Full screen sheds the ANALYSIS furniture but keeps the player
     chrome — this piece is about the UI, not the footage. The chrome
     then auto-hides on idle, the way a real player does, and both
     come back together on the way out. */
.antare-event-detail .ui{ transition:opacity var(--swap) var(--ease-soft), transform var(--swap) var(--ease),
                  left var(--swap) var(--ease), top var(--swap) var(--ease),
                  width var(--swap) var(--ease); }
.antare-event-detail.is-full .vignette{ opacity:.5; }
.antare-event-detail.is-full .strip{ opacity:0; transform:translateY(14px); pointer-events:none; }
.antare-event-detail.is-full .sidebar{ opacity:0; transform:translateX(34px); }

  /* chrome spans the frame and drops to the floor of it — the bar is
     no longer sitting above a filmstrip, it is a full-screen player */
.antare-event-detail.is-full .transport{ left:17px; width:654px; top:458px; }

  /* ...then steps out of the way halfway through */
  .is-bare .chip,
.antare-event-detail.is-bare .transport{ opacity:0; transform:translateY(14px); pointer-events:none; }

  /* ---------- source chip ---------- */
.antare-event-detail .chip{
    position:absolute; left:28px; top:22px;
    width:142px; height:38px;
    display:flex; align-items:center; gap:8px;
    padding:0 12px;
    border-radius:19px;
    background:rgba(12,16,22,.46);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.14);
    z-index:6;
  }
.antare-event-detail .chip .num{
    width:18px; height:18px; border-radius:6px;
    background:rgba(255,255,255,.18);
    display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:500; line-height:1;
  }
.antare-event-detail .chip .name{ font-size:12px; font-weight:400; letter-spacing:.1px; white-space:nowrap; }

  /* ---------- play ---------- */
.antare-event-detail .play{
    position:absolute; left:214.2px; top:179.2px;
    width:57.6px; height:60px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:rgba(14,18,24,.42);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.2);
    transition:opacity 460ms var(--ease-soft), transform 620ms var(--ease);
    z-index:7;
  }
.antare-event-detail .play.gone{ opacity:0; transform:scale(1.5); }
.antare-event-detail .play .halo{
    position:absolute; inset:-1px; border-radius:50%;
    border:1px solid rgba(255,255,255,.45);
    animation:antare-event-detail-halo 2.4s ease-out infinite;
  }
@keyframes antare-event-detail-halo{
.antare-event-detail 0%{ transform:scale(1); opacity:.7 }
.antare-event-detail 70%,
.antare-event-detail 100%{ transform:scale(1.45); opacity:0 }
  }

  /* ---------- transport ---------- */
.antare-event-detail .transport{
    position:absolute; left:17px; top:339px;
    width:432px; height:41px;
    border-radius:10px; overflow:hidden;
    background:rgba(12,16,22,.46);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.13);
    z-index:6;
  }
.antare-event-detail .transport .fill{
    position:absolute; left:0; top:0; bottom:0; width:0%;
    background:linear-gradient(90deg, rgba(255,255,255,.13), rgba(255,255,255,.07));
    border-right:1px solid rgba(255,255,255,.30);
  }
.antare-event-detail .transport .inner{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 12px 0 16px;
  }
.antare-event-detail .transport .time{
    font-size:13px; font-weight:400; letter-spacing:.2px;
    font-variant-numeric:tabular-nums;
  }
.antare-event-detail .transport .btns{ display:flex; gap:2px; }
.antare-event-detail .transport .btn{
    width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    border-radius:8px; opacity:.85;
  }
.antare-event-detail .transport .btn svg{ width:15px; height:15px; display:block; }

  /* ---------- filmstrip ---------- */
.antare-event-detail .strip{
    position:absolute; left:-1px; top:424px;
    width:469px; height:92px;
    display:flex; z-index:5;
  }
.antare-event-detail .strip .cell{ position:relative; width:156.334px; height:92px; overflow:hidden; }
.antare-event-detail .strip .cell img{
    position:absolute; left:0; top:-32.5px;
    width:156.334px; height:157px; object-fit:cover;
    filter:saturate(.9) brightness(.7);
    transition:filter 700ms var(--ease-soft), transform 900ms var(--ease);
  }
.antare-event-detail .strip .cell.live img{ filter:saturate(1) brightness(1); transform:scale(1.04); }
.antare-event-detail .strip .cell .n{
    position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
    font-size:13px; font-weight:500;
    text-shadow:0 1px 4px rgba(0,0,0,.6); opacity:.9;
  }
.antare-event-detail .strip .cell::after{
    content:''; position:absolute; inset:0;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
    transition:box-shadow 500ms var(--ease-soft);
    pointer-events:none;
  }
.antare-event-detail .strip .cell.source::after{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.85); }

  /* ---------- sidebar ---------- */
.antare-event-detail .sidebar{
    position:absolute; left:469px; top:-7px;
    width:220px; height:531px;
    overflow:hidden;
    background:rgba(250,250,250,.10);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-left:1px solid rgba(255,255,255,.12);
    z-index:6;
  }
.antare-event-detail .sidebar .scroller{
    position:absolute; left:0; top:30px; width:220px;
    padding:0 16px 15.36px;
    display:flex; flex-direction:column; gap:21px;
    will-change:transform;
  }
.antare-event-detail .block{ display:flex; flex-direction:column; gap:7px; width:168px; }
.antare-event-detail .rule{ width:172px; height:1px; background:var(--rule); flex:0 0 1px; }

.antare-event-detail .date{ font-size:var(--t-date); line-height:11.52px; font-weight:400; opacity:.92; }
  /* Figma sets 24.4px and breaks to three lines in 168px; web SF runs
     ~6% wider and forces a fourth, so this is tightened to match the
     intended break. */
.antare-event-detail .title{ font-size:22px; line-height:26.5px; font-weight:300; letter-spacing:-.2px; }
.antare-event-detail .metarow{ display:flex; align-items:center; gap:12.8px; }
.antare-event-detail .metarow .m{ display:flex; align-items:center; gap:6.4px; }
.antare-event-detail .metarow svg{ width:10.667px; height:10.667px; display:block; opacity:.85; }
.antare-event-detail .metarow span{ font-size:var(--t-meta); line-height:14.4px; font-weight:300; }

.antare-event-detail .h{ font-size:var(--t-head); line-height:16.8px; font-weight:500; letter-spacing:-.1232px; }
.antare-event-detail .p{ font-size:var(--t-body); line-height:16px; font-weight:400; letter-spacing:-.1232px; }

.antare-event-detail .moments{ display:flex; flex-direction:column; gap:8px; }
.antare-event-detail .moment{
    position:relative; display:flex; gap:8px; align-items:flex-start;
    padding-left:8px; margin-left:-8px; border-radius:5px;
    transition:background 420ms var(--ease-soft);
  }
.antare-event-detail .moment::before{
    content:''; position:absolute; left:0; top:2px; bottom:2px;
    width:2px; border-radius:2px; background:#fff;
    transform:scaleY(0); transform-origin:top; opacity:0;
    transition:transform 520ms var(--ease), opacity 320ms var(--ease-soft);
  }
.antare-event-detail .moment.live{ background:rgba(255,255,255,.09); }
.antare-event-detail .moment.live::before{ transform:scaleY(1); opacity:1; }
.antare-event-detail .moment .tc{
    flex:0 0 auto; white-space:pre;
    font-size:var(--t-code); line-height:11.52px; font-weight:600;
    opacity:.9;
  }
.antare-event-detail .moment.live .tc{ opacity:1; }
.antare-event-detail .moment .txt{
    flex:1 1 0; min-width:0;
    font-size:var(--t-body); line-height:16px; font-weight:400;
    letter-spacing:-.1232px;
  }
.antare-event-detail .moment.live .txt{ opacity:1; }
.antare-event-detail .moment.done .tc,
.antare-event-detail .moment.done .txt{ opacity:.45; }

.antare-event-detail .tags{ display:flex; flex-direction:column; gap:6.4px; align-items:flex-start; }
.antare-event-detail .tag{
    display:flex; align-items:center; gap:4.8px;
    padding:4px 8px; border-radius:15.36px;
    background:rgba(255,255,255,.10);
    box-shadow:0 .64px 1.28px rgba(18,18,23,.05);
    opacity:.34; filter:saturate(.25); transform:translateY(3px);
    transition:opacity 520ms var(--ease-soft), filter 520ms var(--ease-soft),
               transform 520ms var(--ease), background 520ms var(--ease-soft);
  }
.antare-event-detail .tag.live{ opacity:1; filter:saturate(1); transform:translateY(0); background:rgba(255,255,255,.14); }
.antare-event-detail .tag .lab{
    font-size:var(--t-head); line-height:16.8px; font-weight:500;
    letter-spacing:-.1232px; color:var(--err); white-space:nowrap;
  }
.antare-event-detail .tag.good .lab{ color:var(--ok); }
.antare-event-detail .tag .rng{
    font-size:var(--t-tagtime); line-height:16.8px; font-weight:400;
    letter-spacing:-.1232px; white-space:nowrap; opacity:.9;
  }

@media (prefers-reduced-motion: reduce){
.antare-event-detail .play .halo{ animation:none }
.antare-event-detail .moment,
.antare-event-detail .tag,
.antare-event-detail .strip .cell img,
.antare-event-detail .sidebar .scroller,
.antare-event-detail .player,
.antare-event-detail .player video{ transition:none !important }
  }