/* ==========================================================================
   Home page — hero with animated R&D illustration, service directory
   ========================================================================== */

/* ---- Hero ---- */
.hero {
  padding-block: var(--cds-spacing-07) var(--cds-spacing-09);
  background: var(--cds-background);
  border-bottom: 1px solid var(--cds-border-subtle);
  overflow: hidden;
}

.hero__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cds-spacing-04) var(--cds-spacing-05);
  margin-bottom: var(--cds-spacing-08);
}

/* Brand wordmark: CAMBODIA as a techy monospace logo (always Latin, never
   translated) with a red light that sweeps across the letters. No mark, no
   entrance — just the moving red highlight. A touch smaller on narrow screens. */
.hero__wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--cds-font-mono);
  font-size: clamp(1.2rem, 3.8vw, 1.75rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--cds-text-primary);
}

.hero__wordmark:hover {
  color: var(--cds-text-primary);
  text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* A narrow red band sweeps across the letters, like a light passing over
     them. The gradient tiles (both ends are the same dark colour, so the
     seam is invisible) and repeats, so every letter always stays painted —
     no transparent gaps. Guarded for browsers without text clipping. */
  @supports (-webkit-background-clip: text) or (background-clip: text) {
    .hero__wordmark {
      background-image: linear-gradient(
        100deg,
        var(--cds-text-primary) 0%,
        var(--cds-text-primary) 46%,
        var(--cds-interactive) 50%,
        var(--cds-text-primary) 54%,
        var(--cds-text-primary) 100%
      );
      background-size: 300% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: wordmark-sheen 6s linear infinite;
    }
  }
}

@keyframes wordmark-sheen {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 300% 0;
  }
}

/* Text column + illustration column; stacked on small screens */
.hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--cds-spacing-08);
}

/* Carbon signature: short accent rule above the heading */
.hero__rule {
  width: var(--cds-spacing-09);
  height: 0.25rem;
  margin-bottom: var(--cds-spacing-06);
  background: var(--cds-interactive);
}

.hero__title {
  max-width: 20ch;
  margin-bottom: var(--cds-spacing-06);
  /* "anywhere" (not "break-word") so a long, space-less Khmer word still wraps
     instead of overflowing the viewport on narrow screens. */
  overflow-wrap: anywhere;
}

/* Rotating headline, word-by-word reveal (assets/js/components/headline.js).
   The hidden sizer stacks every phrase so the <h1> reserves room for the tallest one and the
   layout never jumps as phrases rotate; the visible line is rebuilt word-by-word by the JS. */
/* The visible line alone sizes the headline; the hidden sizer (which the JS reads the phrase list
   from) is taken out of layout, so the headline is exactly as tall as the CURRENT phrase — no
   reserved empty space above the lead at any screen width or in either language. Words may break
   (overflow-wrap) so a long, space-less Khmer compound never runs off a phone screen. */
.headline { display: block; position: relative; }
.headline-line { display: block; }
.headline-sizer { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
.headline-sizer > span { display: block; }
.headline-word { display: inline-block; overflow: hidden; vertical-align: top; max-width: 100%; padding: 0.14em 0 0.22em; margin: -0.14em 0 -0.22em; }
.headline-word > span { display: inline-block; max-width: 100%; overflow-wrap: anywhere; transform: translateY(110%); transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.headline.is-in .headline-word > span { transform: none; }
.headline.is-in.is-out .headline-word > span { transform: translateY(-110%); }
.headline.is-static .headline-word > span { transition: none; }
/* Khmer letters sit taller/lower, so give the mask a little more room to avoid clipping. */
html[lang="km"] .headline-word { padding: 0.3em 0 0.4em; margin: -0.3em 0 -0.4em; }
@media (prefers-reduced-motion: reduce) {
  .headline-word > span { transition: none; transform: none; }
}

.hero__lead {
  max-width: 44rem;
  font-size: 1.125rem;
  line-height: 1.625rem;
  color: var(--cds-text-secondary);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-spacing-03);
  margin-top: var(--cds-spacing-07);
}

/* Combined stats card: big unique-visitor number with a live "online now" line. */
.hero__stats[hidden] {
  display: none; /* keep the `hidden` attribute winning over display below */
}

/* A simple one-line stat: an icon, the visitor count, and the live count. No box. */
.hero__stats {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  margin-top: var(--cds-spacing-05);
  font-size: 0.8125rem;
  color: var(--cds-text-secondary);
}

.hero__stats-ico {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--cds-interactive);
}

.hero__stats strong {
  font-weight: 600;
  color: var(--cds-text-primary);
}

.hero__stats-online[hidden] {
  display: none;
}

