/* Elemental motion: finite header motifs and hover-only edge light. Lists remain static. */
html[data-theme="ignis"] {
  --elemental-glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M14%202c1%206%206%208%206%2013a8%208%200%201%201-16%200c0-3%202-6%205-8%200%203%201%204%202%205%202-3%203-6%203-10Z%22%2F%3E%3Cpath%20d%3D%22M12%2014c2%202%203%203%203%205a3%203%200%200%201-6%200c0-2%201-3%203-5Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
  --elemental-motion:element-flame; --elemental-cycle:1.6s; --elemental-count:3;
}
html[data-theme="hydro"] {
  --elemental-glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2%208c4-5%205%205%2010%200s6%205%2010%200M2%2014c4-5%205%205%2010%200s6%205%2010%200M2%2020c4-5%205%205%2010%200s6%205%2010%200%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --elemental-motion:element-tide; --elemental-cycle:2.4s; --elemental-count:2;
}
html[data-theme="zephyr"] {
  --elemental-glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2%208h13a3%203%200%201%200-3-3M5%2012h14a3%203%200%201%201-3%203M2%2017h7a2%202%200%201%201-2%202%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.3%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --elemental-motion:element-breeze; --elemental-cycle:2.4s; --elemental-count:2;
}
html[data-theme="dune"] {
  --elemental-glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M1%2017c5-10%2010-10%2016%200l6%204H1Z%22%2F%3E%3Cpath%20d%3D%22M9%2019c4-7%208-7%2014%200%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%225%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%225%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E");
  --elemental-motion:element-sand; --elemental-cycle:2.4s; --elemental-count:2;
}
html:is([data-theme="ignis"],[data-theme="hydro"],[data-theme="zephyr"],[data-theme="dune"])[data-mode] .brand::after {
  content:""; display:inline-block; width:25px; height:25px; vertical-align:middle; margin-left:10px;
  background:var(--grad-brand); -webkit-mask:var(--elemental-glyph) center/contain no-repeat;
  mask:var(--elemental-glyph) center/contain no-repeat; pointer-events:none; transform-origin:50% 75%;
}
/* Keep decoration in the top border, away from labels, balances and controls. */
html:is([data-theme="ignis"],[data-theme="hydro"],[data-theme="zephyr"],[data-theme="dune"])[data-mode] .card.station-card::before {
  content:""; display:block; position:absolute; left:16px; right:16px; top:1px; width:auto; height:3px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
  border-radius:50%; opacity:.65; pointer-events:none; filter:none !important;
}
@keyframes element-flame {
  0%,100% { transform:scale(.96,1); opacity:.8; }
  35% { transform:scale(1.03,1.1) rotate(-3deg); opacity:1; }
  65% { transform:scale(.98,.95) rotate(2deg); opacity:.85; }
}
@keyframes element-tide {
  0%,100% { transform:translateY(0) rotate(-4deg); }
  50% { transform:translateY(-2px) rotate(4deg); }
}
@keyframes element-breeze {
  0%,100% { transform:translateX(0); opacity:.75; }
  50% { transform:translateX(4px); opacity:1; }
}
@keyframes element-sand {
  0%,100% { transform:translateX(0) rotate(0); opacity:.8; }
  50% { transform:translateX(-3px) rotate(-3deg); opacity:1; }
}
@keyframes element-edge {
  0%,100% { transform:scaleX(.88); opacity:.5; }
  50% { transform:scaleX(1); opacity:.95; }
}
@media (prefers-reduced-motion:no-preference) {
  html:is([data-theme="ignis"],[data-theme="hydro"],[data-theme="zephyr"],[data-theme="dune"])[data-mode] .brand::after {
    animation:var(--elemental-motion) var(--elemental-cycle) ease-in-out var(--elemental-count) !important;
  }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html:is([data-theme="ignis"],[data-theme="hydro"],[data-theme="zephyr"],[data-theme="dune"])[data-mode] .brand:hover::after {
    animation:var(--elemental-motion) var(--elemental-cycle) ease-in-out infinite !important;
  }
  html:is([data-theme="ignis"],[data-theme="hydro"],[data-theme="zephyr"],[data-theme="dune"])[data-mode] .card.station-card:hover::before { animation:element-edge 1.6s ease-in-out 2 !important; }
  .theme-swatch:hover .theme-showcase:is([data-preset="ignis"],[data-preset="hydro"],[data-preset="zephyr"],[data-preset="dune"]) .theme-showcase-orbit {
    animation:element-edge 1.6s ease-in-out 2;
  }
}
@media (prefers-reduced-motion:reduce) {
  html:is([data-theme="ignis"],[data-theme="hydro"],[data-theme="zephyr"],[data-theme="dune"])[data-mode] *,html:is([data-theme="ignis"],[data-theme="hydro"],[data-theme="zephyr"],[data-theme="dune"])[data-mode] *::before,html:is([data-theme="ignis"],[data-theme="hydro"],[data-theme="zephyr"],[data-theme="dune"])[data-mode] *::after { animation:none !important; transition:none !important; }
}
@media print { html:is([data-theme="ignis"],[data-theme="hydro"],[data-theme="zephyr"],[data-theme="dune"])[data-mode] .brand::after { display:none; } }