/*
 * Personal donation tier cosmetics - placeholder styling only, real art
 * comes later. Deliberately hand-written plain CSS rather than Tailwind
 * utility classes: the tier/badge/accent colour a user gets is picked at
 * runtime from a small fixed token set (accent / accent-hover /
 * accent-emerald / accent-teal / warning / danger), and Tailwind's build
 * only generates classes it can see written out literally in scanned
 * source files - a Python f-string like `f"bg-{token}/10"` would never
 * resolve to a real class. These rules read the SAME CSS custom
 * properties Tailwind itself generates from src/theme.css
 * (--color-accent, --color-warning, etc.), so they automatically follow
 * light/dark mode and the accessibility palette variants without any
 * duplicated hex values.
 */

.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    font-size: 0.55rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
    white-space: nowrap;
    border-width: 1px;
    border-style: solid;
}

.tier-badge__shape {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: currentColor;
    flex-shrink: 0;
}

/*
 * Real per-metal colour (payments.personal_tiers.Badge.hex_color, same
 * values as payments.views.tier_overview's marketing ladder) rather than
 * the 6-token set above - used by accounts.templatetags.rsn_tags for the
 * donor badge shown next to a name, since a metal's colour should always
 * mean the same metal wherever it appears.
 */
.tier-badge__icon {
    width: 0.65rem;
    height: 0.65rem;
    flex-shrink: 0;
    color: currentColor;
}

.tier-badge--metal {
    color: var(--metal-color);
    background: color-mix(in srgb, var(--metal-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--metal-color) 35%, transparent);
}

/* Icon-only donor badge (everywhere except the donor's own profile page -
   see rsn_tags._personal_tier_badge_html) - no pill, no label, just the
   metal's icon in its real colour, inline with the name it follows. */
.tier-icon-badge {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    vertical-align: -0.15em;
    margin-left: 0.3rem;
    flex-shrink: 0;
}

/*
 * Shimmer effects for the 4 metals above Dragon in the ladder (Necronium,
 * Bane, Elder Rune, Primal) - a distinct animation per metal so the
 * top-end badges keep feeling like a real escalation, not just a colour
 * swap. Driven by data-badge-key (set by rsn_tags._personal_tier_badge_html
 * and the settings-page badge preview) rather than badge.color_token,
 * since color_token only has 4 values for the whole site (one per tier)
 * while these 4 metals span just the top of Expert and all of Master.
 * Targets every shape a badge can render as: the profile-page pill's icon
 * (.tier-badge__icon), the icon-only badge shown everywhere else
 * (.tier-icon-badge), and the settings-page pill's plain dot
 * (.tier-badge__shape).
 */
[data-badge-key="expert_necronium"] .tier-badge__icon,
[data-badge-key="expert_necronium"].tier-icon-badge,
[data-badge-key="expert_necronium"] .tier-badge__shape {
    animation: shimmer-necronium 2.2s ease-in-out infinite;
}

[data-badge-key="expert_bane"] .tier-badge__icon,
[data-badge-key="expert_bane"].tier-icon-badge,
[data-badge-key="expert_bane"] .tier-badge__shape {
    animation: shimmer-bane 1.8s ease-in-out infinite;
}

[data-badge-key="master_elder_rune"] .tier-badge__icon,
[data-badge-key="master_elder_rune"].tier-icon-badge,
[data-badge-key="master_elder_rune"] .tier-badge__shape {
    animation: shimmer-elder-rune 1.6s ease-in-out infinite;
}

[data-badge-key="master_primal"] .tier-badge__icon,
[data-badge-key="master_primal"].tier-icon-badge,
[data-badge-key="master_primal"] .tier-badge__shape {
    animation: shimmer-primal 2.6s ease-in-out infinite;
}

@keyframes shimmer-necronium {
    0%, 100% { filter: drop-shadow(0 0 1px var(--metal-color)); }
    50% { filter: drop-shadow(0 0 6px var(--metal-color)); }
}

