/* Maintenance loop around a status board (includes/visuals/cycle.php) */
.cy { position: relative; overflow: hidden; }
.cy::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 40% at 50% 50%, rgba(150, 248, 120, .1), transparent 70%); }
.cy-wheel { position: relative; max-width: 600px; margin-inline: auto; aspect-ratio: 1 / 1; }
.cy-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.cy-track { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.cy-arc { fill: none; stroke: var(--green); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 60 300; stroke-dashoffset: 120; opacity: 0; transform-box: view-box; transform-origin: 300px 300px; }
.cy-chev { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* steps on the ring */
.cy-steps { list-style: none; margin: 0; padding: 0; }
.cy-step { position: absolute; z-index: 1; display: flex; align-items: center; gap: 9px; padding: 7px 14px 7px 7px; border-radius: 999px; transform: translate(-50%, -50%);
  background: var(--forest); box-shadow: 0 0 0 1.5px rgba(150, 248, 120, .45) inset; white-space: nowrap; }
.cy-s1 { left: 50%; top: 8.33%; }
.cy-s2 { left: 89.63%; top: 37.12%; }
.cy-s3 { left: 74.49%; top: 83.71%; }
.cy-s4 { left: 25.51%; top: 83.71%; }
.cy-s5 { left: 10.37%; top: 37.12%; }
.cy-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: var(--forest); font-size: 13px; font-weight: 700; }
.cy-txt { display: flex; flex-direction: column; line-height: 1.2; }
.cy-label { font-size: 15px; font-weight: 700; color: var(--white); }
.cy-detail { font-size: 12px; color: rgba(255, 255, 255, .78); }

/* status board in the middle */
.cy-board { position: absolute; left: 50%; top: 50%; width: 46%; transform: translate(-50%, -50%); padding: 14px 16px 10px; border-radius: 12px;
  background: var(--panel); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 20px 40px -20px rgba(0, 0, 0, .6); }
.cy-bh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; font-weight: 700; color: var(--white); }
.cy-tag { flex: none; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--green); box-shadow: 0 0 0 1px rgba(150, 248, 120, .5) inset; }
.cy-rows { list-style: none; margin: 0; padding: 0; }
.cy-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 6px 0; font-size: 13px; line-height: 1.3; }
.cy-row + .cy-row { border-top: 1px solid rgba(255, 255, 255, .06); }
.cy-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(150, 248, 120, .16); }
.cy-k { color: rgba(255, 255, 255, .78); }
.cy-v { font-weight: 600; color: var(--green); text-align: right; }

