/* ==========================================================================
   Solution icons — small animated line icons (inline SVG + CSS).
   Line art in currentColor at a 1.5px hairline (non-scaling, so the 160px
   version keeps the same weight). One element per icon in --accent.

   Resting state = the finished icon. Every keyframe animation ends on the
   resting state, so "before play", "after play" and reduced-motion all show
   the same complete picture.

   Play: solution-icons.js adds .is-playing once when the icon is half in
   view. Hover or keyboard focus inside a .sol-hover container loops it.
   ========================================================================== */

.sol-icon {
  --d: 1.8s;
  --cycle: calc(var(--d) + 1.2s); /* motion, then about 1.2s rest */
  display: inline-block;
  flex: none;
  width: 72px;
  height: 72px;
  line-height: 0;
  color: var(--text-secondary);
}

.sol-icon--lg {
  width: 160px;
  height: 160px;
}

.sol-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sol-icon svg * {
  vector-effect: non-scaling-stroke;
}

/* the one gold element; .gf additionally fills it */
.sol-icon .g {
  color: var(--accent);
}

.sol-icon .gf {
  fill: currentColor;
}

/* ---- play engine -------------------------------------------------------- */
/* once, when the icon enters view */
.sol-icon.is-playing:not(.is-played) .a {
  animation: var(--k) var(--cycle) ease-in-out 1 backwards;
}

/* loop while the card / hero is hovered or has focus inside */
@media (hover: hover) {
  .sol-hover:hover .sol-icon .a {
    animation: var(--kh) var(--cycle) ease-in-out infinite backwards;
  }
}

.sol-hover:focus-within .sol-icon .a {
  animation: var(--kh) var(--cycle) ease-in-out 1 backwards;
}

/* ---- loop mode: the card grids (.sol-cards) keep every icon moving ------- */
/* Motion, then about 1.2s rest, forever. Start staggered per card (--delay is set
   by solution-icons.js). Paused until the grid is in view (.is-live). Same rule on
   hover, so hovering never restarts anything. */
.sol-cards .sol-icon[class] .a {
  animation: var(--k) var(--cycle) ease-in-out var(--delay, 0s) infinite backwards;
  animation-play-state: paused;
}

.sol-cards.is-live .sol-icon[class] .a {
  animation-play-state: running;
}

/* ---- 1. assessment: reading line ticks up the scale --------------------- */
.sol-icon--assessment { --d: 2.2s; }
.sol-icon--assessment .rd { --k: sol-as-read; --kh: sol-as-read-h; }
.sol-icon--assessment .bub { --k: sol-as-bub; --kh: sol-as-bub-h; }

