/* ===========================================================================
   SolutionsCoding -- 仕組み diagram, the story (one pass, ~4.8s, replayable).
   Contract (same as the page): start states only under html.cd-motion on a
   latch that is not .cd-seen; transitions/animations only under .cd-seen.
   No JS, reduced motion or print = coding-arch.css alone = final frame.
   Japanese lines appear whole (never typed per character); only the Latin
   "$ avatar init" types. Beams/dots/chip are amber "knowledge in transit".
     0     dot grid, source cards rise (80ms apart)
     250   in-wires draw         650  4 beams run into the console
     450   console rises         800  logo tile pops, 1450 absorbs the beams
     950   "$ avatar init" types
     1300+ boot lines every 300ms; each OK lights its module(s)
     1900  out-wires draw        2050 step cards rise
     2300  3 beams run out       2850 each step's tick lands (+ ring)
     2900  ready dot + 「チーム全員の環境が揃いました。」
     3050  dashed line grows down from レビュー, 3250 loop wipes to the card
     3550  「学び」 chip rides the loop (coding-arch.js sets its path)
     4750  ナレッジハブ flashes 「+1」
   =========================================================================== */

/* ---- start states ------------------------------------------------------- */
html.cd-motion [data-cd-latch].cd-arc:not(.cd-seen) :is(.cd-arc__cap, .cd-arc__srcs li, .cd-arc__steps li) { opacity: 0; transform: translateY(12px); }
html.cd-motion [data-cd-latch].cd-arc:not(.cd-seen) .cd-arc__hub { opacity: 0; transform: translateY(18px) scale(0.985); }
html.cd-motion [data-cd-latch].cd-arc:not(.cd-seen) :is(.cd-arc__verb, .cd-arc__brand > div, .cd-arc__llm, .cd-arc__ready, .cd-arc__log li b, .cd-arc__link--out i) { opacity: 0; }
html.cd-motion [data-cd-latch].cd-arc:not(.cd-seen) .cd-arc__mods li { opacity: 0.36; }
html.cd-motion [data-cd-latch].cd-arc:not(.cd-seen) :is(.cd-arc__ok, .cd-arc__steps small .cd-ico) { opacity: 0; transform: scale(0.4); }
html.cd-motion [data-cd-latch].cd-arc:not(.cd-seen) .cd-arc__log li:not(.cd-arc__cmd) { opacity: 0; transform: translateY(4px); }
html.cd-motion [data-cd-latch].cd-arc:not(.cd-seen) .cd-arc__log li i { transform: scaleX(0); }
html.cd-motion [data-cd-latch].cd-arc:not(.cd-seen) .cd-arc__cmd span { clip-path: inset(0 100% 0 0); }
html.cd-motion [data-cd-latch].cd-arc:not(.cd-seen) .cd-arc__draw { stroke-dashoffset: 1; }
html.cd-motion [data-cd-latch].cd-arc:not(.cd-seen) .cd-arc__link::before,
html.cd-motion [data-cd-latch].cd-arc:not(.cd-seen) .cd-arc__link::after,
html.cd-motion [data-cd-latch].cd-arc:not(.cd-seen)::before { opacity: 0; }
html.cd-motion .cd-arc .cd-arc__draw { stroke-dasharray: 1; }
@media (min-width: 1100px) {
  html.cd-motion [data-cd-latch].cd-arc:not(.cd-seen) .cd-arc__out::after { transform: scaleY(0); }
  /* -12px top: the up-arrow tip pokes above the row; inset 0 would cut it */
  html.cd-motion [data-cd-latch].cd-arc:not(.cd-seen) .cd-arc__loop { clip-path: inset(-12px 0 0 100%); }
}
@media (max-width: 1099px) {
  html.cd-motion [data-cd-latch].cd-arc:not(.cd-seen) .cd-arc__loop { opacity: 0; }
}

/* ---- the play: transitions --------------------------------------------- */
.cd-arc.cd-seen::before { transition: opacity 0.8s var(--ease-soft); }
.cd-arc.cd-seen :is(.cd-arc__cap, .cd-arc__srcs li, .cd-arc__steps li) { transition: opacity 0.45s var(--ease-soft) var(--d, 0ms), transform 0.45s var(--ease-out) var(--d, 0ms); }
.cd-arc.cd-seen .cd-arc__draw { transition: stroke-dashoffset 0.45s var(--ease-out) var(--d, 0ms); }
.cd-arc.cd-seen .cd-arc__link--in::after { transition: opacity 0.15s linear 880ms; }
.cd-arc.cd-seen .cd-arc__link--out i { transition: opacity 0.15s linear calc(var(--d) + 420ms); }
.cd-arc.cd-seen .cd-arc__link::before { transition: opacity 0.3s var(--ease-soft) 450ms; }
.cd-arc.cd-seen .cd-arc__link--out::before, .cd-arc.cd-seen .cd-arc__link--out::after { transition-delay: 1900ms; }
.cd-arc.cd-seen .cd-arc__verb { transition: opacity 0.3s var(--ease-soft) var(--d, 0ms); }
.cd-arc.cd-seen .cd-arc__hub { transition: opacity 0.55s var(--ease-soft) 450ms, transform 0.55s var(--ease-out) 450ms; }
.cd-arc.cd-seen .cd-arc__brand > div { transition: opacity 0.4s var(--ease-soft) 760ms; }
.cd-arc.cd-seen .cd-arc__cmd span { transition: clip-path 0.45s steps(13, end) 950ms; }
.cd-arc.cd-seen .cd-arc__log li:not(.cd-arc__cmd) { transition: opacity 0.3s var(--ease-soft) var(--t), transform 0.3s var(--ease-out) var(--t); }
.cd-arc.cd-seen .cd-arc__log li i { transition: transform 0.22s var(--ease-soft) calc(var(--t) + 80ms); }
.cd-arc.cd-seen .cd-arc__log li b { transition: opacity 0.15s linear calc(var(--t) + 250ms); }
.cd-arc.cd-seen .cd-arc__mods li { transition: opacity 0.3s var(--ease-soft) var(--t); }
.cd-arc.cd-seen .cd-arc__ok { transition: opacity 0.2s var(--ease-out) var(--t), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) var(--t); }
.cd-arc.cd-seen .cd-arc__steps small .cd-ico { transition: opacity 0.2s var(--ease-out) var(--hit), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) var(--hit); }
.cd-arc.cd-seen .cd-arc__ready { transition: opacity 0.3s var(--ease-soft) 2900ms; }
.cd-arc.cd-seen .cd-arc__llm { transition: opacity 0.4s var(--ease-soft) 1150ms; }
@media (min-width: 1100px) {
  .cd-arc__out::after { transform-origin: top; }
  .cd-arc.cd-seen .cd-arc__out::after { transition: transform 0.25s ease-in 3050ms; }
  /* explicit end inset: inset() -> none does not interpolate, it jumps */
  html.cd-motion .cd-arc.cd-seen .cd-arc__loop { clip-path: inset(-12px 0 0 0); transition: clip-path 0.6s var(--ease-soft) 3250ms; }
}
@media (max-width: 1099px) { .cd-arc.cd-seen .cd-arc__loop { transition: opacity 0.5s var(--ease-soft) 3050ms; } }

