/* L2CHECK Core 1.0 / Promotion tiers visual hierarchy v1
   PRO      = purple neon + subtle pulse/shimmer
   Premium  = gold
   VIP      = cool blue
   Loaded after page-specific legacy CSS so this file is the single visual authority
   for promotion tier appearance. */

/* -----------------------------
   Shared tier intent
   ----------------------------- */
.h14-vip-card,
.anf-card {
    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease,
        filter .22s ease;
}

/* VIP: visible, but intentionally calmer than Premium / PRO. */
.h14-vip-card.promo-tier-vip {
    border-color: rgba(53, 151, 196, .82) !important;
    box-shadow:
        0 0 0 1px rgba(53, 151, 196, .08),
        0 10px 28px rgba(0, 0, 0, .20) !important;
}
.h14-vip-card.promo-tier-vip .h14-vip-media em {
    color: #a9e6ff !important;
    border-color: rgba(65, 176, 226, .86) !important;
    background: rgba(8, 48, 68, .94) !important;
    box-shadow: 0 0 10px rgba(65, 176, 226, .12);
}

.anf-card.tier-vip {
    --tier: #327f9f !important;
    border-color: #327f9f !important;
    box-shadow:
        0 0 0 1px rgba(50, 127, 159, .08),
        0 8px 22px rgba(0, 0, 0, .14) !important;
}
.anf-card.tier-vip .anf-badges .vip {
    color: #9fe2ff !important;
    border-color: #3b9fc7 !important;
    background: rgba(5, 43, 59, .92) !important;
}

/* Premium: richer gold, stronger than VIP, no animation. */
.h14-vip-card.promo-tier-premium {
    border-color: rgba(213, 166, 58, .92) !important;
    box-shadow:
        0 0 0 1px rgba(213, 166, 58, .12),
        0 0 18px rgba(213, 166, 58, .10),
        0 12px 30px rgba(0, 0, 0, .22) !important;
}
.h14-vip-card.promo-tier-premium .h14-vip-media em {
    color: #ffe09a !important;
    border-color: #d7a63b !important;
    background: rgba(77, 52, 7, .94) !important;
    box-shadow: 0 0 12px rgba(224, 174, 62, .16);
}

.anf-card.tier-premium {
    --tier: #d1a23a !important;
    border-color: #d1a23a !important;
    box-shadow:
        0 0 0 1px rgba(209, 162, 58, .10),
        0 0 16px rgba(209, 162, 58, .08),
        0 9px 24px rgba(0, 0, 0, .16) !important;
}
.anf-card.tier-premium .anf-badges .premium {
    color: #ffe09a !important;
    border-color: #d1a23a !important;
    background: rgba(70, 48, 7, .92) !important;
}

/* -----------------------------
   PRO: strongest visual tier
   ----------------------------- */
.h14-vip-card.promo-tier-pro,
.anf-card.tier-pro {
    position: relative;
    isolation: isolate;
    border-color: #a855f7 !important;
    box-shadow:
        0 0 0 1px rgba(168, 85, 247, .34),
        0 0 16px rgba(168, 85, 247, .34),
        0 0 36px rgba(124, 58, 237, .18),
        0 13px 32px rgba(0, 0, 0, .28) !important;
    animation: l2check-pro-glow 2.35s ease-in-out infinite;
}

/* Purple atmospheric tint without hiding the actual artwork. */
.h14-vip-card.promo-tier-pro::after,
.anf-card.tier-pro::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(
            112deg,
            transparent 0%,
            transparent 34%,
            rgba(207, 170, 255, .00) 39%,
            rgba(207, 170, 255, .22) 47%,
            rgba(255, 255, 255, .16) 50%,
            rgba(207, 170, 255, .16) 53%,
            rgba(207, 170, 255, .00) 61%,
            transparent 66%,
            transparent 100%
        );
    transform: translateX(-145%);
    animation: l2check-pro-sheen 3.4s ease-in-out infinite;
}