@keyframes shimmer-bane {
    0%, 100% { filter: drop-shadow(0 0 2px var(--metal-color)); opacity: 1; }
    20% { filter: drop-shadow(0 0 7px var(--metal-color)); opacity: 1; }
    35% { filter: drop-shadow(0 0 1px var(--metal-color)); opacity: 0.75; }
    60% { filter: drop-shadow(0 0 8px var(--metal-color)); opacity: 1; }
    80% { filter: drop-shadow(0 0 2px var(--metal-color)); opacity: 0.85; }
}

@keyframes shimmer-elder-rune {
    0%, 100% { filter: drop-shadow(0 0 2px var(--metal-color)) brightness(1); transform: scale(1); }
    50% { filter: drop-shadow(0 0 9px var(--metal-color)) brightness(1.4); transform: scale(1.12); }
}

@keyframes shimmer-primal {
    0% { filter: drop-shadow(0 0 2px var(--metal-color)) hue-rotate(0deg); transform: rotate(0deg); }
    50% { filter: drop-shadow(0 0 10px var(--metal-color)) hue-rotate(20deg); transform: rotate(4deg); }
    100% { filter: drop-shadow(0 0 2px var(--metal-color)) hue-rotate(0deg); transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    [data-badge-key="expert_necronium"] .tier-badge__icon,
    [data-badge-key="expert_necronium"].tier-icon-badge,
    [data-badge-key="expert_necronium"] .tier-badge__shape,
    [data-badge-key="expert_bane"] .tier-badge__icon,
    [data-badge-key="expert_bane"].tier-icon-badge,
    [data-badge-key="expert_bane"] .tier-badge__shape,
    [data-badge-key="master_elder_rune"] .tier-badge__icon,
    [data-badge-key="master_elder_rune"].tier-icon-badge,
    [data-badge-key="master_elder_rune"] .tier-badge__shape,
    [data-badge-key="master_primal"] .tier-badge__icon,
    [data-badge-key="master_primal"].tier-icon-badge,
    [data-badge-key="master_primal"] .tier-badge__shape {
        animation: none;
    }
}

.tier-card {
    position: relative;
    border-width: 1px;
    border-style: solid;
    border-radius: 1rem;
}

/* "Where am I right now" - every tier the viewer has already unlocked
   (see payments.views.tier_overview) gets a green border + checkmark. */
.tier-card--reached {
    border-width: 2px;
    border-color: var(--color-status-good) !important;
}

.tier-card__reached-check {
    position: absolute;
    top: -0.6rem;
    right: -0.6rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-status-good);
    color: var(--color-bg-main, #08131a);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    z-index: 2;
}

/* "How much has actually been given" strip - payments.views.tier_overview's
   personal_stats/clan_stats, shown above the ladder/cards in each section. */
.tier-stat-pill {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 1.1rem;
    border-radius: 0.85rem;
    background: var(--color-surface-glass);
    border: 1px solid var(--color-border-medium);
}

.tier-stat-pill__label {
    font-size: 0.6rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-content-muted);
}

.tier-stat-pill__value {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--color-content-heading);
}

.tier-accent-swatch {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    border-width: 2px;
    border-style: solid;
    background: currentColor;
    cursor: pointer;
}

.tier-border-glow {
    border-width: 2px;
    border-style: solid;
    animation: tier-border-glow-pulse 2.4s ease-in-out infinite;
}

@keyframes tier-border-glow-pulse {
    0%, 100% { box-shadow: 0 0 6px 0 currentColor; }
    50% { box-shadow: 0 0 16px 3px currentColor; }
}

@media (prefers-reduced-motion: reduce) {
    .tier-border-glow {
        animation: none;
    }
}

