/* components.css — Reusable patterns: cards, buttons, forms, badges */

/* ==========================================================================
   Card base
   ========================================================================== */

/* Shared hover state for all interactive cards */
.map__card,
.engine__card,
.horizon__tier {
  transition: border-color var(--duration-normal) var(--ease-out),
              background-color var(--duration-normal) var(--ease-out);
}

.map__card:hover,
.engine__card:hover {
  border-color: var(--schematic-line);
  background-color: var(--void-elevated);
}

/* Engine cards: top accent intensifies on hover */
.engine__card:nth-child(1):hover { border-top-color: var(--cool-glow); }
.engine__card:nth-child(2):hover { border-top-color: var(--warm-glow); }
.engine__card:nth-child(3):hover { border-top-color: var(--singularity-glow); }
.engine__card:nth-child(4):hover { border-top-color: var(--singularity-glow); }

/* Species card hover: intensify faction accent */
.civ__card:hover {
  border-color: var(--schematic-line);
}

.civ__card[data-faction="antuari"]:hover { border-left-color: var(--faction-antuari); background-color: rgba(45, 139, 87, 0.05); }
.civ__card[data-faction="azzek"]:hover   { border-left-color: var(--faction-azzek); background-color: rgba(160, 120, 64, 0.05); }
.civ__card[data-faction="ceevar"]:hover  { border-left-color: var(--faction-ceevar); background-color: rgba(40, 86, 160, 0.05); }
.civ__card[data-faction="human"]:hover   { border-left-color: var(--faction-human); background-color: rgba(40, 152, 160, 0.05); }
.civ__card[data-faction="maesuu"]:hover  { border-left-color: var(--faction-maesuu); background-color: rgba(152, 104, 168, 0.05); }
.civ__card[data-faction="seklex"]:hover  { border-left-color: var(--faction-seklex); background-color: rgba(112, 48, 160, 0.05); }
.civ__card[data-faction="varkatt"]:hover { border-left-color: var(--faction-varkatt); background-color: rgba(64, 72, 88, 0.08); }
.civ__card[data-faction="velkaan"]:hover { border-left-color: var(--faction-velkaan); background-color: rgba(200, 168, 48, 0.05); }

/* Tier card hover: highlight progression */
.horizon__tier:hover {
  border-color: var(--schematic-line);
  background-color: var(--void-elevated);
}

/* ==========================================================================
   Button styles
   ========================================================================== */

/* Primary button (used for form submit, CTAs) */
/* Already defined in sections.css for horizon__submit */

/* ==========================================================================
   Form input styles
   ========================================================================== */

/* Already defined in sections.css for horizon__input */

/* ==========================================================================
   Subtle grain texture overlay
   ========================================================================== */

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ==========================================================================
   Typography refinements
   ========================================================================== */

/* Ensure body text blocks have max line length for readability */
.map__card-desc,
.engine__card-desc,
.civ__philosophy,
.architect__narrative p,
.horizon__tier-features {
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}