/* The header's search field, the one the bar shows once the page has moved.
 *
 * Split from site-header.css, which had reached the size a file here is allowed to be. Loaded after
 * it, and only about the field: where the bar puts it and when is still site-header.css's business.
 */

/* ===== SEARCH ===== */
/* Absent until the bar shrinks. The slot holds the field's full width from the start, and keeps
   the field at its inline end —
   where the mark is — so the opening below grows the field away from the mark instead of about its
   middle, and the bar around it does not move while it does. */
.cil-hdr__search {
    display: flex; justify-content: flex-end; flex: 0 0 auto;
    min-width: clamp(300px, var(--cil-hdr-search-room, 380px), 380px);
    opacity: 0; visibility: hidden; pointer-events: none;
    /* Leaving, it stays on screen for the closing below — the field folds back into its mark — and
       only fades once the mark has begun to shrink away. */
    transition: opacity 0.16s ease-in 0.46s, visibility 0s linear 0.62s;
}
/* Arriving, it waits for the bar to have mostly changed shape (its marks close over half a second),
   so the field opens in the place it will stay, then shows quickly. */
.cil-hdr.is-scrolled .cil-hdr__search {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity 0.18s ease-out 0.4s, visibility 0s;
}
.cil-hdr__searchForm {
    display: flex; align-items: center; gap: 10px;
    width: clamp(300px, var(--cil-hdr-search-room, 380px), 380px); max-width: 100%; height: 40px;
    padding: 9px 16px;
    /* The white base's dark end: a shade lighter than the bar, so the field lifts off it rather
       than sitting on it. Dark, so the edge is what finds it — a dimmed white, under the teal. */
    border: 2px solid var(--cil-white-regular-2);
    border-radius: 10px;
    background: var(--cil-white-dark-1);
    /* Same easing as the bar's own movements, so the field belongs to this header rather than
       arriving from somewhere else. */
    transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}

/* Opening: the search mark first, then the field it opens into — the way the homepage's circle
   button opens into its pill. Three beats over 0.85s:
     pop     0–24%   the field, as a 40px circle with its own border whole and the magnifier centred
                     in it, springs up from half size, a touch past full, and settles;
     hold    24–34%  a breath as the circle, so it reads as the mark before it becomes the field;
     open    34–100% the field grows its real width away from the mark, quickly at first and easing
                     into place, while its corners settle from round to its own 10px.
   The words fade in over the last third, as the field reaches its width. Geometry rather than a
   mask, so the edge travels with the field and nothing ever looks cut; each keyframe states only
   the start, so the field ends on its own widths — whatever the bar has published for it. Leaving
   is the fade alone. */