/* Token variants - each maps to one existing site CSS custom property. */
.tier-badge--accent, .tier-accent-swatch--accent, .tier-border-glow--accent { color: var(--color-accent); }
.tier-badge--accent-hover, .tier-accent-swatch--accent-hover, .tier-border-glow--accent-hover { color: var(--color-accent-hover); }
.tier-badge--accent-emerald, .tier-accent-swatch--accent-emerald, .tier-border-glow--accent-emerald { color: var(--color-accent-emerald); }
.tier-badge--accent-teal, .tier-accent-swatch--accent-teal, .tier-border-glow--accent-teal { color: var(--color-accent-teal); }
.tier-badge--warning, .tier-accent-swatch--warning, .tier-border-glow--warning { color: var(--color-warning); }
.tier-badge--danger, .tier-accent-swatch--danger, .tier-border-glow--danger { color: var(--color-danger); }

.tier-badge--accent { background: color-mix(in srgb, var(--color-accent) 12%, transparent); border-color: color-mix(in srgb, var(--color-accent) 35%, transparent); }
.tier-badge--accent-hover { background: color-mix(in srgb, var(--color-accent-hover) 12%, transparent); border-color: color-mix(in srgb, var(--color-accent-hover) 35%, transparent); }
.tier-badge--accent-emerald { background: color-mix(in srgb, var(--color-accent-emerald) 12%, transparent); border-color: color-mix(in srgb, var(--color-accent-emerald) 35%, transparent); }
.tier-badge--accent-teal { background: color-mix(in srgb, var(--color-accent-teal) 12%, transparent); border-color: color-mix(in srgb, var(--color-accent-teal) 35%, transparent); }
.tier-badge--warning { background: color-mix(in srgb, var(--color-warning) 12%, transparent); border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); }
.tier-badge--danger { background: color-mix(in srgb, var(--color-danger) 12%, transparent); border-color: color-mix(in srgb, var(--color-danger) 35%, transparent); }

.tier-card--accent { border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 20%, transparent); }
.tier-card--accent-hover { border-color: color-mix(in srgb, var(--color-accent-hover) 40%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent-hover) 20%, transparent); }
.tier-card--accent-emerald { border-color: color-mix(in srgb, var(--color-accent-emerald) 40%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent-emerald) 20%, transparent); }
.tier-card--accent-teal { border-color: color-mix(in srgb, var(--color-accent-teal) 40%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent-teal) 20%, transparent); }
.tier-card--warning { border-color: color-mix(in srgb, var(--color-warning) 40%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--color-warning) 20%, transparent); }
.tier-card--danger { border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--color-danger) 20%, transparent); }

/*
 * EXPERIMENT - real gem colour per personal tier card (personal_cards'
 * gem_color in payments/views.py), same treatment as .tier-ladder__icon--metal
 * above. Not part of the fixed site token set.
 */
.tier-badge--gem { color: var(--gem-color); background: color-mix(in srgb, var(--gem-color) 12%, transparent); border-color: color-mix(in srgb, var(--gem-color) 35%, transparent); }
.tier-card--gem { border-color: color-mix(in srgb, var(--gem-color) 40%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--gem-color) 20%, transparent); }

/*
 * Same --metal-color custom-property pattern as .tier-ladder__icon--metal
 * below, reused for the avatar frame (payments.personal_tiers.
 * profile_cosmetics_for's accent_css_value) - a ready-to-use CSS colour
 * (either var(--color-X) for the Novice 5-preset token, or an open hex
 * once Adept+ picks one), so the frame never needs a per-token CSS class.
 */
.tier-card--metal { border-color: color-mix(in srgb, var(--metal-color) 40%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--metal-color) 20%, transparent); }
.tier-border-glow--metal { color: var(--metal-color); }

/*
 * Clan Group 3 perk - a subtle animated shimmer sweep across the clan
 * name heading on its public page (unlocks_animated_clan_name). Same
 * restrained "sweep" style as the personal track's .premium-shimmer
 * (src/input.css), not a full colour-shift - the name already renders
 * through .bg-gradient-text, this just animates a highlight over it.
 */