/* Keep the effect elegant on hover instead of making the whole card jump. */
.h14-vip-card.promo-tier-pro:hover,
.anf-card.tier-pro:hover {
    border-color: #c084fc !important;
    box-shadow:
        0 0 0 1px rgba(192, 132, 252, .48),
        0 0 22px rgba(168, 85, 247, .46),
        0 0 46px rgba(124, 58, 237, .24),
        0 16px 38px rgba(0, 0, 0, .30) !important;
}

/* PRO badge: bright violet and independently shimmering. */
.h14-vip-card.promo-tier-pro .h14-vip-media em,
.anf-card.tier-pro .anf-badges .pro {
    position: relative;
    overflow: hidden;
    color: #f1dcff !important;
    border-color: #b86cff !important;
    background:
        linear-gradient(135deg, rgba(63, 24, 104, .96), rgba(105, 38, 163, .94)) !important;
    box-shadow:
        0 0 8px rgba(184, 108, 255, .48),
        0 0 16px rgba(126, 54, 210, .22);
    text-shadow: 0 0 8px rgba(239, 214, 255, .42);
}

.h14-vip-card.promo-tier-pro .h14-vip-media em::after,
.anf-card.tier-pro .anf-badges .pro::after {
    content: "";
    position: absolute;
    top: -70%;
    bottom: -70%;
    left: -80%;
    width: 42%;
    transform: rotate(18deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .72),
        transparent
    );
    animation: l2check-pro-badge-shine 2.65s ease-in-out infinite;
}

/* Slight purple depth at the bottom of PRO announcer cards. */
.anf-card.tier-pro .anf-shade {
    background:
        linear-gradient(
            180deg,
            rgba(32, 10, 52, .08) 0%,
            rgba(31, 11, 51, .18) 35%,
            rgba(24, 11, 39, .79) 66%,
            rgba(10, 12, 24, .97) 100%
        ) !important;
}

@keyframes l2check-pro-glow {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(168, 85, 247, .28),
            0 0 13px rgba(168, 85, 247, .28),
            0 0 30px rgba(124, 58, 237, .14),
            0 13px 32px rgba(0, 0, 0, .28);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(192, 132, 252, .52),
            0 0 23px rgba(168, 85, 247, .52),
            0 0 48px rgba(124, 58, 237, .26),
            0 13px 34px rgba(0, 0, 0, .30);
    }
}

@keyframes l2check-pro-sheen {
    0%, 58% {
        transform: translateX(-145%);
        opacity: 0;
    }
    64% {
        opacity: .9;
    }
    82% {
        transform: translateX(145%);
        opacity: .72;
    }
    100% {
        transform: translateX(145%);
        opacity: 0;
    }
}

@keyframes l2check-pro-badge-shine {
    0%, 55% {
        left: -80%;
        opacity: 0;
    }
    62% {
        opacity: .9;
    }
    82% {
        left: 145%;
        opacity: .75;
    }
    100% {
        left: 145%;
        opacity: 0;
    }
}

/* Motion accessibility and low-power devices. */
@media (prefers-reduced-motion: reduce) {
    .h14-vip-card.promo-tier-pro,
    .anf-card.tier-pro,
    .h14-vip-card.promo-tier-pro::after,
    .anf-card.tier-pro::after,
    .h14-vip-card.promo-tier-pro .h14-vip-media em::after,
    .anf-card.tier-pro .anf-badges .pro::after {
        animation: none !important;
    }
}

/* Keep the glow controlled on narrow screens. */
@media (max-width: 720px) {
    .h14-vip-card.promo-tier-pro,
    .anf-card.tier-pro {
        box-shadow:
            0 0 0 1px rgba(168, 85, 247, .32),
            0 0 14px rgba(168, 85, 247, .28),
            0 10px 26px rgba(0, 0, 0, .24) !important;
    }
}


/* =========================================================
   Project directory (/servers)
   Same Core promotion hierarchy as homepage + announcer.
   ========================================================= */

.s10-project-card.s20-promoted {
    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease,
        filter .22s ease;
}

