/* =========================================================
   MONTHLY PREMIUM BANNERS
   JANUARY → DECEMBER
========================================================= */

/* =========================================================
   JANUARY — WINTER / ICE
========================================================= */

.banner-january{
background:linear-gradient(
135deg,
#0f172a,
#1d4ed8,
#38bdf8,
#dbeafe
);
background-size:300% 300%;
animation:januaryFlow 10s ease infinite;
position:relative;
overflow:hidden;
}

.banner-january::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 20% 30%,rgba(255,255,255,.16),transparent 25%),
radial-gradient(circle at 80% 70%,rgba(255,255,255,.10),transparent 30%);
pointer-events:none;
z-index:1;
}

@keyframes januaryFlow{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.motm-card[data-banner="banner-january"]:hover,
.motm-featured:has(.banner-january):hover,
.motm-modal-content.banner-january:hover{
box-shadow:
0 0 0 3px #38bdf8,
0 0 18px rgba(56,189,248,.45),
0 18px 40px rgba(0,0,0,.35);
}


/* =========================================================
   FEBRUARY — VALENTINE
========================================================= */

.banner-february{
background:linear-gradient(
135deg,
#881337,
#db2777,
#f472b6,
#fecdd3
);
background-size:300% 300%;
animation:februaryFlow 10s ease infinite;
position:relative;
overflow:hidden;
}

.banner-february::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 25% 30%,rgba(255,255,255,.15),transparent 25%),
radial-gradient(circle at 75% 70%,rgba(255,255,255,.10),transparent 30%);
pointer-events:none;
z-index:1;
}

@keyframes februaryFlow{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.motm-card[data-banner="banner-february"]:hover,
.motm-featured:has(.banner-february):hover,
.motm-modal-content.banner-february:hover{
box-shadow:
0 0 0 3px #f472b6,
0 0 18px rgba(244,114,182,.45),
0 18px 40px rgba(0,0,0,.35);
}


/* =========================================================
   MARCH — SPRING / EMERALD
========================================================= */

.banner-march{
background:linear-gradient(
135deg,
#064e3b,
#059669,
#34d399,
#a7f3d0
);
background-size:300% 300%;
animation:marchFlow 10s ease infinite;
position:relative;
overflow:hidden;
}

.banner-march::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 20% 30%,rgba(255,255,255,.16),transparent 25%),
radial-gradient(circle at 80% 70%,rgba(255,255,255,.10),transparent 30%);
pointer-events:none;
z-index:1;
}

@keyframes marchFlow{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.motm-card[data-banner="banner-march"]:hover,
.motm-featured:has(.banner-march):hover,
.motm-modal-content.banner-march:hover{
box-shadow:
0 0 0 3px #34d399,
0 0 18px rgba(52,211,153,.45),
0 18px 40px rgba(0,0,0,.35);
}


/* =========================================================
   APRIL — BLOSSOM
========================================================= */

.banner-april{
background:linear-gradient(
135deg,
#c026d3,
#e879f9,
#f9a8d4,
#fce7f3
);
background-size:300% 300%;
animation:aprilFlow 10s ease infinite;
position:relative;
overflow:hidden;
}

.banner-april::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 30% 25%,rgba(255,255,255,.14),transparent 25%),
radial-gradient(circle at 75% 75%,rgba(255,255,255,.10),transparent 30%);
pointer-events:none;
z-index:1;
}

@keyframes aprilFlow{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.motm-card[data-banner="banner-april"]:hover,
.motm-featured:has(.banner-april):hover,
.motm-modal-content.banner-april:hover{
box-shadow:
0 0 0 3px #f9a8d4,
0 0 18px rgba(249,168,212,.45),
0 18px 40px rgba(0,0,0,.35);
}


/* =========================================================
   MAY — FLOWER GARDEN
========================================================= */

.banner-may{
background:linear-gradient(
135deg,
#15803d,
#22c55e,
#86efac,
#fef9c3
);
background-size:300% 300%;
animation:mayFlow 10s ease infinite;
position:relative;
overflow:hidden;
}

.banner-may::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 20% 20%,rgba(255,255,255,.14),transparent 25%),
radial-gradient(circle at 80% 80%,rgba(255,255,255,.08),transparent 30%);
pointer-events:none;
z-index:1;
}

