/* The house button that fills on hover.
 *
 * Four bubbles parked below the pill rise into it and scale up, flooding it with an accent colour
 * while the pointer rests there. It is the site's one button gesture — the hero's calls to action,
 * the contact form's send, the category chips, the popup's close — and until now every one of them
 * carried its own copy of these rules. Eleven stylesheets, one gesture, and small drifts between
 * them. This is that gesture written once; the geometry, easing, duration and the delays that make
 * the colour close in from both ends are the hero's, which is the version Oren settled.
 *
 * Everything an editor chooses arrives as a custom property on the element itself, so a screen
 * paints its buttons without adding a rule per combination:
 *
 *   --cil-bubble-bg          the pill
 *   --cil-bubble-ink         the label, at rest
 *   --cil-bubble-ink-hover   the label once the accent has flooded behind it
 *   --cil-bubble-accent      the bubbles
 *
 * The two inks are separate because what reads on the pill is rarely what reads on the accent.
 * Working out which is which belongs to the screen: it knows both colours before the page is sent.
 */

.cil-bubble-btn {
    position: relative;
    /* Keeps the bubbles' negative z-index inside the button rather than sinking behind the page. */
    isolation: isolate;
    overflow: hidden;
    background: var(--cil-bubble-bg, var(--cil-black));
    color: var(--cil-bubble-ink, var(--cil-white));
    transition: color 0.35s ease;
}

/* Hover leaves the pill alone: the bubbles are what changes, and the label switches to whichever
   ink reads against the colour rising behind it. */
.cil-bubble-btn:hover,
.cil-bubble-btn:focus-visible {
    background: var(--cil-bubble-bg, var(--cil-black));
    color: var(--cil-bubble-ink-hover, var(--cil-black));
}

.cil-bubble-btn__bubble {
    position: absolute;
    bottom: -50%;
    width: 25%;
    height: 100%;
    background: var(--cil-bubble-accent, var(--cil-blue));
    border-radius: 50%;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateY(150%);
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}

/* The outer pair leads and the middle pair follows, so the colour enters from both ends and closes
   in — the reverse of the chips, where it appears in the centre and radiates out. */
.cil-bubble-btn__bubble:nth-child(1) { left:  0%; transition-delay: 0.05s; }
.cil-bubble-btn__bubble:nth-child(2) { left: 25%; transition-delay: 0.20s; }
.cil-bubble-btn__bubble:nth-child(3) { left: 50%; transition-delay: 0.20s; }
.cil-bubble-btn__bubble:nth-child(4) { left: 75%; transition-delay: 0.05s; }

.cil-bubble-btn:hover .cil-bubble-btn__bubble,
.cil-bubble-btn:focus-visible .cil-bubble-btn__bubble {
    transform: translateY(-50%) scale(1.6);
}

/* The label rides above the bubbles rather than being flooded over. */
.cil-bubble-btn__label { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    /* The bubbles still fill the button on hover — they just arrive without the travel, so the
       hover state stays legible for someone who has asked for less movement. */
    .cil-bubble-btn,
    .cil-bubble-btn__bubble { transition: none; }
}