/* CNC cutting & fabrication: the "Toolpath" set piece and the toolpath opener touch */

/* ---------- Opener touch: a cutter traces a toolpath round the photo cluster ---------- */
.tpo { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .6s; }
.tpo.is-on { opacity: 1; }
/* Phones: room on the right for the toolpath outside the lead photo's offset outline */
@media (max-width: 900px) { .page-cnc-cutting .svc-cluster { margin-right: 32px; } }
.tpo__guide { fill: none; stroke: var(--steel); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .55; }
.tpo__cut { fill: none; stroke: var(--green-text); stroke-width: 2.5; stroke-linejoin: round; }
.tpo__head .tpo__ring { fill: rgba(255,212,0,.22); stroke: var(--ink); stroke-width: 2; }
.tpo__head .tpo__dot { fill: var(--yellow); stroke: var(--ink); stroke-width: 1.5; }
.tpo__trail circle { fill: #ffb21f; }
.tpo__sparks line { stroke: #ffc21a; stroke-width: 2; stroke-linecap: round; }

/* ---------- Set piece layout ---------- */
/* At least a screen tall, so a tall screen never shows the next section under the pinned scene */
.tp { min-height: 100vh; display: grid; align-content: center; }
/* Short screens (1366x768): less padding, so the pinned scene fits under the header */
@media (min-width: 901px) and (max-height: 860px) { .tp { padding-block: 96px 20px; } }
.tp__pin { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(18px, 2.6vh, 30px) clamp(32px, 4.5vw, 80px); align-items: center; }
/* Heading and lede run across the top of both columns: the heading keeps one line where it fits, the lede takes the rest */
.tp__head { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, max-content) minmax(240px, 1fr); gap: 12px clamp(28px, 4vw, 64px); align-items: center; }
.tp .lede { margin: 0; color: rgba(255,255,255,.9); }
.tp__steps { list-style: none; margin: 0; padding: 0; border-top: 2px solid rgba(255,255,255,.25); }
.tp__step { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.14); transition: opacity .35s; }
.tp__step h3 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.1rem, 1.35vw, 1.35rem); }
.tp__step h3::before { content: attr(data-n); display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border: 2px solid var(--yellow); border-radius: var(--r); color: var(--yellow); font-family: var(--f-body); font-style: normal; font-weight: 700; font-size: .95rem; transition: background-color .3s, color .3s; }
.tp__step p { margin: 4px 0 0 40px; font-size: .96rem; line-height: 1.45; color: rgba(255,255,255,.86); }
.tp__step.is-on h3::before { background: var(--yellow); color: var(--ink); }
.tp__prog { height: 4px; margin-top: 18px; background: rgba(255,255,255,.18); }
.tp__prog span { display: block; height: 100%; background: var(--yellow); transform-origin: left; transform: scaleX(1); }

