/* Shared energy-type icons — markup from energy-icons.js, review: samples/energy-icons.html */

/* Tuned for the dark themes: --ei-tint lifts the registry accent towards white so
   dark accents (#0f766e, #0f62a5, #7c3aed …) keep contrast on dark surfaces. */
.energy-icon {
  --ei-accent: var(--energy-icon-accent, currentColor);
  --ei-tint: color-mix(in srgb, var(--ei-accent) 68%, #fff);
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.14em;
  overflow: visible;
  fill: none;
  stroke: none;
}

.energy-icon.is-mono {
  --ei-accent: currentColor;
  --ei-tint: currentColor;
}

/* ---- drawing parts ---- */

.energy-icon :is(.ei-line, .ei-soft, .ei-accent-line, .ei-tint-line, .ei-tint-soft) {
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.energy-icon .ei-line {
  fill: none;
  stroke: currentColor;
}

.energy-icon .ei-soft {
  fill: color-mix(in srgb, var(--ei-accent) 24%, transparent);
  stroke: currentColor;
}

/* colored body: the part that names the type (blades, leaf, pumpjack head) */
.energy-icon .ei-tint-soft {
  fill: color-mix(in srgb, var(--ei-tint) 58%, transparent);
  stroke: var(--ei-tint);
}

.energy-icon :is(.ei-accent-line, .ei-tint-line) {
  fill: none;
  stroke: var(--ei-tint);
}

.energy-icon .ei-thin {
  stroke-width: 1.1;
}

.energy-icon .ei-fill {
  fill: var(--ei-tint);
}

.energy-icon .ei-smoke {
  fill: currentColor;
  opacity: 0.45;
}

.energy-icon .ei-cell {
  fill: var(--ei-accent);
  opacity: 0;
}

.energy-icon * {
  transform-box: view-box;
}

.energy-icon :is(.ei-pulse, .ei-smoke, .ei-glow) {
  transform-box: fill-box;
  transform-origin: center;
}

/* ---- motion ----
   Each moving part stores its animation in --ei-a; the reset on `*` stops children
   from inheriting a parent's animation. The animation only runs in an active state. */

.energy-icon * { --ei-a: none; }

/* Amplitudes are tuned to stay readable at 15–18px (legend chips, share bar). */
.energy-icon .ei-spin { --ei-a: ei-spin 3s linear infinite; }
.energy-icon--wind .ei-spin { --ei-a: ei-spin 2.6s linear infinite; }
.energy-icon--other_renewables .ei-spin { --ei-a: ei-spin 6s linear infinite; }
.energy-icon .ei-pulse { --ei-a: ei-pulse 1.8s ease-in-out infinite; }
.energy-icon .ei-rays { --ei-a: ei-rays 1.8s ease-in-out infinite; }
.energy-icon .ei-cell { --ei-a: ei-cell 2.2s ease-in-out var(--ei-d, 0s) infinite; }
.energy-icon .ei-bob { --ei-a: ei-bob 1.8s ease-in-out infinite; }
.energy-icon .ei-flow { --ei-a: ei-flow 1s linear infinite; }
.energy-icon .ei-flicker { --ei-a: ei-flicker 0.9s ease-in-out infinite; }
.energy-icon .ei-flicker-core { --ei-a: ei-flicker 0.65s ease-in-out infinite reverse; }
.energy-icon .ei-smoke { --ei-a: ei-smoke 2.1s ease-out var(--ei-d, 0s) infinite; }
.energy-icon .ei-nod { --ei-a: ei-nod 1.3s ease-in-out infinite alternate; }
.energy-icon .ei-sway { --ei-a: ei-sway 2.2s ease-in-out infinite alternate; }
.energy-icon .ei-heat { --ei-a: ei-heat 1.8s ease-in-out var(--ei-d, 0s) infinite; }
.energy-icon .ei-ring { --ei-a: ei-ring 1.8s linear infinite; }
.energy-icon .ei-glow { --ei-a: ei-glow 1.4s ease-in-out infinite; }

.energy-icon.is-loop *,
.energy-icon.is-hover:hover *,
:is(a, button, [data-energy-icon-host]):is(:hover, :focus-visible) .energy-icon.is-hover *,
[data-energy-icon-sticky].is-energy-icon-active .energy-icon.is-hover * {
  animation: var(--ei-a);
}

/* is-static: frozen on purpose (OG screenshots, dense rows) */
.energy-icon.is-static * {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .energy-icon * {
    animation: none !important;
  }
}

@keyframes ei-spin {
  to { transform: rotate(360deg); }
}

@keyframes ei-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

@keyframes ei-rays {
  0%, 100% { transform: scale(0.7); opacity: 0.35; }
  50% { transform: scale(1.15); opacity: 1; }
}

@keyframes ei-cell {
  0%, 55%, 100% { opacity: 0; }
  18% { opacity: 1; }
}

@keyframes ei-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes ei-flow {
  from { stroke-dasharray: 4 2.2; stroke-dashoffset: 0; }
  to { stroke-dasharray: 4 2.2; stroke-dashoffset: -12.4; }
}

@keyframes ei-flicker {
  0%, 100% { transform: scale(1, 1) skewX(0deg); }
  25% { transform: scale(0.9, 1.14) skewX(-5deg); }
  55% { transform: scale(1.06, 0.88) skewX(3deg); }
  80% { transform: scale(0.95, 1.08) skewX(-2deg); }
}

@keyframes ei-smoke {
  0% { opacity: 0; transform: translateY(3px) scale(0.5); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-5px) scale(1.6); }
}

@keyframes ei-nod {
  from { transform: rotate(-11deg); }
  to { transform: rotate(9deg); }
}

@keyframes ei-sway {
  from { transform: rotate(-10deg); }
  to { transform: rotate(8deg); }
}

@keyframes ei-heat {
  0% { opacity: 0; transform: translateY(2.5px); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-3.5px); }
}