/* ---- the play: animations (moving knowledge, pops, flashes) ------------- */
html.cd-motion .cd-arc.cd-seen .cd-arc__beams path { animation: cd-arc-beam 0.75s var(--ease-soft) var(--b) both; }
html.cd-motion .cd-arc.cd-seen .cd-arc__tile { animation: cd-arc-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 800ms both, cd-arc-absorb 0.55s var(--ease-out) 1450ms; }
html.cd-motion .cd-arc.cd-seen .cd-arc__steps li::after { content: ""; position: absolute; inset: -1px; border-radius: 10px; box-shadow: 0 0 0 2px var(--arc-amber); opacity: 0; animation: cd-arc-ring 0.8s var(--ease-out) var(--hit); }
html.cd-motion .cd-arc.cd-seen .cd-arc__kh::before { content: ""; position: absolute; inset: 0 -8px; z-index: -1; border-radius: 5px; background: rgba(240, 168, 54, 0.22); opacity: 0; animation: cd-arc-flash 1.4s var(--ease-out) 4750ms; }
/* 「+1」 stands in the ✓'s slot for a moment, then the ✓ comes back. Absolute:
   an inline pill kept its width after fading and wrapped ナレッジハブ on phones. */
html.cd-motion .cd-arc.cd-seen .cd-arc__plus { display: block; position: absolute; right: 0; top: 50%; margin-top: -9px; padding: 0 6px; border-radius: 999px; background: var(--arc-amber); color: var(--navy); font-size: 12px; font-weight: 700; line-height: 18px; opacity: 0; animation: cd-arc-plus 1.8s var(--ease-out) 4750ms; }
html.cd-motion .cd-arc.cd-seen .cd-arc__kh .cd-arc__ok { animation: cd-arc-tick-swap 1.8s var(--ease-out) 4750ms; }
@supports (offset-path: path("M0,0 H1")) {
  @media (min-width: 1100px) {
    html.cd-motion .cd-arc--path.cd-seen .cd-arc__chip { display: block; position: absolute; left: 0; top: 0; z-index: 2; padding: 3px 10px; border-radius: 999px; background: var(--arc-amber); color: var(--navy); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(16, 42, 67, 0.5); offset-path: var(--loop); offset-anchor: 50% 50%; offset-rotate: 0deg; animation: cd-arc-chip 1.2s var(--ease-soft) 3550ms both; }
  }
}
@media (max-width: 1099px) {
  html.cd-motion .cd-arc.cd-seen .cd-arc__drip { display: block; position: absolute; left: 50%; top: 8px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--arc-amber); box-shadow: 0 0 0 3px rgba(240, 168, 54, 0.28); animation: cd-arc-drip 0.6s var(--ease-soft) var(--d2) both; }
}
@keyframes cd-arc-beam { 0% { stroke-dashoffset: 14; opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes cd-arc-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
/* thin, near-solid amber ring: a low-alpha amber over navy reads as bronze */
@keyframes cd-arc-absorb { 45% { transform: scale(1.08); box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(240, 168, 54, 0.95); } }
@keyframes cd-arc-ring { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cd-arc-flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cd-arc-plus { 0% { opacity: 0; transform: translateY(4px); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cd-arc-tick-swap { 0%, 100% { opacity: 1; } 10%, 80% { opacity: 0; } }
@keyframes cd-arc-chip { 0% { offset-distance: 0%; opacity: 0; } 10%, 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes cd-arc-drip { 0% { transform: translateY(0); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } }

/* keyboard focus landed inside while playing (.cd-now): final frame at once */
html.cd-motion .cd-arc.cd-now, html.cd-motion .cd-arc.cd-now *,
html.cd-motion .cd-arc.cd-now::before, html.cd-motion .cd-arc.cd-now *::before, html.cd-motion .cd-arc.cd-now *::after { transition: none !important; animation: none !important; }
html.cd-motion .cd-arc.cd-now :is(.cd-arc__chip, .cd-arc__drip, .cd-arc__plus) { display: none !important; }