/* Custom Avatar Frame */

.avatar-round {
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

.avatar-span-32 {
    display: inline-block;
    width: 32px;
    height: 32px;
}
.avatar-span-40 {
    display: inline-block;
    width: 40px;
    height: 40px;
}
.avatar-span-44 {
    display: inline-block;
    width: 44px;
    height: 44px;
}
.avatar-span-50 {
    display: inline-block;
    width: 50px;
    height: 50px;
}
.avatar-span-64 {
    display: inline-block;
    width: 64px;
    height: 64px;
}
.avatar-span-96 {
    display: inline-block;
    width: 96px;
    height: 96px;
}
.avatar-span-128 {
    display: inline-block;
    width: 128px;
    height: 128px;
}

.premium-avatar-32 {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 0;
    width: 32px;
    height: 32px;
}
.premium-avatar-32 img {
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
    display: block;
}

.premium-avatar-40 {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 0;
    width: 40px;
    height: 40px;
}
.premium-avatar-40 img {
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
    display: block;
}

.premium-avatar-44 {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 0;
    width: 44px;
    height: 44px;
}
.premium-avatar-44 img {
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
    display: block;
}

.premium-avatar-50 {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 0;
    width: 50px;
    height: 50px;
}
.premium-avatar-50 img {
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
    display: block;
}

.premium-avatar-64 {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 0;
    width: 64px;
    height: 64px;
}
.premium-avatar-64 img {
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
    display: block;
}

.premium-avatar-96 {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 0;
    width: 96px;
    height: 96px;
}
.premium-avatar-96 img {
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
    display: block;
}

.premium-avatar-128 {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 0;
    width: 128px;
    height: 128px;
}
.premium-avatar-128 img {
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
    display: block;
}

.premium-frame {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.premium-shape-0001 {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(7% 7%, 93% 7%, 97% 93%, 3% 93%);
}

.premium-shape-0004 {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(51% 5%, 97% 40%, 77% 95%, 24% 95%, 3% 40%);
}

.premium-shape-0011 {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 10%, 3% 89%, 97% 89%);
}

.premium-shape-0012 {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(14% 14%, 88% 14%, 88% 87%, 15% 88%);
}

.premium-shape-0013 {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(8% 8%, 92% 8%, 92% 92%, 8% 92%);
}

.premium-shape-0014 {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: circle(44% at 50% 50%);
}

.premium-shape-0015 {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(5% 18%, 95% 18%, 95% 82%, 6% 82%);
}

.premium-shape-0016 {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(12% 27%, 50% 8%, 89% 28%, 89% 71%, 50% 94%, 12% 72%);
}

/* clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); */
/* ─────────────────────────────────────────────────────────────────────
 * CSS-designed animated frames (staff-only category)
 *
 * Markup::user_avatar emits these for any frame value that doesn't end
 * in .png. Markup:
 *   <div class="premium-avatar-{size} pa-css pa-css-{frame}">
 *       <span class="pa-css-img-wrap"><img></span>
 *       <span class="pa-css-ring"></span>
 *   </div>
 *
 * .premium-avatar-{size} already provides width/height + position:relative,
 * so the absolute children fit. The image-wrap is inset 4px to reserve the
 * outer ring; the .pa-css-ring sits on top with the animated decoration.
 * ───────────────────────────────────────────────────────────────────── */
.pa-css {
    border-radius: 50%;
    overflow: visible;
}
.pa-css .pa-css-img-wrap {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    line-height: 0;
}
.pa-css .pa-css-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.pa-css .pa-css-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
    box-sizing: border-box;
}

/* ── Aurora - full conic-gradient ring rotating slowly ───────────── */
.pa-css-staff_aurora .pa-css-ring {
    background: conic-gradient(from 0deg, #ff9900 0deg, #ff0000 60deg, #ff00ff 120deg, #0080ff 180deg, #00ffff 240deg, #00ff80 300deg, #ffff00 350deg, #ff9900 360deg);
    -webkit-mask: radial-gradient(circle, transparent 0 calc(100% - 4px), #000 calc(100% - 4px) 100%);
    mask: radial-gradient(circle, transparent 0 calc(100% - 4px), #000 calc(100% - 4px) 100%);
    animation: pa-aurora-spin 6s linear infinite;
}
@keyframes pa-aurora-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Pulse - solid accent ring with breathing glow ────────────────── */
.pa-css-staff_pulse .pa-css-ring {
    border: 2px solid #ff9900;
    animation: pa-pulse 2.2s ease-in-out infinite;
}
@keyframes pa-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 153, 0, 0.55), 0 0 8px rgba(255, 153, 0, 0.4) inset;
    }
    50% {
        box-shadow: 0 0 0 6px rgba(255, 153, 0, 0), 0 0 12px rgba(255, 153, 0, 0.7) inset;
    }
}