/* intro, then a highlight goes round and each step lights up as it passes */
.js .vz-figure .cy-track, .js .vz-figure .cy-chev { opacity: 0; transition: opacity .8s ease .1s; }
.js .vz-figure .cy-chev { transition-delay: 1.2s; }
.js .vz-figure .cy-step { opacity: 0; transform: translate(-50%, -50%) scale(.8); transition: opacity .4s ease, transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.js .vz-figure .cy-s1 { transition-delay: .25s; } .js .vz-figure .cy-s2 { transition-delay: .4s; } .js .vz-figure .cy-s3 { transition-delay: .55s; }
.js .vz-figure .cy-s4 { transition-delay: .7s; } .js .vz-figure .cy-s5 { transition-delay: .85s; }
.js .vz-figure .cy-board { opacity: 0; transform: translate(-50%, -46%); transition: opacity .6s ease 1s, transform .7s cubic-bezier(.2, .7, .2, 1) 1s; }
.js .vz-figure .cy-row { opacity: 0; transition: opacity .4s ease; }
.js .vz-figure .cy-r1 { transition-delay: 1.35s; } .js .vz-figure .cy-r2 { transition-delay: 1.5s; } .js .vz-figure .cy-r3 { transition-delay: 1.65s; }
.js .vz-figure .cy-r4 { transition-delay: 1.8s; } .js .vz-figure .cy-r5 { transition-delay: 1.95s; }
.js .vz-figure .cy-dot { background: #7d8a80; box-shadow: none; transition: background-color .3s ease, box-shadow .3s ease; }
.js .vz-figure .cy-r1 .cy-dot { transition-delay: 1.75s; } .js .vz-figure .cy-r2 .cy-dot { transition-delay: 1.9s; } .js .vz-figure .cy-r3 .cy-dot { transition-delay: 2.05s; }
.js .vz-figure .cy-r4 .cy-dot { transition-delay: 2.2s; } .js .vz-figure .cy-r5 .cy-dot { transition-delay: 2.35s; }
.js .vz-figure.is-visible .cy-track, .js .vz-figure.is-visible .cy-chev, .js .vz-figure.is-visible .cy-step, .js .vz-figure.is-visible .cy-row { opacity: 1; }
.js .vz-figure.is-visible .cy-step { transform: translate(-50%, -50%); }
.js .vz-figure.is-visible .cy-board { opacity: 1; transform: translate(-50%, -50%); }
.js .vz-figure.is-visible .cy-dot { background: var(--green); box-shadow: 0 0 0 3px rgba(150, 248, 120, .16); }
.js .vz-figure.is-visible .cy-arc { animation: cy-turn 10s linear 2.4s infinite; }
.js .vz-figure.is-visible .cy-step { animation: cy-hl 10s linear infinite; }
.js .vz-figure.is-visible .cy-s1 { animation-delay: 2.4s; } .js .vz-figure.is-visible .cy-s2 { animation-delay: 4.4s; } .js .vz-figure.is-visible .cy-s3 { animation-delay: 6.4s; }
.js .vz-figure.is-visible .cy-s4 { animation-delay: 8.4s; } .js .vz-figure.is-visible .cy-s5 { animation-delay: 10.4s; }
@keyframes cy-turn { 0% { opacity: 0; transform: none; } 3%, 97% { opacity: 1; } 100% { opacity: 0; transform: rotate(360deg); } }
@keyframes cy-hl { 0%, 8% { background-color: var(--forest-2); box-shadow: 0 0 0 2.5px var(--green) inset, 0 0 0 6px rgba(150, 248, 120, .16); }
  14%, 92% { background-color: var(--forest); box-shadow: 0 0 0 1.5px rgba(150, 248, 120, .45) inset; } 100% { background-color: var(--forest-2); box-shadow: 0 0 0 2.5px var(--green) inset, 0 0 0 6px rgba(150, 248, 120, .16); } }

@media (max-width: 1240px) and (min-width: 1000px), (max-width: 640px) {
  .cy-detail { display: none; }
}
@media (max-width: 1240px) and (min-width: 1000px) {
  .cy-board { width: 48%; padding: 10px 12px 6px; }
  .cy-bh { font-size: 12.5px; padding-bottom: 8px; margin-bottom: 4px; }
  .cy-row { grid-template-columns: 8px minmax(0, 1fr) auto; gap: 2px 8px; padding: 4px 0; font-size: 12px; }
  .cy-v { max-width: 9em; }
  .cy-label { font-size: 13.5px; }
  .cy-num { width: 22px; height: 22px; font-size: 12px; }
  .cy-step { padding: 6px 12px 6px 6px; gap: 7px; }
}
@media (max-width: 640px) {
  .cy-wheel { aspect-ratio: auto; }
  .cy-svg { display: none; }
  .cy-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; padding: 4px 0 22px; }
  .cy-step, .js .vz-figure .cy-step, .js .vz-figure.is-visible .cy-step { position: relative; left: auto; top: auto; transform: none; }
  .cy-step:not(:last-child)::after { content: ""; position: absolute; right: -16px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-top: 2px solid var(--green); border-right: 2px solid var(--green); transform: rotate(45deg); }
  .cy-board, .js .vz-figure .cy-board, .js .vz-figure.is-visible .cy-board { position: relative; left: auto; top: auto; width: auto; transform: none; }
}