/**
 * Site-wide Button — 3D Roll + Unified Look
 * ---------------------------------------------------------------------
 * One consistent CTA appearance for the whole site: same padding, same
 * uppercase/tracked label style, same font size/weight, everywhere —
 * plus the card-flip hover from the home hero's "Talk to us" button. On
 * hover/focus the label rotates up and out on its X axis while an
 * identical second copy rotates in from below to take its place — pure
 * geometry, no colour change, no JS.
 *
 * Markup contract — two things on the button:
 *
 *   1. The class `cx-btn-roll` — this alone sets the button's padding,
 *      font, uppercase/tracking and sizing, so no template needs to
 *      repeat px, py, uppercase or tracking-widest utility classes any
 *      more. Only the button's own background/text colour (a Tailwind
 *      bg / text class, or inline style) still needs to be set by the
 *      template, since that varies button to button.
 *   2. `data-front="Label"` and `data-back="Label"` attributes carrying
 *      the button's own text (both the same string — the copy never
 *      changes, only the roll)
 *
 *   <a class="bg-cta-orange text-white cx-btn-roll"
 *      data-front="Start a project" data-back="Start a project"></a>
 *
 * The element itself must have NO other text/child content — the label
 * is rendered entirely from the data attributes via generated content.
 * A button that genuinely needs different sizing (e.g. a small inline
 * link-button) can still override padding/font-size after this class in
 * its own template — treat that as the exception, not the norm.
 *
 * Buttons with an icon alongside the label (e.g. a trailing arrow) can't
 * put `cx-btn-roll` on the whole `<a>` — the icon needs to keep its own
 * markup. Instead: give the outer `<a>`/`<button>` the button's own
 * background plus `cx-btn-icon-host` (the same shared padding/font as
 * `cx-btn-roll`, just without the roll geometry itself, since the icon
 * must NOT roll), wrap just the label in
 * `<span class="cx-btn-roll cx-btn-roll--inline">` (no padding/font of
 * its own — it sizes from the host instead), and give the icon
 * `cx-btn-roll__icon` so it stays fixed in place next to the rolling
 * label instead of getting caught up in it:
 *
 *   <a class="bg-primary text-white cx-btn-icon-host">
 *     <span class="cx-btn-roll cx-btn-roll--inline"
 *           data-front="Listen to OMG" data-back="Listen to OMG"></span>
 *     <span class="material-symbols-outlined cx-btn-roll__icon">podcasts</span>
 *   </a>
 */

.cx-btn-roll {
    opacity: 1;
    outline: 0;
    overflow: hidden;
    position: relative;
    display: inline-block;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    /* Covers a template's own hover:scale-105/active:scale-95 utility
       classes on this same element — those animate THIS box's transform,
       separately from the roll, which only ever animates the ::before/
       ::after faces inside it. */
    transition: transform 0.3s ease;

    /* The one shared padding + label style every button on the site now
       uses. Change --cx-btn-pad / font-size to re-tune every button at once.

       The padding is carried as a custom property and applied to the
       ::before face, NOT to the host: that face is what gives the button
       its size (see the front-face comment further down), so padding the
       host as well counted it twice — a 14px label with 10px padding
       rendered 61px tall instead of 41px. */
    --cx-btn-pad: 10px 20px;
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.cx-btn-roll--inline {
    /* Zeroes the shared padding at its source, so the faces below inherit
       none — the surrounding cx-btn-icon-host supplies the button's box
       in this variant. */
    --cx-btn-pad: 0;
    padding: 0;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}
.cx-btn-roll--inline::before,
.cx-btn-roll--inline::after {
    padding: 0;
}

/* Outer host for an icon+label button — see the markup contract above.
   Same padding/font as `cx-btn-roll` itself, kept in sync as one pair. */
.cx-btn-icon-host {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
}

/* Front face: the only thing actually in the button's normal flow, so
   its own padding is what gives the button its real size — exactly as
   wide/tall as the label needs. Inherits the button's own font styling
   (weight, tracking, size, colour) from the element itself; only
   background is repeated here so the back face can carry it too. */
.cx-btn-roll::before,
.cx-btn-roll::after {
    display: flex;
    align-items: center;
    justify-content: center;
    background: inherit;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    padding: var(--cx-btn-pad, 10px 20px);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}
.cx-btn-roll::before {
    position: relative;
    opacity: 1;
    content: attr(data-front);
    transform: translateY(0) rotateX(0);
}
.cx-btn-roll::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    content: attr(data-back);
    transform: translateY(-50%) rotateX(90deg);
}

/* The trigger is `:hover`/`:focus-visible` on the roll element itself OR
   on its parent link — the latter covers `cx-btn-roll--inline`, where the
   roll only wraps the label and the pointer may be over the icon or the
   surrounding button's own padding instead, outside the span itself. */
@media (hover: hover) {
    .cx-btn-roll:hover::before,
    a:hover > .cx-btn-roll::before,
    button:hover > .cx-btn-roll::before {
        opacity: 0;
        transform: translateY(50%) rotateX(90deg);
    }
    .cx-btn-roll:hover::after,
    a:hover > .cx-btn-roll::after,
    button:hover > .cx-btn-roll::after {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}
.cx-btn-roll:focus-visible::before,
a:focus-visible > .cx-btn-roll::before,
button:focus-visible > .cx-btn-roll::before {
    opacity: 0;
    transform: translateY(50%) rotateX(90deg);
}
.cx-btn-roll:focus-visible::after,
a:focus-visible > .cx-btn-roll::after,
button:focus-visible > .cx-btn-roll::after {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

/* Icon riding alongside a `cx-btn-roll--inline` label (see the markup
   contract above) — keeps the icon fixed in place, unaffected by the
   label's own roll, which happens entirely inside its own ::before/
   ::after layers. */
.cx-btn-roll__icon {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .cx-btn-roll,
    .cx-btn-roll::before,
    .cx-btn-roll::after {
        transition: none !important;
    }
}