/* faction-banner.css — subtle archetype-specific SVG banners drifting behind
   the build-hero header. Driven by `body[data-faction-banner="..."]` set by
   js/app/faction-fx.js. All motifs are abstract geometric/organic shapes
   evoking the archetype — no GW iconography. */

.build-hero { isolation: isolate; }

.build-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background-image: var(--banner-image, none);
  background-repeat: repeat-x;
  background-size: auto 80%;
  background-position: center center;
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb, 200, 200, 200), 0.18));
  mix-blend-mode: screen;
  transition: opacity 600ms ease;
  animation: yaab-banner-drift 80s linear infinite;
}

/* Hero content stays above the banner. */
.build-hero > * { position: relative; z-index: 1; }

body[data-faction-banner] .build-hero::after { opacity: 0.20; }

@keyframes yaab-banner-drift {
  from { background-position: -120px center; }
  to   { background-position:  120px center; }
}

@media (prefers-reduced-motion: reduce) {
  .build-hero::after { animation: none; }
}

/* ────────────────────────────────────────────────────────────────────
   Per-archetype motifs. Stroke is white at the SVG level; the parent's
   mix-blend: screen + low opacity tints it with the faction accent.
   ──────────────────────────────────────────────────────────────────── */

body[data-faction-banner="imperium"] .build-hero {
  /* Gothic arches + winged sigil */
  --banner-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'><g opacity='0.7'><path d='M30 64 Q40 32 50 64 Q60 32 70 64'/><path d='M118 18 L114 36 L120 32 L126 36 Z' fill='%23ffffff'/><path d='M104 60 Q120 30 136 60'/><path d='M210 64 Q220 32 230 64 Q240 32 250 64'/></g></svg>");
}

body[data-faction-banner="chaos"] .build-hero {
  /* Eight-pointed star + flanking arrows */
  --banner-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round'><g opacity='0.7'><path d='M120 14 L120 66 M94 40 L146 40 M101 21 L139 59 M139 21 L101 59'/><circle cx='120' cy='40' r='8'/><path d='M40 40 L20 22 M40 40 L20 58'/><path d='M200 40 L220 22 M200 40 L220 58'/></g></svg>");
}

body[data-faction-banner="tyranid"] .build-hero {
  /* Bio-organic curve + jagged claws */
  --banner-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round'><g opacity='0.7'><path d='M0 44 Q40 8 80 44 T160 44 T240 44'/><path d='M50 54 L62 72 L40 66 Z'/><path d='M170 32 L178 12 L184 32 L194 14 L200 32'/></g></svg>");
}

body[data-faction-banner="ork"] .build-hero {
  /* Jagged hash marks + crude glyph */
  --banner-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'><g opacity='0.7'><path d='M30 50 L40 30 L50 50 L60 30 L70 50'/><path d='M118 22 L118 58 M100 22 L138 22 M100 58 L138 58 M120 36 L138 36'/><path d='M180 50 L185 35 L190 50 L195 35 L200 50 L205 35 L210 50'/></g></svg>");
}

body[data-faction-banner="eldar"] .build-hero {
  /* Concentric rune circles + hairline cross */
  --banner-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round'><g opacity='0.7'><circle cx='40' cy='40' r='14'/><path d='M30 40 L50 40 M40 30 L40 50 M33 33 L47 47'/><circle cx='120' cy='40' r='18'/><circle cx='120' cy='40' r='10'/><path d='M120 22 L120 58 M102 40 L138 40'/><circle cx='200' cy='40' r='12'/><path d='M192 33 L208 47 M192 47 L208 33'/></g></svg>");
}

body[data-faction-banner="tau"] .build-hero {
  /* Hexagon array + crosshair */
  --banner-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round'><g opacity='0.7'><path d='M30 40 L36 30 L48 30 L54 40 L48 50 L36 50 Z'/><path d='M70 40 L76 30 L88 30 L94 40 L88 50 L76 50 Z'/><circle cx='120' cy='40' r='14'/><path d='M104 40 L136 40 M120 24 L120 56' stroke-dasharray='2 4'/><path d='M186 40 L192 30 L204 30 L210 40 L204 50 L192 50 Z'/></g></svg>");
}

body[data-faction-banner="necron"] .build-hero {
  /* Triangular circuit motif + node markers */
  --banner-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round'><g opacity='0.7'><path d='M30 60 L50 24 L70 60 Z'/><path d='M50 24 L50 12 M30 60 L18 60 M70 60 L82 60'/><circle cx='50' cy='24' r='2' fill='%23ffffff'/><path d='M110 50 L130 50 L120 32 Z'/><path d='M170 60 L190 24 L210 60 Z M190 24 L190 12'/><circle cx='190' cy='24' r='2' fill='%23ffffff'/></g></svg>");
}

body[data-faction-banner="votann"] .build-hero {
  /* Heavy chevrons + ingot block */
  --banner-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round'><g opacity='0.7'><path d='M20 50 L40 30 L60 50'/><path d='M20 65 L40 45 L60 65'/><path d='M100 30 L130 30 L130 50 L100 50 Z M105 35 L125 35 M105 45 L125 45'/><path d='M180 50 L200 30 L220 50'/><path d='M180 65 L200 45 L220 65'/></g></svg>");
}