/* circumference 2π·9.6 ≈ 60.32 = 8 × (4.3 + 3.24) → seamless loop */
@keyframes ei-ring {
  from { stroke-dasharray: 4.3 3.24; stroke-dashoffset: 0; }
  to { stroke-dasharray: 4.3 3.24; stroke-dashoffset: -15.08; }
}

@keyframes ei-glow {
  0%, 100% { transform: scale(1); opacity: 0.88; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* ---- scenes: wide illustrations (EnergyIcons.sceneHtml, viewBox 240×64) ----
   They carry .energy-icon too, so drawing parts, tint, is-loop/is-static and
   prefers-reduced-motion work exactly as for the icons. */

.energy-icon.energy-scene {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 240 / 64;
  vertical-align: top;
}

.energy-scene .ei-sleepers {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-dasharray: 2.5 7.5;
  opacity: 0.4;
}

.energy-scene .ei-road {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-dasharray: 10 8;
  opacity: 0.45;
}

.energy-scene .ei-grain { fill: currentColor; opacity: 0.32; }
.energy-scene .ei-neutron { fill: currentColor; }
.energy-scene .ei-liquid { fill: color-mix(in srgb, var(--ei-tint) 48%, transparent); stroke: none; }

.energy-scene :is(.ei-roll, .ei-burst, .ei-twinkle) {
  transform-box: fill-box;
  transform-origin: center;
}

.energy-scene .ei-roll { --ei-a: ei-spin 0.8s linear infinite; }
.energy-scene .ei-track { --ei-a: ei-track 0.5s linear infinite; }
.energy-scene .ei-road { --ei-a: ei-road 0.6s linear infinite; }
.energy-scene .ei-rumble { --ei-a: ei-rumble 0.35s ease-in-out infinite alternate; }
.energy-scene .ei-slosh { --ei-a: ei-slosh 1.4s ease-in-out infinite alternate; }
.energy-scene .ei-twinkle { --ei-a: ei-pulse 1.6s ease-in-out var(--ei-d, 0s) infinite; }
.energy-scene .ei-neutron { --ei-a: ei-neutron 2.4s linear infinite; }
.energy-scene .ei-burst { --ei-a: ei-burst 2.4s ease-out infinite; }

/* dash period 10 / 18 → seamless */
@keyframes ei-track {
  to { stroke-dashoffset: 10; }
}

@keyframes ei-road {
  to { stroke-dashoffset: 18; }
}

@keyframes ei-rumble {
  from { transform: translateY(0); }
  to { transform: translateY(-0.7px); }
}

@keyframes ei-slosh {
  from { transform: translateX(-3px); }
  to { transform: translateX(3px); }
}

/* neutron travels 131 units to the U-235 atom, which flashes on arrival */
@keyframes ei-neutron {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  78% { transform: translateX(131px); opacity: 1; }
  82%, 100% { transform: translateX(131px); opacity: 0; }
}

@keyframes ei-burst {
  0%, 78% { transform: scale(1); opacity: 0; }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}