/* Shared structure; animations live on the ring, never on the profile photo. */
@property --frame-light-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.profile-frame[data-frame]:not([data-frame='developer']) {
    position: relative;
    isolation: isolate;
    overflow: visible !important;
}
.profile-frame[data-frame]:not([data-frame='developer']) > i {
    position: relative;
    z-index: 3;
}

/* Pack frames keep their individual palettes from shop.css. */
:root .profile-frame:is(
    [data-frame='mint'], [data-frame='ocean'], [data-frame='sunset'],
    [data-frame='forest'], [data-frame='slate'], [data-frame='coral'],
    [data-frame='aurora'], [data-frame='sapphire'], [data-frame='ember'],
    [data-frame='jungle'], [data-frame='frost'], [data-frame='royal'],
    [data-frame='neon'], [data-frame='volcano'], [data-frame='arctic'],
    [data-frame='crown'], [data-frame='dragon'], [data-frame='diamond']
) {
    --ring-outset: -8%;
    --ring-opening: 86%;
    --ring-glow: 2px;
    --ring-duration: 18s;
    --ring-timing: ease-in-out;
    --ring-sheen: .2;
    --ring-motion: frame-soft-glint;
    --ring-paint: linear-gradient(135deg,
        color-mix(in srgb, var(--frame-b) 80%, white),
        var(--frame-a) 45%, var(--frame-b));
    --ring-light-start: 25deg;
    --ring-light-stops: transparent 0 65%, #ffffff18 74%, #ffffffbb 82%,
        #ffffff18 90%, transparent 98%;
    border: 0 !important;
    border-image: none !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    animation: none !important;
}

/* Rare: a single slow highlight and a slightly fuller ring. */
:root .profile-frame:is(
    [data-frame='aurora'], [data-frame='sapphire'], [data-frame='ember'],
    [data-frame='jungle'], [data-frame='frost']
) {
    --ring-outset: -10%;
    --ring-opening: 83.4%;
    --ring-glow: 3px;
    --ring-sheen: .55;
    --ring-motion: frame-clean-orbit;
    --ring-timing: linear;
    --ring-paint: conic-gradient(from 30deg,
        var(--frame-b), var(--frame-a) 35%, var(--frame-b) 65%,
        var(--frame-a) 85%, var(--frame-b));
}

/* Epic: two soft light trails and a richer two-color band. */
:root .profile-frame:is(
    [data-frame='royal'], [data-frame='neon'],
    [data-frame='volcano'], [data-frame='arctic'], [data-frame='diamond']
) {
    --ring-outset: -12%;
    --ring-opening: 80.7%;
    --ring-glow: 4px;
    --ring-duration: 15s;
    --ring-sheen: .38;
    --ring-motion: frame-clean-orbit;
    --ring-timing: linear;
    --ring-paint: conic-gradient(from 20deg,
        var(--frame-a), var(--frame-b) 28%, var(--frame-a) 55%,
        color-mix(in srgb, var(--frame-b) 80%, white) 78%, var(--frame-a));
    --ring-light-stops: transparent 0 25%, #ffffff18 33%, #ffffffb0 40%, transparent 48% 75%,
        #ffffff18 83%, #ffffff90 90%, transparent 98%;
}

/* Legendary: a substantial beveled band with two fine luminous edges. */
:root .profile-frame:is(
    [data-frame='crown'], [data-frame='dragon']
) {
    --ring-outset: -15%;
    --ring-opening: 77%;
    --ring-glow: 5px;
    --ring-duration: 12s;
    --ring-sheen: .35;
    --ring-motion: frame-clean-orbit;
    --ring-timing: linear;
    --ring-paint: radial-gradient(farthest-side,
        transparent 0 79%, #ffffff80 80%, transparent 81% 94%,
        #ffffff70 95%, transparent 96%),
        conic-gradient(from 30deg,
        var(--frame-b), var(--frame-a) 22%,
        color-mix(in srgb, var(--frame-a) 60%, white) 35%,
        var(--frame-b) 55%, var(--frame-a) 78%, var(--frame-b));
    --ring-light-start: 15deg;
    --ring-light-stops: transparent 0 20%, #ffffff12 30%, #ffffffe0 38%, transparent 49% 68%,
        #ffffff12 77%, #ffffffc0 86%, transparent 98%;
}

:root .profile-frame:is(
    [data-frame='mint'], [data-frame='ocean'], [data-frame='sunset'],
    [data-frame='forest'], [data-frame='slate'], [data-frame='coral'],
    [data-frame='aurora'], [data-frame='sapphire'], [data-frame='ember'],
    [data-frame='jungle'], [data-frame='frost'], [data-frame='royal'],
    [data-frame='neon'], [data-frame='volcano'], [data-frame='arctic'],
    [data-frame='crown'], [data-frame='dragon'], [data-frame='diamond']
)::before,
:root .profile-frame:is(
    [data-frame='mint'], [data-frame='ocean'], [data-frame='sunset'],
    [data-frame='forest'], [data-frame='slate'], [data-frame='coral'],
    [data-frame='aurora'], [data-frame='sapphire'], [data-frame='ember'],
    [data-frame='jungle'], [data-frame='frost'], [data-frame='royal'],
    [data-frame='neon'], [data-frame='volcano'], [data-frame='arctic'],
    [data-frame='crown'], [data-frame='dragon'], [data-frame='diamond']
)::after {
    content: '' !important;
    position: absolute !important;
    inset: var(--ring-outset) !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    pointer-events: none !important;
    -webkit-mask: radial-gradient(farthest-side,
        transparent calc(var(--ring-opening) - 1.25px),
        #000 calc(var(--ring-opening) - .25px) calc(100% - .65px),
        transparent 100%) !important;
    mask: radial-gradient(farthest-side,
        transparent calc(var(--ring-opening) - 1.25px),
        #000 calc(var(--ring-opening) - .25px) calc(100% - .65px),
        transparent 100%) !important;
}

:root .profile-frame:is(
    [data-frame='mint'], [data-frame='ocean'], [data-frame='sunset'],
    [data-frame='forest'], [data-frame='slate'], [data-frame='coral'],
    [data-frame='aurora'], [data-frame='sapphire'], [data-frame='ember'],
    [data-frame='jungle'], [data-frame='frost'], [data-frame='royal'],
    [data-frame='neon'], [data-frame='volcano'], [data-frame='arctic'],
    [data-frame='crown'], [data-frame='dragon'], [data-frame='diamond']
)::before {
    z-index: 2 !important;
    background: var(--ring-paint) !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 var(--ring-glow)
        color-mix(in srgb, var(--frame-a) 35%, transparent)) !important;
    transform: none !important;
    animation: none !important;
}

