/* ===========================================================================
   SolutionsSales -- 仕組み (FRAGMENT:loop). MOTION, scrubbed by scroll.
   While the figure crosses the screen (cover 25% -> 70%) one dot travels the
   ring: data packet -> 発掘 -> アプローチ -> 商談 -> フォロー -> 発掘 again,
   the ring (or the mobile connector) draws behind it and each step button
   lights (pale purple fill + outline ring, badge filled) and grows a little
   when the dot docks into it. Driven by the scroll position, never by a
   clock: nothing auto-plays, so no pause control is needed.
   - Browsers with animation-timeline: view() -> pure CSS (@supports below).
   - Others -> sales-loop.js adds .sa-loop-js; the same keyframes are held
     paused and the script sets each one's currentTime from scroll (= scrub).
   - Only under html.sa-motion (JS on, no reduced motion). Otherwise the
     resting state of sales-loop.css shows: everything drawn, steps equal.
   Only transform / opacity animate, plus stroke-dashoffset on one circle.
   Timeline (share of the range): packet 3-11, 発掘 12, アプローチ 30,
   商談 48, フォロー 66, back to 発掘 84, settle to the resting state by 94.
   Role marks pop as their step lights: AI first, then 人 (AI prepares, the
   person decides). At 商談 only the 人 mark rises: no AI effect there.
   Mobile connector: the fill has stops at the badge centres (rows are
   1fr + an exit row after 商談), typical card 90px, gap 12, exit row 40.
   =========================================================================== */
.sa-loop-pkt { --sa-k: sa-loop-pkt-y; }
.sa-loop-draw { --sa-k: sa-loop-draw; }
.sa-loop-arm { --sa-k: sa-loop-spin; }
.sa-loop-fill { --sa-k: sa-loop-fill; }
.sa-loop-back-on { --sa-k: sa-loop-back; }
.sa-loop-step--1 .sa-loop-card { --sa-k: sa-loop-up1; }
.sa-loop-step--2 .sa-loop-card { --sa-k: sa-loop-up2; }
.sa-loop-step--3 .sa-loop-card { --sa-k: sa-loop-up3; }
.sa-loop-step--4 .sa-loop-card { --sa-k: sa-loop-up4; }
.sa-loop-step--1 .sa-loop-glow, .sa-loop-step--1 .sa-loop-on { --sa-k: sa-loop-lit1; }
.sa-loop-step--2 .sa-loop-glow, .sa-loop-step--2 .sa-loop-on { --sa-k: sa-loop-lit2; }
.sa-loop-step--3 .sa-loop-glow, .sa-loop-step--3 .sa-loop-on { --sa-k: sa-loop-lit3; }
.sa-loop-step--4 .sa-loop-glow, .sa-loop-step--4 .sa-loop-on { --sa-k: sa-loop-lit4; }
.sa-loop-step--1 .sa-ai { --sa-k: sa-loop-ai1; }
.sa-loop-step--2 .sa-ai { --sa-k: sa-loop-ai2; }
.sa-loop-step--2 .sa-loop-hu { --sa-k: sa-loop-hu2; }
.sa-loop-step--3 .sa-loop-hu { --sa-k: sa-loop-hu3; }
.sa-loop-step--4 .sa-ai { --sa-k: sa-loop-ai4; }
.sa-loop-step--4 .sa-loop-hu { --sa-k: sa-loop-hu4; }
@media (min-width: 1200px) { .sa-loop-pkt { --sa-k: sa-loop-pkt-x; } }

