/* ============================================================
   yourcustomprofile.app — catalogue badge plates
   Two lanes from the rank-gated catalogue (content/catalog.mjs):
   `badgeShapes` (14) and `badgeEffects` (14).

   The rank system in profile-v3.css decides what a badge *is* — ink, fill and
   weight come from `--rank-*` variables. These rules only decide the outline
   and, separately, the decoration on top. That split is deliberate and must
   survive: a shape that wrote `background` or `color` would erase the tier, and
   a row of them would read as confetti again.

   So: shapes touch geometry, `background-image` and `box-shadow` only.
   Effects touch `background-image` and animation only. Neither ever writes
   `color`, `background-color` or `border-color`.
   ============================================================ */

/* ════════════════════════════════════════════════════════════ shapes ══ */

/* ---------------------------------------------------------------- stamp
   Perforated postal edge. The mask cuts half-circles out of the border, so
   the plate reads as a torn stamp without changing its box. */
.pg-badge.pg-badge--shape-stamp {
  border-radius: 2px;
  border-style: solid;
  -webkit-mask:
    radial-gradient(circle 2px at 50% 0, transparent 96%, #000 100%) top center / 7px 4px repeat-x,
    radial-gradient(circle 2px at 50% 100%, transparent 96%, #000 100%) bottom center / 7px 4px repeat-x,
    linear-gradient(#000 0 0);
  mask:
    radial-gradient(circle 2px at 50% 0, transparent 96%, #000 100%) top center / 7px 4px repeat-x,
    radial-gradient(circle 2px at 50% 100%, transparent 96%, #000 100%) bottom center / 7px 4px repeat-x,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: add;
  mask-composite: add;
  padding-inline: 0.72em;
}

/* --------------------------------------------------------------- ticket
   Notched stub: two semicircles bitten out of the middle of the short edges. */
.pg-badge.pg-badge--shape-ticket {
  border-radius: 3px;
  -webkit-mask:
    radial-gradient(circle 4px at 0 50%, transparent 96%, #000 100%) left center / 9px 100% no-repeat,
    radial-gradient(circle 4px at 100% 50%, transparent 96%, #000 100%) right center / 9px 100% no-repeat,
    linear-gradient(#000 0 0);
  mask:
    radial-gradient(circle 4px at 0 50%, transparent 96%, #000 100%) left center / 9px 100% no-repeat,
    radial-gradient(circle 4px at 100% 50%, transparent 96%, #000 100%) right center / 9px 100% no-repeat,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: add;
  mask-composite: add;
  padding-inline: 0.86em;
}

/* ---------------------------------------------------------------- brush
   A hand-drawn capsule: the radius is uneven on each corner, which is what a
   brush does and a border-radius never does. */
.pg-badge.pg-badge--shape-brush {
  border-radius: 14px 22px 12px 19px / 18px 13px 20px 15px;
  border-style: solid;
  padding-inline: 0.8em;
}

/* ------------------------------------------------------------------ hex
   Six-sided plate. A clip-path, so the border becomes a hairline inset
   rather than an outline; the inset shadow supplies the edge instead. */
.pg-badge.pg-badge--shape-hex {
  border-radius: 0;
  border-color: transparent;
  clip-path: polygon(13% 0, 87% 0, 100% 50%, 87% 100%, 13% 100%, 0 50%);
  padding-inline: 1.05em;
  box-shadow: inset 0 0 0 1px var(--rank-border, var(--border));
}

/* ------------------------------------------------------------------ tab
   A filing tab: square at the bottom, one corner rounded hard. */
.pg-badge.pg-badge--shape-tab {
  border-radius: 2px 11px 2px 2px;
  border-style: solid;
  padding-inline: 0.78em 0.9em;
}

/* -------------------------------------------------------------- bracket
   Corner brackets only — no outline at all on the long edges. */
.pg-badge.pg-badge--shape-bracket {
  border-color: transparent;
  border-radius: 0;
  background-image:
    linear-gradient(var(--rank-border, currentColor) 0 0) left top / 7px 1.5px no-repeat,
    linear-gradient(var(--rank-border, currentColor) 0 0) left top / 1.5px 100% no-repeat,
    linear-gradient(var(--rank-border, currentColor) 0 0) right top / 7px 1.5px no-repeat,
    linear-gradient(var(--rank-border, currentColor) 0 0) right bottom / 7px 1.5px no-repeat,
    linear-gradient(var(--rank-border, currentColor) 0 0) left bottom / 7px 1.5px no-repeat,
    linear-gradient(var(--rank-border, currentColor) 0 0) right top / 1.5px 100% no-repeat;
  box-shadow: none;
  padding-inline: 0.86em;
}

/* ------------------------------------------------------------ foil plate
   Embossed, matte: one wide top highlight, no specular point. */
.pg-badge.pg-badge--shape-foilPlate {
  border-radius: 4px;
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, currentColor 30%, transparent),
    color-mix(in srgb, currentColor 8%, transparent) 46%,
    transparent 62%
  );
  box-shadow: inset 0 1px 0 color-mix(in srgb, currentColor 42%, transparent);
}

/* ------------------------------------------------------------ index card
   Ruled, hole-punched: two faint rules and a punched ring at the left. */
.pg-badge.pg-badge--shape-indexCard {
  border-radius: 2px;
  border-style: solid;
  background-image:
    radial-gradient(circle at 0.52em 50%, transparent 0.13em, var(--rank-fill, transparent) 0.14em),
    repeating-linear-gradient(180deg, transparent 0 6px, color-mix(in srgb, currentColor 14%, transparent) 6px 7px);
  padding-left: 1.15em;
}

/* -------------------------------------------------------------- vitrine
   A glass lip: a hairline with one interior highlight and nothing else. */
.pg-badge.pg-badge--shape-vitrineLip {
  border-radius: 8px;
  background-image: linear-gradient(
    215deg,
    color-mix(in srgb, currentColor 22%, transparent) 0 12%,
    transparent 30%
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
}

/* ------------------------------------------------------------- keystone
   An arch stone: wide at the top, narrow at the bottom. */
.pg-badge.pg-badge--shape-keystone {
  border-radius: 3px 3px 0 0;
  border-bottom-color: transparent;
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
  padding-inline: 0.9em;
  box-shadow: inset 0 1px 0 var(--rank-border, transparent);
}

/* ----------------------------------------------------------- split plate
   Two materials, one seam: a hard vertical division down the middle. */
.pg-badge.pg-badge--shape-splitPlate {
  border-radius: 3px;
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, currentColor 16%, transparent) 0 48%,
    transparent 48% 50%,
    color-mix(in srgb, currentColor 7%, transparent) 50% 100%
  );
}

/* --------------------------------------------------------------- reticle
   A targeting frame: four ticks pointing inward, no continuous edge. */
.pg-badge.pg-badge--shape-reticle {
  border-color: transparent;
  border-radius: 0;
  background-image:
    linear-gradient(var(--rank-border, currentColor) 0 0) top center / 40% 1.5px no-repeat,
    linear-gradient(var(--rank-border, currentColor) 0 0) bottom center / 40% 1.5px no-repeat,
    linear-gradient(var(--rank-border, currentColor) 0 0) left center / 1.5px 40% no-repeat,
    linear-gradient(var(--rank-border, currentColor) 0 0) right center / 1.5px 40% no-repeat;
  box-shadow: none;
  padding-inline: 0.95em;
}

/* -------------------------------------------------------------- wax seal
   Irregular, pressed: the radius is deliberately wrong on every corner and
   one edge is heavier. */
.pg-badge.pg-badge--shape-waxSeal {
  border-radius: 46% 54% 48% 52% / 58% 44% 56% 42%;
  border-width: 2px;
  border-style: solid;
  padding-inline: 0.92em;
  box-shadow: inset 0 -1px 2px color-mix(in srgb, #000 40%, transparent);
}

/* -------------------------------------------------------------- onyx bar
   A black slab, edge-lit: no radius, one lit bottom edge. */
.pg-badge.pg-badge--shape-onyxBar {
  border-radius: 0;
  background-image: linear-gradient(to bottom, transparent 62%, color-mix(in srgb, currentColor 20%, transparent));
  box-shadow: inset 0 -1px 0 color-mix(in srgb, currentColor 34%, transparent);
  padding-inline: 0.88em;
}

/* ═══════════════════════════════════════════════════════════ effects ══ */

/* --------------------------------------------------------------- ink dry
   Wicks outward once on reveal: a soft second impression that settles. */
.pg-badge.pg-badge--fx-inkDry {
  background-image: radial-gradient(circle at 24% 50%, color-mix(in srgb, currentColor 20%, transparent), transparent 62%);
}

/* -------------------------------------------------------------- press in
   An emboss that catches the light: the highlight sits on the bottom edge,
   which is what makes it read as pressed rather than raised. */
.pg-badge.pg-badge--fx-pressIn {
  box-shadow:
    inset 0 2px 3px color-mix(in srgb, #000 42%, transparent),
    inset 0 -1px 0 color-mix(in srgb, currentColor 30%, transparent);
}

/* ---------------------------------------------------------- pixel blink
   A hard two-frame blink — steps(1), no fade. */
.pg-badge.pg-badge--fx-pixelBlink {
  animation: cb-pixel-blink 1.4s steps(1, end) infinite;
}

/* ---------------------------------------------------------------- stitch
   A moving thread border: dashes travel along the plate edge. */
.pg-badge.pg-badge--fx-stitch {
  border-style: dashed;
  border-width: 1.5px;
}

/* ------------------------------------------------------------ impression
   Lands once, then stays: one scale settle on reveal, then nothing. */
.pg-badge.pg-badge--fx-stampImpression {
  animation: cb-stamp 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 1 both;
}

/* ---------------------------------------------------------- brush stroke
   A stroke draws itself behind the label, left to right, once. */
.pg-badge.pg-badge--fx-brushStroke {
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, currentColor 18%, transparent) 0 100%
  );
  background-size: 0% 100%;
  background-repeat: no-repeat;
  animation: cb-brush 0.7s ease-out 0.15s 1 forwards;
}

/* ------------------------------------------------------------ foil flash
   One cold flash on reveal: a narrow band crosses the plate once. */
.pg-badge.pg-badge--fx-foilFlash {
  background-image: linear-gradient(
    100deg,
    transparent 30%,
    color-mix(in srgb, #fff 55%, transparent) 48%,
    transparent 66%
  );
  background-size: 240% 100%;
  animation: cb-flash 1.2s ease-out 0.2s 1 both;
}

/* -------------------------------------------------------------- duotone
   Two inks trade places: the plate and the label swap value on a slow cycle. */
.pg-badge.pg-badge--fx-duotonePulse {
  animation: cb-duotone 6s ease-in-out infinite;
}

/* --------------------------------------------------------- vitrine glint
   A highlight crossing the glass, slowly, forever — because glass does. */
.pg-badge.pg-badge--fx-vitrineGlint {
  background-image: linear-gradient(
    115deg,
    transparent 34%,
    color-mix(in srgb, #fff 34%, transparent) 50%,
    transparent 64%
  );
  background-size: 260% 100%;
  animation: cb-glint 7s ease-in-out infinite;
}

/* --------------------------------------------------------------- caustic
   Water light under the plate: two soft bands drifting. */
.pg-badge.pg-badge--fx-caustic {
  background-image:
    radial-gradient(circle at 26% 40%, color-mix(in srgb, #7dd3fc 40%, transparent), transparent 42%),
    radial-gradient(circle at 74% 68%, color-mix(in srgb, #38bdf8 34%, transparent), transparent 44%);
  animation: cb-caustic 11s ease-in-out infinite alternate;
}

/* ------------------------------------------------------------- scan line
   A bar passing the plate: the bar is painted, the label is not. */
.pg-badge.pg-badge--fx-scanLine {
  background-image: linear-gradient(
    180deg,
    transparent 38%,
    color-mix(in srgb, currentColor 42%, transparent) 50%,
    transparent 62%
  );
  background-size: 100% 260%;
  animation: cb-scan 3.6s linear infinite;
}

/* ---------------------------------------------------------- circuit pulse
   One trace lights up: a single point of light travelling the bottom edge. */
.pg-badge.pg-badge--fx-circuitPulse {
  background-image: linear-gradient(90deg, transparent, #34d399 50%, transparent);
  background-size: 32% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  animation: cb-pulse 2.8s linear infinite;
}

/* ------------------------------------------------------------ gilt sheen
   Brushed gold, slow: a matte gradient that advances very slowly, so it
   reads as a surface catching a moving light rather than a shimmer. */
.pg-badge.pg-badge--fx-giltSheen {
  background-image: repeating-linear-gradient(
    102deg,
    color-mix(in srgb, #d8b26a 26%, transparent) 0 4px,
    color-mix(in srgb, #e6c884 40%, transparent) 4px 6px,
    transparent 6px 12px
  );
  background-size: 200% 100%;
  animation: cb-gilt 16s linear infinite;
}

/* ------------------------------------------------------------- seal crack
   A hairline, once: the plate gains a crack on reveal and keeps it. */
.pg-badge.pg-badge--fx-sealCrack {
  background-image: linear-gradient(
    106deg,
    transparent 46%,
    color-mix(in srgb, #7f1d1d 60%, transparent) 48%,
    transparent 50%
  );
}

/* -------------------------------------------------------------- motion */

@keyframes cb-pixel-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.35; }
}
@keyframes cb-stamp {
  0% { scale: 1.4; opacity: 0; }
  60% { scale: 0.97; opacity: 1; }
  100% { scale: 1; opacity: 1; }
}
@keyframes cb-brush {
  to { background-size: 100% 100%; }
}
@keyframes cb-flash {
  0% { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}
@keyframes cb-duotone {
  0%, 100% { filter: none; }
  50% { filter: invert(0.12); }
}
@keyframes cb-glint {
  0%, 100% { background-position: 140% 0; }
  50% { background-position: -40% 0; }
}
@keyframes cb-caustic {
  0% { background-position: 0% 0%, 100% 100%; }
  100% { background-position: 40% 30%, 60% 70%; }
}
@keyframes cb-scan {
  0% { background-position: 0 -120%; }
  100% { background-position: 0 220%; }
}
@keyframes cb-pulse {
  0% { background-position: -32% 100%; }
  100% { background-position: 132% 100%; }
}
@keyframes cb-gilt {
  to { background-position: -200% 0; }
}

/* Reduced motion: every effect that is a one-shot keeps its end state, every
   looping one stops at a readable still. Nothing disappears. */
html[data-motion="low"] .pg-badge--fx-pixelBlink,
html[data-motion="low"] .pg-badge--fx-duotonePulse,
html[data-motion="low"] .pg-badge--fx-vitrineGlint,
html[data-motion="low"] .pg-badge--fx-caustic,
html[data-motion="low"] .pg-badge--fx-scanLine,
html[data-motion="low"] .pg-badge--fx-circuitPulse,
html[data-motion="low"] .pg-badge--fx-giltSheen,
html.is-slow-device .pg-badge--fx-pixelBlink,
html.is-slow-device .pg-badge--fx-duotonePulse,
html.is-slow-device .pg-badge--fx-vitrineGlint,
html.is-slow-device .pg-badge--fx-caustic,
html.is-slow-device .pg-badge--fx-scanLine,
html.is-slow-device .pg-badge--fx-circuitPulse,
html.is-slow-device .pg-badge--fx-giltSheen {
  animation: none !important;
}
html[data-motion="low"] .pg-badge--fx-brushStroke { background-size: 100% 100%; }
html[data-motion="low"] .pg-badge--fx-scanLine { background-position: 0 50%; }
html[data-motion="low"] .pg-badge--fx-vitrineGlint { background-position: 50% 0; }
html[data-motion="low"] .pg-badge--fx-circuitPulse { background-position: 40% 100%; }
html[data-motion="low"] .pg-badge--fx-stampImpression,
html[data-motion="low"] .pg-badge--fx-foilFlash {
  animation: none !important;
  scale: 1;
  opacity: 1;
  background-position: 50% 0;
}

/* ══════════════════════════ second wave: shapes and effects that close the
   free tier to ten per lane. Same contract as above: geometry only for a
   shape, decoration only for an effect, never `color`. ══════════════════ */

/* ---------------------------------------------------------------- notch
   One corner missing. A cut, not a rounding — the corner is a right angle
   with a bite taken out of it. */
.pg-badge.pg-badge--shape-notch {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--rank-border, var(--border));
}

/* ----------------------------------------------------------- double rule
   A heavy rule under a hairline. The weight difference is the whole shape. */
.pg-badge.pg-badge--shape-doubleRule {
  border-radius: 0;
  border-top-width: 1px;
  border-bottom-width: 2.5px;
  border-left-color: transparent;
  border-right-color: transparent;
  padding-inline: 0.55em;
  box-shadow: none;
}

/* -------------------------------------------------------------- capsule
   Rounded until there is no straight edge left, and no border at all: the
   fill alone carries the shape. */
.pg-badge.pg-badge--shape-capsuleEdge {
  border-radius: 999px;
  border-color: transparent;
  padding-inline: 0.86em;
  box-shadow: none;
}

/* ----------------------------------------------------------- corner fold
   A paper corner turned back, shown by a clipped triangle that reads as the
   underside. */
.pg-badge.pg-badge--shape-cornerFold {
  border-radius: 2px;
  background-image: linear-gradient(
    225deg,
    color-mix(in srgb, currentColor 30%, transparent) 0 7px,
    transparent 7px
  );
  box-shadow: inset 0 0 0 1px var(--rank-border, var(--border));
}

/* ---------------------------------------------------------------- deboss
   Pressed in with no colour at all: one dark edge above, one light below.
   The inverse of every other effect here, which is why it reads. */
.pg-badge.pg-badge--fx-deboss {
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, #000 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, currentColor 22%, transparent);
}

/* ----------------------------------------------------------- hairline ink
   One rule draws itself and stays. A single stroke, not a border. */
.pg-badge.pg-badge--fx-hairlineInk {
  background-image: linear-gradient(90deg, currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}

/* -------------------------------------------------------------- wax bead
   A drop of wax caught at one end. Small, matte, slightly off round. */
.pg-badge.pg-badge--fx-waxBead::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  width: 7px;
  height: 7px;
  translate: 0 -50%;
  border-radius: 52% 48% 46% 54% / 48% 54% 46% 52%;
  background: radial-gradient(circle at 36% 30%, #f87171, #b91c1c 62%, #7f1d1d);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------------------ paper grain
   Fibre. Almost invisible, and that is the point — it only resolves when you
   are close to the screen. */
.pg-badge.pg-badge--fx-paperGrain {
  background-image: repeating-linear-gradient(
    92deg,
    color-mix(in srgb, currentColor 7%, transparent) 0 1px,
    transparent 1px 3px
  );
}

@media (prefers-reduced-motion: no-preference) {
  .pg-badge.pg-badge--fx-hairlineInk { animation: cb-hairline 0.6s ease-out 0.1s 1 forwards; }
}
@keyframes cb-hairline { to { background-size: 100% 1px; } }
html[data-motion="low"] .pg-badge--fx-hairlineInk { background-size: 100% 1px; }

/* ═════════════════════════════════════════ third wave: shapes ══════════
   One more plate per rank. The contract from the top of the file still holds:
   a shape writes geometry, `background-image` and `box-shadow` only. Never
   `color`, `background-color` or `border-color`, because those carry the rank
   and a shape must not erase a tier. */

/* ------------------------------------------------------------ gutter tag
   A tag cut at the gutter: one side is a straight cut, the other follows the
   fold. The asymmetry is the whole shape. */
.pg-badge.pg-badge--shape-gutterTag {
  border-radius: 1px 7px 7px 1px;
  border-left-width: 3px;
  border-left-style: solid;
  padding-inline: 0.7em 0.86em;
}

/* ------------------------------------------------------------ proof plate
   Corner marks and a trim line: printers' marks, at plate scale. */
.pg-badge.pg-badge--shape-proofPlate {
  border-color: transparent;
  border-radius: 0;
  background-image:
    linear-gradient(currentColor 0 0) left top / 5px 1px no-repeat,
    linear-gradient(currentColor 0 0) left top / 1px 5px no-repeat,
    linear-gradient(currentColor 0 0) right bottom / 5px 1px no-repeat,
    linear-gradient(currentColor 0 0) right bottom / 1px 5px no-repeat;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
  padding-inline: 0.84em;
}

/* ---------------------------------------------------------------- stapled
   Two legs through the paper: the plate is held, not bordered. */
.pg-badge.pg-badge--shape-stapled {
  border-radius: 2px;
  border-style: solid;
  background-image:
    linear-gradient(currentColor 0 0) left 22% / 7px 1.5px no-repeat,
    linear-gradient(currentColor 0 0) right 78% / 7px 1.5px no-repeat;
  padding-inline: 1em;
}

/* ------------------------------------------------------------- mat window
   A cut window, bevelled inward: the opening is smaller than the plate, and
   the bevel is the only decoration. */
.pg-badge.pg-badge--shape-matWindow {
  border-radius: 1px;
  border-width: 3px;
  border-style: solid;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #000 30%, transparent),
    inset 0 1px 2px color-mix(in srgb, #000 34%, transparent);
  padding-inline: 0.8em;
}

/* ------------------------------------------------------------ specimen tag
   A numbered label on a pin: the pin is a dot at the left, the number is the
   text the member already supplies. */
.pg-badge.pg-badge--shape-specimenTag {
  border-radius: 1px;
  border-style: solid;
  background-image: radial-gradient(circle at 0.95em 50%, color-mix(in srgb, currentColor 45%, transparent) 0 2px, transparent 2.5px);
  padding-left: 1.7em;
}

/* ---------------------------------------------------------------- pin plate
   A plate held by one pin, so it hangs slightly off centre. The offset is
   deliberate and is the only shape here that is not symmetric. */
.pg-badge.pg-badge--shape-pinPlate {
  border-radius: 2px 10px 10px 10px;
  border-style: solid;
  background-image: radial-gradient(circle at 0.7em 0.55em, color-mix(in srgb, currentColor 40%, transparent) 0 1.6px, transparent 2px);
  padding-inline: 0.9em 0.8em;
}

/* ---------------------------------------------------------------- lens ring
   A ring with one element inside: a circular plate, which no other badge
   shape is, with an inner rim so it reads as ground glass. */
.pg-badge.pg-badge--shape-lensRing {
  border-radius: 50% / 46%;
  border-style: solid;
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, currentColor 12%, transparent),
    inset 0 1px 3px color-mix(in srgb, #fff 22%, transparent);
  padding-inline: 1.05em;
}

/* -------------------------------------------------------------- prism plate
   A plate split on one diagonal: two halves, one seam, no gradient. */
.pg-badge.pg-badge--shape-prismPlate {
  border-radius: 2px;
  border-color: transparent;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  background-image: linear-gradient(
    118deg,
    color-mix(in srgb, currentColor 12%, transparent) 0 48%,
    transparent 48% 52%,
    color-mix(in srgb, currentColor 22%, transparent) 52%
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent);
  padding-inline: 0.86em;
}

/* ---------------------------------------------------------------- flare tab
   A tab that throws one streak: a single light pass leaves the right edge. */
.pg-badge.pg-badge--shape-flareTab {
  border-radius: 2px 0 0 2px;
  border-style: solid;
  background-image: linear-gradient(90deg, transparent 62%, color-mix(in srgb, #fff 24%, transparent) 84%, transparent 92%);
  padding-inline: 0.8em 1.1em;
}

/* ---------------------------------------------------------------- glass bar
   A bar with a lit top edge and a cold base: no radius, no outline, just the
   two edges a glass block actually has. */
.pg-badge.pg-badge--shape-glassBar {
  border-radius: 0;
  border-color: transparent;
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, #fff 26%, transparent) 0 1px,
    transparent 1px 82%,
    color-mix(in srgb, currentColor 18%, transparent) 82%
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
  padding-inline: 0.95em;
}

/* ---------------------------------------------------------------- vent plate
   Three slots, no outline. The plate is defined by what is missing from it. */
.pg-badge.pg-badge--shape-ventPlate {
  border-color: transparent;
  border-radius: 0;
  background-image: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, currentColor 42%, transparent) 0 3px,
    transparent 3px 8px
  );
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 50%;
  padding-inline: 0.9em;
  box-shadow: none;
}

/* --------------------------------------------------------------- signal bar
   A level meter at rest: five bars of unequal height, one of them lit. */
.pg-badge.pg-badge--shape-signalBar {
  border-color: transparent;
  border-radius: 1px;
  background-image:
    linear-gradient(currentColor 0 0) 0.5em 62% / 2px 34% no-repeat,
    linear-gradient(currentColor 0 0) 0.9em 50% / 2px 46% no-repeat,
    linear-gradient(currentColor 0 0) 1.3em 38% / 2px 58% no-repeat,
    linear-gradient(currentColor 0 0) 1.7em 26% / 2px 70% no-repeat;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
  padding-left: 2.3em;
}

/* ----------------------------------------------------------------- mesh tab
   A lattice tab with open corners: the corners are the only place the outline
   exists, and the lattice fills the middle. */
.pg-badge.pg-badge--shape-meshTab {
  border-color: transparent;
  border-radius: 0;
  background-image:
    linear-gradient(currentColor 0 0) left top / 6px 1px no-repeat,
    linear-gradient(currentColor 0 0) left top / 1px 6px no-repeat,
    linear-gradient(currentColor 0 0) right top / 6px 1px no-repeat,
    linear-gradient(currentColor 0 0) left bottom / 6px 1px no-repeat,
    repeating-linear-gradient(90deg, color-mix(in srgb, currentColor 10%, transparent) 0 1px, transparent 1px 5px);
  padding-inline: 0.86em;
  box-shadow: none;
}

/* --------------------------------------------------------------- radar chip
   A chip with one sweep arm: a quarter-arc drawn from the centre, which is a
   geometry no other plate uses. */
.pg-badge.pg-badge--shape-radarChip {
  border-radius: 3px;
  border-style: solid;
  background-image: conic-gradient(
    from 210deg at 50% 50%,
    color-mix(in srgb, currentColor 26%, transparent) 0deg 42deg,
    transparent 42deg 360deg
  );
  padding-inline: 0.88em;
}

/* -------------------------------------------------------------- inlay plate
   A plate with a band set in: the band is wider than a rule and sits at the
   left, so it reads as a second material rather than an edge. */
.pg-badge.pg-badge--shape-inlayPlate {
  border-radius: 2px;
  border-style: solid;
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, #d9b665 46%, transparent) 0 4px,
    transparent 4px
  );
  padding-inline: 0.86em 0.9em;
}

/* --------------------------------------------------------------- velvet tag
   Soft edges, no highlight: a taller radius than any other plate, and not one
   specular pixel, because velvet has none. */
.pg-badge.pg-badge--shape-velvetTag {
  border-radius: 13px / 46%;
  border-style: solid;
  border-width: 1.5px;
  box-shadow: inset 0 -2px 5px color-mix(in srgb, #000 30%, transparent);
  padding-inline: 1em;
}

/* -------------------------------------------------------------- crest plate
   A shield, flattened: two shoulders and a point, at a height a badge can
   actually carry without becoming a tile. */
.pg-badge.pg-badge--shape-crestPlate {
  border-color: transparent;
  border-radius: 0;
  clip-path: polygon(8% 0, 92% 0, 92% 58%, 50% 100%, 8% 58%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
  padding-inline: 1.1em;
}

/* ═════════════════════════════════════════ third wave: effects ═════════
   Decoration only. Each one animates `background-image`, `box-shadow` or a
   pseudo element, never the plate's colour. */

/* ------------------------------------------------------------- proof flash
   One inked pass on reveal: a dark band crosses the plate once and settles. */
.pg-badge.pg-badge--fx-proofFlash {
  background-image: linear-gradient(100deg, transparent 36%, color-mix(in srgb, currentColor 24%, transparent) 50%, transparent 64%);
  background-size: 260% 100%;
  background-position: 160% 0;
}

/* --------------------------------------------------------------- roller pass
   A roller crosses once: a wide soft band, matte, slightly uneven. */
.pg-badge.pg-badge--fx-rollerPass {
  background-image: repeating-linear-gradient(
    92deg,
    color-mix(in srgb, currentColor 9%, transparent) 0 2px,
    transparent 2px 5px
  );
}

/* -------------------------------------------------------------- staple press
   Two legs go in: a pair of short shadows appear inside the plate. */
.pg-badge.pg-badge--fx-staplePress {
  box-shadow:
    inset 3px 3px 0 -2px color-mix(in srgb, currentColor 34%, transparent),
    inset -3px -3px 0 -2px color-mix(in srgb, currentColor 34%, transparent);
}

/* -------------------------------------------------------------- mat shadow
   The plate sits above the mat: one wide shadow, no highlight. */
.pg-badge.pg-badge--fx-matShadow {
  box-shadow:
    0 2px 5px color-mix(in srgb, #000 42%, transparent),
    0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
}

/* --------------------------------------------------------------- pin settle
   The pin rocks and stops. Two degrees, once. */
.pg-badge.pg-badge--fx-pinSettle {
  transform-origin: 50% 0;
}

/* -------------------------------------------------------------- case reflect
   Glass, one reflection: a hard band at a fixed angle. */
.pg-badge.pg-badge--fx-caseReflect {
  background-image: linear-gradient(
    108deg,
    transparent 38%,
    color-mix(in srgb, #fff 20%, transparent) 48%,
    transparent 58%
  );
}

/* --------------------------------------------------------------- label slide
   The label slides into place: a mask that opens from the left once. */
.pg-badge.pg-badge--fx-labelSlide {
  background-image: linear-gradient(90deg, color-mix(in srgb, currentColor 16%, transparent), transparent 70%);
}

/* ---------------------------------------------------------------- lens glint
   A point of light crosses: a small white highlight travelling the diagonal. */
.pg-badge.pg-badge--fx-lensGlint {
  background-image: radial-gradient(circle at 30% 30%, color-mix(in srgb, #fff 34%, transparent) 0 1.5px, transparent 3px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* -------------------------------------------------------------- prism split
   The plate separates into three: two ghosts either side of the fill. */
.pg-badge.pg-badge--fx-prismSplit {
  box-shadow:
    -1.5px 0 0 color-mix(in srgb, #22d3ee 45%, transparent),
    1.5px 0 0 color-mix(in srgb, #f472b6 45%, transparent);
}

/* ---------------------------------------------------------------- flare pass
   A streak passes once: one narrow band, high value, short duration. */
.pg-badge.pg-badge--fx-flarePass {
  background-image: linear-gradient(90deg, transparent 44%, color-mix(in srgb, #fff6d6 26%, transparent) 50%, transparent 56%);
  background-size: 300% 100%;
  background-position: 220% 0;
}

/* ---------------------------------------------------------------- glass edge
   One lit edge travels: a bottom rule that slides along the plate. */
.pg-badge.pg-badge--fx-glassEdge {
  background-image: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 36%, transparent), transparent);
  background-size: 40% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}

/* --------------------------------------------------------------- vent breath
   The slots open and close: the bar height changes, nothing else. */
.pg-badge.pg-badge--fx-ventBreath {
  background-image: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, currentColor 42%, transparent) 0 3px,
    transparent 3px 8px
  );
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 50%;
}

/* --------------------------------------------------------------- signal tick
   One bar rises while another falls: a tiny level meter that only moves on
   reveal, never in a loop. */
.pg-badge.pg-badge--fx-signalTick {
  background-image:
    linear-gradient(currentColor 0 0) 0.55em 60% / 2px 30% no-repeat,
    linear-gradient(currentColor 0 0) 1.05em 46% / 2px 44% no-repeat;
  background-position: 0 0, 0 0;
}

/* ---------------------------------------------------------------- mesh pulse
   A lattice ripple, once: the grid grows a few percent and settles. */
.pg-badge.pg-badge--fx-meshPulse {
  background-image:
    linear-gradient(90deg, color-mix(in srgb, currentColor 10%, transparent) 0 1px, transparent 1px 5px),
    linear-gradient(0deg, color-mix(in srgb, currentColor 8%, transparent) 0 1px, transparent 1px 5px);
}

/* --------------------------------------------------------------- inlay shine
   The band catches light: one pass along the inlay only. */
.pg-badge.pg-badge--fx-inlayShine {
  background-image: linear-gradient(
    100deg,
    transparent 30%,
    color-mix(in srgb, #f3e2b0 34%, transparent) 46%,
    transparent 60%
  );
  background-size: 260% 100%;
  background-position: 180% 0;
}

/* ------------------------------------------------------------- velvet gather
   The surface gathers and releases: a soft shadow that deepens at the centre
   and returns. No highlight anywhere. */
.pg-badge.pg-badge--fx-velvetGather {
  box-shadow: inset 0 -3px 8px color-mix(in srgb, #000 34%, transparent);
}

/* ---------------------------------------------------------------- crest lift
   The crest rises a hair: half a pixel of offset, which is exactly enough to
   read as a lifted object and not enough to blur the text. */
.pg-badge.pg-badge--fx-crestLift {
  transform: translateY(-0.5px);
}

@media (prefers-reduced-motion: no-preference) {
  .pg-badge.pg-badge--fx-proofFlash { animation: cb-proof 1.1s cubic-bezier(0.3, 0.7, 0.2, 1) 1 both; }
  .pg-badge.pg-badge--fx-rollerPass { animation: cb-roller 1.4s ease-out 1 both; }
  .pg-badge.pg-badge--fx-staplePress { animation: cb-staple 0.28s ease-out 1 both; }
  .pg-badge.pg-badge--fx-pinSettle { animation: cb-pin 0.6s ease-out 1 both; }
  .pg-badge.pg-badge--fx-caseReflect { animation: cb-case 1.2s ease-out 1 both; }
  .pg-badge.pg-badge--fx-labelSlide { animation: cb-label 0.7s ease-out 1 both; }
  .pg-badge.pg-badge--fx-lensGlint { animation: cb-glint 1.6s ease-out 1 both; }
  .pg-badge.pg-badge--fx-flarePass { animation: cb-flare 1.2s ease-out 1 both; }
  .pg-badge.pg-badge--fx-glassEdge { animation: cb-edge 1.8s ease-out 1 both; }
  .pg-badge.pg-badge--fx-ventBreath { animation: cb-vent 2.4s ease-in-out infinite; }
  .pg-badge.pg-badge--fx-meshPulse { animation: cb-mesh 1.1s ease-out 1 both; }
  .pg-badge.pg-badge--fx-inlayShine { animation: cb-inlay 1.5s ease-out 1 both; }
  .pg-badge.pg-badge--fx-velvetGather { animation: cb-velvet 3.2s ease-in-out infinite; }
}

@keyframes cb-proof {
  0% { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}
@keyframes cb-roller {
  0% { opacity: 0.2; background-position: -20% 0; }
  100% { opacity: 1; background-position: 0 0; }
}
@keyframes cb-staple {
  0% { transform: scaleY(0.6); opacity: 0.4; }
  100% { transform: scaleY(1); opacity: 1; }
}
@keyframes cb-pin {
  0% { transform: rotate(-4deg); }
  45% { transform: rotate(1.5deg); }
  100% { transform: rotate(0deg); }
}
@keyframes cb-case {
  0% { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}
@keyframes cb-label {
  0% { background-size: 0% 100%; }
  100% { background-size: 100% 100%; }
}
@keyframes cb-glint {
  0% { background-position: 30% 30%; background-size: 100% 100%; opacity: 0.2; }
  40% { opacity: 1; }
  100% { background-position: 70% 70%; opacity: 0; }
}
@keyframes cb-flare {
  0% { background-position: 220% 0; }
  100% { background-position: -120% 0; }
}
@keyframes cb-edge {
  0% { background-position: -40% 100%; }
  100% { background-position: 140% 100%; }
}
@keyframes cb-vent {
  0%, 100% { background-size: 100% 2px; }
  50% { background-size: 100% 3.5px; }
}
@keyframes cb-mesh {
  0% { background-size: 5px 5px, 5px 5px; opacity: 0.3; }
  100% { background-size: 6px 6px, 6px 6px; opacity: 1; }
}
@keyframes cb-inlay {
  0% { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}
@keyframes cb-velvet {
  0%, 100% { box-shadow: inset 0 -3px 8px color-mix(in srgb, #000 34%, transparent); }
  50% { box-shadow: inset 0 -5px 12px color-mix(in srgb, #000 46%, transparent); }
}

/* Motion off: every one of these keeps its resting look. Several are already
   static by construction; the looped ones park on their settled frame. */
html[data-motion="low"] .pg-badge--fx-proofFlash,
html[data-motion="low"] .pg-badge--fx-rollerPass,
html[data-motion="low"] .pg-badge--fx-staplePress,
html[data-motion="low"] .pg-badge--fx-pinSettle,
html[data-motion="low"] .pg-badge--fx-caseReflect,
html[data-motion="low"] .pg-badge--fx-labelSlide,
html[data-motion="low"] .pg-badge--fx-lensGlint,
html[data-motion="low"] .pg-badge--fx-flarePass,
html[data-motion="low"] .pg-badge--fx-glassEdge,
html[data-motion="low"] .pg-badge--fx-ventBreath,
html[data-motion="low"] .pg-badge--fx-meshPulse,
html[data-motion="low"] .pg-badge--fx-inlayShine,
html[data-motion="low"] .pg-badge--fx-velvetGather {
  animation: none !important;
}
html[data-motion="low"] .pg-badge--fx-proofFlash,
html[data-motion="low"] .pg-badge--fx-flarePass,
html[data-motion="low"] .pg-badge--fx-inlayShine {
  background-position: 0 0;
}
html[data-motion="low"] .pg-badge--fx-caseReflect,
html[data-motion="low"] .pg-badge--fx-glassEdge { background-position: 50% 100%; }
html[data-motion="low"] .pg-badge--fx-lensGlint { opacity: 0.5; }
html[data-motion="low"] .pg-badge--fx-labelSlide { background-size: 100% 100%; }