@keyframes mayFlow{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.motm-card[data-banner="banner-may"]:hover,
.motm-featured:has(.banner-may):hover,
.motm-modal-content.banner-may:hover{
box-shadow:
0 0 0 3px #4ade80,
0 0 18px rgba(74,222,128,.45),
0 18px 40px rgba(0,0,0,.35);
}


/* =========================================================
   JUNE — SUMMER SKY
========================================================= */

.banner-june{
background:linear-gradient(
135deg,
#0f766e,
#06b6d4,
#67e8f9,
#fef08a
);
background-size:300% 300%;
animation:juneFlow 10s ease infinite;
position:relative;
overflow:hidden;
}

.banner-june::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 25% 20%,rgba(255,255,255,.16),transparent 25%),
radial-gradient(circle at 75% 80%,rgba(255,255,255,.08),transparent 30%);
pointer-events:none;
z-index:1;
}

@keyframes juneFlow{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.motm-card[data-banner="banner-june"]:hover,
.motm-featured:has(.banner-june):hover,
.motm-modal-content.banner-june:hover{
box-shadow:
0 0 0 3px #22d3ee,
0 0 18px rgba(34,211,238,.45),
0 18px 40px rgba(0,0,0,.35);
}


/* =========================================================
   JULY — FIREWORKS
========================================================= */

.banner-july{
background:linear-gradient(
135deg,
#7f1d1d,
#dc2626,
#f59e0b,
#fde68a
);
background-size:300% 300%;
animation:julyFlow 10s ease infinite;
position:relative;
overflow:hidden;
}

.banner-july::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 30% 30%,rgba(255,255,255,.16),transparent 25%),
radial-gradient(circle at 70% 70%,rgba(255,255,255,.08),transparent 30%);
pointer-events:none;
z-index:1;
}

@keyframes julyFlow{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.motm-card[data-banner="banner-july"]:hover,
.motm-featured:has(.banner-july):hover,
.motm-modal-content.banner-july:hover{
box-shadow:
0 0 0 3px #f59e0b,
0 0 18px rgba(245,158,11,.45),
0 18px 40px rgba(0,0,0,.35);
}


/* =========================================================
   AUGUST — SUNSET
========================================================= */

.banner-august{
background:linear-gradient(
135deg,
#9a3412,
#f97316,
#fb7185,
#fde68a
);
background-size:300% 300%;
animation:augustFlow 10s ease infinite;
position:relative;
overflow:hidden;
}

.banner-august::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 25% 25%,rgba(255,255,255,.14),transparent 25%),
radial-gradient(circle at 80% 75%,rgba(255,255,255,.08),transparent 30%);
pointer-events:none;
z-index:1;
}

@keyframes augustFlow{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.motm-card[data-banner="banner-august"]:hover,
.motm-featured:has(.banner-august):hover,
.motm-modal-content.banner-august:hover{
box-shadow:
0 0 0 3px #fb7185,
0 0 18px rgba(251,113,133,.45),
0 18px 40px rgba(0,0,0,.35);
}


/* =========================================================
   SEPTEMBER — AUTUMN
========================================================= */

.banner-september{
background:linear-gradient(
135deg,
#78350f,
#b45309,
#f59e0b,
#fde68a
);
background-size:300% 300%;
animation:septemberFlow 10s ease infinite;
position:relative;
overflow:hidden;
}

.banner-september::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 20% 30%,rgba(255,255,255,.12),transparent 25%),
radial-gradient(circle at 80% 70%,rgba(255,255,255,.08),transparent 30%);
pointer-events:none;
z-index:1;
}

@keyframes septemberFlow{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.motm-card[data-banner="banner-september"]:hover,
.motm-featured:has(.banner-september):hover,
.motm-modal-content.banner-september:hover{
box-shadow:
0 0 0 3px #f59e0b,
0 0 18px rgba(245,158,11,.45),
0 18px 40px rgba(0,0,0,.35);
}


/* =========================================================
   OCTOBER — HALLOWEEN
========================================================= */

.banner-october{
background:linear-gradient(
135deg,
#3b0764,
#7c3aed,
#ea580c,
#fdba74
);
background-size:300% 300%;
animation:octoberFlow 10s ease infinite;
position:relative;
overflow:hidden;
}

.banner-october::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 20% 25%,rgba(255,255,255,.12),transparent 25%),
radial-gradient(circle at 80% 75%,rgba(255,255,255,.08),transparent 30%);
pointer-events:none;
z-index:1;
}

