/* Nova animated icon system — wrapper styling and reduced-motion fallback.
   Animations themselves live inside each SVG file's inline <style>. */

.nova-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 0;
}

.nova-icon svg {
  width: 100%;
  height: 100%;
  /* Several states (stamp overshoot, ray expansion) scale past the 64x64
     viewBox. Clipping makes the motion look broken. */
  overflow: visible;
}

.nova-icon--sm { width: 16px; height: 16px; }
.nova-icon--md { width: 24px; height: 24px; }
.nova-icon--lg { width: 48px; height: 48px; }
.nova-icon--xl { width: 96px; height: 96px; }

/* Missing-file fallback box keeps layout stable if a state SVG is removed. */
.nova-icon--missing {
  background: color-mix(in srgb, currentColor 15%, transparent);
  border-radius: 4px;
}

/* Auto-theme wrapper — the template tag inlines both light + dark SVGs and
   CSS hides whichever doesn't match :root[data-theme]. Each variant span
   takes the wrapper's full box so the visible one inherits sizing. */
.nova-icon--auto {
  position: relative;
}
.nova-icon-variant {
  display: none;
  width: 100%;
  height: 100%;
  line-height: 0;
}
[data-theme="dark"]  .nova-icon-variant--dark,
[data-theme="light"] .nova-icon-variant--light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Fallback when no theme attribute is set yet (e.g. theme-init.js hasn't
   run): default to dark so we never render an empty box. */
:root:not([data-theme]) .nova-icon-variant--dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Honour OS-level motion reduction: freeze every inline keyframe animation
   inside the SVGs. The static end-frame of each state is visually fine. */
@media (prefers-reduced-motion: reduce) {
  .nova-icon svg,
  .nova-icon svg * {
    animation: none !important;
    transition: none !important;
  }
}