/* Back to top — Figma 33:8.
   A circle that waits at one corner of the viewport and takes the reader back to the start of the
   page. Every measurement here is the design's; the two colours and the side it hangs from are the
   editor's, and arrive as custom properties on the element itself. */

.cil-btt {
    /* Desktop: 56 across, 32 from its side, 32 up from the bottom of the window. The design's 152 is
       measured in a frame with a short footer under it, not from the window's edge; on the site it
       sat far too high (Oren, 2026-10-10, reversing the 2026-10-05 move to 152). back-to-top.js
       raises it only where the footer's last rows would otherwise come up under it. */
    --cil-btt-size: 56px;
    --cil-btt-inset: 32px;
    --cil-btt-lift: 32px;
    --cil-btt-icon: 22px;

    position: fixed;
    bottom: var(--cil-btt-lift);
    z-index: 9000;

    display: grid;
    place-items: center;
    width: var(--cil-btt-size);
    height: var(--cil-btt-size);
    padding: 0;
    box-sizing: border-box;

    background: var(--cil-btt-base, var(--cil-blue));
    /* The edge is the chosen colour's own dark step, which the palette does not carry as a token —
       so it is mixed from the fill rather than named, and follows whatever the editor picks. */
    border: 1px solid color-mix(in srgb, var(--cil-btt-base, var(--cil-blue)) 55%, #000);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgb(31 32 32 / 0.2);
    /* The ink each ground asks for, worked out where the colour is chosen. */
    color: var(--cil-btt-base-ink, var(--cil-black));
    cursor: pointer;
    overflow: hidden;          /* the fill is clipped to the circle */
    isolation: isolate;        /* and stays behind the arrow */

    /* Held out of the way until the page has moved. Visibility rather than display, so the arrival
       can be animated and the button keeps its place in the a11y tree only while it is usable. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.3s ease,
                visibility 0s linear 0.24s;
}

.cil-btt.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.3s ease,
                visibility 0s;
}

/* The fill rises rather than the colour swapping.

   The bar's own buttons fill from four risers that arrive from the ends and meet in the middle;
   a circle has no ends, so this is the same idea in the shape it is in — the colour comes up from
   the bottom of the button, which is also the direction the page is about to go.

   A transform, not a height: it runs on the compositor, so it stays smooth on a page that is
   still settling after a scroll. */
.cil-btt::before {
    content: '';
    position: absolute; inset: 0;
    z-index: -1;
    background: var(--cil-btt-fill, var(--cil-yellow));
    transform: translateY(100%);
    /* Away quickly, arriving slowly — the curve the header's own fills use. */
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The site dresses every button in green with white ink; this one answers in its own terms.
   Named with the element, because that rule carries a type selector. Focus keeps the resting fill,
   ink and edge colour; only a pointer brings the fill up. */
button.cil-btt:hover,
button.cil-btt:focus-visible {
    background: var(--cil-btt-base, var(--cil-blue));
    border-color: color-mix(in srgb, var(--cil-btt-base, var(--cil-blue)) 55%, #000);
    color: var(--cil-btt-base-ink, var(--cil-black));
}
button.cil-btt:hover {
    border-color: color-mix(in srgb, var(--cil-btt-fill, var(--cil-yellow)) 55%, #000);
    /* The fill is what the arrow will be standing on once it has risen. */
    color: var(--cil-btt-fill-ink, var(--cil-black));
}

.cil-btt:hover::before { transform: translateY(0); }

/* The ink turns over the same length as the fill, so the mark is never the wrong colour
   for the ground it is on. */
button.cil-btt { transition-property: opacity, transform, background-color, visibility, color; }


/* Focus is the same fill as rest with a heavier edge — the design's own answer, and it survives
   Windows high contrast, which a box-shadow ring does not. */
.cil-btt:focus-visible {
    outline: none;
    border-width: 3px;
}

/* The mark is two glyphs in one box, one shown at a time. */
.cil-btt__marks {
    position: relative;
    display: block;
    width: var(--cil-btt-icon);
    height: var(--cil-btt-icon);
}
.cil-btt__caret,
.cil-btt__caretDouble {
    position: absolute; inset: 0;
    display: block;
    width: 100%; height: 100%;
    /* The same curve the fill rises on, so the swap is part of one gesture rather than a second. */
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The double chevron waits a little below and rises as it takes over, so the head reads as
   doubling rather than as a different mark appearing. Hover only: the design keeps the single
   chevron on focus, and a keyboard user is not hovering. */
.cil-btt__caretDouble { opacity: 0; transform: translateY(3px); }
.cil-btt:hover .cil-btt__caretDouble { opacity: 1; transform: translateY(0); }
.cil-btt:hover .cil-btt__caret { opacity: 0; transform: translateY(-3px); }

/* Narrow: 48 across, 20 from its side, 110 up. */
@media only screen and (max-width: 1079px) {
    .cil-btt {
        --cil-btt-size: 48px;
        --cil-btt-inset: 20px;
        --cil-btt-lift: 20px;
        --cil-btt-icon: 19px;
    }
}

/* Anyone who has asked for less movement gets the state without the journey. */
@media (prefers-reduced-motion: reduce) {
    .cil-btt { transition: none; transform: none; }
    .cil-btt.is-visible { transition: none; transform: none; }
    /* The fill still arrives — it is what says the button is being pointed at — but it does not
       travel. The marks still swap, because which one is showing is the state rather than the
       decoration; they simply cross over without rising. */
    .cil-btt::before { transition: none; }
    .cil-btt__caret,
    .cil-btt__caretDouble { transition: opacity 0.42s ease; transform: none; }
    .cil-btt:hover .cil-btt__caret,
    .cil-btt:hover .cil-btt__caretDouble { transform: none; }
}