.clan-name-animated {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.clan-name-animated::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
    );
    animation: clan-name-shimmer-sweep 3.5s infinite ease-in-out;
    pointer-events: none;
}

@keyframes clan-name-shimmer-sweep {
    0% { transform: translateX(-150%) skewX(-25deg); }
    70%, 100% { transform: translateX(150%) skewX(-25deg); }
}

@media (prefers-reduced-motion: reduce) {
    .clan-name-animated::after {
        animation: none;
    }
}

/*
 * Personal tier metal-badge ladder (tier_overview.html) - one node per RS3
 * smithing metal, in a single horizontally-scrollable row so the chain
 * never wraps and breaks the connecting line. Nodes are coloured by which
 * of the 4 tiers they belong to (same swatch token as that tier's card
 * below), and a "milestone" node - the first metal in each tier's group -
 * gets a glow ring plus a small tag naming the tier it unlocks.
 */
.tier-ladder-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 0.25rem 1.25rem;
}

.tier-ladder {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    min-width: 100%;
    justify-content: center;
    padding: 0 1rem;
}

.tier-ladder::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    left: 2.25rem;
    right: 2.25rem;
    height: 2px;
    background: var(--color-border-medium);
    z-index: 0;
}

/* "Where am I right now" overlay - a thicker, coloured segment of the same
   line, from the start up to the viewer's current metal. Its width is
   computed server-side (payments.views.tier_overview's
   personal_ladder_progress, a 0-1 fraction of ALL_BADGES reached) against
   the same (100% - 4.5rem) span ::before draws across, so the bar's right
   edge always lands exactly on the current node's centre regardless of
   viewport width. */
.tier-ladder__progress {
    content: "";
    position: absolute;
    top: 1.25rem;
    left: 2.25rem;
    height: 4px;
    margin-top: -1px;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--color-accent-teal), var(--color-danger));
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-danger) 45%, transparent);
    z-index: 0;
}

.tier-ladder__node {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 4.25rem;
    flex-shrink: 0;
    text-align: center;
}

.tier-ladder__node--reached .tier-ladder__icon {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--metal-color) 30%, transparent);
}

.tier-ladder__reached-check {
    position: absolute;
    top: -0.15rem;
    right: 0.1rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-status-good);
    color: var(--color-bg-main, #08131a);
    z-index: 2;
}

.tier-ladder__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-width: 2px;
    border-style: solid;
    background: var(--color-surface);
}

.tier-ladder__icon i {
    width: 1.1rem;
    height: 1.1rem;
}

/*
 * EXPERIMENT - real in-game metal colour per badge instead of the fixed
 * site token set (personal_ladder's metal_color in payments/views.py).
 * Only the ladder icons use this; milestone tags stay on the token set
 * since those represent our own gem tier names, not an RS3 metal.
 */
.tier-ladder__icon--metal {
    color: var(--metal-color);
    border-color: color-mix(in srgb, var(--metal-color) 55%, transparent);
}

.tier-ladder__milestone-tag--gem {
    color: var(--gem-color);
    background: color-mix(in srgb, var(--gem-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--gem-color) 35%, transparent);
}

.tier-ladder__node--milestone .tier-ladder__icon {
    border-width: 3px;
    animation: tier-border-glow-pulse 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .tier-ladder__node--milestone .tier-ladder__icon {
        animation: none;
    }
}

.tier-ladder__metal {
    font-size: 0.6rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-content-heading);
    margin-top: 0.5rem;
    white-space: nowrap;
}

.tier-ladder__price {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--color-content-muted);
    margin-top: 0.1rem;
}

.tier-ladder__milestone-tag {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
    font-size: 0.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-width: 1px;
    border-style: solid;
}