/* VIP: cool blue, calmest paid tier. */
.s10-project-card.promo-tier-vip {
    border-color: rgba(53, 151, 196, .82) !important;
    box-shadow:
        0 0 0 1px rgba(53, 151, 196, .08),
        0 10px 28px rgba(0, 0, 0, .20) !important;
}
.s10-project-card.promo-tier-vip .s20-project-tier {
    color: #a9e6ff !important;
    border-color: rgba(65, 176, 226, .86) !important;
    background: rgba(8, 48, 68, .94) !important;
    box-shadow: 0 0 10px rgba(65, 176, 226, .12);
}

/* Premium: static gold. */
.s10-project-card.promo-tier-premium {
    border-color: rgba(213, 166, 58, .92) !important;
    box-shadow:
        0 0 0 1px rgba(213, 166, 58, .12),
        0 0 18px rgba(213, 166, 58, .10),
        0 12px 30px rgba(0, 0, 0, .22) !important;
}
.s10-project-card.promo-tier-premium .s20-project-tier {
    color: #ffe09a !important;
    border-color: #d7a63b !important;
    background: rgba(77, 52, 7, .94) !important;
    box-shadow: 0 0 12px rgba(224, 174, 62, .16);
}

/* PRO: strongest project-card treatment. */
.s10-project-card.promo-tier-pro {
    position: relative;
    isolation: isolate;
    border-color: #a855f7 !important;
    box-shadow:
        0 0 0 1px rgba(168, 85, 247, .34),
        0 0 16px rgba(168, 85, 247, .34),
        0 0 36px rgba(124, 58, 237, .18),
        0 13px 32px rgba(0, 0, 0, .28) !important;
    animation: l2check-pro-glow 2.35s ease-in-out infinite;
}

.s10-project-card.promo-tier-pro::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(
            112deg,
            transparent 0%,
            transparent 34%,
            rgba(207, 170, 255, 0) 39%,
            rgba(207, 170, 255, .20) 47%,
            rgba(255, 255, 255, .14) 50%,
            rgba(207, 170, 255, .14) 53%,
            rgba(207, 170, 255, 0) 61%,
            transparent 66%,
            transparent 100%
        );
    transform: translateX(-145%);
    animation: l2check-pro-sheen 3.4s ease-in-out infinite;
}

.s10-project-card.promo-tier-pro:hover {
    border-color: #c084fc !important;
    box-shadow:
        0 0 0 1px rgba(192, 132, 252, .48),
        0 0 22px rgba(168, 85, 247, .46),
        0 0 46px rgba(124, 58, 237, .24),
        0 16px 38px rgba(0, 0, 0, .30) !important;
}

.s10-project-card.promo-tier-pro .s20-project-tier {
    position: relative;
    overflow: hidden;
    color: #f1dcff !important;
    border-color: #b86cff !important;
    background:
        linear-gradient(135deg, rgba(63, 24, 104, .96), rgba(105, 38, 163, .94)) !important;
    box-shadow:
        0 0 8px rgba(184, 108, 255, .48),
        0 0 16px rgba(126, 54, 210, .22);
    text-shadow: 0 0 8px rgba(239, 214, 255, .42);
}

.s10-project-card.promo-tier-pro .s20-project-tier::after {
    content: "";
    position: absolute;
    top: -70%;
    bottom: -70%;
    left: -80%;
    width: 42%;
    transform: rotate(18deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .72),
        transparent
    );
    animation: l2check-pro-badge-shine 2.65s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .s10-project-card.promo-tier-pro,
    .s10-project-card.promo-tier-pro::after,
    .s10-project-card.promo-tier-pro .s20-project-tier::after {
        animation: none !important;
    }
}

@media (max-width: 720px) {
    .s10-project-card.promo-tier-pro {
        box-shadow:
            0 0 0 1px rgba(168, 85, 247, .32),
            0 0 14px rgba(168, 85, 247, .28),
            0 10px 26px rgba(0, 0, 0, .24) !important;
    }
}