@keyframes octoberFlow{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.motm-card[data-banner="banner-october"]:hover,
.motm-featured:has(.banner-october):hover,
.motm-modal-content.banner-october:hover{
box-shadow:
0 0 0 3px #ea580c,
0 0 18px rgba(234,88,12,.45),
0 18px 40px rgba(0,0,0,.35);
}


/* =========================================================
   NOVEMBER — COZY
========================================================= */

.banner-november{
background:linear-gradient(
135deg,
#451a03,
#92400e,
#d97706,
#fde68a
);
background-size:300% 300%;
animation:novemberFlow 10s ease infinite;
position:relative;
overflow:hidden;
}

.banner-november::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 25% 20%,rgba(255,255,255,.10),transparent 25%),
radial-gradient(circle at 75% 75%,rgba(255,255,255,.06),transparent 30%);
pointer-events:none;
z-index:1;
}

@keyframes novemberFlow{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.motm-card[data-banner="banner-november"]:hover,
.motm-featured:has(.banner-november):hover,
.motm-modal-content.banner-november:hover{
box-shadow:
0 0 0 3px #d97706,
0 0 18px rgba(217,119,6,.45),
0 18px 40px rgba(0,0,0,.35);
}


/* =========================================================
   DECEMBER — CHRISTMAS
========================================================= */

.banner-december{
background:linear-gradient(
135deg,
#14532d,
#16a34a,
#dc2626,
#fee2e2
);
background-size:300% 300%;
animation:decemberFlow 10s ease infinite;
position:relative;
overflow:hidden;
}

.banner-december::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 20% 30%,rgba(255,255,255,.14),transparent 25%),
radial-gradient(circle at 80% 70%,rgba(255,255,255,.08),transparent 30%);
pointer-events:none;
z-index:1;
}

