/* cosmetics.css — frames (SVG rings around the avatar), banners (little
   scenes) and profile effects. Everything moves with CSS animations. */
.cx-avatar { position: relative; display: inline-block; border-radius: 50%; box-sizing: border-box; flex: none; }
.cx-avatar-inner { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; position: relative; z-index: 2; }
.cx-avatar-inner span { font-size: calc(var(--sz, 64px) * .42); line-height: 1; }
.cx-avatar-inner img { width: 100%; height: 100%; object-fit: cover; }

/* Frames: the ring layer is 136% of the avatar, centred; the photo is never painted. */
.cx-ring { position: absolute; left: -18%; top: -18%; width: 136%; height: 136%; z-index: 3; pointer-events: none; overflow: visible; }
.cx-ring .cx-spin { transform-origin: 50px 50px; animation: cx-spin 9s linear infinite; }
.cx-ring .cx-spin-rev { transform-origin: 50px 50px; animation: cx-spin 14s linear infinite reverse; }
.cx-ring .cx-flicker { animation: cx-flicker 3.2s steps(1) infinite; }
.cx-ring .cx-sway { transform-origin: 20px 10px; animation: cx-sway 4.5s ease-in-out infinite alternate; }
.cx-ring .cx-fall { animation: cx-fall 5s ease-in infinite; }
.cx-ring .cx-tongue { transform-box: fill-box; transform-origin: 50% 100%; animation: cx-tongue .9s ease-in-out infinite alternate; }
.cx-ring .cx-twinkle { transform-box: fill-box; transform-origin: center; animation: cx-twinkle 2.4s ease-in-out infinite; }
.cx-ring .cx-bob { animation: cx-bob 3s ease-in-out infinite; }
.cx-ring .cx-spin-slow { transform-origin: 50px 50px; animation: cx-spin 7s linear infinite; }
.cx-ring .cx-flap { animation: cx-flap 3.6s ease-in-out infinite alternate; }
.cx-ring .cx-steam { animation: cx-steam 4.6s ease-in-out infinite; }
.cx-ring .cx-drip { animation: cx-drip 3.4s ease-in infinite; }
@keyframes cx-spin { to { transform: rotate(360deg); } }
@keyframes cx-flicker { 0%, 100% { opacity: 1; } 46% { opacity: 1; } 47% { opacity: .35; } 49% { opacity: 1; } 51% { opacity: .5; } 53% { opacity: 1; } }
@keyframes cx-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes cx-fall { 0% { transform: translate(0, -6px) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(-10px, 40px) rotate(160deg); opacity: 0; } }
@keyframes cx-tongue { from { transform: scaleY(.75) scaleX(1.05); opacity: .85; } to { transform: scaleY(1.15) scaleX(.9); opacity: 1; } }
@keyframes cx-twinkle { 0%, 100% { transform: scale(.2); opacity: 0; } 50% { transform: scale(1); opacity: 1; } }
@keyframes cx-flap { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
@keyframes cx-steam { 0% { transform: translateY(2px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(-5px); opacity: 0; } }
@keyframes cx-drip { 0% { transform: translateY(-3px); opacity: .95; } 70% { opacity: .95; } 100% { transform: translateY(6px); opacity: 0; } }
@keyframes cx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }

/* Banners */
.cx-banner { position: relative; width: 100%; height: 100%; overflow: hidden; background: #0C0B09; isolation: isolate; }
.cx-banner .cx-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cx-banner .cx-breathe { animation: cx-breathe 6s ease-in-out infinite alternate; }
.cx-banner .cx-shimmer { animation: cx-shimmer 7s ease-in-out infinite alternate; }
.cx-banner .cx-pulse { animation: cx-pulse 2.6s ease-in-out infinite alternate; }
.cx-banner .cx-drift-slow { animation: cx-drift-x 30s linear infinite alternate; }
.cx-banner .cx-sway-slow { transform-origin: 390px 0; animation: cx-sway 6s ease-in-out infinite alternate; }
.cx-banner .cx-aurora { animation: cx-aurora 9s ease-in-out infinite alternate; }
.cx-banner .cx-aurora.a2 { animation-duration: 12s; animation-delay: -4s; }
.cx-banner .cx-aurora.a3 { animation-duration: 15s; animation-delay: -7s; }
.cx-banner .cx-wave { animation: cx-wave 9s linear infinite; }
.cx-banner .cx-wave.w2 { animation-duration: 14s; }
.cx-grid-floor {
  position: absolute; left: -60%; right: -60%; top: 56%; height: 110%; transform-origin: 50% 0;
  transform: perspective(160px) rotateX(62deg);
  background-image: linear-gradient(rgba(34, 211, 238, .9) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(34, 211, 238, .9) 1.5px, transparent 1.5px);
  background-size: 34px 34px; animation: cx-grid 1.4s linear infinite;
  -webkit-mask: linear-gradient(transparent, #000 35%); mask: linear-gradient(transparent, #000 35%);
}
.cx-shooting {
  position: absolute; top: 18%; left: 70%; width: 70px; height: 2px; border-radius: 2px; transform: rotate(-24deg);\
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff); opacity: 0; animation: cx-shoot 7s ease-in infinite 1.5s;
}
.cx-bit { position: absolute; pointer-events: none; font-style: normal; }
.cx-star { width: calc(2px * var(--s)); height: calc(2px * var(--s)); border-radius: 50%; background: #fff; box-shadow: 0 0 4px #fff; animation: cx-star 3s ease-in-out infinite; }
.cx-dust { width: calc(3px * var(--s)); height: calc(3px * var(--s)); border-radius: 50%; background: #F5D27A; box-shadow: 0 0 6px #E9B949; opacity: 0; animation: cx-rise 8s linear infinite; }
.cx-ember { width: calc(3px * var(--s)); height: calc(3px * var(--s)); border-radius: 50%; background: #FDBA74; box-shadow: 0 0 6px #F97316; opacity: 0; animation: cx-rise 6s ease-out infinite; }
.cx-bubble { width: calc(5px * var(--s)); height: calc(5px * var(--s)); border-radius: 50%; border: 1px solid rgba(165, 243, 252, .7); opacity: 0; animation: cx-rise 7s ease-in infinite; }
.cx-petal { width: calc(9px * var(--s)); height: calc(6px * var(--s)); border-radius: 60% 0 60% 0; background: #F9C5DA; opacity: 0; animation: cx-petal 8s linear infinite; }
@keyframes cx-breathe { from { opacity: .7; } to { opacity: 1; } }
@keyframes cx-shimmer { from { opacity: .45; transform: translateX(-10px); } to { opacity: 1; transform: translateX(10px); } }
@keyframes cx-pulse { from { opacity: .55; } to { opacity: 1; } }
@keyframes cx-drift-x { from { transform: translateX(-30px); } to { transform: translateX(40px); } }
@keyframes cx-aurora { from { transform: translateX(-24px) scaleY(.9); opacity: .55; } to { transform: translateX(24px) scaleY(1.15); opacity: 1; } }
@keyframes cx-wave { from { transform: translateX(0); } to { transform: translateX(-392px); } }
@keyframes cx-grid { from { background-position: 0 0; } to { background-position: 0 34px; } }
@keyframes cx-shoot { 0%, 80% { opacity: 0; transform: translate(0, 0) rotate(-24deg); } 82% { opacity: 1; } 92% { opacity: 0; transform: translate(-180px, 80px) rotate(-24deg); } 100% { opacity: 0; } }
@keyframes cx-star { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes cx-rise { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), -140px); opacity: 0; } }
@keyframes cx-petal { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: .95; } 100% { transform: translate(calc(var(--dx) - 40px), 200px) rotate(420deg); opacity: 0; } }
/* Character background effects: Frieren & Game of Thrones */
.cx-bgfx-circle, .cx-bgfx-flame, .cx-bgfx-flicker, .cx-bgfx-glint, .cx-bgfx-slash,
.cx-bgfx-mana, .cx-bgfx-meteors, .cx-bgfx-mist, .cx-bgfx-aurora, .cx-bgfx-dust, .cx-bgfx-ash {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}

/* Light layer in banners (light and subtle) */
.cx-light { position: absolute; pointer-events: none; mix-blend-mode: screen; border-radius: 50%; opacity: .3; }
.cx-light-aurora { inset: -10% -20% 20% -20%; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--fx) 45%, transparent), transparent 70%); animation: cx-aurora-drift 22s ease-in-out infinite alternate; }
.cx-light-fire { transform: translate(-50%, -50%); width: 70%; height: 70%; background: radial-gradient(circle, color-mix(in srgb, var(--fx) 55%, transparent), transparent 70%); animation: cx-glow-pulse 2.8s ease-in-out infinite alternate; }
.cx-light-magic { transform: translate(-50%, -50%); width: 75%; height: 75%; background: radial-gradient(circle, color-mix(in srgb, var(--fx) 55%, transparent), transparent 70%); animation: cx-glow-pulse 3.8s ease-in-out infinite alternate; }
.cx-light-shaft { transform: translate(-50%, -50%); width: 85%; height: 85%; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--fx) 50%, transparent), transparent 70%); animation: cx-glow-pulse 8s ease-in-out infinite alternate; }
@keyframes cx-aurora-drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