.hero__stats-online {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--cds-border-subtle);
}

.hero__online-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--cds-support-success, #24a148);
  box-shadow: 0 0 0 0 rgba(36, 161, 72, 0.5);
  animation: online-pulse 2s ease-out infinite;
}

@keyframes online-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(36, 161, 72, 0.5);
  }
  70% {
    box-shadow: 0 0 0 0.35rem rgba(36, 161, 72, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(36, 161, 72, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__online-dot {
    animation: none;
  }
}

/* Latest-content date: a small pill showing how fresh the site's content is. */
.hero__updated[hidden] {
  display: none; /* keep the `hidden` attribute winning over display below */
}

.hero__updated {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--cds-text-secondary);
  border: 1px solid var(--cds-border-subtle);
}

.hero__updated-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--cds-text-secondary);
}

.hero__updated-date {
  font-weight: 600;
  color: var(--cds-text-primary);
}

.hero__figure {
  width: min(100%, 22rem);
  margin-inline: auto;
}

/* ---- Topics and services ---- */
.topics {
  padding-block: var(--cds-spacing-09) 0;
}

.services {
  padding-block: var(--cds-spacing-09);
}

.services__count {
  color: var(--cds-text-secondary);
}

.services__note {
  margin-top: var(--cds-spacing-05);
  color: var(--cds-text-helper);
}

/* ---- Breakpoints ---- */
@media (min-width: 42rem) {
  .hero {
    padding-block: var(--cds-spacing-09) var(--cds-spacing-10);
  }

  .hero__lead {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .hero__figure {
    width: min(100%, 26rem);
  }
}

@media (min-width: 66rem) {
  .hero {
    padding-block: var(--cds-spacing-10) var(--cds-spacing-12);
  }

  .hero__brand {
    margin-bottom: var(--cds-spacing-10);
  }

  .hero__layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--cds-spacing-10);
  }

  .hero__figure {
    width: 100%;
    max-width: 34rem;
    margin-inline: auto 0;
  }

  .topics {
    padding-block: var(--cds-spacing-10) 0;
  }

  .services {
    padding-block: var(--cds-spacing-10);
  }
}

/* ==========================================================================
   Illustration — R&D pipeline (blueprint style)
   Pure CSS animation on inline SVG; colours come from theme tokens so it
   follows light and dark mode. Disabled under prefers-reduced-motion.
   ========================================================================== */

.fig {
  display: block;
  width: 100%;
  height: auto;
  animation: fig-enter 900ms var(--cds-ease-expressive) both;
}

/* ---- Paint roles ---- */
.fig__backdrop {
  fill: var(--cds-background-alt);
}

.fig__gridline {
  fill: none;
  stroke: var(--cds-border-subtle);
  stroke-width: 1;
}

.fig__card {
  fill: var(--cds-layer);
  stroke: var(--cds-border-strong);
  stroke-width: 1.5;
}

.fig__rule {
  fill: none;
  stroke: var(--cds-border-subtle);
  stroke-width: 1.5;
}