/* JS fallback: same keyframes, held paused; sales-loop.js sets currentTime */
html.sa-motion .sa-loop-js .sa-loop-a { animation: var(--sa-k) 1s linear both paused; }
@supports (animation-timeline: view()) {
  html.sa-motion .sa-loop-fig { view-timeline: --sa-loop block; }
  html.sa-motion .sa-loop-fig:not(.sa-loop-js) .sa-loop-a {
    animation: var(--sa-k) 1s linear both;
    animation-timeline: --sa-loop;
    animation-range: cover 25% cover 70%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sa-loop-a { animation: none !important; }
}

@keyframes sa-loop-pkt-y {
  0%, 2% { transform: translateY(0); opacity: 0; }
  4% { opacity: 1; }
  11% { transform: translateY(100%); opacity: 1; }
  13%, 100% { transform: translateY(100%); opacity: 0; }
}
@keyframes sa-loop-pkt-x {
  0%, 2% { transform: translateX(0); opacity: 0; }
  4% { opacity: 1; }
  11% { transform: translateX(100%); opacity: 1; }
  13%, 100% { transform: translateX(100%); opacity: 0; }
}
@keyframes sa-loop-draw {
  0%, 12% { stroke-dashoffset: 100; }
  84%, 100% { stroke-dashoffset: 0; }
}
@keyframes sa-loop-spin {
  0% { transform: rotate(270deg); opacity: 0; }
  9% { opacity: 1; }
  12% { transform: rotate(270deg); }
  /* 商談 (~48%) is the person's step: the AI hand fades while passing it. */
  42% { opacity: 1; }
  45%, 51% { opacity: 0.15; }
  54% { opacity: 1; }
  84% { transform: rotate(630deg); opacity: 1; }
  92%, 100% { transform: rotate(630deg); opacity: 0; }
}
@keyframes sa-loop-fill {
  0%, 12% { transform: scaleY(0); }
  30% { transform: scaleY(0.285); }
  48% { transform: scaleY(0.57); }
  66%, 100% { transform: scaleY(1); }
}
@keyframes sa-loop-back {
  0%, 66% { opacity: 0; }
  80%, 100% { opacity: 1; }
}
@keyframes sa-loop-lit1 {
  0%, 6%, 20%, 77%, 94%, 100% { opacity: 0; }
  12%, 84% { opacity: 1; }
}
@keyframes sa-loop-lit2 { 0%, 23%, 38%, 100% { opacity: 0; } 30% { opacity: 1; } }
@keyframes sa-loop-lit3 { 0%, 41%, 56%, 100% { opacity: 0; } 48% { opacity: 1; } }
@keyframes sa-loop-lit4 { 0%, 59%, 74%, 100% { opacity: 0; } 66% { opacity: 1; } }
/* the lit button grows slightly in place, so it stays docked on the ring */
@keyframes sa-loop-up1 {
  0%, 6%, 20%, 77%, 94%, 100% { transform: none; }
  12%, 84% { transform: scale(1.04); }
}
@keyframes sa-loop-up2 { 0%, 23%, 38%, 100% { transform: none; } 30% { transform: scale(1.04); } }
@keyframes sa-loop-up3 { 0%, 41%, 56%, 100% { transform: none; } 48% { transform: scale(1.04); } }
@keyframes sa-loop-up4 { 0%, 59%, 74%, 100% { transform: none; } 66% { transform: scale(1.04); } }
/* role marks: a short pop in place (AI, then 人); 商談's 人 rises a little more */
@keyframes sa-loop-ai1 {
  0%, 7%, 17%, 79%, 89%, 100% { transform: none; }
  12%, 84% { transform: scale(1.16); }
}
@keyframes sa-loop-ai2 { 0%, 22%, 32%, 100% { transform: none; } 27% { transform: scale(1.16); } }
@keyframes sa-loop-hu2 { 0%, 28%, 38%, 100% { transform: none; } 33% { transform: scale(1.16); } }
@keyframes sa-loop-hu3 { 0%, 41%, 56%, 100% { transform: none; } 46%, 50% { transform: translateY(-3px) scale(1.2); } }
@keyframes sa-loop-ai4 { 0%, 58%, 68%, 100% { transform: none; } 63% { transform: scale(1.16); } }
@keyframes sa-loop-hu4 { 0%, 64%, 74%, 100% { transform: none; } 69% { transform: scale(1.16); } }