/* ── Spin - quarter-arc spinner ──────────────────────────────────── */
.pa-css-staff_spin .pa-css-ring {
    background: conic-gradient(from 0deg, #ff9900 0deg, rgba(255, 153, 0, 0.85) 60deg, rgba(255, 153, 0, 0) 120deg, rgba(255, 153, 0, 0) 360deg);
    -webkit-mask: radial-gradient(circle, transparent 0 calc(100% - 4px), #000 calc(100% - 4px) 100%);
    mask: radial-gradient(circle, transparent 0 calc(100% - 4px), #000 calc(100% - 4px) 100%);
    animation: pa-spin-rotate 1.8s linear infinite;
}
@keyframes pa-spin-rotate {
    to {
        transform: rotate(360deg);
    }
}

/* ── Rainbow Hexagon - chamfered hex with neon underglow ──────────────
 * Inspired by neon signage casting coloured light onto the surface
 * below: the hex itself is a crisp rotating rainbow border, with a
 * horizontal blurred rainbow stripe positioned BELOW it that reads as
 * the projected underlight.
 *
 * Layers (back to front):
 *   ::before - horizontal rainbow band, heavily blurred, anchored to
 *              the lower half and bleeding past the wrapper. The "LED".
 *   ::after  - crisp rainbow hex border (rotates via @property).
 *   .pa-css-img-wrap - avatar, hex-clipped, on top.
 *
 * NOTE: ancestors need to allow overflow - the underglow extends ~45%
 * below the wrapper. */
@property --hex-rb-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: true;
}

.pa-css-staff_hex_rainbow {
    --hex-rb-clip: polygon(44% 2%, 56% 2%, 96% 23%, 100% 30%, 100% 70%, 96% 77%, 56% 98%, 44% 98%, 4% 77%, 0% 70%, 0% 30%, 4% 23%);

    background: transparent;
    border-radius: 0;
    overflow: visible;
}

/* Underglow - vivid rainbow band kept crisp (low blur), with a radial
   mask that fades the colours toward the band's outer edges so the
   centre stays sharp and the rim dissolves into the background.
   Gradient is doubled so background-position can scroll one cycle
   seamlessly, matching the rotation feel of the conic above. */
.pa-css-staff_hex_rainbow::before {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    top: 50%;
    bottom: -28%;
    background: linear-gradient(90deg, #ff4a76, #ff8e54, #ffd166, #5ed471, #2dd4bf, #4a8fee, #a463f2, #ec5cb6, #ff4a76, #ff8e54, #ffd166, #5ed471, #2dd4bf, #4a8fee, #a463f2, #ec5cb6, #ff4a76);
    background-size: 200% 100%;
    filter: blur(5px);
    -webkit-mask-image: radial-gradient(ellipse 80% 95% at 50% 25%, #000 0%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 95% at 50% 25%, #000 0%, #000 35%, transparent 100%);
    opacity: 0.9;
    z-index: 0;
    pointer-events: none;
    animation: pa-hex-rb-shift 4s linear infinite;
}
@keyframes pa-hex-rb-shift {
    from {
        background-position: 0 50%;
    }
    to {
        background-position: -100% 50%;
    }
}

/* Crisp rotating rainbow hex border. */
.pa-css-staff_hex_rainbow::after {
    content: "";
    position: absolute;
    inset: 0;
    background: conic-gradient(from var(--hex-rb-angle, 0deg), #ff9eb1, #ffb785, #ffdfa0, #a8dfa4, #9ad6dc, #9cb3e6, #b9a1dc, #e8a4cb, #ff9eb1);
    clip-path: var(--hex-rb-clip);
    z-index: 1;
    animation: pa-hex-rb-rotate 4s linear infinite;
}

.pa-css-staff_hex_rainbow .pa-css-ring {
    display: none;
}
.pa-css-staff_hex_rainbow .pa-css-img-wrap {
    inset: 4%;
    border-radius: 0;
    clip-path: var(--hex-rb-clip);
    z-index: 2;
}
@keyframes pa-hex-rb-rotate {
    to {
        --hex-rb-angle: 360deg;
    }
}

/* Reduced-motion fallback - keep the decoration but freeze the animation. */
@media (prefers-reduced-motion: reduce) {
    .pa-css-staff_aurora .pa-css-ring,
    .pa-css-staff_spin .pa-css-ring {
        animation: none;
    }
    .pa-css-staff_pulse .pa-css-ring {
        animation: none;
        box-shadow: 0 0 0 0 transparent, 0 0 8px rgba(255, 153, 0, 0.4) inset;
    }
    .pa-css-staff_hex_rainbow {
        animation: none;
    }
}