.fig__ink {
  fill: none;
  stroke: var(--cds-text-primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fig__solid {
  fill: var(--cds-text-primary);
}

.fig__accent {
  fill: var(--cds-interactive);
}

.fig__lens {
  fill: var(--cds-interactive);
  fill-opacity: 0.12;
  stroke: var(--cds-text-primary);
  stroke-width: 3;
}

.fig__code {
  fill: var(--cds-border-strong);
}

.fig__code--accent {
  fill: var(--cds-interactive);
}

.fig__cursor {
  fill: var(--cds-text-primary);
}

.fig__field {
  fill: none;
  stroke: var(--cds-support-success);
  stroke-width: 3;
  stroke-dasharray: 6 5;
  opacity: 0.7;
}

.fig__rotor {
  fill: none;
  stroke: var(--cds-text-primary);
  stroke-width: 2.5;
  stroke-dasharray: 10 5;
}

.fig__wire {
  fill: none;
  stroke: var(--cds-border-strong);
  stroke-width: 2;
  stroke-dasharray: 4 5;
}

.fig__pulse {
  fill: none;
  stroke: var(--cds-interactive);
  stroke-width: 4;
  stroke-linecap: square;
  stroke-dasharray: 18 100;
  stroke-dashoffset: 18;
  animation: fig-pulse 2.4s linear infinite;
}

.fig__pulse:nth-of-type(5) {
  animation-delay: 0.8s;
}

.fig__pulse:nth-of-type(6) {
  animation-delay: 1.6s;
}

/* Sizes are in SVG units (viewBox 480), so labels scale with the figure */
.fig__label,
.fig__index {
  font-family: var(--cds-font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.fig__label {
  fill: var(--cds-text-primary);
}

.fig__index {
  fill: var(--cds-interactive);
}

html[lang="km"] .fig__label {
  font-family: var(--cds-font-khmer);
  font-size: 15px;
  letter-spacing: 0;
}

/* Phones: the figure is small, so enlarge labels relative to the artwork */
@media (max-width: 41.99rem) {
  .fig__label,
  .fig__index {
    font-size: 15px;
    letter-spacing: 0.02em;
  }

  html[lang="km"] .fig__label {
    font-size: 17px;
  }
}

/* ---- Motion ---- */
.fig__scan {
  animation: fig-scan 4s ease-in-out infinite alternate;
}

.fig__code {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: fig-type 4s steps(12, end) infinite;
}

.fig__code:nth-child(2) {
  animation-delay: 0.3s;
}

.fig__code:nth-child(3) {
  animation-delay: 0.6s;
}

.fig__code:nth-child(4) {
  animation-delay: 0.9s;
}

.fig__code:nth-child(5) {
  animation-delay: 1.2s;
}

.fig__cursor {
  animation: fig-blink 1s steps(1, end) infinite;
}

.fig__gear {
  animation: fig-spin 8s linear infinite;
}

.fig__drone {
  animation: fig-hover 2.6s ease-in-out infinite alternate;
}

.fig__rotor {
  transform-box: fill-box;
  transform-origin: center;
  animation: fig-spin 0.6s linear infinite;
}

.fig__drop {
  animation: fig-drop 1.6s ease-in infinite;
}

.fig__drop:nth-child(2) {
  animation-delay: 0.4s;
}

.fig__drop:nth-child(3) {
  animation-delay: 0.8s;
}

.fig__bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: fig-grow 2.4s ease-in-out infinite alternate;
}

.fig__bar:nth-child(2) {
  animation-delay: 0.2s;
}

.fig__bar:nth-child(3) {
  animation-delay: 0.4s;
}

.fig__bar:nth-child(4) {
  animation-delay: 0.6s;
}

.fig__bar:nth-child(5) {
  animation-delay: 0.8s;
}

@keyframes fig-enter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fig-pulse {
  to {
    stroke-dashoffset: -100;
  }
}

@keyframes fig-scan {
  to {
    transform: translateX(110px);
  }
}

@keyframes fig-type {
  0% {
    transform: scaleX(0);
  }
  40%,
  100% {
    transform: scaleX(1);
  }
}

@keyframes fig-blink {
  50% {
    opacity: 0;
  }
}

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

@keyframes fig-hover {
  to {
    transform: translateY(-6px);
  }
}

@keyframes fig-drop {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

@keyframes fig-grow {
  from {
    transform: scaleY(0.4);
  }
  to {
    transform: scaleY(1);
  }
}

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

/* Intro line under a custom home-section title (home.json). */
.services__intro {
  margin: var(--cds-spacing-02) 0 0;
  max-width: 46rem;
  color: var(--cds-text-secondary);
}

/* "Continue where you left off" (pages/home.js): one wide card above the topic tiles,
   shown only to returning learners. */
[data-continue]:not([hidden]) {
  margin-bottom: var(--cds-spacing-06);
}
.continue-card {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-06);
  padding: var(--cds-spacing-06);
  background: var(--cds-layer);
  border-left: 4px solid var(--cds-interactive);
  color: var(--cds-text-primary);
  text-decoration: none;
  transition: background 120ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.continue-card:hover {
  background: var(--cds-layer-hover);
  color: var(--cds-text-primary);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.08);
}
.continue-card:focus-visible {
  outline: 2px solid var(--cds-focus, #0f62fe);
  outline-offset: -2px;
}
.continue-card__text {
  display: grid;
  gap: var(--cds-spacing-02);
  flex: 1;
  min-width: 0;
}
.continue-card__eyebrow {
  color: var(--cds-interactive);
}
.continue-card__title {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
}
.continue-card__meta {
  color: var(--cds-text-secondary);
}
.continue-card__bar {
  display: block;
  height: 4px;
  margin-top: var(--cds-spacing-03);
  max-width: 28rem;
  background: var(--cds-border-subtle);
}
.continue-card__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--cds-interactive);
  transition: width 500ms ease;
}
.continue-card__action {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  font-weight: 600;
  color: var(--cds-interactive);
  white-space: nowrap;
}
.continue-card:hover .continue-card__arrow {
  transform: translateX(4px);
}
.continue-card__arrow {
  transition: transform 160ms ease;
}
@media (max-width: 40rem) {
  .continue-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cds-spacing-04);
    padding: var(--cds-spacing-05);
  }
}
@media (prefers-reduced-motion: reduce) {
  .continue-card,
  .continue-card__arrow,
  .continue-card__fill {
    transition: none;
  }
}

