/* ring-r10.css — round 10's loop (Matt's 2026-10-20 markup): the ring as station 9's picture (#7.8)
   and at 8.0, the loop closed at 8.1, and the who-does-what row under them. Loaded after talk.css.
   The engine marks the host data-ring="waiting" when the pulse first reaches me (engine.js
   ringClock, RING_ME_MS); everything red here keys off that mark and stays after the pulse leaves.
   The drawings come from docs/talks/2026-10-21-philly-hardware-meetup/mockups/r10-ring/build-ring-r10-v1.py. */

/* ── Test and Feedback to AI turn red the first time the pulse reaches me, and stay red ── */
.scene-rail[data-ring="waiting"] .pipeline .cell[data-cell="test"],
.scene-rail[data-ring="waiting"] .pipeline .cell[data-cell="feedback"],
.scene-spine.layout-nexus[data-ring="waiting"]
  .pipeline-row
  .cell[data-cell="test"]:not(.flipped):not(.gone),
.scene-spine.layout-nexus[data-ring="waiting"]
  .pipeline-row
  .cell[data-cell="feedback"]:not(.flipped):not(.gone) {
  border-color: #f87171;
  box-shadow: inset 0 0 0 1px #f87171;
  background: rgba(248, 113, 113, 0.1);
}
.scene-rail .pipeline .cell {
  transition:
    border-color 600ms var(--ease),
    box-shadow 600ms var(--ease),
    background 600ms var(--ease);
}

/* ── 8.0 and 8.1: the words over the ring. The ring's centre is (480, 330) of its 900 x 600 box ── */
.scene-spine.layout-nexus .object-group.loopbox > .object.inloop,
.scene-spine.layout-nexus .object-group.loopbox > .object.onloop {
  position: absolute;
  left: 53.333%;
  top: 55%;
  width: 42%;
  transform: translate(-50%, -50%);
  background: none;
  border: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms var(--ease);
}
.scene-spine.layout-nexus[data-ring="waiting"]:not([data-build="2"])
  .object-group.loopbox
  > .object.inloop {
  opacity: 1;
}
/* 8.1: the red "in" gives way to the mint "on" as the loop closes */
.scene-spine.layout-nexus[data-build="2"]
  .object-group.loopbox
  > .object.onloop.on {
  opacity: 1;
  transition-delay: 450ms;
}

/* the callouts sit centred above the ring, on its centre line; the waiting one arrives with the red */
.scene-spine.layout-nexus .object-group.loopbox > .object.waits,
.scene-spine.layout-nexus .object-group.loopbox > .object.outside {
  top: -9%;
  bottom: auto;
  left: 53.333%;
  right: auto;
  transform: translateX(-50%);
}
.scene-spine.layout-nexus .object-group.loopbox > .object.waits {
  width: 50%;
}
.scene-spine.layout-nexus .object-group.loopbox > .object.outside {
  width: 65%;
}
.scene-spine.layout-nexus:not([data-ring="waiting"])
  .object-group.loopbox
  > .object.waits {
  opacity: 0;
}
.scene-spine.layout-nexus[data-build="2"]
  .object-group.loopbox
  > .object.outside.on {
  transition-delay: 450ms;
}

/* ── 8.1: the steps the agent now runs glow mint, framed together under the word Automated ── */
.scene-spine.layout-nexus .pipeline-row {
  position: relative;
}
.scene-spine.layout-nexus .pipeline-row::before,
.scene-spine.layout-nexus .pipeline-row::after {
  position: absolute;
  /* after Feedback leaves, seven cells share the row: the frame starts after the first */
  left: calc((100% - 6 * var(--g)) / 7 + var(--g) / 2);
  right: calc(var(--g) / -2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms var(--ease);
}
.scene-spine.layout-nexus .pipeline-row::after {
  content: "";
  top: calc(var(--g) / -2);
  bottom: calc(var(--g) / -2);
  border: 2px solid var(--hb-mint, #5ae6ab);
  border-radius: 18px;
  box-shadow:
    0 0 24px rgba(90, 230, 171, 0.35),
    inset 0 0 18px rgba(90, 230, 171, 0.12);
}
.scene-spine.layout-nexus .pipeline-row::before {
  content: "Automated";
  bottom: calc(100% + var(--g) / 2 + 0.25em);
  padding-left: 0.2em;
  color: var(--hb-mint, #5ae6ab);
  font-size: 1.35em;
  font-weight: 600;
  line-height: 1;
}
.scene-spine.layout-nexus[data-build="2"] .pipeline-row::before,
.scene-spine.layout-nexus[data-build="2"] .pipeline-row::after {
  opacity: 1;
  transition-delay: 2700ms;
}
.scene-spine.layout-nexus[data-build="2"] .pipeline-row .cell.ai:not(.gone) {
  border-color: rgba(90, 230, 171, 0.75);
  box-shadow: 0 0 16px rgba(90, 230, 171, 0.28);
  transition-delay: 2700ms;
}

/* ── the still twins: reduced motion, and the phone reading page (it shows every build at once) ── */
@media (prefers-reduced-motion: reduce) {
  .scene-spine.layout-nexus .object-stack img.layer.base,
  .scene-rail .station .object.meloop img {
    content: url("assets/act5b/nexus-me-in-loop-static.svg");
  }
  .scene-spine.layout-nexus .object-stack img.layer:not(.base) {
    content: url("assets/act5b/loop-closed-me-static.svg");
  }
}
@media (max-width: 760px) {
  html:not(.is-stage) .scene-spine.layout-nexus .object-stack img.layer.base,
  html:not(.is-stage) .scene-rail .station .object.meloop img {
    content: url("assets/act5b/nexus-me-in-loop-static.svg");
  }
  html:not(.is-stage)
    .scene-spine.layout-nexus
    .object-stack
    img.layer:not(.base) {
    content: url("assets/act5b/loop-closed-me-static.svg");
  }
  /* the reading page shows every build at once: no fades or delays here, so each [data-at]
     element is fully shown the moment the page is ready (verifier check 2) */
  html:not(.is-stage) .scene-spine.layout-nexus .object-group.loopbox > .object,
  html:not(.is-stage) .scene-spine.layout-nexus .pipeline-row .cell,
  html:not(.is-stage) .scene-rail .pipeline .cell {
    transition: none;
  }
  html:not(.is-stage)
    .scene-spine.layout-nexus
    .object-group.loopbox
    > .object.onloop.on,
  html:not(.is-stage)
    .scene-spine.layout-nexus
    .object-group.loopbox
    > .object.outside.on {
    opacity: 1;
  }
  /* room above the ring for the callout, clear of the line above it */
  html:not(.is-stage) .scene-spine.layout-nexus .object-group.loopbox {
    margin-top: 11%;
  }
  html:not(.is-stage) .scene-spine.layout-nexus .pipeline-row::before,
  html:not(.is-stage) .scene-spine.layout-nexus .pipeline-row::after {
    display: none;
  }
}