.tier-ladder__icon--accent, .tier-ladder__milestone-tag--accent { color: var(--color-accent); }
.tier-ladder__icon--accent-hover, .tier-ladder__milestone-tag--accent-hover { color: var(--color-accent-hover); }
.tier-ladder__icon--accent-emerald, .tier-ladder__milestone-tag--accent-emerald { color: var(--color-accent-emerald); }
.tier-ladder__icon--accent-teal, .tier-ladder__milestone-tag--accent-teal { color: var(--color-accent-teal); }
.tier-ladder__icon--warning, .tier-ladder__milestone-tag--warning { color: var(--color-warning); }
.tier-ladder__icon--danger, .tier-ladder__milestone-tag--danger { color: var(--color-danger); }

.tier-ladder__icon--accent { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.tier-ladder__icon--accent-hover { border-color: color-mix(in srgb, var(--color-accent-hover) 45%, transparent); }
.tier-ladder__icon--accent-emerald { border-color: color-mix(in srgb, var(--color-accent-emerald) 45%, transparent); }
.tier-ladder__icon--accent-teal { border-color: color-mix(in srgb, var(--color-accent-teal) 45%, transparent); }
.tier-ladder__icon--warning { border-color: color-mix(in srgb, var(--color-warning) 45%, transparent); }
.tier-ladder__icon--danger { border-color: color-mix(in srgb, var(--color-danger) 45%, transparent); }

.tier-ladder__milestone-tag--accent { background: color-mix(in srgb, var(--color-accent) 12%, transparent); border-color: color-mix(in srgb, var(--color-accent) 35%, transparent); }
.tier-ladder__milestone-tag--accent-hover { background: color-mix(in srgb, var(--color-accent-hover) 12%, transparent); border-color: color-mix(in srgb, var(--color-accent-hover) 35%, transparent); }
.tier-ladder__milestone-tag--accent-emerald { background: color-mix(in srgb, var(--color-accent-emerald) 12%, transparent); border-color: color-mix(in srgb, var(--color-accent-emerald) 35%, transparent); }
.tier-ladder__milestone-tag--accent-teal { background: color-mix(in srgb, var(--color-accent-teal) 12%, transparent); border-color: color-mix(in srgb, var(--color-accent-teal) 35%, transparent); }
.tier-ladder__milestone-tag--warning { background: color-mix(in srgb, var(--color-warning) 12%, transparent); border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); }
.tier-ladder__milestone-tag--danger { background: color-mix(in srgb, var(--color-danger) 12%, transparent); border-color: color-mix(in srgb, var(--color-danger) 35%, transparent); }

/* --- RSN Lab Premium Cosmetic Effects --- */
@keyframes premium-flame-flicker {
    0%, 100% {
        filter: drop-shadow(0 -2px 4px #f97316) drop-shadow(0 -1px 2px #ef4444);
        transform: scale(1);
    }
    25% {
        filter: drop-shadow(0 -3px 7px #ea580c) drop-shadow(0 -2px 3px #dc2626);
        transform: scale(1.01);
    }
    50% {
        filter: drop-shadow(0 -2px 5px #f97316) drop-shadow(0 -1px 2px #b91c1c);
        transform: scale(0.99);
    }
    75% {
        filter: drop-shadow(0 -4px 8px #fb923c) drop-shadow(0 -2px 4px #ef4444);
        transform: scale(1.015);
    }
}
.premium-inferno {
    animation: premium-flame-flicker 1.8s infinite ease-in-out;
    display: inline-flex;
}

@keyframes premium-float-bob {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-4px); }
}
.premium-float {
    animation: premium-float-bob 2.6s ease-in-out infinite;
    display: inline-flex;
}

@keyframes premium-prismatic-wave {
    0% { filter: hue-rotate(0deg) saturate(1.2); }
    50% { filter: hue-rotate(180deg) saturate(1.5); }
    100% { filter: hue-rotate(360deg) saturate(1.2); }
}
.premium-prismatic {
    animation: premium-prismatic-wave 4s linear infinite;
    display: inline-flex;
}

.premium-glass-pill {
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37), inset 0 0 12px var(--aura-color, rgba(56, 189, 248, 0.25)) !important;
    padding: 2px 14px !important;
    border-radius: 9999px !important;
}