/* ============================================================================
   APxAI SIGILS — sizing + glow for the arcane icon set.
   Usage:  <svg class="sig" aria-hidden="true"><use href="/icons/sigils.svg#sig-shield"/></svg>
   The <svg> scales to the surrounding font-size by default (1em), so a sigil
   drops in anywhere an emoji used to sit. Add .sig-glow for the arcane halo.
   ============================================================================ */
.sig {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  flex: 0 0 auto;
  overflow: visible;
}
/* Inside the site's icon tiles. These tiles come in two flavors: fixed-size
   flex boxes (pillar-icon 56px, enterprise feature-icon 48px) AND font-sized
   blocks with NO explicit height (index/extension/platform feature-icon,
   revenue-icon, value-icon). A percentage height collapses to 0 in the latter,
   so we size in `em` — it scales off each tile's own font-size and never
   depends on the container having a definite height. ~1.2em matches the visual
   weight the emoji used to carry; the hero pillar tiles get a touch more. */
.feature-icon .sig,
.revenue-icon .sig,
.value-icon .sig,
.step-icon .sig { width: 1.2em; height: 1.2em; vertical-align: middle; }
.pillar-icon .sig { width: 1.4em; height: 1.4em; vertical-align: middle; }

/* Convenience size ramp */
.sig-sm { width: 0.85em; height: 0.85em; }
.sig-lg { width: 1.4em;  height: 1.4em;  }
.sig-xl { width: 2em;    height: 2em;    }

/* Arcane halo — subtle, themed to the purple glow token. */
.sig-glow { filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.45)); }
.sig-glow-gold { filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.45)); }

@media (prefers-reduced-motion: no-preference) {
  .sig-pulse { animation: sig-pulse 3.2s ease-in-out infinite; transform-origin: center; }
  @keyframes sig-pulse {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(139, 92, 246, 0.35)); }
    50%      { filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.55)); }
  }
}