/*
 * Audio package badges (App\Services\AudioBadge, partials/audio-badge.php).
 *
 * Four tiers anyone can pick, each drawn from one colour (--ab-accent, the site's accent when none is given),
 * and admin designs, which bring everything else as custom properties AudioBadge built from checked settings.
 *
 * Sizes: a badge is --ab-size (its own) times --ab-zoom (where it is shown: a package's page sets a larger
 * zoom), and everything inside it is in ems, so a design keeps its proportions at any size. A design's words
 * are --ab-text-size of the badge, times --ab-fit when the badge has a fixed width and they must shrink to fit.
 *
 * A design's surface is four background layers: gloss, pattern and fill inside the edge (padding-box), and the
 * edge itself under them all (border-box), so an edge can be a gradient too.
 */
.audio-badge {
    --ab-accent: var(--accent, #38bdf8);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    max-width: 100%;
    padding: 0.32em 0.8em;
    border-radius: 999px;
    font-size: calc(var(--ab-size, 0.78rem) * var(--ab-zoom, 1));
    font-weight: 650;
    line-height: 1.25;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    isolation: isolate;
}
.audio-badge__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.audio-badge__icon { display: inline-flex; flex: none; }
.audio-badge__icon svg { width: 1.1em; height: 1.1em; }

/* Plain: words, barely framed. For the six-speaker factory system. */
.audio-badge--plain {
    padding: 0.2em 0.6em;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-weight: 550;
    background: transparent;
}

/* Standard: outlined in its colour. */
.audio-badge--standard {
    border: 1.5px solid var(--ab-accent);
    color: var(--ab-accent);
    background: color-mix(in srgb, var(--ab-accent) 10%, transparent);
}

/* Premium: dark, a coloured edge, and a sheen across the top. */
.audio-badge--premium {
    --ab-size: 0.72rem;
    border: 1.5px solid color-mix(in srgb, var(--ab-accent) 75%, #ffffff);
    color: #f8fafc;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 0.16), transparent 55%),
        linear-gradient(135deg, #1e2533, #0b0f17);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25), 0 2px 10px color-mix(in srgb, var(--ab-accent) 25%, transparent);
}
.audio-badge--premium .audio-badge__label { color: color-mix(in srgb, var(--ab-accent) 35%, #ffffff); }

/* Flagship: a rich gradient in its colour, a bright edge, a glow and a star. */
.audio-badge--flagship {
    --ab-size: 0.74rem;
    border: 2px solid transparent;
    color: #ffffff;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--ab-accent) 85%, #ffffff), color-mix(in srgb, var(--ab-accent) 55%, #000000)) padding-box,
        linear-gradient(135deg, #ffffff, var(--ab-accent), #ffffff) border-box;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 800;
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
    box-shadow: 0 0 14px color-mix(in srgb, var(--ab-accent) 55%, transparent);
}

/* ------------------------------------------------------------------ Admin designs */

.audio-badge--design {
    padding: 0.32em var(--ab-pad, 0.8em);
    border: var(--ab-edge-w, 0px) solid transparent;
    color: var(--ab-text, #ffffff);
    background-image: var(--ab-gloss), var(--ab-pattern), var(--ab-fill), var(--ab-edge);
    background-origin: padding-box, padding-box, padding-box, border-box;
    background-clip: padding-box, padding-box, padding-box, border-box;
    background-size: 100% 100%, var(--ab-pattern-size, 100% 100%), 100% 100%, 100% 100%;
    background-repeat: no-repeat, repeat, no-repeat, no-repeat;
    font-weight: var(--ab-weight, 700);
    text-transform: var(--ab-case, none);
    box-shadow:
        0 calc(var(--ab-shadow, 0px) * 0.4) var(--ab-shadow, 0px) rgb(0 0 0 / 0.45),
        0 0 var(--ab-glow-r, 0px) var(--ab-glow, transparent);
}
.audio-badge--design .audio-badge__label {
    font-size: calc(1em * var(--ab-text-size, 1) * var(--ab-fit, 1));
    /* Set here, in the words' own ems, so the spacing shrinks with them when they are fitted. */
    letter-spacing: var(--ab-tracking, 0);
}
.audio-badge--design .audio-badge__icon svg { width: calc(1.1em * var(--ab-text-size, 1)); height: calc(1.1em * var(--ab-text-size, 1)); }

/* Sizes and shapes. */
.audio-badge--size-xs { --ab-size: 0.62rem; }
.audio-badge--size-sm { --ab-size: 0.68rem; }
.audio-badge--size-md { --ab-size: 0.78rem; }
.audio-badge--size-lg { --ab-size: 0.95rem; padding-block: 0.4em; }
.audio-badge--size-xl { --ab-size: 1.15rem; padding-block: 0.42em; }
.audio-badge--shape-rounded { border-radius: 0.45em; }
.audio-badge--shape-square { border-radius: 0.15em; }
.audio-badge--shape-slant { border-radius: 0.2em; transform: skewX(-12deg); }
.audio-badge--shape-slant > * { transform: skewX(12deg); }

/* A fixed width: the words are centred, and AudioBadge::fit has already shrunk them to fit (--ab-fit). */
.audio-badge--fit-fixed {
    width: var(--ab-width, 12em);
    max-width: 100%;
    justify-content: center;
    min-height: calc(1.25em * var(--ab-text-size, 1) + 0.64em);
}
.audio-badge--fit-fixed .audio-badge__label, .audio-badge--fit-fixed .audio-badge__tag { text-align: center; }

/* Typefaces from the visitor's device. */
.audio-badge--font-sans { font-family: var(--font-sans, system-ui, sans-serif); }
.audio-badge--font-wide { font-family: "Eurostile", "Microgramma", "Bank Gothic", "Arial Black", "Helvetica Neue", Arial, sans-serif; font-stretch: 125%; }
.audio-badge--font-condensed { font-family: "Roboto Condensed", "Arial Narrow", "Helvetica Neue Condensed", "Liberation Sans Narrow", sans-serif; font-stretch: 75%; }
.audio-badge--font-rounded { font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Arial Rounded MT Bold", var(--font-sans, sans-serif); }
.audio-badge--font-serif { font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; }
.audio-badge--font-mono { font-family: var(--font-mono, ui-monospace, monospace); }
.audio-badge--italic .audio-badge__label, .audio-badge--italic .audio-badge__tag { font-style: italic; }

/* The words' fill: one colour, or a gradient or chrome painted through the letters. */
.audio-badge--tf-gradient .audio-badge__label, .audio-badge--tf-gradient .audio-badge__tag,
.audio-badge--tf-chrome .audio-badge__label, .audio-badge--tf-chrome .audio-badge__tag {
    background: var(--ab-text-fill);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Shadows under the words: drawn as filters, which also work under a fill painted through the letters. */
.audio-badge--ts-soft .audio-badge__label, .audio-badge--ts-soft .audio-badge__tag { filter: drop-shadow(0 1px 1.2px rgb(0 0 0 / 0.55)); }
.audio-badge--ts-glow .audio-badge__label, .audio-badge--ts-glow .audio-badge__tag { filter: drop-shadow(0 0 0.22em var(--ab-glow, #ffffff)); }
.audio-badge--ts-emboss .audio-badge__label, .audio-badge--ts-emboss .audio-badge__tag { filter: drop-shadow(0 1px 0 rgb(255 255 255 / 0.35)) drop-shadow(0 -1px 0 rgb(0 0 0 / 0.5)); }

/* The design's own tag ("4D", "REFERENCE"): smaller, in the second colour, set off by a hairline. */
.audio-badge__tag {
    flex: none;
    color: var(--ab-text2, currentColor);
    font-size: calc(0.72em * var(--ab-text-size, 1) * var(--ab-fit, 1));
    letter-spacing: 0.1em;
}
.audio-badge--tag-start .audio-badge__tag { padding-right: 0.55em; border-right: 1px solid color-mix(in srgb, var(--ab-text, #ffffff) 35%, transparent); }
.audio-badge--tag-end .audio-badge__tag { padding-left: 0.55em; border-left: 1px solid color-mix(in srgb, var(--ab-text, #ffffff) 35%, transparent); }
.audio-badge--tag-above:has(.audio-badge__tag) {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 0.45em;
    row-gap: 0.06em;
    padding-block: 0.36em;
}
.audio-badge--tag-above:has(.audio-badge__tag):not(:has(.audio-badge__icon)) { grid-template-columns: minmax(0, 1fr); }
.audio-badge--tag-above:has(.audio-badge__tag) .audio-badge__icon { grid-row: 1 / span 2; }
.audio-badge--tag-above .audio-badge__tag { grid-column: -2; line-height: 1; }
.audio-badge--tag-above .audio-badge__label { grid-column: -2; line-height: 1.1; }
.audio-badge--tag-above.audio-badge--icon-end:has(.audio-badge__icon) { grid-template-columns: minmax(0, 1fr) auto; }
.audio-badge--tag-above.audio-badge--icon-end .audio-badge__icon { grid-column: 2; }
.audio-badge--tag-above.audio-badge--icon-end .audio-badge__tag, .audio-badge--tag-above.audio-badge--icon-end .audio-badge__label { grid-column: 1; }

/* ------------------------------------------------------------------ Effects; --ab-speed sets their pace */

/* A sheen that sweeps across now and then. */
.audio-badge--fx-shimmer::after {
    content: '';
    position: absolute;
    inset: -50% auto -50% -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.55), transparent);
    transform: skewX(-20deg);
    animation: audio-badge-shimmer calc(3.2s / var(--ab-speed, 1)) ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes audio-badge-shimmer {
    0%, 55% { left: -60%; }
    100% { left: 130%; }
}

/* The glow breathing. */
.audio-badge--fx-pulse { animation: audio-badge-pulse calc(2.4s / var(--ab-speed, 1)) ease-in-out infinite; }
@keyframes audio-badge-pulse {
    0%, 100% { box-shadow: 0 calc(var(--ab-shadow, 0px) * 0.4) var(--ab-shadow, 0px) rgb(0 0 0 / 0.45), 0 0 calc(var(--ab-glow-r, 8px) * 0.4) var(--ab-glow, transparent); }
    50% { box-shadow: 0 calc(var(--ab-shadow, 0px) * 0.4) var(--ab-shadow, 0px) rgb(0 0 0 / 0.45), 0 0 calc(var(--ab-glow-r, 8px) * 1.4 + 4px) var(--ab-glow, transparent); }
}

/* The fill drifting, like foil turned in the light. */
.audio-badge--fx-holo {
    background-size: 100% 100%, var(--ab-pattern-size, 100% 100%), 250% 250%, 100% 100%;
    animation: audio-badge-holo calc(6s / var(--ab-speed, 1)) ease-in-out infinite alternate;
}
.audio-badge--fx-holo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgb(255 0 128 / 0.18), rgb(0 200 255 / 0.18), rgb(140 255 0 / 0.18), rgb(255 0 128 / 0.18));
    background-size: 300% 100%;
    mix-blend-mode: screen;
    animation: audio-badge-foil calc(4s / var(--ab-speed, 1)) linear infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes audio-badge-holo {
    from { background-position: 0 0, 0 0, 0% 50%, 0 0; }
    to { background-position: 0 0, 0 0, 100% 50%, 0 0; }
}
@keyframes audio-badge-foil {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

/* Points of light that come and go. */
.audio-badge--fx-sparkle::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 30%, #ffffff 0 1px, transparent 1.6px),
        radial-gradient(circle at 46% 75%, #ffffff 0 1px, transparent 1.6px),
        radial-gradient(circle at 74% 25%, #ffffff 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 90% 70%, #ffffff 0 0.8px, transparent 1.4px);
    animation: audio-badge-sparkle calc(2.2s / var(--ab-speed, 1)) ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 1;
}
@keyframes audio-badge-sparkle {
    from { opacity: 0.15; }
    to { opacity: 1; }
}

/* A light running round the edge: a turning cone of the glow colour between the fill and the edge. */
@property --ab-spin {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
.audio-badge--fx-orbit {
    border-width: max(var(--ab-edge-w, 0px), 1.5px);
    background-image:
        var(--ab-gloss), var(--ab-pattern), var(--ab-fill),
        conic-gradient(from var(--ab-spin), transparent 0 58%, var(--ab-glow, #ffffff) 78%, #ffffff 86%, var(--ab-glow, #ffffff) 92%, transparent 98%),
        var(--ab-edge);
    background-origin: padding-box, padding-box, padding-box, border-box, border-box;
    background-clip: padding-box, padding-box, padding-box, border-box, border-box;
    background-size: 100% 100%, var(--ab-pattern-size, 100% 100%), 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat, repeat, no-repeat, no-repeat, no-repeat;
    animation: audio-badge-orbit calc(3s / var(--ab-speed, 1)) linear infinite;
}
@keyframes audio-badge-orbit { to { --ab-spin: 360deg; } }

/* An equalizer's bars rising and falling behind the words, in the glow colour. */
.audio-badge--fx-equalizer::after {
    content: '';
    position: absolute;
    inset: 16% var(--ab-pad, 0.8em) 0;
    background-image:
        linear-gradient(var(--ab-glow), var(--ab-glow)), linear-gradient(var(--ab-glow), var(--ab-glow)),
        linear-gradient(var(--ab-glow), var(--ab-glow)), linear-gradient(var(--ab-glow), var(--ab-glow)),
        linear-gradient(var(--ab-glow), var(--ab-glow)), linear-gradient(var(--ab-glow), var(--ab-glow)),
        linear-gradient(var(--ab-glow), var(--ab-glow)), linear-gradient(var(--ab-glow), var(--ab-glow)),
        linear-gradient(var(--ab-glow), var(--ab-glow));
    background-repeat: no-repeat;
    background-position: 0 100%, 12.5% 100%, 25% 100%, 37.5% 100%, 50% 100%, 62.5% 100%, 75% 100%, 87.5% 100%, 100% 100%;
    background-size: 7% 35%, 7% 70%, 7% 50%, 7% 90%, 7% 60%, 7% 40%, 7% 80%, 7% 45%, 7% 65%;
    opacity: 0.38;
    animation: audio-badge-eq calc(0.9s / var(--ab-speed, 1)) ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -1;
}
@keyframes audio-badge-eq {
    0% { background-size: 7% 35%, 7% 70%, 7% 50%, 7% 90%, 7% 60%, 7% 40%, 7% 80%, 7% 45%, 7% 65%; }
    50% { background-size: 7% 75%, 7% 30%, 7% 85%, 7% 45%, 7% 95%, 7% 70%, 7% 35%, 7% 85%, 7% 30%; }
    100% { background-size: 7% 50%, 7% 90%, 7% 30%, 7% 70%, 7% 40%, 7% 95%, 7% 55%, 7% 30%, 7% 85%; }
}

@media (prefers-reduced-motion: reduce) {
    .audio-badge, .audio-badge::before, .audio-badge::after { animation: none !important; }
    .audio-badge--fx-shimmer::after { display: none; }
}