/* Supporter banners: CSS art across the top of a public profile, tinted by --profile-accent.
   Shared by the profile page and the banner picker in Account → Supporter. */
.profile-hero .profile-banner { height: 172px; left: 0; -webkit-mask-image: linear-gradient(#000 35%, transparent 95%); mask-image: linear-gradient(#000 35%, transparent 95%); pointer-events: none; position: absolute; right: 0; top: 0; }
.profile-banner--aurora { background: radial-gradient(60% 120% at 15% 0%, rgba(var(--profile-accent), .75), transparent 70%), radial-gradient(50% 110% at 55% 10%, rgba(45, 212, 191, .45), transparent 70%), radial-gradient(45% 120% at 90% 0%, rgba(168, 85, 247, .6), transparent 70%), linear-gradient(180deg, rgba(var(--profile-accent), .25), transparent); }
.profile-banner--filmstrip { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .4) 0 12px, transparent 12px 30px) 0 12px / 100% 10px no-repeat, repeating-linear-gradient(90deg, rgba(255, 255, 255, .4) 0 12px, transparent 12px 30px) 0 98px / 100% 10px no-repeat, repeating-linear-gradient(90deg, rgba(var(--profile-accent), .42) 0 150px, rgba(var(--profile-accent), .12) 150px 156px) 0 0 / 100% 120px no-repeat, linear-gradient(180deg, rgba(var(--profile-accent), .18), transparent); }
.profile-banner--pixels { background: conic-gradient(rgba(var(--profile-accent), .5) 25%, rgba(var(--profile-accent), .14) 0 50%, rgba(var(--profile-accent), .32) 0 75%, rgba(var(--profile-accent), .06) 0) 0 0 / 28px 28px; }
.profile-banner--pages { background: repeating-linear-gradient(180deg, transparent 0 26px, rgba(var(--profile-accent), .55) 26px 28px), linear-gradient(90deg, transparent 0 9%, rgba(244, 114, 182, .55) 9% calc(9% + 2px), transparent 0), linear-gradient(180deg, rgba(var(--profile-accent), .3), rgba(var(--profile-accent), .1)); }
.profile-banner--vinyl { background: radial-gradient(circle at 82% 50%, rgb(var(--profile-accent)) 0 22px, #0b0a18 23px 26px, transparent 27px), repeating-radial-gradient(circle at 82% 50%, rgba(255, 255, 255, .1) 0 1px, transparent 2px 6px), radial-gradient(circle at 82% 50%, rgba(10, 9, 20, .95) 0 170px, transparent 171px), linear-gradient(110deg, rgba(var(--profile-accent), .6), rgba(var(--profile-accent), .15)); }
.profile-banner--stars { background: radial-gradient(1.5px 1.5px at 12% 30%, #fff, transparent), radial-gradient(1px 1px at 28% 70%, #fff, transparent), radial-gradient(2px 2px at 44% 22%, rgba(var(--profile-accent), 1), transparent), radial-gradient(1px 1px at 58% 58%, #fff, transparent), radial-gradient(1.5px 1.5px at 73% 18%, #fff, transparent), radial-gradient(2px 2px at 86% 64%, rgba(var(--profile-accent), 1), transparent), radial-gradient(1px 1px at 94% 30%, #fff, transparent), radial-gradient(70% 140% at 70% 0%, rgba(var(--profile-accent), .55), transparent 70%), #07061a; background-size: 220px 140px, 260px 170px, 300px 150px, 180px 120px, 240px 160px, 280px 140px, 200px 130px, 100% 100%, 100% 100%; }
@media (max-width: 640px) { .profile-hero .profile-banner { height: 132px; } }