/* Spell circle turning slowly */
.fx-circle-wrap { position: absolute; transform: translate(-50%, -50%); width: 72px; height: 72px; pointer-events: none; }
.fx-spell-circle { width: 100%; height: 100%; animation: fx-circle-spin 32s linear infinite; }
@keyframes fx-circle-spin { to { transform: rotate(360deg); } }

/* Mana motes rising */
.fx-mana { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--fx, #C8B6EE);
  box-shadow: 0 0 6px var(--fx, #C8B6EE); animation: fx-mana-rise 4s ease-in-out infinite; }
@keyframes fx-mana-rise {
  0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  30% { opacity: .9; }
  100% { transform: translate3d(-15px, -70px, 0) scale(1.2); opacity: 0; }
}

/* Meteors / Era shower */
.fx-meteor { position: absolute; width: 45px; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--fx, #9DC2F5), #fff);
  transform: rotate(-35deg); opacity: 0; animation: fx-meteor-shoot 4.5s ease-out infinite; }
@keyframes fx-meteor-shoot {
  0%, 60% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-35deg); }
  65% { opacity: .95; }
  75% { opacity: 0; transform: translate3d(-90px, 120px, 0) rotate(-35deg); }
  100% { opacity: 0; transform: translate3d(-90px, 120px, 0) rotate(-35deg); }
}

