/* ---------- era backgrounds for item icons ----------
   Every tile that shows a forged item (gear slots, the forge stack, item
   sheets, the equipment list) gets `ebg eraN` via eraBg() so its source era
   reads at a glance. ERA_C1/ERA_FX in js/03-art-base.js mirror the hues. Eras 0-4 are
   static; from era 5 (Transcendent) on, each era has its own looping
   animation, held in --eba so tiles with their own
   pop-in can run both. Everything is pure background layers (no pseudo
   elements) so the same class also works directly on an <img>. The base
   rule matches as .ebg[class*="era"] so it outranks the older .slot.fN
   rarity fills on the same element. Browsers without @property just show
   the first frame. */
@property --ebA{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --ebR{syntax:'<length>';inherits:false;initial-value:0px}
@property --ebP{syntax:'<number>';inherits:false;initial-value:0}

.ebg[class*="era"]{--c1:#8b9099;--c2:#2b2f37;--eba:none;
  background-color:var(--c2);
  background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 46%),
    radial-gradient(circle at 50% 45%,var(--c1),var(--c2) 80%);
  background-size:100% 100%;background-position:0 0;background-repeat:no-repeat;
  animation:var(--eba,none)}
/* tiles with their own pop-in keep it, running alongside the era loop */
.foundrow .fitem.ebg{animation:fitemin .32s cubic-bezier(.2,1.7,.4,1),var(--eba,none)}
.slot.new.ebg{animation:slotnew .5s cubic-bezier(.2,1.7,.4,1),var(--eba,none)}

