/* ============================================================
   yourcustomprofile.app — catalogue avatar frames
   The 35 sculpts added with the rank-gated catalogue
   (content/catalog.mjs, lane `avatarFx`).

   Contract, same as avatar-frames.css: every rule is scoped to
   `.avatar-fx-<id>` and only switches the shared primitives on and gives
   them a shape. No rule touches `.avatar__disc`, the card or the page.
   A frame must be recognisable with motion off, so nothing here depends on
   an animation to read; motion is always an enhancement, and the reduced
   motion block at the bottom removes it.

   Materials, not colours. Each frame borrows one physical idea — porcelain,
   stone, paper, brass, glass, light — and expresses it with texture layers
   and edges. Two frames never share a silhouette.
   ============================================================ */

/* Shared shorthand. Every frame sets --cf-<name> locally so one rule can
   carry the whole look and be reused by the hover/idle variants. */
.avatar-fx-kintsugi,
.avatar-fx-terrazzo,
.avatar-fx-marbleEdge,
.avatar-fx-onyx,
.avatar-fx-goldLeaf,
.avatar-fx-foilStamp,
.avatar-fx-brassPlaque,
.avatar-fx-vitrine,
.avatar-fx-specimen,
.avatar-fx-catalogCard,
.avatar-fx-letterpress {
  --cf-line: color-mix(in srgb, var(--av-1, var(--accent)) 70%, #fff 30%);
}

/* ------------------------------------------------------------ kintsugi
   Cracked porcelain seamed in gold. Three cracks radiate from the rim and
   the seam is the only bright thing on the frame. */
.avatar-fx-kintsugi .avatar__fx-shell {
  inset: -13%;
  opacity: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fffdf8, #efe7dd 42%, #d8cfc2 72%, #b9ae9f);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 63%, #000 79%, transparent 82%);
  mask: radial-gradient(circle, transparent 61%, #000 63%, #000 79%, transparent 82%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.avatar-fx-kintsugi .avatar__fx-crack {
  opacity: 1;
  width: 2.5px;
  background: linear-gradient(180deg, #f7e7a3, #c99a22 40%, #8a6310);
  box-shadow: 0 0 6px rgba(240, 200, 90, 0.8);
  top: 4%;
  left: 32%;
  height: 34%;
  rotate: -8deg;
}
.avatar-fx-kintsugi .avatar__fx-crack--b {
  top: auto;
  bottom: 2%;
  left: 56%;
  height: 28%;
  rotate: 26deg;
}
.avatar-fx-kintsugi .avatar__fx-crack--c {
  top: 38%;
  left: 4%;
  height: 22%;
  rotate: 78deg;
}
.avatar-fx-kintsugi .avatar__fx-aura {
  opacity: 0.3;
  background: radial-gradient(circle, rgba(255, 238, 190, 0.3), transparent 68%);
}

/* --------------------------------------------------------------- torii
   A shrine gate framing the face: two pillars and a curved lintel, drawn as
   borders so it scales with the avatar. */
.avatar-fx-torii .avatar__fx-arc {
  opacity: 1;
  inset: auto;
  border: 0;
  border-radius: 0;
  top: -16%;
  left: 50%;
  width: 96%;
  height: 10%;
  translate: -50% 0;
  background: #8f1d1d;
  clip-path: polygon(0 46%, 50% 0, 100% 46%, 100% 74%, 50% 34%, 0 74%);
}
.avatar-fx-torii .avatar__fx-arc--b {
  top: -9%;
  width: 78%;
  height: 5%;
  background: #6d1414;
  clip-path: none;
  border-radius: 2px;
}
.avatar-fx-torii .avatar__fx-beam {
  opacity: 1;
  inset: 0 -6%;
  border-radius: 0;
  background:
    linear-gradient(90deg, #8f1d1d 0 6%, transparent 6%) left / 100% 100% no-repeat,
    linear-gradient(90deg, transparent 0 94%, #8f1d1d 94%) left / 100% 100% no-repeat;
  -webkit-mask: linear-gradient(180deg, transparent 8%, #000 22%);
  mask: linear-gradient(180deg, transparent 8%, #000 22%);
}
.avatar-fx-torii .avatar__fx-aura {
  opacity: 0.26;
  background: radial-gradient(circle at 50% 0%, rgba(214, 82, 60, 0.32), transparent 66%);
}

/* -------------------------------------------------------------- hanabi
   Firework shells opening behind the head. Eight spokes from four centres,
   each spoke a thin bright line. */
.avatar-fx-hanabi .avatar__fx-glyph {
  opacity: 1;
  width: 1.5px;
  height: 44%;
  top: -22%;
  left: 24%;
  background: linear-gradient(180deg, transparent, var(--av-1, var(--accent)), transparent);
  transform-origin: 50% 100%;
}
.avatar-fx-hanabi .avatar__fx-glyph--a { rotate: 22deg; }
.avatar-fx-hanabi .avatar__fx-glyph--b { left: 74%; rotate: -22deg; }
.avatar-fx-hanabi .avatar__fx-glyph--c {
  top: auto;
  bottom: -18%;
  left: 50%;
  height: 34%;
  rotate: 180deg;
}
.avatar-fx-hanabi .avatar__fx-spark {
  opacity: 1;
  background: #fff6e0;
  box-shadow: 0 0 10px var(--av-2, var(--accent-2));
}
.avatar-fx-hanabi .avatar__fx-spark--a { top: -8%; left: 22%; }
.avatar-fx-hanabi .avatar__fx-spark--b { top: -4%; right: 20%; }
.avatar-fx-hanabi .avatar__fx-spark--c { bottom: -2%; left: 30%; }
.avatar-fx-hanabi .avatar__fx-spark--d { bottom: 4%; right: 28%; width: 4%; }
.avatar-fx-hanabi .avatar__fx-aura {
  opacity: 0.24;
  background: radial-gradient(circle at 50% 40%, rgba(255, 236, 190, 0.28), transparent 70%);
}

/* ------------------------------------------------------------ nekomata
   Two tails and one split ear. Deliberately asymmetric: a cat that is not
   quite one animal. */
.avatar-fx-nekomata .avatar__fx-tendril {
  opacity: 1;
  width: 13%;
  height: 48%;
  bottom: -22%;
  border-radius: 60% 60% 30% 30% / 80% 80% 20% 20%;
  background: linear-gradient(180deg, #3f3f46, #18181b 60%, transparent);
  filter: blur(0.6px);
}
.avatar-fx-nekomata .avatar__fx-tendril--a { left: 16%; rotate: -26deg; }
.avatar-fx-nekomata .avatar__fx-tendril--b { right: 16%; height: 54%; rotate: 30deg; }
.avatar-fx-nekomata .avatar__fx-tendril--c {
  right: 2%;
  height: 30%;
  rotate: 64deg;
  opacity: 0.6;
}
.avatar-fx-nekomata .avatar__fx-horn {
  opacity: 1;
  top: -14%;
  width: 19%;
  height: 24%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #52525b, #27272a);
}
.avatar-fx-nekomata .avatar__fx-horn--left { left: 17%; rotate: -9deg; }
.avatar-fx-nekomata .avatar__fx-horn--right {
  right: 26%;
  width: 11%;
  height: 13%;
  rotate: 22deg;
  opacity: 0.5;
}
.avatar-fx-nekomata .avatar__fx-aura {
  opacity: 0.3;
  background: radial-gradient(circle, rgba(120, 113, 108, 0.34), transparent 68%);
}

/* --------------------------------------------------------------- mecha
   Articulated plate joints: four hard plates with visible seams and a vent
   slot at the chin. */
.avatar-fx-mecha .avatar__fx-arc {
  opacity: 1;
  inset: -11%;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #cbd5e1 0 22%, #64748b 22% 24%, #e2e8f0 24% 46%,
    #64748b 46% 48%, #cbd5e1 48% 70%, #64748b 70% 72%, #e2e8f0 72% 96%, #64748b 96% 100%
  );
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%, #000 80%, transparent 82%);
  mask: radial-gradient(circle, transparent 62%, #000 64%, #000 80%, transparent 82%);
}
.avatar-fx-mecha .avatar__fx-node {
  opacity: 1;
  width: 8%;
  aspect-ratio: 1;
  border-radius: 2px;
  background: #94a3b8;
  box-shadow: inset 0 0 0 1px #334155;
}
.avatar-fx-mecha .avatar__fx-node--a { top: 4%; left: 46%; }
.avatar-fx-mecha .avatar__fx-node--b { top: 44%; left: -4%; }
.avatar-fx-mecha .avatar__fx-node--c { top: 44%; right: -4%; }
.avatar-fx-mecha .avatar__fx-node--d { bottom: 4%; left: 46%; }
.avatar-fx-mecha .avatar__fx-beam {
  opacity: 1;
  inset: 8% 30% -16%;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, #475569 0 3px, #1e293b 3px 6px);
  -webkit-mask: linear-gradient(180deg, transparent, #000 40%);
  mask: linear-gradient(180deg, transparent, #000 40%);
}

/* ---------------------------------------------------------- pixelQuest
   An 8-bit HUD bracket: four corner blocks, no curves anywhere. */
.avatar-fx-pixelQuest .avatar__fx-arc {
  opacity: 1;
  inset: -10%;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(#e8f7ff 0 0) left top / 18% 4px no-repeat,
    linear-gradient(#e8f7ff 0 0) left top / 4px 18% no-repeat,
    linear-gradient(#e8f7ff 0 0) right top / 18% 4px no-repeat,
    linear-gradient(#e8f7ff 0 0) right top / 4px 18% no-repeat,
    linear-gradient(#e8f7ff 0 0) left bottom / 18% 4px no-repeat,
    linear-gradient(#e8f7ff 0 0) left bottom / 4px 18% no-repeat,
    linear-gradient(#e8f7ff 0 0) right bottom / 18% 4px no-repeat,
    linear-gradient(#e8f7ff 0 0) right bottom / 4px 18% no-repeat;
  filter: drop-shadow(0 0 4px rgba(120, 210, 255, 0.8));
}
.avatar-fx-pixelQuest .avatar__fx-spark {
  opacity: 1;
  width: 5%;
  aspect-ratio: 1;
  border-radius: 0;
  background: #ffd93d;
}
.avatar-fx-pixelQuest .avatar__fx-spark--a { top: -6%; right: 8%; }
.avatar-fx-pixelQuest .avatar__fx-spark--b { bottom: -4%; left: 6%; width: 3.5%; }
.avatar-fx-pixelQuest .avatar__fx-aura {
  opacity: 0.2;
  background: radial-gradient(circle, rgba(90, 190, 255, 0.22), transparent 66%);
}

/* ------------------------------------------------------------- inkwash
   A sumi-e bloom: one wet blot bleeding past the rim, plus a dry edge. */
.avatar-fx-inkwash .avatar__fx-aura {
  opacity: 0.8;
  inset: -34%;
  filter: blur(14px);
  background:
    radial-gradient(circle at 44% 40%, rgba(38, 38, 42, 0.55), transparent 52%),
    radial-gradient(circle at 62% 62%, rgba(62, 60, 70, 0.34), transparent 46%);
}
.avatar-fx-inkwash .avatar__fx-shell {
  opacity: 1;
  inset: -12%;
  border-radius: 47% 53% 58% 42% / 44% 48% 52% 56%;
  background: linear-gradient(140deg, rgba(32, 32, 36, 0.42), rgba(20, 20, 24, 0.16) 60%, transparent);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 61%, #000 74%, transparent 79%);
  mask: radial-gradient(circle, transparent 58%, #000 61%, #000 74%, transparent 79%);
  filter: blur(0.8px);
}
.avatar-fx-inkwash .avatar__fx-beam {
  opacity: 0.5;
  inset: -20%;
  background: conic-gradient(from 220deg, transparent 0 62%, rgba(46, 46, 52, 0.4) 74%, transparent 88%);
  filter: blur(9px);
}

/* ---------------------------------------------------------------- moth
   A lunar moth: two pale wings and a dusting of scale dots. Wing shape is
   rounder than the angel wings on purpose. */
.avatar-fx-moth .avatar__fx-wing {
  opacity: 0.9;
  top: 4%;
  width: 118%;
  height: 88%;
  color: #f4efe2;
  filter: drop-shadow(0 0 9px rgba(240, 234, 214, 0.5));
}
/* Mirror the offset, not just the drawing. The right wing already carries
   `scaleX(-1)` and sits at `right: -120%`; setting `left` on both wings put
   them on the same side of the disc and stretched one across the face. */
.avatar-fx-moth .avatar__fx-wing--left { left: -104%; right: auto; }
.avatar-fx-moth .avatar__fx-wing--right { left: auto; right: -104%; }
.avatar-fx-moth .avatar__fx-wing .fx-wing-main { fill: #efe8d6; }
.avatar-fx-moth .avatar__fx-wing .fx-wing-vein { stroke: #b8a88a; opacity: 0.5; }
.avatar-fx-moth .avatar__fx-node {
  opacity: 1;
  width: 4%;
  background: #cfc3a8;
  box-shadow: 0 0 6px rgba(220, 210, 180, 0.7);
}
.avatar-fx-moth .avatar__fx-node--a { top: 12%; left: 18%; }
.avatar-fx-moth .avatar__fx-node--b { top: 26%; left: 8%; width: 3%; }
.avatar-fx-moth .avatar__fx-node--c { top: 14%; right: 18%; }
.avatar-fx-moth .avatar__fx-node--d { top: 30%; right: 9%; width: 3%; }
.avatar-fx-moth .avatar__fx-aura {
  opacity: 0.34;
  background: radial-gradient(circle, rgba(244, 238, 220, 0.3), transparent 70%);
}

/* ------------------------------------------------------------ terrazzo
   Poured stone: chips of three sizes set in the bezel, ground flat. */
.avatar-fx-terrazzo .avatar__fx-shell {
  opacity: 1;
  inset: -13%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 18% 30%, #b08968 0 3%, transparent 3.6%),
    radial-gradient(circle at 72% 22%, #6b705c 0 2.4%, transparent 3%),
    radial-gradient(circle at 84% 64%, #a26769 0 3.4%, transparent 4%),
    radial-gradient(circle at 30% 78%, #5c677d 0 2.6%, transparent 3.2%),
    radial-gradient(circle at 52% 8%, #cbb18a 0 2%, transparent 2.6%),
    radial-gradient(circle at 10% 58%, #8f7a66 0 2.2%, transparent 2.8%),
    radial-gradient(circle at 64% 88%, #9aa08a 0 3%, transparent 3.6%),
    linear-gradient(160deg, #f4f1ea, #e6e0d4 50%, #d3cabb);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 63%, #000 80%, transparent 83%);
  mask: radial-gradient(circle, transparent 60%, #000 63%, #000 80%, transparent 83%);
}

/* ---------------------------------------------------------------- vine
   Ivy taking the frame a season at a time: a stem on one side, three
   leaves, one bud. */
.avatar-fx-vine .avatar__fx-tendril {
  opacity: 1;
  width: 3px;
  height: 74%;
  bottom: -12%;
  left: 2%;
  border-radius: 2px;
  background: linear-gradient(180deg, #4d7c0f, #365314);
  rotate: -6deg;
  filter: none;
}
.avatar-fx-vine .avatar__fx-tendril--b {
  left: 96%;
  height: 52%;
  bottom: 4%;
  rotate: 8deg;
  opacity: 0.7;
}
.avatar-fx-vine .avatar__fx-tendril--c {
  left: 50%;
  bottom: -16%;
  height: 22%;
  rotate: 90deg;
  opacity: 0.45;
}
.avatar-fx-vine .avatar__fx-petal {
  opacity: 1;
  width: 17%;
  height: 12%;
  border-radius: 80% 6% 80% 6%;
  background: linear-gradient(140deg, #84cc16, #3f6212);
  top: 18%;
  left: -4%;
  rotate: -24deg;
  transform-origin: 0 50%;
}
.avatar-fx-vine .avatar__fx-petal--b {
  top: 44%;
  left: 2%;
  width: 13%;
  height: 9%;
  rotate: 16deg;
}
.avatar-fx-vine .avatar__fx-petal--c {
  top: 62%;
  left: auto;
  right: -2%;
  width: 15%;
  height: 10%;
  rotate: 160deg;
}
.avatar-fx-vine .avatar__fx-petal--d {
  top: 8%;
  left: auto;
  right: 4%;
  width: 10%;
  height: 7%;
  rotate: 40deg;
  opacity: 0.75;
}
.avatar-fx-vine .avatar__fx-petal--e { display: none; }
.avatar-fx-vine .avatar__fx-aura {
  opacity: 0.16;
  background: radial-gradient(circle, rgba(132, 204, 22, 0.22), transparent 68%);
}

/* --------------------------------------------------------- letterpress
   Debossed type on rag paper: a heavy raised rim with a printed shadow. */
.avatar-fx-letterpress .avatar__fx-shell {
  opacity: 1;
  inset: -12%;
  border-radius: 50%;
  background: linear-gradient(155deg, #f6f1e4, #e8e0cc 46%, #cfc4a8);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 64%, #000 81%, transparent 84%);
  mask: radial-gradient(circle, transparent 61%, #000 64%, #000 81%, transparent 84%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
    inset -2px -2px 0 rgba(120, 106, 78, 0.45);
}
.avatar-fx-letterpress .avatar__fx-glyph {
  opacity: 1;
  width: 2px;
  height: 6%;
  background: rgba(110, 96, 70, 0.55);
}
.avatar-fx-letterpress .avatar__fx-glyph--a { top: 2%; left: 22%; }
.avatar-fx-letterpress .avatar__fx-glyph--b { top: 2%; left: 50%; }
.avatar-fx-letterpress .avatar__fx-glyph--c { top: 2%; left: 78%; }

/* ----------------------------------------------------------- risograph
   Two-pass ink, off register by three pixels. The whole frame is one
   misprint; nothing lines up. */
.avatar-fx-risograph .avatar__fx-shell {
  opacity: 1;
  inset: -12%;
  border-radius: 50%;
  background: linear-gradient(120deg, rgba(244, 114, 182, 0.55), rgba(56, 189, 248, 0.5));
  -webkit-mask: radial-gradient(circle, transparent 63%, #000 66%, #000 80%, transparent 83%);
  mask: radial-gradient(circle, transparent 63%, #000 66%, #000 80%, transparent 83%);
  translate: 3px 2px;
}
.avatar-fx-risograph .avatar__fx-arc {
  opacity: 0.7;
  inset: -12%;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(300deg, rgba(251, 191, 36, 0.5), rgba(129, 140, 248, 0.45));
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 67%, #000 78%, transparent 81%);
  mask: radial-gradient(circle, transparent 64%, #000 67%, #000 78%, transparent 81%);
  translate: -3px -2px;
}

/* ---------------------------------------------------------- foil stamp
   A hot-foil edge that catches one light and nothing else. */
.avatar-fx-foilStamp .avatar__fx-shell {
  opacity: 1;
  inset: -11%;
  border-radius: 50%;
  background: conic-gradient(
    from 210deg,
    #8a6a1f, #f5e3a0 12%, #b8902f 26%, #fdf6d8 38%,
    #a1761c 52%, #edd288 66%, #8a6a1f 82%, #d8bb63 94%, #8a6a1f
  );
  -webkit-mask: radial-gradient(circle, transparent 63%, #000 66%, #000 78%, transparent 81%);
  mask: radial-gradient(circle, transparent 63%, #000 66%, #000 78%, transparent 81%);
  filter: saturate(0.9);
}
.avatar-fx-foilStamp .avatar__fx-aura {
  opacity: 0.22;
  background: radial-gradient(circle, rgba(240, 214, 130, 0.3), transparent 66%);
}

/* ----------------------------------------------------------- film gate
   Sprocket holes down both sides and a frame line. */
.avatar-fx-filmGate .avatar__fx-beam {
  opacity: 1;
  inset: -6% -13%;
  border-radius: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 10px, rgba(240, 240, 235, 0.85) 10px 18px) left center / 7% 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 10px, rgba(240, 240, 235, 0.85) 10px 18px) right center / 7% 100% no-repeat;
}
.avatar-fx-filmGate .avatar__fx-shell {
  opacity: 0.5;
  inset: -9%;
  border-radius: 3px;
  border: 2px solid rgba(18, 18, 18, 0.75);
  background: none;
  -webkit-mask: none;
  mask: none;
}
.avatar-fx-filmGate .avatar__fx-aura {
  opacity: 0.2;
  background: radial-gradient(circle, rgba(250, 240, 210, 0.26), transparent 70%);
}

/* ----------------------------------------------------------- blueprint
   Cyanotype grid with dimension ticks on two sides. */
.avatar-fx-blueprint .avatar__fx-shell {
  opacity: 1;
  inset: -13%;
  border-radius: 50%;
  background:
    repeating-linear-gradient(90deg, rgba(190, 225, 255, 0.5) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(0deg, rgba(190, 225, 255, 0.5) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 50% 50%, #14487f, #0b2f57);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 64%, #000 82%, transparent 85%);
  mask: radial-gradient(circle, transparent 61%, #000 64%, #000 82%, transparent 85%);
}
.avatar-fx-blueprint .avatar__fx-node {
  opacity: 1;
  width: 5%;
  background: #bfe3ff;
}
.avatar-fx-blueprint .avatar__fx-node--a { top: -2%; left: 20%; }
.avatar-fx-blueprint .avatar__fx-node--b { top: -2%; right: 20%; }
.avatar-fx-blueprint .avatar__fx-node--c { bottom: -2%; left: 48%; }
.avatar-fx-blueprint .avatar__fx-node--d { display: none; }

/* -------------------------------------------------------------- vitrine
   A museum case: a hairline lip with a glass highlight running one corner. */
.avatar-fx-vitrine .avatar__fx-shell {
  opacity: 1;
  inset: -13%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background:
    linear-gradient(215deg, rgba(255, 255, 255, 0.34) 0 14%, transparent 30%),
    linear-gradient(215deg, transparent 60%, rgba(255, 255, 255, 0.12) 74%, transparent 82%);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 65%, #000 80%, transparent 83%);
  mask: radial-gradient(circle, transparent 62%, #000 65%, #000 80%, transparent 83%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 6px 24px -8px rgba(0, 0, 0, 0.5);
}
.avatar-fx-vitrine .avatar__fx-arc {
  opacity: 0.55;
  inset: -15%;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg, transparent 0 70%, rgba(255, 255, 255, 0.28) 78%, transparent 86%);
  filter: blur(4px);
}

/* ----------------------------------------------------------- catalogCard
   An index card, typed, hole-punched. Square, not round — the only frame in
   the set that refuses the circle. */
.avatar-fx-catalogCard .avatar__fx-shell {
  opacity: 1;
  inset: -11%;
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 5%, #d6d3cb 0 4%, transparent 4.6%),
    repeating-linear-gradient(180deg, transparent 0 12px, rgba(140, 150, 170, 0.35) 12px 13px),
    linear-gradient(170deg, #fbf8ef, #ece5d3);
  -webkit-mask: none;
  mask: none;
  box-shadow: 0 2px 0 rgba(160, 148, 120, 0.5), 0 8px 22px -10px rgba(0, 0, 0, 0.7);
}
.avatar-fx-catalogCard .avatar__fx-glyph {
  opacity: 0.75;
  width: 2px;
  height: 8px;
  background: #b0a58c;
}
.avatar-fx-catalogCard .avatar__fx-glyph--a { top: 6%; left: 12%; }
.avatar-fx-catalogCard .avatar__fx-glyph--b { top: 6%; right: 12%; left: auto; }
.avatar-fx-catalogCard .avatar__fx-glyph--c { display: none; }

/* --------------------------------------------------------- brass plaque
   Engraved screws at four corners; the plate sits behind. */
.avatar-fx-brassPlaque .avatar__fx-shell {
  opacity: 1;
  inset: -12%;
  border-radius: 50%;
  background: linear-gradient(150deg, #e9d08a, #b98f3d 42%, #8a6522 74%, #d7b766);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 65%, #000 81%, transparent 84%);
  mask: radial-gradient(circle, transparent 62%, #000 65%, #000 81%, transparent 84%);
}
.avatar-fx-brassPlaque .avatar__fx-node {
  opacity: 1;
  width: 6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff2c4, #a97f2c 60%, #6b4d13);
  box-shadow: 0 0 0 1px rgba(70, 50, 10, 0.6);
}
.avatar-fx-brassPlaque .avatar__fx-node--a { top: 6%; left: 16%; }
.avatar-fx-brassPlaque .avatar__fx-node--b { top: 6%; right: 16%; }
.avatar-fx-brassPlaque .avatar__fx-node--c { bottom: 6%; left: 16%; }
.avatar-fx-brassPlaque .avatar__fx-node--d { bottom: 6%; right: 16%; }

/* --------------------------------------------------------- marble edge
   Honed, not polished: one vein followed exactly, no gloss. */
.avatar-fx-marbleEdge .avatar__fx-shell {
  opacity: 1;
  inset: -12%;
  border-radius: 50%;
  background:
    linear-gradient(118deg, transparent 42%, rgba(120, 118, 124, 0.5) 44%, transparent 46%),
    linear-gradient(118deg, transparent 58%, rgba(150, 148, 154, 0.32) 60%, transparent 62%),
    linear-gradient(165deg, #f7f6f3, #e4e2dd 54%, #cdcac4);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 65%, #000 81%, transparent 84%);
  mask: radial-gradient(circle, transparent 62%, #000 65%, #000 81%, transparent 84%);
}

/* ------------------------------------------------------------ specimen
   Pinned behind glass with a label tab at the base. */
.avatar-fx-specimen .avatar__fx-shell {
  opacity: 1;
  inset: -13%;
  border-radius: 50%;
  background: rgba(248, 246, 240, 0.06);
  -webkit-mask: radial-gradient(circle, transparent 63%, #000 66%, #000 80%, transparent 83%);
  mask: radial-gradient(circle, transparent 63%, #000 66%, #000 80%, transparent 83%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}
.avatar-fx-specimen .avatar__fx-node {
  opacity: 1;
  width: 4%;
  background: #e8e3d5;
  border-radius: 1px;
}
.avatar-fx-specimen .avatar__fx-node--a { top: -1%; left: 48%; }
.avatar-fx-specimen .avatar__fx-node--b {
  top: auto;
  bottom: -8%;
  left: 30%;
  width: 40%;
  height: 11%;
  border-radius: 2px;
  background: #f4f0e4;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.avatar-fx-specimen .avatar__fx-glyph {
  opacity: 1;
  width: 18%;
  height: 1.5px;
  bottom: -5%;
  left: 41%;
  background: rgba(60, 60, 60, 0.55);
  z-index: 4;
}
.avatar-fx-specimen .avatar__fx-glyph--b { bottom: -2.5%; width: 12%; left: 44%; }
.avatar-fx-specimen .avatar__fx-glyph--c { display: none; }

/* ------------------------------------------------------------ caustic
   Light pooling off moving water: two soft bands that never quite align. */
.avatar-fx-caustic .avatar__fx-arc {
  opacity: 0.85;
  inset: -16%;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, rgba(125, 211, 252, 0.5), transparent 40%),
    radial-gradient(circle at 66% 70%, rgba(56, 189, 248, 0.34), transparent 38%);
  filter: blur(8px);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 58%, #000 84%, transparent 88%);
  mask: radial-gradient(circle, transparent 54%, #000 58%, #000 84%, transparent 88%);
}
.avatar-fx-caustic .avatar__fx-arc--b {
  inset: -12%;
  background:
    radial-gradient(circle at 70% 28%, rgba(186, 230, 253, 0.4), transparent 34%),
    radial-gradient(circle at 30% 74%, rgba(14, 165, 233, 0.3), transparent 36%);
  filter: blur(11px);
}
.avatar-fx-caustic .avatar__fx-aura {
  opacity: 0.28;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.26), transparent 70%);
}

/* ------------------------------------------------------------- eclipse
   A black disc with a corona: the frame is the absence of light. */
.avatar-fx-eclipse .avatar__fx-core {
  opacity: 1;
  inset: -26%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 52%, rgba(255, 236, 200, 0.22) 56%, rgba(255, 214, 150, 0.1) 66%, transparent 78%);
  filter: blur(2px);
}
.avatar-fx-eclipse .avatar__fx-shell {
  opacity: 1;
  inset: -11%;
  border-radius: 50%;
  background: #050507;
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 67%, #000 78%, transparent 80%);
  mask: radial-gradient(circle, transparent 64%, #000 67%, #000 78%, transparent 80%);
  box-shadow: 0 0 22px rgba(255, 226, 170, 0.35);
}
.avatar-fx-eclipse .avatar__fx-aura {
  opacity: 0.4;
  background: radial-gradient(circle, rgba(255, 226, 170, 0.26), transparent 74%);
}

/* ---------------------------------------------------------- prism split
   One beam in, a fan of six bands out. The only frame made of straight
   lines leaving the circle. */
.avatar-fx-prismSplit .avatar__fx-beam {
  opacity: 0.9;
  inset: -46%;
  border-radius: 0;
  background: conic-gradient(
    from 250deg,
    rgba(239, 68, 68, 0.42) 0 3deg,
    rgba(251, 191, 36, 0.42) 3deg 6deg,
    rgba(34, 197, 94, 0.42) 6deg 9deg,
    rgba(56, 189, 248, 0.42) 9deg 12deg,
    rgba(139, 92, 246, 0.42) 12deg 15deg,
    transparent 15deg 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 26%, #000 34%, transparent 72%);
  mask: radial-gradient(circle, transparent 26%, #000 34%, transparent 72%);
  filter: blur(3px);
}
.avatar-fx-prismSplit .avatar__fx-shell {
  opacity: 1;
  inset: -11%;
  border-radius: 50%;
  background: conic-gradient(from 250deg, transparent 0 78%, rgba(255, 255, 255, 0.5) 82%, transparent 88%);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 67%, #000 79%, transparent 82%);
  mask: radial-gradient(circle, transparent 64%, #000 67%, #000 79%, transparent 82%);
}

/* --------------------------------------------------------- fibre optic
   A bundle of strands lit at the far end, each tip a point of light. */
.avatar-fx-fiberOptic .avatar__fx-tendril {
  opacity: 0.9;
  width: 1.5px;
  height: 30%;
  bottom: -24%;
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(125, 211, 252, 0.9), rgba(125, 211, 252, 0));
  filter: none;
}
.avatar-fx-fiberOptic .avatar__fx-tendril--a { left: 34%; rotate: -12deg; }
.avatar-fx-fiberOptic .avatar__fx-tendril--b { left: 50%; height: 36%; rotate: 0deg; }
.avatar-fx-fiberOptic .avatar__fx-tendril--c { left: 64%; rotate: 14deg; }
.avatar-fx-fiberOptic .avatar__fx-node {
  opacity: 1;
  width: 4%;
  background: #e0f2fe;
  box-shadow: 0 0 10px #38bdf8;
}
.avatar-fx-fiberOptic .avatar__fx-node--a { bottom: -6%; left: 32%; }
.avatar-fx-fiberOptic .avatar__fx-node--b { bottom: -8%; left: 48%; }
.avatar-fx-fiberOptic .avatar__fx-node--c { bottom: -6%; left: 62%; }
.avatar-fx-fiberOptic .avatar__fx-node--d { top: -6%; left: 12%; width: 3%; opacity: 0.6; }

/* ---------------------------------------------------------- anamorphic
   A wide flare with one hard horizontal streak. Cinema, not fantasy. */
.avatar-fx-anamorphic .avatar__fx-beam {
  opacity: 1;
  inset: 40% -120%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(147, 197, 253, 0.6) 42%, #eff6ff 50%, rgba(147, 197, 253, 0.6) 58%, transparent);
  filter: blur(3px);
  -webkit-mask: none;
  mask: none;
}
.avatar-fx-anamorphic .avatar__fx-core {
  opacity: 0.8;
  inset: -16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(147, 197, 253, 0.4), transparent 62%);
  filter: blur(6px);
}
.avatar-fx-anamorphic .avatar__fx-aura {
  opacity: 0.3;
  background: radial-gradient(circle, rgba(191, 219, 254, 0.3), transparent 68%);
}

/* ---------------------------------------------------------------- HUD
   Targeting brackets that track: four corners, one tick each, plus a
   rotating reticle ring. */
.avatar-fx-hud .avatar__fx-runes {
  opacity: 1;
  inset: -14%;
  background: repeating-conic-gradient(from 0deg, rgba(74, 222, 128, 0.75) 0 1.2deg, transparent 1.2deg 12deg);
  -webkit-mask: radial-gradient(circle, transparent 76%, #000 78%, #000 82%, transparent 84%);
  mask: radial-gradient(circle, transparent 76%, #000 78%, #000 82%, transparent 84%);
}
.avatar-fx-hud .avatar__fx-arc {
  opacity: 1;
  inset: -12%;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(#4ade80 0 0) left top / 16% 2px no-repeat,
    linear-gradient(#4ade80 0 0) left top / 2px 16% no-repeat,
    linear-gradient(#4ade80 0 0) right top / 16% 2px no-repeat,
    linear-gradient(#4ade80 0 0) right top / 2px 16% no-repeat,
    linear-gradient(#4ade80 0 0) left bottom / 16% 2px no-repeat,
    linear-gradient(#4ade80 0 0) left bottom / 2px 16% no-repeat,
    linear-gradient(#4ade80 0 0) right bottom / 16% 2px no-repeat,
    linear-gradient(#4ade80 0 0) right bottom / 2px 16% no-repeat;
  filter: drop-shadow(0 0 5px rgba(74, 222, 128, 0.8));
}
.avatar-fx-hud .avatar__fx-node {
  opacity: 1;
  width: 3%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
}
.avatar-fx-hud .avatar__fx-node--a { top: 50%; left: -16%; }
.avatar-fx-hud .avatar__fx-node--b { top: 50%; right: -16%; }
.avatar-fx-hud .avatar__fx-node--c { display: none; }
.avatar-fx-hud .avatar__fx-node--d { display: none; }

/* ----------------------------------------------------------- wireframe
   An unlit shell of edges: a geodesic cage with no surface at all. */
.avatar-fx-wireframe .avatar__fx-shell {
  opacity: 0.85;
  inset: -14%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(203, 213, 225, 0.5) 0 0.6deg, transparent 0.6deg 15deg),
    repeating-radial-gradient(circle, transparent 0 8%, rgba(203, 213, 225, 0.35) 8% 8.5%, transparent 8.5% 16%);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 84%, transparent 86%);
  mask: radial-gradient(circle, transparent 58%, #000 60%, #000 84%, transparent 86%);
}
.avatar-fx-wireframe .avatar__fx-orbit {
  opacity: 0.7;
  inset: -16%;
  border: 1px solid rgba(203, 213, 225, 0.4);
}
.avatar-fx-wireframe .avatar__fx-orbit i { width: 2.5%; background: #e2e8f0; box-shadow: none; }

/* --------------------------------------------------------- etched circuit
   Traces cut into the bezel, exactly one node lit. */
.avatar-fx-etchedCircuit .avatar__fx-shell {
  opacity: 1;
  inset: -13%;
  border-radius: 50%;
  background:
    linear-gradient(90deg, rgba(52, 211, 153, 0.5) 0 30%, transparent 30%) 0 24% / 100% 1.5px no-repeat,
    linear-gradient(0deg, rgba(52, 211, 153, 0.4) 0 40%, transparent 40%) 18% 0 / 1.5px 100% no-repeat,
    linear-gradient(90deg, rgba(52, 211, 153, 0.4) 0 26%, transparent 26%) 100% 68% / 100% 1.5px no-repeat,
    linear-gradient(0deg, rgba(52, 211, 153, 0.35) 0 30%, transparent 30%) 76% 100% / 1.5px 100% no-repeat,
    radial-gradient(circle at 50% 50%, transparent 62%, rgba(6, 78, 59, 0.35) 66%, transparent 82%);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 63%, #000 82%, transparent 85%);
  mask: radial-gradient(circle, transparent 60%, #000 63%, #000 82%, transparent 85%);
}
.avatar-fx-etchedCircuit .avatar__fx-node {
  opacity: 1;
  width: 4%;
  background: #6ee7b7;
  box-shadow: 0 0 10px #34d399;
}
.avatar-fx-etchedCircuit .avatar__fx-node--a { top: 24%; left: 12%; }
.avatar-fx-etchedCircuit .avatar__fx-node--b { top: 68%; right: 12%; opacity: 0.5; }
.avatar-fx-etchedCircuit .avatar__fx-node--c { display: none; }
.avatar-fx-etchedCircuit .avatar__fx-node--d { display: none; }

/* -------------------------------------------------------- chrome bevel
   A machined chamfer with three distinct lights: top white, side grey,
   bottom warm. */
.avatar-fx-chromeBevel .avatar__fx-shell {
  opacity: 1;
  inset: -12%;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    #6b7280 0 8%, #f8fafc 14% 22%, #94a3b8 30% 46%,
    #e2e8f0 50% 56%, #475569 62% 78%, #cbd5e1 84% 92%, #6b7280 100%
  );
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 64%, #000 80%, transparent 83%);
  mask: radial-gradient(circle, transparent 61%, #000 64%, #000 80%, transparent 83%);
  filter: contrast(1.1);
}
.avatar-fx-chromeBevel .avatar__fx-aura {
  opacity: 0.2;
  background: radial-gradient(circle, rgba(226, 232, 240, 0.26), transparent 68%);
}

/* --------------------------------------------------------- data stream
   Columns of glyphs at the rim, twelve of them, falling at different rates. */
.avatar-fx-datastream .avatar__fx-runes {
  opacity: 1;
  inset: -18%;
  background: repeating-linear-gradient(
    90deg,
    rgba(34, 211, 238, 0.55) 0 1px,
    transparent 1px 11px
  );
  -webkit-mask:
    radial-gradient(circle, transparent 60%, #000 64%, #000 86%, transparent 89%),
    repeating-linear-gradient(180deg, #000 0 3px, transparent 3px 7px);
  mask:
    radial-gradient(circle, transparent 60%, #000 64%, #000 86%, transparent 89%),
    repeating-linear-gradient(180deg, #000 0 3px, transparent 3px 7px);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.avatar-fx-datastream .avatar__fx-aura {
  opacity: 0.24;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.24), transparent 70%);
}

/* ---------------------------------------------------------------- onyx
   Polished black stone: one hard specular and a deep edge. Nothing else. */
.avatar-fx-onyx .avatar__fx-shell {
  opacity: 1;
  inset: -12%;
  border-radius: 50%;
  background:
    linear-gradient(200deg, rgba(255, 255, 255, 0.35) 0 6%, transparent 18%),
    conic-gradient(from 210deg, #050507, #1a1a20 18%, #000 40%, #26262e 62%, #050507 84%, #14141a);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 65%, #000 82%, transparent 85%);
  mask: radial-gradient(circle, transparent 62%, #000 65%, #000 82%, transparent 85%);
}
.avatar-fx-onyx .avatar__fx-aura {
  opacity: 0.18;
  background: radial-gradient(circle, rgba(160, 160, 180, 0.2), transparent 72%);
}

/* ----------------------------------------------------------- gold leaf
   Hand-laid, deliberately uneven: overlapping ragged patches, matte. */
.avatar-fx-goldLeaf .avatar__fx-shell {
  opacity: 1;
  inset: -12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 22% 34%, #e8c780 0 12%, transparent 13%),
    radial-gradient(circle at 68% 26%, #c9a458 0 10%, transparent 11%),
    radial-gradient(circle at 78% 66%, #e3bf74 0 14%, transparent 15%),
    radial-gradient(circle at 32% 76%, #b8934a 0 11%, transparent 12%),
    conic-gradient(from 40deg, #d8b26a, #f0d89c 22%, #c19c52 48%, #e6c884 70%, #b8934a);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 64%, #000 81%, transparent 84%);
  mask: radial-gradient(circle, transparent 61%, #000 64%, #000 81%, transparent 84%);
  filter: saturate(0.85) contrast(0.95);
}

/* ------------------------------------------------------------ wax seal
   Stamped at the base, cracked once, wax not metal. */
.avatar-fx-waxSeal .avatar__fx-arc {
  opacity: 1;
  inset: auto;
  border: 0;
  border-radius: 50%;
  bottom: -14%;
  left: 50%;
  width: 34%;
  height: 26%;
  translate: -50% 0;
  background: radial-gradient(circle at 36% 30%, #f87171, #b91c1c 58%, #7f1d1d);
  border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;
  box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.7), inset 0 -2px 4px rgba(0, 0, 0, 0.35);
}
.avatar-fx-waxSeal .avatar__fx-crack {
  opacity: 1;
  width: 1.5px;
  height: 11%;
  bottom: -4%;
  left: 50%;
  rotate: 12deg;
  background: rgba(40, 6, 6, 0.75);
}
.avatar-fx-waxSeal .avatar__fx-crack--b { bottom: -6%; left: 46%; rotate: -8deg; height: 8%; }
.avatar-fx-waxSeal .avatar__fx-crack--c { display: none; }
.avatar-fx-waxSeal .avatar__fx-aura {
  opacity: 0.16;
  background: radial-gradient(circle at 50% 90%, rgba(220, 80, 60, 0.3), transparent 68%);
}

/* ------------------------------------------------------ obsidian crown
   Black spikes that return no light. Six of them, irregular. */
.avatar-fx-obsidianCrown .avatar__fx-crown {
  opacity: 1;
  top: -27%;
  width: 62%;
  height: 26%;
  clip-path: polygon(0 100%, 4% 44%, 16% 78%, 26% 12%, 40% 66%, 52% 0, 66% 62%, 78% 18%, 90% 74%, 100% 40%, 100% 100%);
  background: linear-gradient(180deg, #2a2a32, #08080a 58%, #000);
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.9));
}
.avatar-fx-obsidianCrown .avatar__fx-aura {
  opacity: 0.2;
  background: radial-gradient(circle, rgba(60, 60, 75, 0.3), transparent 66%);
}

/* ------------------------------------------------------------ reliquary
   A hinged case for something holy: a heavy top band, a rim, and a lock at
   the base. */
.avatar-fx-reliquary .avatar__fx-shell {
  opacity: 1;
  inset: -14%;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(212, 175, 95, 0.9) 0 9%, transparent 9%),
    conic-gradient(from 0deg, #6b5426, #c9a45c 12%, #8a6f34 30%, #d9bb78 50%, #7a6130 72%, #c9a45c 88%, #6b5426);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 64%, #000 83%, transparent 86%);
  mask: radial-gradient(circle, transparent 61%, #000 64%, #000 83%, transparent 86%);
}
.avatar-fx-reliquary .avatar__fx-node {
  opacity: 1;
  width: 7%;
  aspect-ratio: 1;
  border-radius: 2px;
  background: linear-gradient(150deg, #f0dba4, #8a6f34);
  box-shadow: inset 0 0 0 1px rgba(60, 46, 16, 0.6);
}
.avatar-fx-reliquary .avatar__fx-node--a { bottom: -2%; left: 46.5%; }
.avatar-fx-reliquary .avatar__fx-node--b { top: -2%; left: 46.5%; width: 5%; }
.avatar-fx-reliquary .avatar__fx-node--c { display: none; }
.avatar-fx-reliquary .avatar__fx-node--d { display: none; }
.avatar-fx-reliquary .avatar__fx-aura {
  opacity: 0.26;
  background: radial-gradient(circle, rgba(230, 200, 130, 0.26), transparent 68%);
}

/* ------------------------------------------------------------ motion
   Only frames that gain something from movement get an animation. Each one
   is slow enough to read as weight, not as a loading spinner. */
@media (prefers-reduced-motion: no-preference) {
  .avatar-fx-hanabi .avatar__fx-spark { animation: av-twinkle 3.2s ease-in-out infinite; }
  .avatar-fx-hanabi .avatar__fx-spark--b { animation-delay: -0.9s; }
  .avatar-fx-hanabi .avatar__fx-spark--c { animation-delay: -1.8s; }
  .avatar-fx-hanabi .avatar__fx-spark--d { animation-delay: -2.4s; }
  .avatar-fx-nekomata .avatar__fx-tendril { animation: av-wobble 7s ease-in-out infinite; }
  .avatar-fx-vine .avatar__fx-petal { animation: av-drift 9s ease-in-out infinite; }
  .avatar-fx-vine .avatar__fx-petal--b { animation-delay: -2.4s; }
  .avatar-fx-vine .avatar__fx-petal--c { animation-delay: -4.8s; }
  .avatar-fx-moth .avatar__fx-wing { animation: av-wing-breathe 7.5s ease-in-out infinite; }
  .avatar-fx-caustic .avatar__fx-arc { animation: av-drift 11s ease-in-out infinite; }
  .avatar-fx-caustic .avatar__fx-arc--b { animation-delay: -5s; }
  .avatar-fx-eclipse .avatar__fx-core { animation: av-breathe 9s ease-in-out infinite; }
  .avatar-fx-hud .avatar__fx-runes { animation: av-spin 18s linear infinite; }
  .avatar-fx-fiberOptic .avatar__fx-node { animation: av-twinkle 4.4s ease-in-out infinite; }
  .avatar-fx-fiberOptic .avatar__fx-node--b { animation-delay: -1.5s; }
  .avatar-fx-fiberOptic .avatar__fx-node--c { animation-delay: -3s; }
  .avatar-fx-anamorphic .avatar__fx-beam { animation: av-breathe 6s ease-in-out infinite; }
  .avatar-fx-inkwash .avatar__fx-aura { animation: av-drift 13s ease-in-out infinite; }
  .avatar-fx-datastream .avatar__fx-runes { animation: av-drift 8s linear infinite; }
  .avatar-fx-waxSeal .avatar__fx-aura { animation: av-breathe 7s ease-in-out infinite; }
  .avatar-fx-goldLeaf .avatar__fx-shell { animation: av-breathe 10s ease-in-out infinite; }
}

/* Reduced motion and low-power devices keep every silhouette and drop every
   animation. Nothing here is load-bearing. */
html[data-motion="low"] .avatar[class*="avatar-fx-"] .avatar__fx > *,
html.is-slow-device .avatar[class*="avatar-fx-"] .avatar__fx > * {
  animation: none !important;
}