/* =====================================================================
   Cozmic icon styles — electric glow + pulse animations
   Loaded site-wide via layout.html so the `glow='electric'` / `glow='arcade'`
   modes on the {{ icon(...) }} macro have something to render against.

   Brand palette:
     electric cyan    #00f2ff
     neon magenta     #ff00d4
     laser lime       #84ff00
     sun gold         #ffd54f
     ink              #050818
   ===================================================================== */

/* Baseline: every icon is an inline SVG that sizes to the current font
   (1em × 1em by default) and aligns nicely with adjacent text. */
.cz-icon {
  display: inline-block;
  vertical-align: -0.125em;       /* nudges baseline so icons sit on the cap-line of text */
  flex-shrink: 0;
}
.cz-icon--missing {
  width: 1em;
  height: 1em;
  /* Visually present but unobtrusive — a hairline-outlined slot so a
     designer noticing it knows an icon is missing without it shouting. */
  border: 1px dashed rgba(255, 0, 212, 0.35);
  border-radius: 4px;
  opacity: 0.5;
}

/* =========================================================
   GLOW MODE 1: 'soft'
   One subtle drop-shadow in the icon's own stroke color.
   Reads as "the icon is lit from within" without being
   distracting. Good for sidebars, body copy, tight grids.
   ========================================================= */
.cz-icon--glow-soft {
  filter: drop-shadow(0 0 6px currentColor);
}
/* When the stroke is one of the brand colors (set via attr stroke=...,
   not currentColor), we want the shadow to MATCH. The macro renders
   stroke="#22d3ee" etc. directly, so currentColor inside drop-shadow
   here picks up the parent text color, not the SVG stroke. That's
   actually fine for body-text icons (they're already styled the same
   color as their surrounding text), but for branded color="cyan"
   inside a white-text context we want the shadow to be cyan.
   We achieve that with explicit per-color overrides below.
*/
.cz-icon--glow-soft[stroke="#22d3ee"], .cz-icon--glow-soft[stroke="#00f2ff"] {
  filter: drop-shadow(0 0 6px #00f2ff);
}
.cz-icon--glow-soft[stroke="#d946ef"], .cz-icon--glow-soft[stroke="#ff00d4"] {
  filter: drop-shadow(0 0 6px #ff00d4);
}
.cz-icon--glow-soft[stroke="#84ff00"] {
  filter: drop-shadow(0 0 6px #84ff00);
}
.cz-icon--glow-soft[stroke="#ffd54f"] {
  filter: drop-shadow(0 0 6px #ffd54f);
}

/* =========================================================
   GLOW MODE 2: 'electric'
   Multi-layer neon halo: cyan inner ring + magenta outer
   bloom. Pulses on a 2.5s loop. Use for hero feature
   icons / CTAs / any place where you want a "this is the
   important thing on the page" signal.
   ========================================================= */
.cz-icon--glow-electric {
  filter:
    drop-shadow(0 0 4px  rgba(0, 242, 255, 0.85))
    drop-shadow(0 0 10px rgba(0, 242, 255, 0.55))
    drop-shadow(0 0 14px rgba(255, 0, 212, 0.35));
  animation: cz-icon-pulse 2.5s ease-in-out infinite;
}

/* =========================================================
   GLOW MODE 3: 'arcade'
   Same neon halo as 'electric', PLUS the stroke itself is
   a cyan→lime→magenta linear gradient (defined inline in
   the SVG by the macro). Reads as "arcade cabinet" — best
   for the brightest hero spots and Cozmic Universe surfaces.
   ========================================================= */
.cz-icon--glow-arcade {
  filter:
    drop-shadow(0 0 5px  rgba(0, 242, 255, 0.85))
    drop-shadow(0 0 12px rgba(255, 0, 212, 0.55))
    drop-shadow(0 0 18px rgba(132, 255, 0, 0.30));
  animation: cz-icon-pulse 2.5s ease-in-out infinite;
}

/* Continuous gentle pulse used by electric + arcade.
   We animate the FILTER intensity rather than scale/opacity
   so the icon never visually shifts position — calm, not
   bouncing. */
@keyframes cz-icon-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 4px  rgba(0, 242, 255, 0.65))
      drop-shadow(0 0 10px rgba(0, 242, 255, 0.40))
      drop-shadow(0 0 14px rgba(255, 0, 212, 0.25));
  }
  50% {
    filter:
      drop-shadow(0 0 6px  rgba(0, 242, 255, 1))
      drop-shadow(0 0 14px rgba(0, 242, 255, 0.7))
      drop-shadow(0 0 22px rgba(255, 0, 212, 0.55));
  }
}

/* Respect reduced-motion: kill the pulse entirely, keep the static halo. */
@media (prefers-reduced-motion: reduce) {
  .cz-icon--glow-electric,
  .cz-icon--glow-arcade {
    animation: none;
  }
}

/* =========================================================
   HOVER intensification (any glow mode)
   When an icon sits inside a button or interactive card,
   the glow brightens on parent hover. Triggered with a
   `.cz-icon-hover-target` wrapping element (button/card/a).
   ========================================================= */
.cz-icon-hover-target:hover .cz-icon--glow-electric,
.cz-icon-hover-target:hover .cz-icon--glow-arcade {
  filter:
    drop-shadow(0 0 7px  rgba(0, 242, 255, 1))
    drop-shadow(0 0 16px rgba(0, 242, 255, 0.85))
    drop-shadow(0 0 26px rgba(255, 0, 212, 0.65));
}

/* =========================================================
   Search input with leading SVG search icon
   Replaces the old "🔍 Search ..." placeholder pattern.
   Mark up the input's parent with .cozmic-search-field and
   put a <span class="cozmic-search-field-icon">{{ icon('search') }}</span>
   right before the input.
   ========================================================= */
.cozmic-search-field {
  position: relative;
  display: block;
  width: 100%;
}
.cozmic-search-field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-3, #8a92b3);
  pointer-events: none;
  line-height: 0;
  font-size: 1.1rem;
}
.cozmic-search-field > input {
  /* Push the placeholder past the inline icon so they don't overlap.
     Inputs that already have left-padding will get a slight bump, which
     is fine — better than overlapping with the icon. */
  padding-left: 40px !important;
}