/* Flame & torch flicker glow */
.fx-flame-glow { position: absolute; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--fx) 55%, transparent), transparent 70%);
  animation: fx-glow-pulse 2.2s ease-in-out infinite alternate; }
@keyframes fx-glow-pulse {
  from { transform: translate(-50%, -50%) scale(.92); opacity: .5; }
  to { transform: translate(-50%, -50%) scale(1.1); opacity: .9; }
}

/* Embers and ash rising */
.fx-ember { position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%; background: var(--fx, #FF9E4A);
  animation: fx-ember-float 3s ease-out infinite; }
@keyframes fx-ember-float {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  25% { opacity: .95; }
  100% { transform: translate3d(14px, -65px, 0); opacity: 0; }
}

/* Glint star */
.fx-glint-wrap { position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; }
.fx-glint-star { width: 100%; height: 100%; animation: fx-glint-twinkle 4.5s ease-in-out infinite; }
@keyframes fx-glint-twinkle {
  0%, 70%, 100% { opacity: 0; transform: scale(.3) rotate(-20deg); }
  85% { opacity: 1; transform: scale(1.15) rotate(15deg); }
}

/* Slash cut */
.fx-slash-wrap { position: absolute; transform: translate(-50%, -50%); width: 50px; height: 50px; }
.fx-slash-cut { width: 100%; height: 100%; animation: fx-slash-flash 5s ease-in-out infinite; }
@keyframes fx-slash-flash {
  0%, 75%, 100% { opacity: 0; transform: scale(.7); }
  82% { opacity: .95; transform: scale(1.05); }
  88% { opacity: 0; transform: scale(1.1); }
}

/* Low ground mist */
.fx-mist { position: absolute; left: -20%; right: -20%; bottom: -10%; height: 50%; pointer-events: none; mix-blend-mode: screen; }
.fx-mist-1 { background: radial-gradient(ellipse 60% 40% at 30% 80%, color-mix(in srgb, var(--fx) 35%, transparent), transparent 70%);
  animation: fx-mist-drift 20s ease-in-out infinite alternate; }
.fx-mist-2 { background: radial-gradient(ellipse 55% 35% at 75% 85%, color-mix(in srgb, var(--fx) 28%, transparent), transparent 70%);
  opacity: .7; animation: fx-mist-drift 28s ease-in-out infinite alternate-reverse; }
@keyframes fx-mist-drift { from { transform: translate3d(-8%, 0, 0); } to { transform: translate3d(8%, -2%, 0); } }

/* Falling soft round snow in banners (radial-gradient dots, 1.5-3.5px) */
.fx-snow { position: absolute; top: -10px; width: 3px; height: 3px; border-radius: 50%;
  background: radial-gradient(closest-side, #FFFFFF, color-mix(in srgb, var(--fx, #CFEAFF) 70%, transparent), transparent);
  opacity: .75; animation: fx-snow-fall 4s linear infinite; }
@keyframes fx-snow-fall {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  15% { opacity: .85; }
  100% { transform: translate3d(-30px, 180px, 0); opacity: 0; }
}

/* Aurora band shimmer (opacity only) */
.fx-aurora { position: absolute; left: 0; right: 0; top: 0; height: 45%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse 80% 60% at 45% 25%, color-mix(in srgb, var(--fx, #7CE8D5) 45%, transparent), transparent 70%);
  animation: fx-aurora-shimmer 8s ease-in-out infinite alternate; }
@keyframes fx-aurora-shimmer { from { opacity: .25; } to { opacity: .7; } }

/* Dust motes floating */
.fx-dust { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--fx, #FFE7A3);
  opacity: .6; animation: fx-dust-float 5s ease-in-out infinite alternate; }
@keyframes fx-dust-float { from { transform: translate3d(0, 0, 0); opacity: .2; } to { transform: translate3d(12px, -18px, 0); opacity: .75; } }

/* Still backgrounds under video: match video box with zero drift so no handoff pop */
.cx-banner-pic:has(.cx-bg-video) .cx-bg { inset: 0; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .cx-ring *,
  .cx-banner *,
  .cx-bit,
  .cx-particle,
  .cx-confetti,
  .cx-bolt,
  .cx-flash,
  .cx-shooting,
  .cx-grid-floor {
    animation: none !important;
    transition: none !important;
  }
}

/* Effects */
.cx-effect-container { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 100; border-radius: inherit; }
.cx-particle { position: absolute; border-radius: 2px; }
.cx-particle.confetti { width: 6px; height: 10px; }
.cx-particle.sparkles { width: 8px; height: 8px; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.cx-particle.petals { width: 10px; height: 6px; border-radius: 50% 0 50% 0; }
.cx-particle.snow { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 4px #fff; }
.cx-particle.flames { width: 12px; height: 12px; border-radius: 50%; filter: blur(2px); mix-blend-mode: screen; }
.cx-confetti { position: absolute; width: 7px; height: 11px; border-radius: 1.5px; will-change: transform; }
.cx-bolt { position: absolute; inset: 0; overflow: visible; }
.cx-flash { position: absolute; width: 220px; height: 220px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(224, 247, 255, .85) 0%, rgba(34, 211, 238, .35) 35%, rgba(34, 211, 238, 0) 70%); }

/* Namecards */
.cx-card-toon-riot { background: #FF2EB3; box-shadow: 4px 4px 0 #000; border-radius: 8px; background-image: radial-gradient(#000 1px, transparent 1px); background-size: 8px 8px; color: #FFF; }
.cx-card-front-steps { background: #EADFC6; border: 2px dashed #B3212B; border-radius: 2px; color: #3B3330; font-family: 'Courier New', monospace; font-weight: bold; }
.cx-card-hundred-laps { background: #C8D68A; border: 3px solid #E34234; color: #1B2416; font-family: serif; font-weight: bold; box-shadow: inset 0 0 10px rgba(0,0,0,0.1); }
.cx-card-wild-card { background: repeating-linear-gradient(45deg, #4A1D7A, #4A1D7A 10px, #2FBF71 10px, #2FBF71 20px); color: #FFF; border-radius: 4px; box-shadow: 0 4px 6px rgba(0,0,0,0.5); }
.cx-card-the-ledger { background: #17171B; border: 1px solid #C9A227; color: #E9E4D6; font-family: serif; border-left: 4px solid #C9A227; }
.cx-card-blindfold { background: #0A0E1A; border: 1px solid #00F0FF; color: #E8F1FA; box-shadow: inset 0 0 10px rgba(0,240,255,0.3); border-radius: 6px; }
.cx-card-the-throne { background: #3C1A6B; border: 2px solid #D4AF37; color: #F1E6FF; font-family: serif; border-radius: 8px 8px 0 0; }
.cx-card-tea-room { background: #E9D9B8; border: 1px solid #C9A24A; color: #2B1D12; font-family: serif; border-radius: 2px; box-shadow: inset 0 0 20px rgba(107,74,43,0.1); }
.cx-card-mad-lab { background: #12383D; border: 2px solid #97CE4C; color: #D9E6E0; border-radius: 4px; box-shadow: 0 0 8px rgba(151,206,76,0.4); }
.cx-card-ember-crown { background: #1C1C1C; border-bottom: 2px solid #E8502A; color: #F2D9C4; border-radius: 2px; }
.cx-card-broken-mirror { background: #2A1545; border: 1px solid #8E6BD9; color: #EDE9F5; background-image: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.1) 45%, transparent 50%); }
.cx-card-long-night { background: #12304A; border: 1px solid #7FD6FF; color: #D6E6F0; border-radius: 0 8px 0 8px; box-shadow: inset 0 0 15px rgba(127,214,255,0.2); }
.cx-card-flower-field { background: #16271F; border: 1px solid #E8C66A; color: #EEF2E4; border-radius: 12px; box-shadow: inset 0 0 14px rgba(159,230,200,0.18); }

/* Elo Badges */
.cx-elo { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 10px; font-size: 12px; font-weight: bold; border-radius: 14px; background: rgba(0,0,0,0.2); color: inherit; }
.cx-elo-toon-riot { background: #F97316; color: #FFF; border-radius: 14px 0 0 14px; border: 2px solid #000; }
.cx-elo-front-steps { background: #D4D4D8; color: #000; border-radius: 50%; width: 28px; padding: 0; border: 2px solid #52525B; }
.cx-elo-hundred-laps { background: #78350F; color: #FEF3C7; border-radius: 4px; border: 1px solid #451A03; }
.cx-elo-wild-card { background: #FFF; color: #000; border-radius: 4px; border: 2px solid #000; position: relative; }
.cx-elo-wild-card::before { content: '♠'; color: #4A1D7A; margin-right: 4px; }
.cx-elo-the-ledger { background: #FBBF24; color: #000; border-radius: 50%; width: 28px; padding: 0; border: 1px solid #B45309; }
.cx-elo-blindfold { background: radial-gradient(circle, #00F0FF, #0A0E1A); color: #FFF; border-radius: 50%; width: 28px; padding: 0; border: 1px solid #00F0FF; }
.cx-elo-the-throne { background: #D4AF37; color: #3C1A6B; border-radius: 14px; border: 1px solid #000; }
.cx-elo-tea-room { background: transparent; color: #78350F; border: 1px dashed #78350F; border-radius: 50%; width: 28px; padding: 0; }
.cx-elo-mad-lab { background: #22C55E; color: #000; border-radius: 8px; border: 2px solid #064E3B; }
.cx-elo-ember-crown { background: #EA580C; color: #FFF; border-radius: 6px; border: 1px solid #7F1D1D; }
.cx-elo-broken-mirror { background: rgba(142,107,217,0.5); color: #FFF; border-radius: 0; border: 1px solid #A855F7; transform: skewX(-15deg); }
.cx-elo-broken-mirror .cx-elo-val { transform: skewX(15deg); }
.cx-elo-long-night { background: rgba(127,214,255,0.3); color: #FFF; border-radius: 4px; border: 1px solid #38BDF8; }
.cx-elo-flower-field { background: rgba(232,198,106,0.25); color: #FFF; border-radius: 10px; border: 1px solid #E8C66A; }

/* Character backgrounds: a generated picture with a slow drift, a light sweep,
   its world's moving layer, and a shade on the left so the round profile
   picture and the name read. */
.cx-banner-pic { background: #0A0A0C; }
.cx-banner-pic .cx-bg { position: absolute; inset: -4%; background: center 40% / cover no-repeat; animation: cx-bg-drift 26s ease-in-out infinite alternate; will-change: transform; }
@keyframes cx-bg-drift { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.07) translate3d(-2.5%, -1.2%, 0); } }
.cx-banner-pic .cx-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.cx-banner-pic .cx-bg-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,8,10,.86) 0%, rgba(8,8,10,.55) 30%, rgba(8,8,10,0) 52%), linear-gradient(0deg, rgba(8,8,10,.55) 0%, rgba(8,8,10,0) 40%); }
/* The light band slides across with transform (the GPU alone moves it). As a
   moving background-position it repainted the whole picture every frame:
   ~5 of every 6 repaints on a set's page (2026-10-12). Same path: a band 60%
   wide from -150% to 250% background-position is translateX -100% to 166.67%. */
.cx-banner-pic .cx-bg-sweep { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .55; overflow: hidden; }
.cx-banner-pic .cx-bg-sweep::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%;
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--fx) 40%, transparent) 50%, transparent 62%);
  transform: translateX(-100%); animation: cx-bg-sweep 9s ease-in-out infinite; }
@keyframes cx-bg-sweep { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(166.667%); } }
.cx-banner-pic .cx-bgfx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cx-bgfx-rain::before { content: ""; position: absolute; inset: -100% -20% 0 -20%; opacity: .5;
  background: repeating-linear-gradient(100deg, transparent 0 11px, color-mix(in srgb, var(--fx) 55%, transparent) 11px 12px, transparent 12px 23px);
  -webkit-mask: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  animation: cx-rain .7s linear infinite; }
@keyframes cx-rain { to { transform: translate3d(-8%, 50%, 0); } }
/* Frost mist: two soft fog banks drifting across, no dots. */
.cx-bgfx-snow::before, .cx-bgfx-snow::after { content: ""; position: absolute; inset: -20% -60%; mix-blend-mode: screen;
  background: radial-gradient(ellipse 30% 22% at 30% 70%, color-mix(in srgb, var(--fx) 40%, transparent), transparent 70%),
    radial-gradient(ellipse 26% 18% at 70% 40%, color-mix(in srgb, var(--fx) 30%, transparent), transparent 70%);
  animation: cx-mist 18s ease-in-out infinite alternate; }
.cx-bgfx-snow::after { opacity: .6; animation-duration: 27s; animation-direction: alternate-reverse; }
@keyframes cx-mist { from { transform: translate3d(-12%, 0, 0); } to { transform: translate3d(12%, -4%, 0); } }
.cx-bgfx-energy::before { content: ""; position: absolute; inset: 0; mix-blend-mode: screen;
  background: radial-gradient(ellipse 34% 60% at 72% 52%, color-mix(in srgb, var(--fx) 55%, transparent), transparent 70%);
  animation: cx-energy 3.2s ease-in-out infinite alternate; }
.cx-bgfx-energy::after { content: ""; position: absolute; inset: -30%; mix-blend-mode: screen; opacity: .35;
  background: conic-gradient(from 0deg at 72% 52%, transparent 0 20%, color-mix(in srgb, var(--fx) 45%, transparent) 25%, transparent 32% 70%, color-mix(in srgb, var(--fx) 35%, transparent) 76%, transparent 82%);
  animation: cx-spin 16s linear infinite; }
@keyframes cx-energy { from { opacity: .35; transform: scale(.94); } to { opacity: .9; transform: scale(1.06); } }
@keyframes cx-spin { to { transform: rotate(1turn); } }
.cx-bgfx-rays::before { content: ""; position: absolute; inset: -60% -20% -20% 20%; mix-blend-mode: screen; opacity: .45; transform-origin: 80% 0;
  background: repeating-conic-gradient(from 200deg at 80% 0, color-mix(in srgb, var(--fx) 45%, transparent) 0 3deg, transparent 3deg 11deg);
  -webkit-mask: radial-gradient(ellipse at 80% 0, #000, transparent 70%); mask: radial-gradient(ellipse at 80% 0, #000, transparent 70%);
  animation: cx-rays 11s ease-in-out infinite alternate; }
@keyframes cx-rays { from { transform: rotate(-4deg); opacity: .3; } to { transform: rotate(4deg); opacity: .6; } }
.cx-bgfx-glint::before { content: ""; position: absolute; inset: 0; mix-blend-mode: screen;
  background: radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--fx) 50%, transparent), transparent 35%); animation: cx-energy 5s ease-in-out infinite alternate; }
.cx-bgfx-leaves i, .cx-bgfx-petals i { position: absolute; top: -12%; width: calc(9px * var(--s)); height: calc(5px * var(--s)); background: var(--fx);
  border-radius: 0 100% 0 100%; opacity: .9; box-shadow: 0 0 6px color-mix(in srgb, var(--fx) 60%, transparent); animation: cx-leaf 8s linear infinite; }
.cx-bgfx-petals i { border-radius: 100% 0 100% 0; background: linear-gradient(135deg, #fff, var(--fx)); }
@keyframes cx-leaf { 0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; } 10% { opacity: .95; }
  100% { transform: translate3d(-90px, 230px, 0) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cx-banner-pic *, .cx-banner-pic *::before, .cx-banner-pic *::after { animation: none !important; } }
/* Still thumbnails (lists): no animation anywhere inside. */
.cx-banner.cx-still *, .cx-banner.cx-still *::before, .cx-banner.cx-still *::after { animation: none !important; }
.cx-avatar.cx-still *, .cx-avatar.cx-still *::before, .cx-avatar.cx-still *::after, .cx-avatar.cx-still::before, .cx-avatar.cx-still::after { animation: none !important; }