/* static eras */
.ebg.era0{--c1:#8b9099;--c2:#2b2f37}   /* Crude: scrap and stone */
.ebg.era1{--c1:#3aa6d0;--c2:#10304a}   /* Crafted */
.ebg.era2{--c1:#34b25c;--c2:#0e3320}   /* Masterwork */
.ebg.era3{--c1:#c7b12f;--c2:#3a300c}   /* Perfected */
.ebg.era4{--c1:#d0444a;--c2:#3c0f15}   /* Beyond Human */

/* Transcendent: rising sparkles under a sweeping sheen */
.ebg.era5{--c1:#b04ad8;--c2:#2a0c3c;
  background-image:linear-gradient(115deg,transparent 40%,rgba(255,225,255,.42) 50%,transparent 60%),
    radial-gradient(circle,rgba(255,255,255,.85) 0 .55px,transparent 1.1px),
    radial-gradient(circle,rgba(250,200,255,.7) 0 .85px,transparent 1.5px),
    radial-gradient(circle at 50% 45%,var(--c1),var(--c2) 80%);
  background-size:300% 100%,21px 26px,33px 29px,100% 100%;
  background-repeat:no-repeat,repeat,repeat,no-repeat;
  --eba:ebTranscend 4s linear infinite}
@keyframes ebTranscend{
  0%{background-position:100% 0,0 0,7px 11px,0 0}
  55%{background-position:0% 0,0 -28.6px,25.15px -20.9px,0 0}
  100%{background-position:0% 0,0 -52px,40px -47px,0 0}}

/* Quantum: interference ripples over a lattice */
.ebg.era6{--c1:#2bbac4;--c2:#052a30;
  background-image:radial-gradient(circle,transparent 42%,var(--c2) 96%),
    repeating-radial-gradient(circle at 50% 50%,transparent var(--ebR),rgba(175,255,255,.55) calc(var(--ebR) + 1px),
      rgba(175,255,255,.55) calc(var(--ebR) + 2px),transparent calc(var(--ebR) + 3.5px),transparent calc(var(--ebR) + 11px)),
    linear-gradient(rgba(139,255,255,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(139,255,255,.14) 1px,transparent 1px),
    radial-gradient(circle at 50% 45%,var(--c1),var(--c2) 80%);
  background-size:100% 100%,100% 100%,8px 8px,8px 8px,100% 100%;
  background-repeat:no-repeat,no-repeat,repeat,repeat,no-repeat;
  --eba:ebRipple 1.5s linear infinite}

/* Stellar: a pulsing star core with slowly turning rays */
.ebg.era7{--c1:#6a54e8;--c2:#130d3e;
  background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,calc(.45 + var(--ebP)*.35)) 0,
      rgba(205,195,255,.4) calc(16% + var(--ebP)*9%),transparent 50%),
    repeating-conic-gradient(from var(--ebA) at 50% 50%,rgba(195,178,255,.3) 0 6deg,transparent 6deg 30deg),
    radial-gradient(circle,rgba(255,255,255,.75) 0 .5px,transparent 1px),
    radial-gradient(circle,rgba(220,210,255,.6) 0 .8px,transparent 1.4px),
    radial-gradient(circle at 50% 45%,var(--c1),var(--c2) 80%);
  background-size:100% 100%,100% 100%,19px 23px,31px 29px,100% 100%;
  background-position:0 0,0 0,0 0,9px 13px,0 0;
  background-repeat:no-repeat,no-repeat,repeat,repeat,no-repeat;
  --eba:ebSpin 14s linear infinite,ebPulse 1.3s ease-in-out infinite alternate}

/* Interstellar: parallax starfield drifting across a nebula */
.ebg.era8{--c1:#9c6a80;--c2:#1f101c;
  background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 .8px,transparent 1.4px),
    radial-gradient(circle,rgba(235,220,255,.65) 0 .5px,transparent 1px),
    radial-gradient(ellipse at 28% 30%,rgba(255,140,200,.42),transparent 52%),
    radial-gradient(ellipse at 76% 72%,rgba(135,120,255,.4),transparent 55%),
    radial-gradient(circle at 50% 45%,var(--c1),var(--c2) 80%);
  background-size:29px 23px,15px 19px,100% 100%,100% 100%,100% 100%;
  background-repeat:repeat,repeat,no-repeat,no-repeat,no-repeat;
  --eba:ebDrift 5s linear infinite}
@keyframes ebDrift{
  0%{background-position:0 0,6px 9px,0 0,0 0,0 0}
  100%{background-position:-58px 0,-9px 9px,0 0,0 0,0 0}}

/* Reality-Bending: a warped swirl with rings collapsing inward */
.ebg.era9{--c1:#e08a1c;--c2:#35140a;
  background-image:radial-gradient(circle,transparent 30%,var(--c2) 92%),
    repeating-radial-gradient(circle at 50% 50%,transparent var(--ebR),rgba(255,235,200,.4) calc(var(--ebR) + 1px),
      transparent calc(var(--ebR) + 2.5px),transparent calc(var(--ebR) + 11px)),
    conic-gradient(from var(--ebA) at 50% 50%,rgba(255,179,71,.7),rgba(255,95,162,.6),rgba(122,60,255,.55),
      rgba(255,138,42,.7),rgba(255,211,107,.6),rgba(255,179,71,.7)),
    radial-gradient(circle at 50% 45%,var(--c1),var(--c2) 80%);
  --eba:ebSpin 4s linear infinite,ebRipple 1.4s linear infinite reverse}

/* Godforged: golden halo, turning rays, rising motes */
.ebg.era10{--c1:#d6a53a;--c2:#3a2608;
  background-image:radial-gradient(circle at 50% 48%,rgba(255,250,222,calc(.45 + var(--ebP)*.4)) 0 10%,
      rgba(255,216,107,.45) calc(24% + var(--ebP)*10%),transparent 56%),
    repeating-conic-gradient(from var(--ebA) at 50% 48%,rgba(255,242,190,.34) 0 8deg,transparent 8deg 22.5deg),
    radial-gradient(circle,rgba(255,246,200,.95) 0 .7px,transparent 1.3px),
    radial-gradient(circle,rgba(255,230,150,.7) 0 .5px,transparent 1px),
    radial-gradient(circle at 50% 45%,var(--c1),var(--c2) 80%);
  background-size:100% 100%,100% 100%,23px 27px,17px 31px,100% 100%;
  background-repeat:no-repeat,no-repeat,repeat,repeat,no-repeat;
  --eba:ebSpin 18s linear infinite,ebPulse 1s ease-in-out infinite alternate,ebRise 3s linear infinite}
@keyframes ebRise{
  0%{background-position:0 0,0 0,0 0,8px 5px,0 0}
  100%{background-position:0 0,0 0,0 -54px,8px -26px,0 0}}

/* Beyond Divinity: an eclipse with a spinning accretion disk */
.ebg.era11{--c1:#3a2e6e;--c2:#07060f;
  background-image:radial-gradient(circle at 50% 50%,#030208 0 24%,rgba(240,234,255,.95) 26.5%,
      rgba(185,168,255,.55) 30%,transparent 37%),
    radial-gradient(circle,rgba(255,255,255,.8) 0 .5px,transparent 1px),
    radial-gradient(circle,rgba(210,200,255,.6) 0 .7px,transparent 1.3px),
    radial-gradient(circle,transparent 36%,rgba(7,6,15,.94) 72%),
    conic-gradient(from var(--ebA) at 50% 50%,transparent 0,rgba(185,168,255,.8) 10%,transparent 28%,
      rgba(143,242,255,.6) 52%,transparent 72%,rgba(255,205,255,.7) 88%,transparent),
    radial-gradient(circle at 50% 45%,var(--c1),var(--c2) 80%);
  background-size:100% 100%,21px 25px,29px 19px,100% 100%,100% 100%,100% 100%;
  background-position:0 0,0 0,11px 7px,0 0,0 0,0 0;
  background-repeat:no-repeat,repeat,repeat,no-repeat,no-repeat,no-repeat;
  --eba:ebSpin 3.5s linear infinite}

@keyframes ebSpin{to{--ebA:360deg}}
@keyframes ebRipple{to{--ebR:11px}}
@keyframes ebPulse{to{--ebP:1}}

@media(prefers-reduced-motion:reduce){.ebg{animation:none!important}}

/* an era tile applied straight to an icon <img> (home gear cards) */
img.aicon.ebg{border-radius:8px;padding:3px;box-sizing:border-box}
/* odds labels sit on the tile now, so outline them for any era colour */
.potentialItem.ebg b,.potentialItem.ebg span{color:#fff;text-shadow:-1px -1px #080b0d,1px -1px #080b0d,-1px 1px #080b0d,1px 1px #080b0d}