/* ---------- The stage: an SVG workshop at 16:10 ---------- */
.tp__stage { position: relative; margin: 0 0 0 auto; width: min(100%, calc(var(--media-cap) * 1.42), calc((100vh - 330px) * 1.6)); }
.tp__stage::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 2px solid var(--yellow); border-radius: var(--r); }
.tp__scene { position: relative; aspect-ratio: 16 / 10; overflow: clip; border-radius: var(--r) var(--r) 0 0; background: #1d2421; transform-style: preserve-3d; }
.tp__svg { width: 100%; height: 100%; }
.tp__cap { left: auto; right: 12px; bottom: 64px; background: var(--yellow); color: var(--ink); z-index: 3; }

/* Machine status lamps under the scene */
.tp__stages { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; background: var(--ink); border-radius: 0 0 var(--r) var(--r); }
.tp__stages li { display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 8px 12px; border-left: 1px solid rgba(255,255,255,.12); font-weight: 700; font-size: .92rem; line-height: 1.2; color: rgba(255,255,255,.88); transition: color .3s, background-color .3s; }
.tp__stages li:first-child { border-left: 0; }
.tp__stages i { flex: none; width: 12px; height: 12px; border: 2px solid var(--yellow); transform: skewX(-14deg); transition: background-color .25s, box-shadow .25s; }
.tp__stages li.is-on { color: var(--white); }
.tp__stages li.is-on i { background: var(--yellow); box-shadow: 0 0 10px rgba(255,212,0,.8); }
.tp__stages li.is-now { background: rgba(255,212,0,.12); }

/* Finished-state colours (JS sets the in-between states inline) */
.tp__f { stroke: rgba(13,20,16,.55); stroke-width: .8; stroke-linejoin: round; }
.tp__f--up { fill: #aeb6b4; }
.tp__f--base { fill: #c4cbc9; }
.tp__f--edge { fill: #8b9592; }
.tp__f--top { fill: #d5dbd9; }
.tp__f--gus { fill: #a3aca9; }
.tp__hole-i { fill: #141917; }
.tp__spangle polygon { fill: url(#tp-spangle); pointer-events: none; }
.tp__bead { fill: none; stroke: #8f9995; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.tp__ripple { fill: none; stroke: #5f6965; stroke-width: 2; stroke-dasharray: 1.2 3; stroke-linecap: round; }
.tp__gone { fill: #121715; }
.tp__plan { fill: none; stroke: var(--yellow); stroke-width: 2.2; stroke-dasharray: 7 4; opacity: 0; }
.tp__spin { transform-box: fill-box; transform-origin: center; }
.tp__kerf { fill: none; stroke: #1b2125; stroke-width: 3.2; stroke-linejoin: round; }
.tp__clamp { fill: #1b211e; stroke: var(--yellow); stroke-width: 2; }
.tp__pface, .tp__pedge { fill-rule: evenodd; }
.tp__pface { fill: #0E8F3C; stroke: rgba(13,20,16,.5); stroke-width: 1; }
.tp__pedge { fill: #075c27; }
.tp__chip { fill: #e9eef0; }
.tp__spark { stroke: #ffc21a; stroke-width: 2; stroke-linecap: round; }

@media (prefers-reduced-motion: no-preference) {
  /* Alive while waiting: the toolpath preview marches like CAM software and the spindle turns */
  html.js:not(.motion-off) .tp__plan { animation: tp-ants .9s linear infinite; }
  html.js:not(.motion-off) .tp__spin { animation: tp-spin .5s linear infinite; }
  html.js:not(.motion-off) .tp__step:not(.is-on) :is(h3, p) { color: rgba(255,255,255,.7); }
  html.js:not(.motion-off) .tp__stages li:not(.is-on) { color: rgba(255,255,255,.62); }
}
@media (min-width: 901px) and (max-height: 860px) and (prefers-reduced-motion: no-preference) {
  /* On a short screen the current step shows its line and the others keep their names */
  html.js:not(.motion-off) .tp__step:not(.is-on) p { display: none; }
  html.js:not(.motion-off) .tp__step { padding-block: 7px; }
}

@media (max-width: 1100px) and (min-width: 901px) { .tp__stages li { font-size: .84rem; padding-inline: 8px; gap: 6px; } }
@media (max-width: 900px) {
  .tp { min-height: 0; display: block; }
  .tp__pin { grid-template-columns: minmax(0, 1fr); }
  .tp__head { grid-template-columns: minmax(0, 1fr); order: -2; }
  .tp__stage { order: -1; position: sticky; top: calc(var(--head-h) + 10px); z-index: 2; width: calc(100% - 14px); margin: 0 14px 24px 0; }
  .tp__stages li { justify-content: center; padding: 6px 4px; font-size: .78rem; text-align: center; flex-direction: column; gap: 5px; min-height: 48px; }
  .tp__cap { position: relative; left: auto; right: auto; top: auto; bottom: auto; z-index: 1; display: block; max-width: none; font-size: .875rem; padding: 6px 12px; border-radius: 0 0 var(--r) var(--r); }
  .tp__stages { border-radius: 0; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  /* Room to scroll: the stage stays at the top while each step passes under it */
  html.js:not(.motion-off) .tp__step { min-height: 19vh; }
}
@keyframes tp-ants { to { stroke-dashoffset: -22; } }
@keyframes tp-spin { to { transform: rotate(360deg); } }