:root .profile-frame:is(
    [data-frame='mint'], [data-frame='ocean'], [data-frame='sunset'],
    [data-frame='forest'], [data-frame='slate'], [data-frame='coral'],
    [data-frame='aurora'], [data-frame='sapphire'], [data-frame='ember'],
    [data-frame='jungle'], [data-frame='frost'], [data-frame='royal'],
    [data-frame='neon'], [data-frame='volcano'], [data-frame='arctic'],
    [data-frame='crown'], [data-frame='dragon'], [data-frame='diamond']
)::after {
    z-index: 3 !important;
    background: conic-gradient(
        from calc(var(--ring-light-start) + var(--frame-light-angle)),
        var(--ring-light-stops)) !important;
    opacity: var(--ring-sheen) !important;
    filter: none !important;
    animation: var(--ring-motion) var(--ring-duration) var(--ring-timing) infinite !important;
}

/* The reveal's 154px shell surrounds a 130px photo. Match that opening. */
:root .profile-avatar-shell.profile-frame[data-frame] {
    --ring-outset: 0%;
    --ring-opening: 84.5%;
}

/* Individually drawn bands keep their inner bevel stationary while light moves. */
:root .profile-frame[data-frame='royal'] {
    --ring-art: url('../assets/frames/royal-epic.svg?v=20260918-1');
}
:root .profile-frame[data-frame='neon'] {
    --ring-art: url('../assets/frames/neon-epic.svg?v=20260918-1');
    --ring-duration: 10s;
}
:root .profile-frame[data-frame='volcano'] {
    --ring-art: url('../assets/frames/volcano-epic.svg?v=20260918-1');
}
:root .profile-frame[data-frame='arctic'] {
    --ring-art: url('../assets/frames/arctic-epic.svg?v=20260918-1');
}
:root .profile-frame[data-frame='diamond'] {
    --ring-art: url('../assets/frames/diamond-epic.svg?v=20260918-1');
}
:root .profile-frame:is(
    [data-frame='royal'], [data-frame='neon'], [data-frame='volcano'],
    [data-frame='arctic'], [data-frame='diamond']
)::before {
    background: var(--ring-art) center / contain no-repeat !important;
    border-radius: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
}
:root .profile-avatar-shell.profile-frame:is(
    [data-frame='royal'], [data-frame='neon'], [data-frame='volcano'],
    [data-frame='arctic'], [data-frame='diamond']
)::before {
    inset: -2.34% !important;
}

/* Legendary ornaments remain complete above the photo, including in reveals. */
:root .profile-frame[data-frame='crown'] {
    --ring-art: url('../assets/frames/crown-detail.svg?v=20260918-2');
    --ring-glow: 3px;
    --ring-sheen: .3;
}
:root .profile-frame[data-frame='dragon'] {
    --ring-art: url('../assets/frames/dragon-detail.svg?v=20260918-2');
}
:root .profile-frame:is(
    [data-frame='crown'], [data-frame='dragon']
)::before {
    inset: -25% !important;
    background: var(--ring-art) center / contain no-repeat !important;
    border-radius: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
}
/* Match the profile shell's larger photo opening without enlarging the band. */
:root .profile-avatar-shell.profile-frame:is(
    [data-frame='crown'], [data-frame='dragon']
)::before {
    inset: -13.31% !important;
}

@keyframes frame-clean-orbit {
    to { --frame-light-angle: 360deg; }
}
@keyframes frame-soft-glint {
    0%, 100% { --frame-light-angle: -12deg; }
    50% { --frame-light-angle: 12deg; }
}
@media (prefers-reduced-motion: reduce) {
    :root .profile-frame[data-frame]::after {
        animation: none !important;
    }
}