/* =====================================================================================================
   Section: apart — styles for the block between "BEGIN SECTION: apart" and "END SECTION: apart" in index.html.
   ===================================================================================================== */

.section--apart {
    /* Pill text: ~14.5px on phones → 24px at 1440px and up. Padding and gaps are in em, so they scale with it. */
    --apart-pill-size: clamp(0.875rem, 0.6875rem + 0.905vw, 1.5rem);
    --apart-pill-bg: var(--grey-400);
    /* Time to fully charge one pill; the next one starts right when the previous one is full. */
    --apart-charge-duration: 0.8s;

    padding-block: var(--section-space) calc(var(--section-space) * 0.55);   /* a bit less space below */
}

.apart__title {
    margin-bottom: clamp(2.5rem, 1.5rem + 4.5vw, 5.5rem);
}

/* Centred rows that wrap. max-width is in em (of the pill size) so the rows break as in the design
   (2 / 3 / 2 pills at 1440px) at any width where the column is wide enough. */
.apart__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75em 0.9em;
    max-width: 33.5em;
    margin-inline: auto;
    font-size: var(--apart-pill-size);
}

.apart__pill {
    position: relative;
    isolation: isolate;               /* keeps the fill layer (z-index: -1) above the grey but below the text */
    padding: 0.18em 0.72em 0.14em;
    border-radius: var(--radius-pill);
    background-color: var(--apart-pill-bg);
    color: var(--white);
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
}

/* The gradient layer always spans the whole pill (so the colours never squash); the "charge" only changes how
   much of it is revealed, from the left. Filled by default: the effect is progressive enhancement, set up by
   js/sections/apart.js. */
.apart__pill::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--brand-gradient);
    clip-path: inset(0 0 0 0);
}

/* JS is running and the section hasn't been seen yet: pills wait empty (grey). */
.section--apart.is-pending .apart__pill::before {
    clip-path: inset(0 100% 0 0);
}

/* Section in view: pills charge one after another (--i is each pill's position, set inline in the HTML), each with
   a single smooth left-to-right sweep. Linear timing keeps the charge flowing without a pause between pills. */
.section--apart.is-charging .apart__pill::before {
    animation: apart-charge var(--apart-charge-duration) linear calc(var(--i, 0) * var(--apart-charge-duration)) both;
}

@keyframes apart-charge {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
    .section--apart.is-pending .apart__pill::before,
    .section--apart.is-charging .apart__pill::before {
        clip-path: inset(0 0 0 0);
        animation: none;
    }
}