/* ==========================================================================
   ByKh Learn landing
   ========================================================================== */
.hero__rule--learn { background: var(--cds-interactive); }

/* The hero pipeline figure follows the day-of-week accent colour (--cds-interactive). */

/* Proof-of-concept check (card 03) draws itself in. */
.fig__check {
  fill: none;
  stroke: var(--cds-interactive);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: no-preference) {
  .fig__check {
    stroke-dasharray: 64;
    stroke-dashoffset: 64;
    animation: fig-check 2.6s ease-in-out infinite;
  }
}
@keyframes fig-check {
  0%, 12% { stroke-dashoffset: 64; }
  45%, 72% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 64; }
}

/* Live learning stats row under the hero text. */
.learn-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-03) 0;
  margin-top: var(--cds-spacing-05);
  padding: 0;
  list-style: none;
  color: var(--cds-text-secondary);
}
.learn-stats li { display: inline-flex; align-items: baseline; gap: 0.4ch; padding-inline: var(--cds-spacing-05); }
.learn-stats li:first-child { padding-left: 0; }
.learn-stats li + li { border-left: 1px solid var(--cds-border-subtle); }
.learn-stats strong { color: var(--cds-interactive); font-size: 1.0625rem; }

/* Continue where you left off: only takes space when a card is present. */
.continue-section { padding-block: 0; }
.continue-section:has(.continue-card) { padding-block: var(--cds-spacing-08) 0; }

/* How it works — three promise cards (Carbon 1px-grid group). */
.learn-how { padding-block: var(--cds-spacing-09); }
.learn-how__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: var(--cds-spacing-06);
  background: var(--cds-border-subtle);
  border: 1px solid var(--cds-border-subtle);
}
.learn-how__card { background: var(--cds-background); padding: var(--cds-spacing-06); }
.learn-how__num { display: block; margin-bottom: var(--cds-spacing-04); color: var(--cds-interactive); }
.learn-how__card h3 { margin-bottom: var(--cds-spacing-03); }
.learn-how__card p { color: var(--cds-text-secondary); }

