/* =========================
   AUTOMOTIVE LIGHTING + PROGRAM LIFECYCLE — carbon
   The specialisation sits beside an SVG headlamp whose lights come on
   (.model, styles/services.css).
   The lifecycle is a stepper: four numbered nodes on one connector, four
   columns on desktop and a vertical run below 1100px. An accent beam fills the
   connector as the stepper scrolls through the viewport, and each node fills
   with the accent as the beam reaches it (js/lifecycle.js; transform + opacity only).
   Under each node, the same headlamp at that step: sketch, outline, part, lit.
   On view (js/build.js): the models assemble, the headings' accent marks wipe
   on, the text slides in towards the drawings and the four steps rise in turn.
========================= */

.lighting {
  padding-block: var(--section);
  overflow-x: clip; /* text waiting to build sits 2.5rem towards the edge */
  background: var(--carbon);
  color: var(--ink-inverse);
}

/* The heading across the top (it is too long for a side column), then the
   drawing left and the text right */
.lighting__intro {
  align-items: center;
  row-gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.lighting__text {
  display: contents;
}

.lighting__title {
  grid-column: 1 / -1;
  grid-row: 1;
}

.lighting__figure {
  grid-column: 1 / 8;
  grid-row: 2;
}

.lighting__body {
  grid-column: 8 / -1;
  grid-row: 2;
  max-width: 42ch;
  padding-left: clamp(0rem, -1rem + 2.5vw, 2.5rem);
  font-size: var(--step-lead);
  line-height: 1.4;
}

/* ---------- Lifecycle heading: heading left, subheading right ---------- */
.lifecycle-head {
  row-gap: 1rem;
  margin-top: var(--section);
}

.lifecycle-head__title {
  grid-column: 1 / 6;
}

.lifecycle-head__sub {
  grid-column: 7 / -1;
  align-self: end;
  max-width: 34ch;
  font-size: var(--step-lead);
  line-height: 1.3;
  color: var(--ink-inverse-soft);
}

/* ---------- Stepper ---------- */
.track {
  --node: 4rem;
  --stage-pad: clamp(1rem, 0.6rem + 1vw, 1.75rem);
  position: relative;
  margin: clamp(3rem, 2rem + 3vw, 5rem) var(--margin) 0;
}

/* The connector runs from the first node's centre to the last's. js/lifecycle.js
   measures it (--rail-x, --rail-y, --rail-length); the fallbacks fit four columns. */
.track__rail {
  position: absolute;
  left: var(--rail-x, calc(var(--node) / 2));
  top: var(--rail-y, calc(var(--node) / 2));
  width: var(--rail-length, calc(75% + var(--stage-pad)));
  height: 3px;
  transform: translateY(-50%);
  background: var(--rule-dark);
  overflow: hidden;
}

.track__beam {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent-bright);
  transform-origin: left center;
  transform: scaleX(1);
}

.track.is-tracking .track__beam {
  transform: scaleX(0);
}

.track__stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 var(--stage-pad);
}

.stage:first-child {
  padding-left: 0;
}

/* Steps rise in turn when the row comes into view together */
.stage:nth-child(2) { --delay: 0.1s; }
.stage:nth-child(3) { --delay: 0.2s; }
.stage:nth-child(4) { --delay: 0.3s; }

/* Node: a ring holding the step number, on the connector. When the beam reaches
   it, an accent disc grows in under a copy of the number in --accent-ink. */
.stage__num {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--node);
  height: var(--node);
  border: 1px solid #5a5e63;
  border-radius: 50%;
  background: var(--carbon);
  font-size: var(--step-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-inverse-soft);
}

.stage__num::before,
.stage__num::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
}

.stage__num::before {
  background: var(--accent);
  transition:
    opacity 0.5s var(--ease),
    transform 0.6s var(--ease);
}

.stage__num::after {
  content: attr(data-step);
  display: grid;
  place-items: center;
  color: var(--accent-ink);
  transition: opacity 0.5s var(--ease);
}

.track.is-tracking .stage__num::before {
  opacity: 0;
  transform: scale(0.4);
}

.track.is-tracking .stage__num::after {
  opacity: 0;
}

.track.is-tracking .stage.is-lit .stage__num::before {
  opacity: 1;
  transform: none;
}

.track.is-tracking .stage.is-lit .stage__num::after {
  opacity: 1;
}

/* The lamp at this step */
.model--stage {
  max-width: 15rem;
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

.stage__title {
  min-height: 2.3em;
  margin-top: 1.25rem;
  font-size: var(--step-lead);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.stage__list {
  margin-top: 1.5rem;
}

.stage__list li {
  padding-block: 0.75rem;
  border-top: 1px solid var(--rule-dark);
  line-height: 1.35;
}

/* ---------- Narrow: the heading rows stack, text first ---------- */
@media (max-width: 960px) {
  .lighting__figure,
  .lighting__body,
  .lifecycle-head__title,
  .lifecycle-head__sub {
    grid-column: 1 / -1;
    grid-row: auto;
    padding-left: 0;
  }

  .lighting__figure {
    margin-top: clamp(2rem, 1rem + 3vw, 3rem);
  }
}

/* ---------- Below 1100px: the stepper runs down the page, nodes on the left ---------- */
@media (max-width: 1100px) {
  .track__rail {
    width: 3px;
    height: var(--rail-length, calc(100% - var(--node)));
    transform: translateX(-50%);
  }

  .track__beam {
    transform-origin: center top;
    transform: scaleY(1);
  }

  .track.is-tracking .track__beam {
    transform: scaleY(0);
  }

  .track__stages {
    grid-template-columns: 1fr;
    row-gap: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  }

  .stage,
  .stage:first-child {
    display: grid;
    grid-template-columns: var(--node) minmax(0, 1fr);
    column-gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
    align-items: start;
    padding: 0;
  }

  .stage > * {
    grid-column: 2;
  }

  .stage__num {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .model--stage {
    max-width: 12rem;
    margin-top: 0;
  }

  .stage__title {
    min-height: 0;
    margin-top: 1rem;
  }

  /* One step per screen height here: each builds on its own, no stagger */
  .stage {
    --delay: 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage__num::before,
  .stage__num::after {
    transition: none;
  }
}