/* Marvel Rivals theme — comic-book impact red, heroic energy blue, cosmic convergence purple.
   Load with assets/hub.css or assets/article.css.
   Page must also load Google Fonts: Anton + Barlow. */
:root{
  --c1:#e0212f;    /* comic-book impact red */
  --c1b:#ff4d5e;
  --c2:#2f8fe0;    /* heroic energy blue */
  --c3:#7b2ff7;    /* cosmic convergence purple */
  --bg:#08080c;
  --bg2:#100b14;
  --glass:rgba(224,33,47,0.07);
  --glass-brd:rgba(224,33,47,0.22);
  --font-head:'Anton',sans-serif;
  --font-body:'Barlow',sans-serif;
}
/* clashing hero energy: red/blue/purple sparks drifting over a dark arena */
.bg{background:
  radial-gradient(55% 48% at 50% 18%, color-mix(in srgb,var(--c1) 22%,transparent), transparent 62%),
  var(--bg)}
.bg::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(2px 2px at 22% 30%, var(--c1b), transparent 60%),
    radial-gradient(2px 2px at 72% 22%, var(--c2), transparent 60%),
    radial-gradient(1.5px 1.5px at 48% 60%, var(--c3), transparent 60%),
    radial-gradient(2px 2px at 82% 50%, var(--c1b), transparent 60%),
    radial-gradient(1.5px 1.5px at 34% 76%, var(--c2), transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 82%, var(--c3), transparent 60%);
  opacity:.45;animation:emb 10s ease-in-out infinite alternate}
@keyframes emb{from{transform:translateY(0);opacity:.3}to{transform:translateY(-20px);opacity:.55}}
.bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 85% at 50% 0%, transparent 50%, rgba(0,0,0,.65) 100%)}
/* comic-poster impact: tight uppercase headings, wide tracking on labels */
.hero h1,h2.title{letter-spacing:-.02em}
.eyebrow,.kicker,.card .tag,.brand{letter-spacing:.26em}