.cil-hdr.is-scrolled .cil-hdr__searchForm {
    animation: cil-hdr-search-open 0.85s linear 0.4s backwards;
}
@keyframes cil-hdr-search-open {
    0%  { width: 40px; padding-inline: 9px; gap: 0; border-radius: 20px; transform: scale(0.5);
          animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
    24% { width: 40px; padding-inline: 9px; gap: 0; border-radius: 20px; transform: scale(1);
          animation-timing-function: linear; }
    34% { width: 40px; padding-inline: 9px; gap: 0; border-radius: 20px; transform: scale(1);
          animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
}
/* The magnifier arrives tipped and rights itself with the pop — the same gesture as the homepage
   button's tipped mark, so the two searches move alike. */
.cil-hdr.is-scrolled .cil-hdr__searchIcon svg {
    animation: cil-hdr-search-mark 0.85s linear 0.4s backwards;
}
@keyframes cil-hdr-search-mark {
    0%  { transform: rotate(-35deg) scale(0.8); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
    28% { transform: rotate(0deg) scale(1); }
}
.cil-hdr.is-scrolled .cil-hdr__searchForm input {
    animation: cil-hdr-search-words 0.85s linear 0.4s backwards;
}
@keyframes cil-hdr-search-words {
    0%, 62% { opacity: 0; padding-inline: 0; animation-timing-function: ease-out; }
    100%    { opacity: 1; }
}

/* Closing: the opening played backwards, a little quicker, when the page goes back to the top.
     words   0–20%   fade out first, while the field is still wide enough to hold them;
     fold    0–60%   the field draws its width back into the mark, easing out of its width and
                     into the circle, corners rounding as it comes;
     away    60–100% the circle shrinks to half and the magnifier tips over, as the slot fades.
   Played whenever the bar is at its tall shape — on a page opened at the top too, where it runs
   unseen behind the slot's own hiding. The fill holds the folded state until the field opens again. */
.cil-hdr:not(.is-scrolled) .cil-hdr__searchForm {
    animation: cil-hdr-search-close 0.62s cubic-bezier(0.55, 0, 0.45, 1) forwards;
}
@keyframes cil-hdr-search-close {
    60%  { width: 40px; padding-inline: 9px; gap: 0; border-radius: 20px; transform: scale(1);
           animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
    100% { width: 40px; padding-inline: 9px; gap: 0; border-radius: 20px; transform: scale(0.5); }
}
.cil-hdr:not(.is-scrolled) .cil-hdr__searchForm input {
    animation: cil-hdr-search-words-out 0.62s ease-out forwards;
}
@keyframes cil-hdr-search-words-out {
    20%, 100% { opacity: 0; padding-inline: 0; }
}
.cil-hdr:not(.is-scrolled) .cil-hdr__searchIcon svg {
    animation: cil-hdr-search-mark-out 0.62s linear forwards;
}
@keyframes cil-hdr-search-mark-out {
    60%  { transform: rotate(0deg) scale(1); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
    100% { transform: rotate(-35deg) scale(0.8); }
}

/* Typing wants more room than reading does: the field opens to 480 while focused and settles back
   when left, growing about its own centre. Both widths are ceilings: the script publishes what
   the bar can spare, so a crowded header narrows the field rather than clipping the nav. */
.cil-hdr__searchForm:focus-within { width: clamp(300px, var(--cil-hdr-search-room, 480px), 480px); }
/* The field is the control, so the field is what shows focus: its own edge turns teal. The input
   inside it draws no ring of its own — two rings on one control read as two controls, the inner one
   hugging the words rather than the thing being typed into. Focus is still plainly marked, which is
   what the ring was there for. */
/* Teal while focused, and a pixel heavier than at rest: the field is being written into, and the
   edge is the only thing saying so now that the inner ring is gone. The box does not move — the
   header measures in border-box, so the edge is taken from the inside however heavy it is. */
.cil-hdr__searchForm:focus-within { border-color: var(--cil-blue); border-width: 3px; }
.cil-hdr__searchForm input:focus,
.cil-hdr__searchForm input:focus-visible { outline: none; box-shadow: none; }
/* A real submit control, so it sends the field. Stripped of the theme's button dressing — this one
   is an 18px mark, not a pill — and given the pointer, which is the whole of its answer. */
.cil-hdr__searchIcon {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 18px; height: 18px; padding: 0;
    background: none; border: 0;
    color: var(--cil-white-light-9);
    cursor: pointer;
}
.cil-hdr__searchIcon svg { display: block; }
.cil-hdr__searchForm input {
    flex: 1 1 auto; min-width: 0;
    background: transparent; border: 0; outline: 0;
    color: var(--cil-white);
    font-family: 'Assistant', Arial, sans-serif;
    font-weight: 400; font-size: 14px; line-height: 1.2;
}
.cil-hdr__searchForm input::placeholder { color: var(--cil-white-light-7); }

/* Asked for less movement: the field is simply there when the bar has changed shape. Written at
   the scrolled selectors' own weight: at the bare class's, the arriving fade above outranked it and
   still played. */
@media (prefers-reduced-motion: reduce) {
    .cil-hdr__search,
    .cil-hdr.is-scrolled .cil-hdr__search { transition: visibility 0s; }
    .cil-hdr__searchForm { transition: border-color 0.3s ease; }
    .cil-hdr.is-scrolled .cil-hdr__searchForm,
    .cil-hdr.is-scrolled .cil-hdr__searchForm input,
    .cil-hdr.is-scrolled .cil-hdr__searchIcon svg,
    .cil-hdr:not(.is-scrolled) .cil-hdr__searchForm,
    .cil-hdr:not(.is-scrolled) .cil-hdr__searchForm input,
    .cil-hdr:not(.is-scrolled) .cil-hdr__searchIcon svg { animation: none; }
}