/* atmosphere.css — tier 3 components.
 * Owns: decor: scanline, animated crest, faction glyphs, role icons, save
 * pulse. */

@keyframes atmosphere-crest-pulse {
  0%, 100% { opacity: 0.82; filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.30)); }
  50% { opacity: 1.0; filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.55)); }
}

/* 8. Faction glyph: subtle entrance + accent-color ease. */
@keyframes faction-glyph-in {
  from { opacity: 0; transform: scale(0.6) rotate(-6deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes atmosphere-scanline-sweep {
  0% { transform: translate3d(0, -4px, 0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate3d(0, 100vh, 0); opacity: 0; }
}
@keyframes atmosphere-save-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); }
  35% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.0); }
  60% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.0); }
}
@keyframes atmosphere-crest-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 3. Faction-color scanline sweep */
.atmosphere-scanline {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 9999;
  pointer-events: none;
  background: linear-gradient( 90deg, rgba(var(--accent-rgb), 0) 0%, rgba(var(--accent-rgb), 0.35) 20%, rgba(var(--accent-rgb), 0.55) 50%, rgba(var(--accent-rgb), 0.35) 80%, rgba(var(--accent-rgb), 0) 100% );
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.45);
  will-change: transform, opacity;
  animation: atmosphere-scanline-sweep 700ms ease-out forwards;
}

/* 5. Animated crest — drops into the empty unit-detail panel when a
 * faction is selected. The SVG itself is injected by
 * js/ui/animated-crest.js; styling lives here. */
.atmosphere-crest-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-7); margin: var(--sp-8) auto var(--sp-4); user-select: none; }
.atmosphere-crest {
  width: 80px;
  height: 80px;
  display: block;
  color: var(--accent);
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.35));
  will-change: transform, opacity;
}
.atmosphere-crest-tagline { font-size: var(--fs-sm); color: var(--text-muted); letter-spacing: var(--tr-normal); text-align: center; }

/* 4. Save-button pulse — accent shadow ring at 2-second intervals when
 * the army has unsaved mutations. */
#btn-save-army.has-unsaved { animation: atmosphere-save-pulse 2s ease-in-out infinite; will-change: transform, box-shadow; }
.faction-glyph .faction-glyph-svg { width: 100%; height: 100%; display: block; }
.faction-glyph-hero { width: 32px !important; height: 32px !important; margin-right: var(--sp-6) !important; filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.45)); }
.build-hero-main .faction-glyph-hero { position: relative; top: 1px; }

/* 4. Faction glyphs — wrapper + injected SVG sizing. */
.faction-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--accent);
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.35));
  pointer-events: none;
  vertical-align: middle;
  transition: color 240ms ease, filter 240ms ease;
  animation: faction-glyph-in 340ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.faction-glyph-inline { width: 14px !important; height: 14px !important; margin-right: var(--sp-3) !important; opacity: 0.85; }

/* 5. Role icons — small Unicode glyph in the unit-card name.
 * The DOM-injected <span class="role-icon"> is the primary path; the
 * pseudo-element fallback covers cards rendered before role-icons.js is
 * ready (e.g. SSR paint). */
.unit-card .role-icon {
  display: inline-block;
  width: 1.1em;
  margin-right: var(--sp-3);
  font-size: 0.9em;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 4px rgba(var(--accent-rgb), 0.45);
  vertical-align: baseline;
  letter-spacing: 0;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 180ms ease, color 240ms ease;
}
.unit-card:hover .role-icon { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  /* @keyframes atmosphere-crest-pulse is defined in animations-polish.css
   * (the later copy of the same name always won, so this one was dead). */
  /* Reduced-motion: kill animations across the board. */
  .atmosphere-scanline, #btn-save-army.has-unsaved, .atmosphere-crest-rotor, .atmosphere-crest-pulse { animation: none !important; }
}

/* 6. Loading splash crest — speed up rotation + brighter pulse. */
.atmosphere-crest-rotor {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: atmosphere-crest-spin 30s linear infinite;
  /* 6. Loading splash crest — speed up rotation + brighter pulse. */
  animation-duration: 8s !important;
}
.atmosphere-crest-pulse {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: atmosphere-crest-pulse 4.5s ease-in-out infinite;
  animation-duration: 2.6s !important;
}

@media (prefers-reduced-motion: reduce) {
  .atmosphere-scanline { display: none; }
  .build-hero-status-dot, .build-hero-crest-wrap .atmosphere-crest-rotor, .build-hero-crest-wrap .atmosphere-crest-pulse { animation: none !important; }
}