/* Ehna member identity (styles plugin): refined gradient names, thin metallic avatar rings, tinted tags and package emblems.
   Motion is quiet by design: a single light pass when a name appears and again on hover, a glow only on hover/focus,
   a very slow aurora drift, and a slowly turning highlight on "orbit" rings. Nothing moves with reduced motion.
   Only background-position, transform, opacity and filter are animated (no layout shift). */

@property --fr-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --fr-glint { syntax: "<color>"; inherits: false; initial-value: transparent; }

:root, .ehna-day {
    --nm-edge: drop-shadow(0 0 .3px rgb(15 23 42 / .35));
    --nm-sweep: linear-gradient(100deg, transparent 0 42%, rgb(255 255 255 / .75) 50%, transparent 58% 100%);
    /* metals and gems, day: deep enough for white pages */
    --pal-gold: linear-gradient(100deg, #7d5210 0%, #a8781f 30%, #c99a3e 48%, #9b6b18 64%, #7d5210 100%);
    --pal-silver: linear-gradient(100deg, #3f4752 0%, #67717d 32%, #8d97a3 48%, #5b6470 66%, #3f4752 100%);
    --pal-platinum: linear-gradient(100deg, #3c5664 0%, #5f7f8e 32%, #87a5b3 48%, #557483 66%, #3c5664 100%);
    --pal-rose: linear-gradient(100deg, #8c3f33 0%, #b0614f 34%, #c98272 50%, #a25544 68%, #8c3f33 100%);
    --pal-amethyst: linear-gradient(100deg, #4c3394 0%, #6d4fc0 38%, #8a6cd2 54%, #97762c 100%);
    --pal-sapphire: linear-gradient(100deg, #1a4689 0%, #2c63b4 34%, #4a83cf 50%, #285aa6 68%, #1a4689 100%);
    --pal-featured: linear-gradient(100deg, #4c3394, #3b5bd0 55%, #0e7490);
    --pal-tagged: linear-gradient(100deg, #1d6fd8, #4f46e5 60%, #6d28d9);
}

.dark:not(.ehna-day *) {
    --nm-edge: drop-shadow(0 1px 1px rgb(0 0 0 / .45));
    --nm-sweep: linear-gradient(100deg, transparent 0 42%, rgb(255 255 255 / .9) 50%, transparent 58% 100%);
    /* night: lighter, softer metals */
    --pal-gold: linear-gradient(100deg, #c49a45 0%, #e3c27a 32%, #f6e2a8 48%, #d6ad5a 66%, #c49a45 100%);
    --pal-silver: linear-gradient(100deg, #a3acb8 0%, #c9d0d9 32%, #eef2f6 48%, #b9c1cc 66%, #a3acb8 100%);
    --pal-platinum: linear-gradient(100deg, #9fbac6 0%, #c3d8e0 32%, #ecf6f9 48%, #b3cbd5 66%, #9fbac6 100%);
    --pal-rose: linear-gradient(100deg, #d99a8b 0%, #ebb9ab 34%, #f8d9cf 50%, #e3a99a 68%, #d99a8b 100%);
    --pal-amethyst: linear-gradient(100deg, #ad97ec 0%, #c8b6f5 38%, #e3d8ff 54%, #e2c27a 100%);
    --pal-sapphire: linear-gradient(100deg, #7fb0ec 0%, #a8cbf5 34%, #d6e8ff 50%, #95bdf0 68%, #7fb0ec 100%);
    --pal-featured: linear-gradient(100deg, #b9a3f0, #93a9f5 55%, #7dd3e6);
    --pal-tagged: linear-gradient(100deg, #7cb6f5, #a3a6f8 60%, #c4a5f5);
}

/* ---------- names ---------- */
/* chosen colours arrive as day-safe (--nm-d*) and night-safe (--nm-n*) stops */
.ehna-nm { --nm-a: var(--nm-da, #1d6fd8); --nm-b: var(--nm-db, var(--nm-a)); --nm-c: var(--nm-dc, var(--nm-a)); }
.dark .ehna-nm:not(.ehna-day *) { --nm-a: var(--nm-na, #7cb6f5); --nm-b: var(--nm-nb, var(--nm-a)); --nm-c: var(--nm-nc, var(--nm-a)); }
.ehna-nm {
    --nm-fill: linear-gradient(100deg, var(--nm-a, #1d6fd8), var(--nm-b, var(--nm-a, #1d6fd8)) 50%, var(--nm-c, var(--nm-a, #1d6fd8)));
    --nm-hover: drop-shadow(0 0 0 transparent);
    color: var(--nm-a, #1d6fd8);
    background-image: var(--nm-fill);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    filter: var(--nm-edge) var(--nm-hover);
    transition: filter .25s ease;
}

/* one light pass: when the name appears, and again on hover */
.ehna-nm-fx-sheen, .ehna-nm-fx-gold, .ehna-nm-fx-silver, .ehna-nm-fx-platinum, .ehna-nm-fx-rose, .ehna-nm-fx-amethyst, .ehna-nm-fx-sapphire,
.ehna-nm-look-owner, .ehna-nm-look-featured {
    background-image: var(--nm-sweep), var(--nm-fill);
    background-size: 250% 100%, 100% 100%;
    background-position: 0% 0, 0 0;
    animation: ehna-nm-pass 1.5s cubic-bezier(.4, 0, .2, 1) .35s 1 both;
}
:is(.ehna-nm-fx-sheen, .ehna-nm-fx-gold, .ehna-nm-fx-silver, .ehna-nm-fx-platinum, .ehna-nm-fx-rose, .ehna-nm-fx-amethyst, .ehna-nm-fx-sapphire, .ehna-nm-look-owner, .ehna-nm-look-featured):hover,
:is(a, button, [role="link"]):is(:hover, :focus-visible) :is(.ehna-nm-fx-sheen, .ehna-nm-fx-gold, .ehna-nm-fx-silver, .ehna-nm-fx-platinum, .ehna-nm-fx-rose, .ehna-nm-fx-amethyst, .ehna-nm-fx-sapphire, .ehna-nm-look-owner, .ehna-nm-look-featured) {
    animation-name: ehna-nm-pass-again;
    animation-delay: 0s;
}

/* a soft glow only while pointed at or focused */
.ehna-nm-fx-glow:hover, :is(a, button, [role="link"]):is(:hover, :focus-visible) .ehna-nm-fx-glow {
    --nm-hover: drop-shadow(0 0 6px color-mix(in srgb, var(--nm-g, var(--nm-b)) 45%, transparent));
}

/* aurora: the colours drift very slowly */
.ehna-nm-fx-aurora {
    --nm-fill: linear-gradient(100deg, var(--nm-a), var(--nm-b) 25%, var(--nm-c) 50%, var(--nm-b) 75%, var(--nm-a));
    background-size: 300% 100%;
    animation: ehna-nm-drift 18s ease-in-out infinite alternate;
}

/* fixed palettes */
.ehna-nm-fx-gold, .ehna-nm-look-owner { --nm-a: #a8781f; --nm-g: #d6ad5a; --nm-fill: var(--pal-gold); }
.ehna-nm-fx-silver { --nm-a: #67717d; --nm-g: #c9d0d9; --nm-fill: var(--pal-silver); }
.ehna-nm-fx-platinum { --nm-a: #5f7f8e; --nm-g: #b3cbd5; --nm-fill: var(--pal-platinum); }
.ehna-nm-fx-rose { --nm-a: #b0614f; --nm-g: #e3a99a; --nm-fill: var(--pal-rose); }
.ehna-nm-fx-amethyst { --nm-a: #6d4fc0; --nm-g: #c8b6f5; --nm-fill: var(--pal-amethyst); }
.ehna-nm-fx-sapphire { --nm-a: #2c63b4; --nm-g: #a8cbf5; --nm-fill: var(--pal-sapphire); }
.ehna-nm-look-featured { --nm-a: #4c3394; --nm-fill: var(--pal-featured); }
.ehna-nm-tagged { --nm-a: #4f46e5; --nm-fill: var(--pal-tagged); }

@keyframes ehna-nm-pass { from { background-position: 100% 0, 0 0; } to { background-position: 0% 0, 0 0; } }
@keyframes ehna-nm-pass-again { from { background-position: 100% 0, 0 0; } to { background-position: 0% 0, 0 0; } }
@keyframes ehna-nm-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .ehna-nm { background: none; -webkit-text-fill-color: currentColor; }
}

/* ---------- public tag: soft (tinted), solid, metal ---------- */
.ehna-tag {
    --tg-h: 18px;
    --tg-ink: color-mix(in oklab, var(--tg-c, #1d6fd8) 80%, #000);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 4px;
    height: var(--tg-h);
    max-width: 14em;
    margin-inline-start: 6px;
    padding: 0 7px 0 6px;
    overflow: hidden;
    vertical-align: middle;
    border-radius: 999px;
    color: var(--tg-ink);
    -webkit-text-fill-color: currentColor;
    background: color-mix(in srgb, var(--tg-c, #1d6fd8) 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tg-c, #1d6fd8) 30%, transparent);
    font-size: 10.5px;
    font-weight: 650;
    font-style: normal;
    line-height: 1;
    letter-spacing: .01em;
    text-decoration: none;
    text-shadow: none;
    white-space: nowrap;
    filter: none;
    animation: none;
}
.dark .ehna-tag:not(.ehna-day *) {
    --tg-ink: color-mix(in oklab, var(--tg-c, #1d6fd8) 50%, #fff);
    background: color-mix(in srgb, var(--tg-c, #1d6fd8) 20%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tg-c, #1d6fd8) 45%, transparent);
}
.ehna-tag > svg { width: 11px; height: 11px; flex: none; color: currentColor; stroke-width: 2.1; }
.ehna-tag > span { overflow: hidden; text-overflow: ellipsis; }

.ehna-tag.ehna-tag-solid, .ehna-tag.ehna-tag-metal {
    color: var(--tg-t, #fff);
    -webkit-text-fill-color: var(--tg-t, #fff);
}
.ehna-tag.ehna-tag-solid > svg, .ehna-tag.ehna-tag-metal > svg { color: var(--tg-i, currentColor); }
.ehna-tag.ehna-tag-solid {
    background: linear-gradient(135deg, var(--tg-c), color-mix(in srgb, var(--tg-c) 72%, var(--tg-g, var(--tg-c))));
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 1px 2px rgb(0 0 0 / .1);
}
.ehna-tag.ehna-tag-metal {
    background:
        linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / 0) 60%),
        linear-gradient(120deg, var(--tg-c) 0%, color-mix(in srgb, var(--tg-c) 62%, var(--tg-g, var(--tg-c))) 55%, var(--tg-c) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tg-g, #fff) 50%, transparent), 0 1px 2px rgb(0 0 0 / .12);
}
/* premium: a slow light pass on appear and hover */
.ehna-tag-metal::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--tg-g, #fff) 55%, transparent) 50%, transparent 70%);
    transform: translateX(-120%);
    pointer-events: none;
    animation: ehna-tag-pass 2.6s cubic-bezier(.4, 0, .2, 1) .8s 1 both;
}
.ehna-tag-metal:hover::after, :is(a, button):is(:hover, :focus-visible) .ehna-tag-metal::after { animation-name: ehna-tag-pass-again; animation-delay: 0s; }
@keyframes ehna-tag-pass { to { transform: translateX(120%); } }
@keyframes ehna-tag-pass-again { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

/* sizes per place: comments & chat, feed (default), profile header */
.ehna-tag-xs { --tg-h: 16px; gap: 3px; margin-inline-start: 4px; padding: 0 6px 0 5px; font-size: 9.5px; }
.ehna-tag-xs > svg { width: 9.5px; height: 9.5px; }
.ehna-tag-lg { --tg-h: 22px; gap: 5px; margin-inline-start: 4px; padding: 0 10px 0 8px; font-size: 12px; }
.ehna-tag-lg > svg { width: 13px; height: 13px; }

/* Pro package emblem */
.ehna-pk {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-inline-start: 5px;
    vertical-align: middle;
    border-radius: 999px;
    background: linear-gradient(145deg, var(--pk-c, #b8862f), color-mix(in srgb, var(--pk-c, #b8862f) 55%, #fff));
    color: #fff;
    -webkit-text-fill-color: #fff;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35), 0 1px 2px rgb(0 0 0 / .12);
}
.ehna-pk > svg { width: 10px; height: 10px; }

/* ---------- avatar rings: thin, inside the picture's own box (no layout shift) ---------- */
img.ehna-fr {
    --fr-w: 2px;
    --fr-gap: 1.5px;
    --fr-c: color-mix(in srgb, var(--fr-a) 50%, var(--fr-b));
    --fr-paint: linear-gradient(135deg, var(--fr-a), var(--fr-c) 50%, var(--fr-b));
    --fr-hi: linear-gradient(transparent, transparent);
    box-sizing: border-box;
    padding: var(--fr-gap) !important;
    border: var(--fr-w) solid transparent !important;
    background:
        linear-gradient(var(--color-card, #fff), var(--color-card, #fff)) padding-box,
        var(--fr-hi) border-box,
        var(--fr-paint) border-box !important;
    box-shadow: none;
    transition: box-shadow .25s ease;
}
img.ehna-fr.ehna-fr-sm { --fr-w: 1.5px; --fr-gap: 1px; }
img.ehna-fr.ehna-fr-lg { --fr-w: 2.5px; --fr-gap: 2px; }
img.ehna-fr.ehna-fr-xl { --fr-w: 3px; --fr-gap: 3px; }
:is(a, button):is(:hover, :focus-visible) img.ehna-fr, img.ehna-fr:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fr-a) 14%, transparent); }

/* metals: banded conic paint */
.ehna-fr-gold, .ehna-fr-silver, .ehna-fr-platinum, .ehna-fr-rose, .ehna-fr-amethyst, .ehna-fr-sapphire, .ehna-fr-look-owner, .ehna-fr-look-featured {
    --fr-paint: conic-gradient(from 210deg, var(--fr-a), var(--fr-b) 18%, var(--fr-c) 32%, var(--fr-a) 50%, var(--fr-b) 68%, var(--fr-c) 82%, var(--fr-a));
}
.ehna-fr-gold, .ehna-fr-look-owner { --fr-a: #9b6b18; --fr-b: #e3c27a; --fr-c: #fbefc8; }
.ehna-fr-silver { --fr-a: #6b7480; --fr-b: #c9d0d9; --fr-c: #f4f6f9; }
.ehna-fr-platinum { --fr-a: #557483; --fr-b: #b3cbd5; --fr-c: #eef7fa; }
.ehna-fr-rose { --fr-a: #a25544; --fr-b: #ebb9ab; --fr-c: #fbe6df; }
.ehna-fr-amethyst { --fr-a: #5b3ea8; --fr-b: #b9a3f0; --fr-c: #e2c27a; }
.ehna-fr-sapphire { --fr-a: #285aa6; --fr-b: #95bdf0; --fr-c: #e3efff; }
.ehna-fr-look-featured { --fr-a: #4c3394; --fr-b: #93a9f5; --fr-c: #7dd3e6; }

/* a highlight that turns slowly (orbit), or passes once on appear and hover (sheen, metals) */
.ehna-fr-orbit, .ehna-fr-sheen, .ehna-fr-gold, .ehna-fr-silver, .ehna-fr-platinum, .ehna-fr-rose, .ehna-fr-amethyst, .ehna-fr-sapphire, .ehna-fr-look-owner, .ehna-fr-look-featured {
    --fr-hi: conic-gradient(from var(--fr-angle), transparent 0 78%, var(--fr-glint) 88%, transparent 96%);
}
.ehna-fr-orbit { --fr-glint: rgb(255 255 255 / .7); animation: ehna-fr-turn 14s linear infinite; }
.ehna-fr-sheen, .ehna-fr-gold, .ehna-fr-silver, .ehna-fr-platinum, .ehna-fr-rose, .ehna-fr-amethyst, .ehna-fr-sapphire, .ehna-fr-look-owner, .ehna-fr-look-featured {
    --fr-angle: -40deg;
    animation: ehna-fr-pass 1.8s cubic-bezier(.4, 0, .2, 1) .4s 1 both;
}
:is(a, button):is(:hover, :focus-visible) img:is(.ehna-fr-sheen, .ehna-fr-gold, .ehna-fr-silver, .ehna-fr-platinum, .ehna-fr-rose, .ehna-fr-amethyst, .ehna-fr-sapphire, .ehna-fr-look-owner, .ehna-fr-look-featured),
img:is(.ehna-fr-sheen, .ehna-fr-gold, .ehna-fr-silver, .ehna-fr-platinum, .ehna-fr-rose, .ehna-fr-amethyst, .ehna-fr-sapphire, .ehna-fr-look-owner, .ehna-fr-look-featured):hover {
    animation-name: ehna-fr-pass-again;
    animation-delay: 0s;
}
@keyframes ehna-fr-turn { from { --fr-angle: 0deg; } to { --fr-angle: 360deg; } }
@keyframes ehna-fr-pass { 0% { --fr-angle: -40deg; --fr-glint: transparent; } 18%, 80% { --fr-glint: rgb(255 255 255 / .85); } 100% { --fr-angle: 320deg; --fr-glint: transparent; } }
@keyframes ehna-fr-pass-again { 0% { --fr-angle: -40deg; --fr-glint: transparent; } 18%, 80% { --fr-glint: rgb(255 255 255 / .85); } 100% { --fr-angle: 320deg; --fr-glint: transparent; } }

/* keep the look, drop the movement */
@media (prefers-reduced-motion: reduce) {
    .ehna-nm, .ehna-tag-metal::after, img.ehna-fr { animation: none !important; transition: none !important; }
    .ehna-nm { background-position: 0% 0, 0 0; }
    .ehna-tag-metal::after { opacity: 0; }
}