/*
 * openvibe-shared/items.css — what people wear, drawn the same on every OpenVibe site (plan T21 "equip everywhere").
 *
 * The renderers OpenVibe.Inventory's kinds name (each kind's `surfaces[].renderer`):
 *   live.name_effect.css@1   the item's art.token is a class on the name: <span class="ov-fx name-fx-rainbow">Ana</span>
 *   live.hat.glyph@1         the hat's emoji before the name: <span class="ov-hat ov-hat-pulse">👑</span>
 *   live.particle.css@1      `ov-px` + the token on the name; items.js spawns `.ov-px-p` characters in a burst
 *   network.badge.image@1    <img class="ov-badge"> before the name (a Workshop badge, from OpenVibe.Media)
 * items.js adds the classes from the person's equipped set; a page that already knows the token (a server-rendered
 * profile) writes the class itself. These are Live's own name effects (OpenVibe.Live public/css/cosmetics.css),
 * unchanged, so a name looks the same in Live's chat and everywhere else. The network's Calm setting
 * (html[data-ov-motion=reduced], theme-loader.js) and prefers-reduced-motion stop the animation and keep the colour.
 */
.ov-fx { display: inline-block; }

/* Rainbow — cycling hue */
.name-fx-rainbow {
    background: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff, #ff0088);
    background-size: 400% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: nameFxRainbow 3s linear infinite;
}
@keyframes nameFxRainbow {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* Fire — warm pulse with glow */
.name-fx-fire {
    color: #ff6600 !important;
    text-shadow: 0 0 6px #ff4400, 0 0 12px #ff220088, 0 0 20px #cc110044;
    animation: nameFxFire 1.5s ease-in-out infinite alternate;
}
@keyframes nameFxFire {
    0% { text-shadow: 0 0 6px #ff4400, 0 0 12px #ff220088; color: #ff6600; }
    100% { text-shadow: 0 0 10px #ff8800, 0 0 20px #ff440088, 0 0 30px #cc220044; color: #ffaa00; }
}

/* Ice — cool blue shimmer */
.name-fx-ice {
    color: #88ddff !important;
    text-shadow: 0 0 6px #44bbff88, 0 0 12px #2288cc44;
    animation: nameFxIce 2s ease-in-out infinite alternate;
}
@keyframes nameFxIce {
    0% { text-shadow: 0 0 4px #44bbff88; color: #88ddff; }
    100% { text-shadow: 0 0 10px #66eeff, 0 0 20px #44bbff88; color: #bbffff; }
}

/* Golden — shimmering gold */
.name-fx-golden {
    background: linear-gradient(90deg, #ffd700, #ffec80, #ffd700, #ffb800);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: nameFxGolden 2s ease-in-out infinite;
    filter: drop-shadow(0 0 4px #ffd70066);
}
@keyframes nameFxGolden {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Neon — glowing pulse */
.name-fx-neon {
    color: #00ff88 !important;
    text-shadow: 0 0 8px #00ff88, 0 0 16px #00ff8888, 0 0 24px #00cc6644;
    animation: nameFxNeon 1.2s ease-in-out infinite alternate;
}
@keyframes nameFxNeon {
    0% { text-shadow: 0 0 4px #00ff88, 0 0 8px #00ff8866; }
    100% { text-shadow: 0 0 12px #00ff88, 0 0 24px #00ff88aa, 0 0 36px #00cc6666; }
}

/* Galaxy — cosmic swirl */
.name-fx-galaxy {
    background: linear-gradient(90deg, #8b5cf6, #ec4899, #3b82f6, #8b5cf6);
    background-size: 400% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: nameFxGalaxy 4s linear infinite;
    filter: drop-shadow(0 0 6px #8b5cf644);
}
@keyframes nameFxGalaxy {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* Void — dark matter warp */
.name-fx-void {
    color: #9900ff !important;
    text-shadow: 0 0 8px #6600cc, 0 0 16px #33006688, 0 0 24px #11003344;
    animation: nameFxVoid 2s ease-in-out infinite;
}
@keyframes nameFxVoid {
    0%, 100% { text-shadow: 0 0 8px #6600cc, 0 0 16px #33006688; transform: scale(1); }
    50% { text-shadow: 0 0 12px #9900ff, 0 0 24px #6600ccaa, 0 0 36px #33006666; transform: scale(1.03); }
}

/* Toxic — green pulse */
.name-fx-toxic {
    background: linear-gradient(90deg, #00ff44, #88ff00, #ccff00, #00ff88);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: nameFxToxic 1.8s ease-in-out infinite alternate;
}
@keyframes nameFxToxic {
    0% { background-position: 0% 50%; filter: brightness(1); }
    100% { background-position: 200% 50%; filter: brightness(1.3); }
}

/* Blood — crimson drip */
.name-fx-blood {
    background: linear-gradient(180deg, #ff0000, #880000, #ff2222);
    background-size: 100% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: nameFxBlood 2s ease-in-out infinite;
}
@keyframes nameFxBlood {
    0%, 100% { background-position: 50% 0%; }
    50% { background-position: 50% 200%; }
}

/* Shadow — dark mist */
.name-fx-shadow {
    color: #aa88cc !important;
    animation: nameFxShadow 2s ease-in-out infinite;
}
@keyframes nameFxShadow {
    0%, 100% { text-shadow: 0 0 6px rgba(0,0,0,0.8), 0 0 12px rgba(80,0,120,0.6), 2px 2px 4px rgba(0,0,0,0.9); }
    50% { text-shadow: 0 0 12px rgba(0,0,0,0.9), 0 0 24px rgba(80,0,120,0.8), 4px 4px 8px rgba(0,0,0,1); }
}

/* Glitch — jittery digital */
.name-fx-glitch {
    color: #00ff88 !important;
    animation: nameFxGlitch 0.15s infinite;
    text-shadow: 2px 0 #ff0044, -2px 0 #00ccff;
}
@keyframes nameFxGlitch {
    0% { transform: translate(0); }
    20% { transform: translate(-1px, 1px); }
    40% { transform: translate(1px, -1px); }
    60% { transform: translate(-1px, 0); }
    80% { transform: translate(1px, 1px); }
    100% { transform: translate(0); }
}

/* Hologram — flickering translucent */
.name-fx-hologram {
    background: linear-gradient(90deg, #00ffcc, #00ccff, #8888ff, #00ffaa);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: nameFxHoloFlicker 0.12s infinite, nameFxHoloShift 3s linear infinite;
}
@keyframes nameFxHoloFlicker { 0%,45%,55%,100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes nameFxHoloShift { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

/* Divine — holy radiance */
.name-fx-divine {
    background: linear-gradient(90deg, #ffffff, #ffe066, #ffffff, #ffcc00, #ffffff);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: nameFxDivine 2s ease-in-out infinite;
    filter: drop-shadow(0 0 8px #ffe06688);
}
@keyframes nameFxDivine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 300% 50%; }
}

/* Josh Vegas: one of a kind (2026-10-22). The name in casino gold under marquee lights, between two slot reels that
   spin through cherries, bells, diamonds, slot machines and lemons and land on 7, and the name pops like a jackpot the
   moment they do. Only its one holder wears it (fx_vegas is never in the catalog). The reels are pseudo-elements, so they
   carry their own fill, pause and reduced-motion rules. */
.name-fx-vegas {
    background: linear-gradient(90deg, #fff1b8 0%, #ffcf3f 22%, #ff9d00 40%, #ff3d7f 52%, #ffcf3f 66%, #fff1b8 82%, #ffcf3f 100%);
    background-size: 280% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
    transform-origin: 50% 60%;
    animation: nameFxVegasShine 2.6s linear infinite, nameFxVegasLights 1.4s steps(1, end) infinite, nameFxVegasJackpot 3.2s ease-out infinite;
}
.name-fx-vegas::before,
.name-fx-vegas::after {
    content: '7';
    display: inline-block;
    box-sizing: border-box;
    width: 2em;
    margin-right: .4em;
    border: 1px solid #ffcf3f;
    border-radius: 3px;
    background: linear-gradient(180deg, #3d0512 0%, #8f0f2c 48%, #3d0512 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), 0 0 5px rgba(255, 207, 63, .6);
    color: #ffe27a;
    -webkit-text-fill-color: #ffe27a;
    font-size: .72em;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.35;
    text-align: center;
    overflow: hidden;
    vertical-align: .1em;
    animation: nameFxVegasReel 3.2s steps(1, end) infinite;
}
.name-fx-vegas::after { margin: 0 0 0 .4em; animation-delay: .35s; }
@keyframes nameFxVegasShine {
    0% { background-position: 0% 50%; }
    100% { background-position: 280% 50%; }
}
/* Marquee bulbs: the glow steps between gold and pink, like the lights around a casino sign. */
@keyframes nameFxVegasLights {
    0% { filter: drop-shadow(0 0 3px rgba(255, 207, 63, .9)) drop-shadow(0 0 9px rgba(255, 157, 0, .55)); }
    50% { filter: drop-shadow(0 0 3px rgba(255, 61, 127, .9)) drop-shadow(0 0 9px rgba(255, 61, 127, .5)); }
}
/* Jackpot: as the reels land on 7, the whole name pops and settles (the reels' cycle, 3.2 s). */
@keyframes nameFxVegasJackpot {
    0%, 34% { transform: scale(1); }
    38% { transform: scale(1.14) rotate(-2deg); }
    43% { transform: scale(.97) rotate(1deg); }
    48%, 100% { transform: scale(1); }
}
/* Each reel spins through the symbols, then lands on 7 and holds it (a browser that cannot animate `content` shows 7). */
@keyframes nameFxVegasReel {
    0% { content: '🍒'; }
    7% { content: '🔔'; }
    14% { content: '💎'; }
    21% { content: '🎰'; }
    28% { content: '🍋'; }
    35%, 100% { content: '7'; }
}
html[data-ov-motion=reduced] .name-fx-vegas, html[data-ov-motion=reduced] .name-fx-vegas::before,
html[data-ov-motion=reduced] .name-fx-vegas::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    .name-fx-vegas, .name-fx-vegas::before, .name-fx-vegas::after { animation: none !important; }
    .name-fx-vegas { filter: drop-shadow(0 0 3px rgba(255, 207, 63, .9)); }
}

/* 2fat Bass Drop (2026-10-23, one of a kind: 2fat, who brings the old classic bangers back): the name thumps on the beat,
   a big drop then a smaller one, in club lights, with an equalizer dancing before it and a speaker after it. Only its
   one holder wears it (fx_twofat is never in the catalog). The equalizer and the speaker are pseudo-elements, so they
   carry their own fill and motion rules (the Calm setting and the system preference). */
.name-fx-twofat {
    background: linear-gradient(90deg, #ff2fd6 0%, #a855ff 25%, #3de0ff 50%, #a855ff 75%, #ff2fd6 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-weight: 900;
    letter-spacing: .03em;
    white-space: nowrap;
    transform-origin: 50% 70%;
    animation: nameFxTwofatLights 3s linear infinite, nameFxTwofatThump 1s ease-out infinite;
}
.name-fx-twofat::before {
    content: '▂▅▇▃▆';
    display: inline-block;
    margin-right: .3em;
    color: #3de0ff;
    -webkit-text-fill-color: #3de0ff;
    text-shadow: 0 0 4px rgba(61, 224, 255, .8);
    font-size: .6em;
    letter-spacing: .12em;
    vertical-align: .1em;
    animation: nameFxTwofatEq .5s steps(1, end) infinite;
}
.name-fx-twofat::after {
    content: '🔊';
    display: inline-block;
    margin-left: .3em;
    -webkit-text-fill-color: initial;
    font-size: .85em;
    animation: nameFxTwofatSpeaker 1s ease-out infinite;
}
@keyframes nameFxTwofatLights {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
/* The beat: a big thump, then a smaller one, the glow flaring pink, then blue. */
@keyframes nameFxTwofatThump {
    0% { transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(255, 47, 214, .95)); }
    18% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(168, 85, 255, .6)); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 4px rgba(61, 224, 255, .85)); }
    68%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(168, 85, 255, .6)); }
}
/* The equalizer jumps four times a beat (a browser that cannot animate `content` shows the first frame). */
@keyframes nameFxTwofatEq {
    0% { content: '▂▅▇▃▆'; }
    25% { content: '▅▃▆▇▂'; }
    50% { content: '▇▆▂▅▃'; }
    75% { content: '▃▇▅▂▆'; }
}
@keyframes nameFxTwofatSpeaker {
    0% { transform: scale(1.25); }
    25%, 100% { transform: scale(1); }
}
html[data-ov-motion=reduced] .name-fx-twofat, html[data-ov-motion=reduced] .name-fx-twofat::before,
html[data-ov-motion=reduced] .name-fx-twofat::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    .name-fx-twofat, .name-fx-twofat::before, .name-fx-twofat::after { animation: none !important; }
    .name-fx-twofat { filter: drop-shadow(0 0 3px rgba(255, 47, 214, .9)); }
}

/* Community badges (network.badge.image@1): the reviewed image, a little larger than the text, just before the name. */
.ov-badge { display: inline-block; width: 1.15em; height: 1.15em; margin-right: 3px; vertical-align: -0.2em; border-radius: 3px; object-fit: contain; }

/* Hats (live.hat.glyph@1): the emoji just before the name, Live's float/pulse/warp motions. */
.ov-hat { display: inline-block; margin-right: 2px; font-size: 0.9em; line-height: 1; vertical-align: -0.05em; }
.ov-hat-float { animation: ovHatFloat 2s ease-in-out infinite; }
.ov-hat-pulse { animation: ovHatPulse 1.5s ease-in-out infinite; }
.ov-hat-warp { animation: ovHatWarp 2s ease-in-out infinite; }
@keyframes ovHatFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ovHatPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes ovHatWarp { 0%, 100% { transform: scale(1) rotate(0deg); filter: hue-rotate(0deg); } 50% { transform: scale(1.1) rotate(5deg); filter: hue-rotate(180deg); } }

/* Particles (live.particle.css@1): characters that float out of the name and fade, Live's colours. They reset the
   name effect's text fill, so a gradient name still shows them. */
.ov-px { position: relative; display: inline-block; }
.ov-px-p {
    position: absolute; top: 0; pointer-events: none; font-size: 10px; line-height: 1;
    background: none; -webkit-text-fill-color: currentColor; opacity: 0;
    animation: ovPxFloat 1.8s ease-out forwards;
}
@keyframes ovPxFloat {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--px-dx, 10px), var(--px-dy, -20px)) scale(0.4); }
}
.px-sparkle .ov-px-p { color: #ffd700; }
.px-hearts .ov-px-p { color: #ff6b9d; }
.px-flames .ov-px-p { color: #ff6600; }
.px-stars .ov-px-p { color: #fbbf24; }
.px-void .ov-px-p { color: #9900ff; }
.px-vegas .ov-px-p { color: #ffcf3f; text-shadow: 0 0 4px rgba(255, 61, 127, .75); }
.px-twofat .ov-px-p { color: #ff2fd6; text-shadow: 0 0 4px rgba(61, 224, 255, .8); }

@media (prefers-reduced-motion: reduce) {
    .ov-fx[class*="name-fx-"], .ov-hat { animation: none !important; }
    .ov-px-p { display: none; }
}