/* =====================================================================
   Pop.

   The service card hover: the card scales up slightly, whitens, and its
   tag chip flips to solid rust.
   ===================================================================== */

/* Replaces the previous hover, which slid the card 6px up and left onto
   a hard rust shadow. Scale and whiten instead: the card comes toward
   you rather than sideways.

   Note the trade-off. Scaling a card scales its text, and browsers
   re-rasterise type at the new size, which softens rendering very
   slightly. At 2.2% it is invisible on virtually every screen, and it
   buys the most tactile of the responses available. */
/* .is-near is added by include/stack.js to whichever card the reader
   has scrolled to. It gets exactly the hover treatment, so the card you
   are on lifts by itself without you having to point at it. */
.cap:hover,
.cap.is-near,
.cap.cap--link:focus-within {
    transform: scale(1.022);
    box-shadow: 0 10px 30px rgba(10, 12, 15, 0.10),
                0 2px 6px rgba(10, 12, 15, 0.06);
    z-index: 2;
}

.surf-light .cap:hover,
.surf-light .cap.is-near,
.surf-light .cap.cap--link:focus-within {
    background: #FFFFFF;
}

.surf-dark .cap:hover,
.surf-dark .cap.is-near,
.surf-dark .cap.cap--link:focus-within {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* The previous hover needed a 6px anchor to stop the pointer falling
   through the gap the slide opened up. Scaling opens no gap, so the
   anchor is not needed and would only sit under the neighbouring card. */
.cap:hover::before {
    content: none;
}

.cap {
    transform: scale(1);
    transition: transform 140ms cubic-bezier(0.2, 0, 0, 1),
                box-shadow 140ms cubic-bezier(0.2, 0, 0, 1),
                background var(--e-fast);
    will-change: transform;
}

/* The chip fills in. It is the one element that changes colour rather
   than weight, so it is what the eye lands on. */
.cap__n .tag {
    transition: background 140ms linear,
                color 140ms linear,
                border-color 140ms linear;
}

.cap:hover .cap__n .tag,
.cap.is-near .cap__n .tag,
.cap.cap--link:focus-within .cap__n .tag {
    background: var(--accent, #A43818);
    border-color: var(--accent, #A43818);
    color: #FFF3EE;
}

@media (prefers-reduced-motion: reduce) {
    .cap,
    .cap__n .tag {
        transition: none;
    }
    .cap:hover,
    .cap.is-near,
    .cap.cap--link:focus-within {
        transform: none;
    }
}