@keyframes decemberFlow{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.motm-card[data-banner="banner-december"]:hover,
.motm-featured:has(.banner-december):hover,
.motm-modal-content.banner-december:hover{
box-shadow:
0 0 0 3px #16a34a,
0 0 18px rgba(22,163,74,.45),
0 18px 40px rgba(0,0,0,.35);
}


/* =========================================================
   FIXES / LAYERING
========================================================= */

.motm-card img,
.motm-featured-avatar,
.motm-modal-avatar{
position:relative;
z-index:10;
}

.motm-banner,
.motm-featured-banner,
.motm-modal-banner{
position:relative;
z-index:1;
}

.motm-close{
position:absolute;
right:15px;
top:10px;
z-index:50;
}

/* ================= MODAL BANNER HOVER GLOW ================= */

.motm-modal-content.banner-january:hover{
box-shadow:
0 0 0 3px #38bdf8,
0 0 18px rgba(56,189,248,.45),
0 18px 40px rgba(0,0,0,.35);
}

.motm-modal-content.banner-february:hover{
box-shadow:
0 0 0 3px #f472b6,
0 0 18px rgba(244,114,182,.45),
0 18px 40px rgba(0,0,0,.35);
}

.motm-modal-content.banner-march:hover{
box-shadow:
0 0 0 3px #34d399,
0 0 18px rgba(52,211,153,.45),
0 18px 40px rgba(0,0,0,.35);
}

.motm-modal-content.banner-april:hover{
box-shadow:
0 0 0 3px #f9a8d4,
0 0 18px rgba(249,168,212,.45),
0 18px 40px rgba(0,0,0,.35);
}

.motm-modal-content.banner-may:hover{
box-shadow:
0 0 0 3px #4ade80,
0 0 18px rgba(74,222,128,.45),
0 18px 40px rgba(0,0,0,.35);
}

.motm-modal-content.banner-june:hover{
box-shadow:
0 0 0 3px #22d3ee,
0 0 18px rgba(34,211,238,.45),
0 18px 40px rgba(0,0,0,.35);
}

.motm-modal-content.banner-july:hover{
box-shadow:
0 0 0 3px #f59e0b,
0 0 18px rgba(245,158,11,.45),
0 18px 40px rgba(0,0,0,.35);
}

.motm-modal-content.banner-august:hover{
box-shadow:
0 0 0 3px #fb7185,
0 0 18px rgba(251,113,133,.45),
0 18px 40px rgba(0,0,0,.35);
}

.motm-modal-content.banner-september:hover{
box-shadow:
0 0 0 3px #f59e0b,
0 0 18px rgba(245,158,11,.45),
0 18px 40px rgba(0,0,0,.35);
}

.motm-modal-content.banner-october:hover{
box-shadow:
0 0 0 3px #ea580c,
0 0 18px rgba(234,88,12,.45),
0 18px 40px rgba(0,0,0,.35);
}

.motm-modal-content.banner-november:hover{
box-shadow:
0 0 0 3px #d97706,
0 0 18px rgba(217,119,6,.45),
0 18px 40px rgba(0,0,0,.35);
}

.motm-modal-content.banner-december:hover{
box-shadow:
0 0 0 3px #16a34a,
0 0 18px rgba(22,163,74,.45),
0 18px 40px rgba(0,0,0,.35);
}

/* =========================================================
   FIXES / LAYERING
========================================================= */

.motm-card img,
.motm-featured-avatar,
.motm-modal-avatar{
position:relative;
z-index:10;
}

.motm-banner,
.motm-featured-banner,
.motm-modal-banner{
position:relative;
z-index:1;
}

/* KEEP MODAL BACKGROUND NORMAL */
.motm-modal-content{
background:var(--card-bg);
position:relative;
overflow:hidden;
transition:
transform .25s ease,
box-shadow .25s ease;
}

/* CLOSE BUTTON FIX */
.motm-close{
position:absolute;
right:15px;
top:10px;
z-index:50;
font-size:22px;
cursor:pointer;
color:white;
text-shadow:0 2px 8px rgba(0,0,0,.45);
transition:.25s;
}

.motm-close:hover{
color:#ff6b6b;
transform:rotate(90deg);
}

/* =========================================================
   MODAL HOVER GLOW
   (THIS IS THE IMPORTANT FIX)
========================================================= */

/* JANUARY */

.motm-modal-content:has(.motm-modal-banner.banner-january):hover{
box-shadow:
0 0 0 3px #38bdf8,
0 0 18px rgba(56,189,248,.45),
0 18px 40px rgba(0,0,0,.35);
}

/* FEBRUARY */

.motm-modal-content:has(.motm-modal-banner.banner-february):hover{
box-shadow:
0 0 0 3px #f472b6,
0 0 18px rgba(244,114,182,.45),
0 18px 40px rgba(0,0,0,.35);
}

/* MARCH */

.motm-modal-content:has(.motm-modal-banner.banner-march):hover{
box-shadow:
0 0 0 3px #34d399,
0 0 18px rgba(52,211,153,.45),
0 18px 40px rgba(0,0,0,.35);
}

/* APRIL */

.motm-modal-content:has(.motm-modal-banner.banner-april):hover{
box-shadow:
0 0 0 3px #f9a8d4,
0 0 18px rgba(249,168,212,.45),
0 18px 40px rgba(0,0,0,.35);
}

/* MAY */

.motm-modal-content:has(.motm-modal-banner.banner-may):hover{
box-shadow:
0 0 0 3px #4ade80,
0 0 18px rgba(74,222,128,.45),
0 18px 40px rgba(0,0,0,.35);
}

/* JUNE */

.motm-modal-content:has(.motm-modal-banner.banner-june):hover{
box-shadow:
0 0 0 3px #22d3ee,
0 0 18px rgba(34,211,238,.45),
0 18px 40px rgba(0,0,0,.35);
}

/* JULY */

.motm-modal-content:has(.motm-modal-banner.banner-july):hover{
box-shadow:
0 0 0 3px #f59e0b,
0 0 18px rgba(245,158,11,.45),
0 18px 40px rgba(0,0,0,.35);
}

/* AUGUST */

.motm-modal-content:has(.motm-modal-banner.banner-august):hover{
box-shadow:
0 0 0 3px #fb7185,
0 0 18px rgba(251,113,133,.45),
0 18px 40px rgba(0,0,0,.35);
}

/* SEPTEMBER */

.motm-modal-content:has(.motm-modal-banner.banner-september):hover{
box-shadow:
0 0 0 3px #f59e0b,
0 0 18px rgba(245,158,11,.45),
0 18px 40px rgba(0,0,0,.35);
}

/* OCTOBER */

.motm-modal-content:has(.motm-modal-banner.banner-october):hover{
box-shadow:
0 0 0 3px #ea580c,
0 0 18px rgba(234,88,12,.45),
0 18px 40px rgba(0,0,0,.35);
}

/* NOVEMBER */

.motm-modal-content:has(.motm-modal-banner.banner-november):hover{
box-shadow:
0 0 0 3px #d97706,
0 0 18px rgba(217,119,6,.45),
0 18px 40px rgba(0,0,0,.35);
}

/* DECEMBER */

.motm-modal-content:has(.motm-modal-banner.banner-december):hover{
box-shadow:
0 0 0 3px #16a34a,
0 0 18px rgba(22,163,74,.45),
0 18px 40px rgba(0,0,0,.35);
}

/* =========================================================
   PREMIUM MODAL EFFECTS
========================================================= */

.motm-modal-content:hover{
transform:scale(1.01);
}

.motm-modal-avatar:hover{
transform:scale(1.07);
}

.motm-modal-name:hover{
color:var(--accent-color);
}

/* =========================================================
   REMOVE OLD BROKEN CLASS-BASED MODAL COLORS
========================================================= */

/* DELETE EVERYTHING LIKE THIS:
.motm-modal-content.banner-january:hover
.motm-modal-content.banner-february:hover
etc

THE :has() VERSION ABOVE REPLACES IT
*/

.banner-january::after{
content:"❄️ ✦ ❄️ ✦ ❄️";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:space-around;
font-size:22px;
opacity:.14;
animation:januarySnow 18s linear infinite;
pointer-events:none;
z-index:2;
filter:blur(.2px);
}

@keyframes januarySnow{
0%{
transform:translateY(-10px) translateX(0px);
}
50%{
transform:translateY(10px) translateX(8px);
}
100%{
transform:translateY(-10px) translateX(0px);
}
}

.banner-february::after{
content:"💖 ✨ 💕 ✨ 💖";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:space-evenly;
font-size:20px;
opacity:.12;
animation:februaryFloat 16s ease-in-out infinite;
pointer-events:none;
z-index:2;
}

@keyframes februaryFloat{
0%{
transform:translateY(0px);
}
50%{
transform:translateY(-8px);
}
100%{
transform:translateY(0px);
}
}

/* =========================================================
   MARCH — SPRING / EMERALD
========================================================= */

.banner-march::after{
content:"🍀 ✨ 🌿 ✨ 🍀";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:space-around;
font-size:21px;
opacity:.12;
animation:marchBloom 17s ease-in-out infinite;
pointer-events:none;
z-index:2;
filter:blur(.2px);
}

@keyframes marchBloom{
0%{
transform:translateY(0px) translateX(0px);
}
50%{
transform:translateY(-8px) translateX(6px);
}
100%{
transform:translateY(0px) translateX(0px);
}
}


/* =========================================================
   APRIL — BLOSSOM
========================================================= */

.banner-april::after{
content:"🌸 ✨ 🌺 ✨ 🌸";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:space-evenly;
font-size:22px;
opacity:.13;
animation:aprilPetals 15s ease-in-out infinite;
pointer-events:none;
z-index:2;
}

@keyframes aprilPetals{
0%{
transform:translateY(-6px);
}
50%{
transform:translateY(8px);
}
100%{
transform:translateY(-6px);
}
}


/* =========================================================
   MAY — FLOWER GARDEN
========================================================= */

.banner-may::after{
content:"🌼 ✨ 🌷 ✨ 🌼";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:space-around;
font-size:21px;
opacity:.12;
animation:mayGarden 16s ease-in-out infinite;
pointer-events:none;
z-index:2;
}

@keyframes mayGarden{
0%{
transform:translateX(0px);
}
50%{
transform:translateX(10px);
}
100%{
transform:translateX(0px);
}
}


/* =========================================================
   JUNE — SUMMER SKY
========================================================= */

.banner-june::after{
content:"☀️ ✨ 🌊 ✨ ☀️";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:space-evenly;
font-size:22px;
opacity:.11;
animation:juneWave 18s ease-in-out infinite;
pointer-events:none;
z-index:2;
}

@keyframes juneWave{
0%{
transform:translateY(0px);
}
50%{
transform:translateY(-10px);
}
100%{
transform:translateY(0px);
}
}


/* =========================================================
   JULY — FIREWORKS
========================================================= */

.banner-july::after{
content:"🎆 ✨ 🎇 ✨ 🎆";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:space-around;
font-size:22px;
opacity:.14;
animation:julyFireworks 14s ease-in-out infinite;
pointer-events:none;
z-index:2;
}

@keyframes julyFireworks{
0%{
transform:scale(1) translateY(0px);
}
50%{
transform:scale(1.08) translateY(-6px);
}
100%{
transform:scale(1) translateY(0px);
}
}


/* =========================================================
   AUGUST — SUNSET
========================================================= */

.banner-august::after{
content:"🌅 ✨ ☀️ ✨ 🌴";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:space-evenly;
font-size:22px;
opacity:.12;
animation:augustSunset 20s ease-in-out infinite;
pointer-events:none;
z-index:2;
}

@keyframes augustSunset{
0%{
transform:translateX(-6px);
}
50%{
transform:translateX(6px);
}
100%{
transform:translateX(-6px);
}
}


/* =========================================================
   SEPTEMBER — AUTUMN
========================================================= */

.banner-september::after{
content:"🍂 ✨ 🍁 ✨ 🍂";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:space-around;
font-size:22px;
opacity:.13;
animation:septemberLeaves 17s ease-in-out infinite;
pointer-events:none;
z-index:2;
}

@keyframes septemberLeaves{
0%{
transform:translateY(-4px) rotate(0deg);
}
50%{
transform:translateY(8px) rotate(3deg);
}
100%{
transform:translateY(-4px) rotate(0deg);
}
}


/* =========================================================
   OCTOBER — HALLOWEEN
========================================================= */

.banner-october::after{
content:"🎃 ✨ 👻 ✨ 🎃";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:space-evenly;
font-size:22px;
opacity:.14;
animation:octoberSpooky 15s ease-in-out infinite;
pointer-events:none;
z-index:2;
}

@keyframes octoberSpooky{
0%{
transform:translateY(0px);
}
50%{
transform:translateY(-10px);
}
100%{
transform:translateY(0px);
}
}


/* =========================================================
   NOVEMBER — COZY
========================================================= */

.banner-november::after{
content:"☕ ✨ 🍂 ✨ 🕯️";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:space-around;
font-size:21px;
opacity:.11;
animation:novemberCozy 18s ease-in-out infinite;
pointer-events:none;
z-index:2;
}

@keyframes novemberCozy{
0%{
transform:translateX(0px);
}
50%{
transform:translateX(8px);
}
100%{
transform:translateX(0px);
}
}


/* =========================================================
   DECEMBER — CHRISTMAS
========================================================= */

.banner-december::after{
content:"🎄 ✨ ❄️ ✨ 🎁";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:space-evenly;
font-size:22px;
opacity:.14;
animation:decemberMagic 16s ease-in-out infinite;
pointer-events:none;
z-index:2;
}

@keyframes decemberMagic{
0%{
transform:translateY(0px) scale(1);
}
50%{
transform:translateY(-8px) scale(1.05);
}
100%{
transform:translateY(0px) scale(1);
}
}

/* =========================================================
   LEGENDARY — GOD TIER FEATURED BANNER
========================================================= */

.banner-legendary{
background:
linear-gradient(
135deg,
#050816,
#1e1b4b,
#6d28d9,
#facc15,
#fff3b0
);
background-size:400% 400%;
animation:legendaryFlow 14s ease infinite;
position:relative;
overflow:hidden;
isolation:isolate;
}

/* =========================================================
   AURORA LIGHT OVERLAY
========================================================= */

.banner-legendary::before{
content:"";
position:absolute;
inset:-20%;
background:
radial-gradient(circle at 20% 30%,rgba(255,255,255,.22),transparent 22%),
radial-gradient(circle at 80% 70%,rgba(250,204,21,.18),transparent 28%),
radial-gradient(circle at 50% 50%,rgba(168,85,247,.12),transparent 35%);
mix-blend-mode:screen;
animation:legendaryAura 12s ease-in-out infinite;
pointer-events:none;
z-index:1;
filter:blur(10px);
}

/* =========================================================
   PREMIUM ICON PARTICLES
========================================================= */

.banner-legendary::after{
content:"👑 ✦ ⚜️ ✦ 💎 ✦ 👑";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:space-evenly;
font-size:25px;
letter-spacing:12px;
opacity:.18;
pointer-events:none;
z-index:3;

animation:
legendaryIcons 8s ease-in-out infinite,
legendaryGlow 4s ease-in-out infinite;
}

/* =========================================================
   FLOWING GRADIENT
========================================================= */

@keyframes legendaryFlow{

0%{
background-position:0% 50%;
}

25%{
background-position:50% 0%;
}

50%{
background-position:100% 50%;
}

75%{
background-position:50% 100%;
}

100%{
background-position:0% 50%;
}

}

/* =========================================================
   AURORA MOVEMENT
========================================================= */

@keyframes legendaryAura{

0%{
transform:translateX(-2%) translateY(0%) rotate(0deg);
opacity:.75;
}

50%{
transform:translateX(2%) translateY(-2%) rotate(2deg);
opacity:1;
}

100%{
transform:translateX(-2%) translateY(0%) rotate(0deg);
opacity:.75;
}

}

/* =========================================================
   ICON FLOATING
========================================================= */

@keyframes legendaryIcons{

0%{
transform:
translateY(0px)
scale(1)
rotate(0deg);
}

25%{
transform:
translateY(-4px)
scale(1.04)
rotate(-2deg);
}

50%{
transform:
translateY(-10px)
scale(1.08)
rotate(2deg);
}

75%{
transform:
translateY(-4px)
scale(1.04)
rotate(-1deg);
}

100%{
transform:
translateY(0px)
scale(1)
rotate(0deg);
}

}

/* =========================================================
   SHIMMERING GLOW
========================================================= */

@keyframes legendaryGlow{

0%{
filter:
drop-shadow(0 0 4px rgba(255,255,255,.2))
drop-shadow(0 0 10px rgba(250,204,21,.2));
}

50%{
filter:
drop-shadow(0 0 10px rgba(255,255,255,.55))
drop-shadow(0 0 24px rgba(250,204,21,.6));
}

100%{
filter:
drop-shadow(0 0 4px rgba(255,255,255,.2))
drop-shadow(0 0 10px rgba(250,204,21,.2));
}

}

/* =========================================================
   FEATURED CARD + MODAL HOVER GLOW
========================================================= */

.motm-card[data-banner="banner-legendary"]:hover,
.motm-featured:has(.banner-legendary):hover,
.motm-modal-content:has(.motm-modal-banner.banner-legendary):hover{

box-shadow:
0 0 0 2px rgba(250,204,21,.9),
0 0 20px rgba(250,204,21,.35),
0 0 45px rgba(168,85,247,.25),
0 22px 50px rgba(0,0,0,.45);

transform:translateY(-3px);

}

/* =========================================================
   GOLD AVATAR RING ONLY
   (NO WHITE OUTLINE)
========================================================= */

.motm-modal-content:has(.motm-modal-banner.banner-legendary) .motm-modal-avatar,
.banner-legendary ~ .motm-featured-content .motm-featured-avatar{

border:4px solid #facc15;

box-shadow:
0 0 12px rgba(250,204,21,.55),
0 0 28px rgba(250,204,21,.35);

transition:
transform .25s ease,
box-shadow .25s ease,
border-color .25s ease;

}

/* =========================================================
   AVATAR HOVER EFFECT
========================================================= */

.motm-modal-content:has(.motm-modal-banner.banner-legendary) .motm-modal-avatar:hover,
.banner-legendary ~ .motm-featured-content .motm-featured-avatar:hover{

transform:scale(1.08);

border-color:#ffe27a;

box-shadow:
0 0 18px rgba(250,204,21,.75),
0 0 38px rgba(250,204,21,.5),
0 0 55px rgba(255,255,255,.12);

}

/* =========================================================
   OPTIONAL GOLD SHIMMER SWEEP
========================================================= */

.banner-legendary .shine,
.motm-modal-banner.banner-legendary .shine{
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.22),
transparent
);
transform:skewX(-25deg);
animation:legendarySweep 6s linear infinite;
pointer-events:none;
z-index:4;
}

@keyframes legendarySweep{

0%{
left:-120%;
}

100%{
left:140%;
}

}