@media (min-width: 42rem) {
  .learn-how__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Learning-path figure (learn landing hero) ---- */
.fig__path-done {
  fill: none; stroke: var(--cds-interactive); stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
}
.fig__path-next {
  fill: none; stroke: var(--cds-gray-40); stroke-width: 4;
  stroke-linecap: round; stroke-dasharray: 1 10;
}
.fig__node-done { fill: var(--cds-interactive); }
.fig__check-sm { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fig__node-now { fill: var(--cds-background); stroke: var(--cds-interactive); stroke-width: 4; }
.fig__node-now-dot { fill: var(--cds-interactive); }
.fig__node-halo { fill: var(--cds-interactive); opacity: 0; }
.fig__node-next { fill: var(--cds-background); stroke: var(--cds-gray-40); stroke-width: 3; }
.fig__node-num { fill: var(--cds-text-secondary); font-family: "IBM Plex Mono", monospace; font-size: 13px; text-anchor: middle; }
.fig__node-num--now { fill: var(--cds-interactive); }
.fig__flag-pole { fill: none; stroke: var(--cds-interactive); stroke-width: 3; }
.fig__flag-cloth { fill: var(--cds-interactive); }
.fig__label--muted { fill: var(--cds-text-secondary); }
.fig__progress-pct { fill: var(--cds-interactive); font-family: "IBM Plex Mono", monospace; font-size: 13px; }
.fig__progress-bg { fill: var(--cds-border-subtle); }
.fig__progress-fill {
  fill: var(--cds-interactive);
  transform-box: fill-box; transform-origin: left center; transform: scaleX(0.6);
}
.fig__traveler { fill: var(--cds-interactive); opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .fig__node-halo { transform-box: fill-box; transform-origin: center; animation: node-pulse 2.4s ease-out infinite; }
  .fig__traveler { offset-path: path("M64 356 L156 326 L246 266 L330 182"); animation: travel 3.8s ease-in-out infinite; }
  .fig__progress-fill { animation: progress-grow 3.8s ease-in-out infinite; }
}
@keyframes node-pulse {
  0% { transform: scale(0.7); opacity: 0.4; }
  70% { transform: scale(2.1); opacity: 0; }
  100% { opacity: 0; }
}
@keyframes travel {
  0% { offset-distance: 0%; opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes progress-grow {
  0% { transform: scaleX(0.12); }
  55%, 100% { transform: scaleX(0.6); }
}

/* ---- Learn wordmark (graduation-cap logo) ---- */
.hero__wordmark--learn { display: inline-flex; align-items: center; }
.hero__logo { width: 2.5rem; height: auto; flex: none; }
.hero__logo-board { fill: var(--cds-text-primary); }
.hero__logo-cap { fill: none; stroke: var(--cds-text-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero__logo-tassel { fill: none; stroke: var(--cds-interactive); stroke-width: 2; stroke-linecap: round; }
.hero__logo-knob { fill: var(--cds-interactive); }

/* ---- Learning-path figure: entrance + motion ---- */
.fig__pop { transform-box: fill-box; transform-origin: center; }
.fig__flag-cloth { transform-box: fill-box; transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  .fig__pop { opacity: 0; animation: fig-pop 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .fig__flag-cloth { animation: flag-wave 2.6s ease-in-out 1s infinite; }
  .fig__path-done { stroke-dasharray: 340; stroke-dashoffset: 340; animation: path-draw 1.1s ease 0.15s both; }
}
@keyframes fig-pop { from { opacity: 0; transform: scale(0.45); } to { opacity: 1; transform: scale(1); } }
@keyframes flag-wave { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.82); } }
@keyframes path-draw { to { stroke-dashoffset: 0; } }

/* Figure entrance stagger (delays as classes, not inline styles — strict CSP). */
.fig__pop--d1 { animation-delay: 0.35s; }
.fig__pop--d2 { animation-delay: 0.5s; }
.fig__pop--d3 { animation-delay: 0.65s; }
.fig__pop--d4 { animation-delay: 0.8s; }
.fig__pop--d5 { animation-delay: 0.95s; }

/* ---- Innovation-engine figure (learn → tech → invent → industry) ---- */
.fig__bulb-glow { fill: var(--cds-interactive); opacity: 0.16; }
.fig__bulb-glass { fill: none; stroke: var(--cds-interactive); stroke-width: 4; }
.fig__bulb-base path { fill: none; stroke: var(--cds-interactive); stroke-width: 3; stroke-linecap: round; }
.fig__bulb-base rect { fill: none; stroke: var(--cds-interactive); stroke-width: 3; }
.fig__rays line { stroke: var(--cds-interactive); stroke-width: 4; stroke-linecap: round; }
.fig__chip-body { fill: var(--cds-background); stroke: var(--cds-interactive); stroke-width: 3; }
.fig__chip-pin { fill: none; stroke: var(--cds-gray-50); stroke-width: 3; stroke-linecap: round; }
.fig__chip-trace { fill: none; stroke: var(--cds-interactive); stroke-width: 2.5; }
.fig__chip-node { fill: var(--cds-interactive); }
.fig__gear { fill: var(--cds-interactive); }
.fig__cap-board { fill: var(--cds-interactive); }
.fig__cap-arc { fill: none; stroke: var(--cds-interactive); stroke-width: 4; stroke-linecap: round; }
.fig__cap-tassel { fill: none; stroke: var(--cds-blue-40); stroke-width: 3; }
.fig__cap-knob { fill: var(--cds-blue-40); }
.fig__spark-path { fill: none; stroke: var(--cds-blue-40); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; opacity: 0.6; }
.fig__spark { fill: var(--cds-interactive); opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .fig__gear-a { transform-box: fill-box; transform-origin: center; animation: eng-spin 9s linear infinite; }
  .fig__gear-b { transform-box: fill-box; transform-origin: center; animation: eng-spin-rev 7s linear infinite; }
  .fig__bulb-glow { animation: eng-glow 2.8s ease-in-out infinite; }
  .fig__ray--a { animation: eng-twinkle 2.2s ease-in-out infinite; }
  .fig__ray--b { animation: eng-twinkle 2.2s ease-in-out 0.5s infinite; }
  .fig__ray--c { animation: eng-twinkle 2.2s ease-in-out 1s infinite; }
  .fig__chip-node--a { animation: eng-blink 1.8s ease-in-out infinite; }
  .fig__chip-node--b { animation: eng-blink 1.8s ease-in-out 0.4s infinite; }
  .fig__chip-node--c { animation: eng-blink 1.8s ease-in-out 0.8s infinite; }
  .fig__spark { offset-path: path("M104 336 Q168 318 212 232"); animation: eng-spark 3.4s ease-in-out infinite; }
}
@keyframes eng-spin { to { transform: rotate(360deg); } }
@keyframes eng-spin-rev { to { transform: rotate(-360deg); } }
@keyframes eng-glow { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.26; } }
@keyframes eng-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes eng-blink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes eng-spark { 0% { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }