/* antare-search — scoped component styles */

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

/* ============================================================
     ANTARE — Search
     Design frame = 688 x 516 (Figma 4007:25205)

     Concept: you don't filter Antare, you ask it. A plain-language
     question is typed into the field and the platform answers before
     the sentence is finished — offering the shape of the question
     rather than a list of matches. The completions are the point:
     personnel, property, equipment, premises. It knows what a threat
     can be directed at, so the operator only has to know what they
     are worried about.
     ============================================================ */
.antare-search{
    --frame-w: 688;
    --frame-h: 516;

    /* geometry, straight off the Figma frame */
    --field-x:      44px;
    --field-y:     128px;
    --field-w:     600px;
    --row-h:        70px;
    --row-pad:  39.936px;
    --row-gap:  26.624px;
    --icon:         28px;
    --type:         28px;
    --shell-r:      36px;

    /* motion */
    --ease:      cubic-bezier(.22,1,.36,1);
    --ease-soft: cubic-bezier(.4,0,.2,1);
    --open:       700ms;
    --close:      520ms;
    --hop:        480ms;   /* highlight travel between rows */
    --row-in:     420ms;
    --row-step:    70ms;   /* suggestion cascade */
  }

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

  /* ---------- scene ---------- */
.antare-search .bg{
    position:absolute; left:-10px; top:-55px;
    width:834px; height:625px;
    object-fit:cover; object-position:center;
  }
  /* attention pulls back from the scene while the query is open */
.antare-search .scrim{
    position:absolute; inset:0;
    background:radial-gradient(120% 90% at 40% 46%, rgba(2,6,23,.10) 0%, rgba(2,6,23,.46) 100%);
    opacity:0;
    transition:opacity var(--open) var(--ease-soft);
  }
.antare-search.is-open .scrim{ opacity:1; }

  /* ---------- search ---------- */
.antare-search .search{
    position:absolute;
    left:var(--field-x); top:var(--field-y);
    width:var(--field-w);
  }

.antare-search .sheet{
    position:relative;
    width:100%;
    height:var(--row-h);                    /* collapsed: just the field */
    border-radius:var(--shell-r);
    overflow:hidden;
    background:rgba(255,255,255,0);
    backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px);
    transition:
      height     var(--close) var(--ease),
      background var(--close) var(--ease-soft);
    will-change:height;
  }
.antare-search.is-open .sheet{
    background:rgba(255,255,255,.10);
    transition:
      height     var(--open) var(--ease),
      background var(--open) var(--ease-soft);
  }

  /* the single travelling pill — it is the field's fill when parked on
     row 0, and the hover state as it walks the suggestions */
.antare-search .highlight{
    position:absolute; left:0; top:0;
    width:100%; height:var(--row-h);
    border-radius:124.8px;
    background:rgba(255,255,255,.20);
    transform:translateY(0);
    transition:transform var(--hop) var(--ease), opacity 300ms var(--ease-soft);
    will-change:transform;
  }

.antare-search .row{
    position:relative;
    display:flex; align-items:center;
    gap:var(--row-gap);
    height:var(--row-h);
    padding:0 var(--row-pad);
  }
.antare-search .row .ico{
    flex:0 0 var(--icon);
    width:var(--icon); height:var(--icon);
    display:block;
    opacity:.9;
  }
  /* NB: this must not be a flex container — flex drops the whitespace
     between items, which eats the space before each bold completion. */
.antare-search .row .label{
    display:block;
    flex:1 1 0; min-width:0;
    font-size:var(--type); line-height:1.2;
    color:#fff;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
.antare-search .row .label b{ font-weight:700; }

  /* completions churn as the query narrows */
.antare-search .suggestion .label{
    transition:opacity 160ms var(--ease-soft), transform 160ms var(--ease);
  }
.antare-search .rows-swapping .suggestion .label{
    opacity:0; transform:translateY(6px);
    transition-duration:90ms;
  }

  /* suggestions cascade in under the field */
.antare-search .suggestion{
    opacity:0;
    transform:translateY(10px);
    transition:
      opacity   180ms var(--ease-soft),
      transform 180ms var(--ease-soft);
  }
.antare-search.is-open .suggestion{
    opacity:1;
    transform:translateY(0);
    transition:
      opacity   var(--row-in) var(--ease-soft),
      transform var(--row-in) var(--ease);
  }

  /* field row: typed text, ghost placeholder, caret */
.antare-search .field .label{ position:relative; }
.antare-search .placeholder{
    position:absolute; left:0; top:50%;
    transform:translateY(-50%);
    color:rgba(255,255,255,.72);
    transition:opacity 220ms var(--ease-soft);
    pointer-events:none;
  }
.antare-search .placeholder.gone{ opacity:0; }

.antare-search .caret{
    display:inline-block;
    width:2px; height:30px;
    margin-left:3px;
    background:#fff;
    vertical-align:middle;
    opacity:0;
  }
.antare-search .caret.on{ animation:antare-search-blink 1.06s steps(1,end) infinite; }
@keyframes antare-search-blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

  /* ---------- dev ---------- */

@media (prefers-reduced-motion: reduce){
.antare-search .sheet,
.antare-search .highlight,
.antare-search .suggestion,
.antare-search .scrim,
.antare-search .placeholder{ transition:none !important; }
.antare-search .caret.on{ animation:none; opacity:1; }
  }