@keyframes sol-as-read {
  0% { transform: translateY(24px); }
  12.94% { transform: translateY(16px); }
  19.41% { transform: translateY(16px); }
  32.35% { transform: translateY(8px); }
  38.82% { transform: translateY(8px); }
  51.76% { transform: translateY(0); }
  64.71% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

@keyframes sol-as-bub {
  0% { transform: translateY(6px); opacity: 0; }
  32.35% { opacity: 1; }
  64.71% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ---- 2. recovery-setup: two boxes slide onto the line ------------------- */
.sol-icon--recovery-setup { --d: 2.4s; }
.sol-icon--recovery-setup .ln { --k: sol-rs-line; --kh: sol-rs-line-h; transform-origin: 36px 58px; }
.sol-icon--recovery-setup .b1 { --k: sol-rs-b1; --kh: sol-rs-b1-h; }
.sol-icon--recovery-setup .b2 { --k: sol-rs-b2; --kh: sol-rs-b2-h; }

@keyframes sol-rs-line {
  0% { transform: scaleX(0.2); opacity: 0.4; }
  23.33% { transform: scaleX(1); opacity: 1; }
  66.67% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}

@keyframes sol-rs-b1 {
  0%, 10% { transform: translateX(-28px); opacity: 0; }
  40%, 66.67% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes sol-rs-b2 {
  0%, 20% { transform: translateX(30px); opacity: 0; }
  53.33%, 66.67% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

/* ---- 3. onsite-recovery: monthly cycle arrow turns ---------------------- */
.sol-icon--onsite-recovery { --d: 2s; }
.sol-icon--onsite-recovery .arw { --k: sol-or-turn; --kh: sol-or-turn-h; transform-origin: 54px 40px; }

@keyframes sol-or-turn {
  0% { transform: rotate(-360deg); }
  50%, 62.5% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* ---- 4. laboratory-setup: a drop falls into the beaker ------------------ */
.sol-icon--laboratory-setup { --d: 2s; }
.sol-icon--laboratory-setup .drp { --k: sol-lb-drop; --kh: sol-lb-drop-h; }
.sol-icon--laboratory-setup .liq { --k: sol-lb-liq; --kh: sol-lb-liq-h; }

@keyframes sol-lb-drop {
  0% { transform: translateY(0); opacity: 1; }
  31.25% { transform: translateY(21px); opacity: 1; }
  37.5% { transform: translateY(26px); opacity: 0; }
  38.75% { transform: translateY(0); opacity: 0; }
  56.25%, 62.5% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes sol-lb-liq {
  0%, 31.25% { transform: translateY(0); }
  37.5% { transform: translateY(1.2px); }
  46.88% { transform: translateY(-0.6px); }
  56.25%, 62.5% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

/* ---- 5. refinery-setup: crucible tips, bar fills ------------------------ */
.sol-icon--refinery-setup { --d: 2.4s; }
.sol-icon--refinery-setup .cru { --k: sol-rf-tip; --kh: sol-rf-tip-h; transform-origin: 26px 20px; transform: rotate(32deg); }
.sol-icon--refinery-setup .str { --k: sol-rf-stream; --kh: sol-rf-stream-h; transform-origin: 40px 23px; }
.sol-icon--refinery-setup .bar { --k: sol-rf-bar; --kh: sol-rf-bar-h; transform-origin: 48px 55.5px; }

@keyframes sol-rf-tip {
  0% { transform: rotate(0deg); }
  23.33%, 66.67% { transform: rotate(32deg); }
  100% { transform: rotate(32deg); }
}

@keyframes sol-rf-stream {
  0%, 20% { transform: scaleY(0); opacity: 0; }
  30%, 66.67% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}

@keyframes sol-rf-bar {
  0%, 26.67% { transform: scaleY(0.02); }
  63.33%, 66.67% { transform: scaleY(1); }
  100% { transform: scaleY(1); }
}

/* ---- 6. consultancy: check lands, coin drops and flips ------------------ */
.sol-icon--consultancy { --d: 2.2s; }
.sol-icon--consultancy .ck { --k: sol-cs-check; --kh: sol-cs-check-h; transform-origin: 23px 41px; }
.sol-icon--consultancy .coin { --k: sol-cs-coin; --kh: sol-cs-coin-h; transform-origin: 53px 46px; }

@keyframes sol-cs-check {
  0%, 9.71% { transform: scale(0.4); opacity: 0; }
  32.35%, 64.71% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes sol-cs-coin {
  0%, 12.94% { transform: translateY(-16px) scaleX(1); opacity: 0; }
  32.35% { transform: translateY(0) scaleX(1); opacity: 1; }
  42.06% { transform: translateY(0) scaleX(0.15); opacity: 1; }
  55%, 64.71% { transform: translateY(0) scaleX(1); opacity: 1; }
  100% { transform: translateY(0) scaleX(1); opacity: 1; }
}

/* ---- 7. machine-services: gear turns, wrench taps ----------------------- */
.sol-icon--machine-services { --d: 2.2s; }
.sol-icon--machine-services .gear { --k: sol-ms-gear; --kh: sol-ms-gear-h; transform-origin: 26px 44px; }
.sol-icon--machine-services .wr { --k: sol-ms-tap; --kh: sol-ms-tap-h; }

@keyframes sol-ms-gear {
  0% { transform: rotate(-90deg); }
  38.82%, 64.71% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@keyframes sol-ms-tap {
  0%, 35.59% { transform: translate(0, 0); }
  42.06% { transform: translate(-2px, 2px); }
  48.53% { transform: translate(0, 0); }
  55% { transform: translate(-2px, 2px); }
  61.47%, 64.71% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}

/* ---- 8. process-flow: coin drops out of the leak ------------------------ */
.sol-icon--process-flow { --d: 2s; }
.sol-icon--process-flow .coin { --k: sol-pf-coin; --kh: sol-pf-coin-h; transform-origin: 36px 54px; }
.sol-icon--process-flow .chev { --k: sol-pf-chev; --kh: sol-pf-chev-h; }

@keyframes sol-pf-coin {
  0%, 6.25% { transform: translateY(-22px) scale(0.6); opacity: 0; }
  34.38% { transform: translateY(0) scale(1); opacity: 1; }
  45% { transform: translateY(-3px) scale(1); opacity: 1; }
  55%, 62.5% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes sol-pf-chev {
  0% { transform: translateX(-8px); opacity: 0; }
  31.25%, 62.5% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

/* loop variants (same frames, separate names so hover restarts cleanly) */

@keyframes sol-as-read-h {
  0% { transform: translateY(24px); }
  12.94% { transform: translateY(16px); }
  19.41% { transform: translateY(16px); }
  32.35% { transform: translateY(8px); }
  38.82% { transform: translateY(8px); }
  51.76% { transform: translateY(0); }
  64.71% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

@keyframes sol-as-bub-h {
  0% { transform: translateY(6px); opacity: 0; }
  32.35% { opacity: 1; }
  64.71% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes sol-rs-line-h {
  0% { transform: scaleX(0.2); opacity: 0.4; }
  23.33% { transform: scaleX(1); opacity: 1; }
  66.67% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}

@keyframes sol-rs-b1-h {
  0%, 10% { transform: translateX(-28px); opacity: 0; }
  40%, 66.67% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes sol-rs-b2-h {
  0%, 20% { transform: translateX(30px); opacity: 0; }
  53.33%, 66.67% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes sol-or-turn-h {
  0% { transform: rotate(-360deg); }
  50%, 62.5% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@keyframes sol-lb-drop-h {
  0% { transform: translateY(0); opacity: 1; }
  31.25% { transform: translateY(21px); opacity: 1; }
  37.5% { transform: translateY(26px); opacity: 0; }
  38.75% { transform: translateY(0); opacity: 0; }
  56.25%, 62.5% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes sol-lb-liq-h {
  0%, 31.25% { transform: translateY(0); }
  37.5% { transform: translateY(1.2px); }
  46.88% { transform: translateY(-0.6px); }
  56.25%, 62.5% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

@keyframes sol-rf-tip-h {
  0% { transform: rotate(0deg); }
  23.33%, 66.67% { transform: rotate(32deg); }
  100% { transform: rotate(32deg); }
}

@keyframes sol-rf-stream-h {
  0%, 20% { transform: scaleY(0); opacity: 0; }
  30%, 66.67% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}

@keyframes sol-rf-bar-h {
  0%, 26.67% { transform: scaleY(0.02); }
  63.33%, 66.67% { transform: scaleY(1); }
  100% { transform: scaleY(1); }
}

@keyframes sol-cs-check-h {
  0%, 9.71% { transform: scale(0.4); opacity: 0; }
  32.35%, 64.71% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes sol-cs-coin-h {
  0%, 12.94% { transform: translateY(-16px) scaleX(1); opacity: 0; }
  32.35% { transform: translateY(0) scaleX(1); opacity: 1; }
  42.06% { transform: translateY(0) scaleX(0.15); opacity: 1; }
  55%, 64.71% { transform: translateY(0) scaleX(1); opacity: 1; }
  100% { transform: translateY(0) scaleX(1); opacity: 1; }
}

@keyframes sol-ms-gear-h {
  0% { transform: rotate(-90deg); }
  38.82%, 64.71% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@keyframes sol-ms-tap-h {
  0%, 35.59% { transform: translate(0, 0); }
  42.06% { transform: translate(-2px, 2px); }
  48.53% { transform: translate(0, 0); }
  55% { transform: translate(-2px, 2px); }
  61.47%, 64.71% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}

@keyframes sol-pf-coin-h {
  0%, 6.25% { transform: translateY(-22px) scale(0.6); opacity: 0; }
  34.38% { transform: translateY(0) scale(1); opacity: 1; }
  45% { transform: translateY(-3px) scale(1); opacity: 1; }
  55%, 62.5% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes sol-pf-chev-h {
  0% { transform: translateX(-8px); opacity: 0; }
  31.25%, 62.5% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

/* ---- 9-13. industries (home): same engine, five more icons ---------------- */
.sol-icon--chip { --d: 2.2s; }
.sol-icon--chip .p1 { --k: sol-ch-p1; --kh: sol-ch-p1-h; }
.sol-icon--chip .p2 { --k: sol-ch-p2; --kh: sol-ch-p2-h; }
.sol-icon--chip .p3 { --k: sol-ch-p3; --kh: sol-ch-p3-h; }
.sol-icon--chip .p4 { --k: sol-ch-p4; --kh: sol-ch-p4-h; }

@keyframes sol-ch-p1 {
  0%, 0% { stroke: currentColor; }
  2.59%, 10.35% { stroke: var(--accent); }
  14.24%, 64.71% { stroke: currentColor; }
  100% { stroke: currentColor; }
}
@keyframes sol-ch-p2 {
  0%, 12.94% { stroke: currentColor; }
  15.53%, 23.29% { stroke: var(--accent); }
  27.18%, 64.71% { stroke: currentColor; }
  100% { stroke: currentColor; }
}
@keyframes sol-ch-p3 {
  0%, 25.88% { stroke: currentColor; }
  28.47%, 36.24% { stroke: var(--accent); }
  40.12%, 64.71% { stroke: currentColor; }
  100% { stroke: currentColor; }
}
@keyframes sol-ch-p4 {
  0%, 38.82% { stroke: currentColor; }
  41.41%, 49.18% { stroke: var(--accent); }
  53.06%, 64.71% { stroke: currentColor; }
  100% { stroke: currentColor; }
}

.sol-icon--pcb { --d: 2.4s; }
.sol-icon--pcb .f1 { --k: sol-pc-f1; --kh: sol-pc-f1-h; }
.sol-icon--pcb .f2 { --k: sol-pc-f2; --kh: sol-pc-f2-h; }
.sol-icon--pcb .f3 { --k: sol-pc-f3; --kh: sol-pc-f3-h; }
.sol-icon--pcb .f4 { --k: sol-pc-f4; --kh: sol-pc-f4-h; }
.sol-icon--pcb .f5 { --k: sol-pc-f5; --kh: sol-pc-f5-h; }
.sol-icon--pcb .f6 { --k: sol-pc-f6; --kh: sol-pc-f6-h; }

@keyframes sol-pc-f1 {
  0%, 3.33% { fill-opacity: 0; }
  11.33%, 66.67% { fill-opacity: 1; }
  100% { fill-opacity: 1; }
}
@keyframes sol-pc-f2 {
  0%, 11.33% { fill-opacity: 0; }
  19.33%, 66.67% { fill-opacity: 1; }
  100% { fill-opacity: 1; }
}
@keyframes sol-pc-f3 {
  0%, 19.33% { fill-opacity: 0; }
  27.33%, 66.67% { fill-opacity: 1; }
  100% { fill-opacity: 1; }
}
@keyframes sol-pc-f4 {
  0%, 27.33% { fill-opacity: 0; }
  35.33%, 66.67% { fill-opacity: 1; }
  100% { fill-opacity: 1; }
}
@keyframes sol-pc-f5 {
  0%, 35.33% { fill-opacity: 0; }
  43.33%, 66.67% { fill-opacity: 1; }
  100% { fill-opacity: 1; }
}
@keyframes sol-pc-f6 {
  0%, 43.33% { fill-opacity: 0; }
  51.33%, 66.67% { fill-opacity: 1; }
  100% { fill-opacity: 1; }
}

.sol-icon--plating { --d: 2.4s; }
.sol-icon--plating .prt { --k: sol-pl-part; --kh: sol-pl-part-h; }
.sol-icon--plating .hg { --k: sol-pl-hang; --kh: sol-pl-hang-h; transform-origin: 36px 14px; }
.sol-icon--plating .liq { --k: sol-pl-liq; --kh: sol-pl-liq-h; }

@keyframes sol-pl-part {
  0%, 5.33% { transform: translateY(-12px); }
  36.67%, 66.67% { transform: translateY(0); }
  100% { transform: translateY(0); }
}
@keyframes sol-pl-hang {
  0%, 5.33% { transform: scaleY(0.15); }
  36.67%, 66.67% { transform: scaleY(1); }
  100% { transform: scaleY(1); }
}
@keyframes sol-pl-liq {
  0%, 36.67% { transform: translateY(0); }
  42.67% { transform: translateY(1.6px); }
  52% { transform: translateY(-0.8px); }
  61.33%, 66.67% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

.sol-icon--ring { --d: 2s; }
.sol-icon--ring .gl { --k: sol-rg-glint; --kh: sol-rg-glint-h; transform-origin: 50px 14px; opacity: 0; }

@keyframes sol-rg-glint {
  0%, 21.88% { opacity: 0; transform: scale(0.3) rotate(-45deg); }
  31.25% { opacity: 1; transform: scale(1) rotate(0deg); }
  40.62% { opacity: 0; transform: scale(0.4) rotate(45deg); }
  62.5% { opacity: 0; transform: scale(0.3) rotate(45deg); }
  100% { opacity: 0; transform: scale(0.3) rotate(45deg); }
}

.sol-icon--drum { --d: 2.2s; }
.sol-icon--drum .arw { --k: sol-dr-turn; --kh: sol-dr-turn-h; transform-origin: 36px 32px; }
.sol-icon--drum .drp { --k: sol-dr-drop; --kh: sol-dr-drop-h; }

@keyframes sol-dr-turn {
  0% { transform: rotate(-360deg); }
  45.29%, 64.71% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@keyframes sol-dr-drop {
  0%, 35.59% { transform: translateY(0); opacity: 1; }
  51.76% { transform: translateY(9px); opacity: 0; }
  53.06% { transform: translateY(0); opacity: 0; }
  61.47%, 64.71% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* loop variants for the five industry icons */

@keyframes sol-ch-p1-h {
  0%, 0% { stroke: currentColor; }
  2.59%, 10.35% { stroke: var(--accent); }
  14.24%, 64.71% { stroke: currentColor; }
  100% { stroke: currentColor; }
}

@keyframes sol-ch-p2-h {
  0%, 12.94% { stroke: currentColor; }
  15.53%, 23.29% { stroke: var(--accent); }
  27.18%, 64.71% { stroke: currentColor; }
  100% { stroke: currentColor; }
}

@keyframes sol-ch-p3-h {
  0%, 25.88% { stroke: currentColor; }
  28.47%, 36.24% { stroke: var(--accent); }
  40.12%, 64.71% { stroke: currentColor; }
  100% { stroke: currentColor; }
}

@keyframes sol-ch-p4-h {
  0%, 38.82% { stroke: currentColor; }
  41.41%, 49.18% { stroke: var(--accent); }
  53.06%, 64.71% { stroke: currentColor; }
  100% { stroke: currentColor; }
}

@keyframes sol-pc-f1-h {
  0%, 3.33% { fill-opacity: 0; }
  11.33%, 66.67% { fill-opacity: 1; }
  100% { fill-opacity: 1; }
}

@keyframes sol-pc-f2-h {
  0%, 11.33% { fill-opacity: 0; }
  19.33%, 66.67% { fill-opacity: 1; }
  100% { fill-opacity: 1; }
}

@keyframes sol-pc-f3-h {
  0%, 19.33% { fill-opacity: 0; }
  27.33%, 66.67% { fill-opacity: 1; }
  100% { fill-opacity: 1; }
}

@keyframes sol-pc-f4-h {
  0%, 27.33% { fill-opacity: 0; }
  35.33%, 66.67% { fill-opacity: 1; }
  100% { fill-opacity: 1; }
}

@keyframes sol-pc-f5-h {
  0%, 35.33% { fill-opacity: 0; }
  43.33%, 66.67% { fill-opacity: 1; }
  100% { fill-opacity: 1; }
}

@keyframes sol-pc-f6-h {
  0%, 43.33% { fill-opacity: 0; }
  51.33%, 66.67% { fill-opacity: 1; }
  100% { fill-opacity: 1; }
}

@keyframes sol-pl-part-h {
  0%, 5.33% { transform: translateY(-12px); }
  36.67%, 66.67% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

@keyframes sol-pl-hang-h {
  0%, 5.33% { transform: scaleY(0.15); }
  36.67%, 66.67% { transform: scaleY(1); }
  100% { transform: scaleY(1); }
}

@keyframes sol-pl-liq-h {
  0%, 36.67% { transform: translateY(0); }
  42.67% { transform: translateY(1.6px); }
  52% { transform: translateY(-0.8px); }
  61.33%, 66.67% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

@keyframes sol-rg-glint-h {
  0%, 21.88% { opacity: 0; transform: scale(0.3) rotate(-45deg); }
  31.25% { opacity: 1; transform: scale(1) rotate(0deg); }
  40.62% { opacity: 0; transform: scale(0.4) rotate(45deg); }
  62.5% { opacity: 0; transform: scale(0.3) rotate(45deg); }
  100% { opacity: 0; transform: scale(0.3) rotate(45deg); }
}

@keyframes sol-dr-turn-h {
  0% { transform: rotate(-360deg); }
  45.29%, 64.71% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@keyframes sol-dr-drop-h {
  0%, 35.59% { transform: translateY(0); opacity: 1; }
  51.76% { transform: translateY(9px); opacity: 0; }
  53.06% { transform: translateY(0); opacity: 0; }
  61.47%, 64.71% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ---- reduced motion: no animation at all, the finished icon stays ------- */
@media (prefers-reduced-motion: reduce) {
  .sol-icon .a,
  .sol-icon.is-playing:not(.is-played) .a,
  .sol-hover:hover .sol-icon .a,
  .sol-hover:focus-within .sol-icon .a {
    animation: none !important;
  }
}

/* ---- hero placement: icon beside the page hero text --------------------- */
.sol-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.sol-hero-text {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 900px) {
  .sol-hero {
    gap: var(--space-6);
  }

  .sol-hero > .sol-icon--lg {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 640px) {
  .sol-hero {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .sol-hero-text {
    width: 100%;
  }

  .sol-hero > .sol-icon--lg {
    width: 96px;
    height: 96px;
  }
}