/* Krytz · Workflow illustrations
 * Hand-drawn SVG path animations for the 6 loop stages.
 */

.wf-illus {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.wf-cell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 18px 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 200ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out;
}
.wf-cell:hover {
  border-color: var(--g-soft-2);
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}

.wf-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 200 / 140;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.wf-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

.wf-meta { display: flex; flex-direction: column; gap: 4px; }
.wf-num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--g);
  text-transform: uppercase;
}
.wf-h {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
}
.wf-p {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}

/* ── shared stroke style for hand-drawn lines ───────────────────────── */
.wf-stroke {
  fill: none;
  stroke: #0E1320;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* draw-on animation: every path with .wf-draw gets length 1000 and animates */
.wf-draw {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: wfDraw 4.2s ease-out infinite;
}
.wf-draw.d0 { animation-delay: 0.0s; }
.wf-draw.d1 { animation-delay: 0.4s; }
.wf-draw.d2 { animation-delay: 0.8s; }
.wf-draw.d3 { animation-delay: 1.2s; }

@keyframes wfDraw {
  0%   { stroke-dashoffset: 220; }
  35%  { stroke-dashoffset: 0; }
  85%  { stroke-dashoffset: 0; opacity: 1; }
  95%  { opacity: 0; }
  100% { stroke-dashoffset: 220; opacity: 0; }
}

/* ── 01 Capture ─────────────────────────────────────────────────────── */
.wf-capture .wf-pen {
  animation: wfPenPath 4.2s ease-out infinite;
}
@keyframes wfPenPath {
  0%   { transform: translate(44px, 42px); opacity: 0; }
  10%  { opacity: 1; }
  25%  { transform: translate(154px, 42px); }
  30%  { transform: translate(44px, 58px); }
  45%  { transform: translate(154px, 58px); }
  50%  { transform: translate(44px, 74px); }
  65%  { transform: translate(154px, 74px); }
  70%  { transform: translate(44px, 90px); }
  85%  { transform: translate(154px, 90px); opacity: 1; }
  100% { transform: translate(154px, 90px); opacity: 0; }
}
.wf-wave {
  transform-origin: 0 0;
  animation: wfWave 1.8s ease-out infinite;
  opacity: 0;
}
.wf-wave.w1 { animation-delay: 0.9s; }
@keyframes wfWave {
  0%   { transform: scale(0.4); opacity: 0.9; }
  80%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ── 02 Extract ─────────────────────────────────────────────────────── */
.wf-chip {
  opacity: 0;
  transform: translateX(-12px);
  animation: wfChipIn 4.2s ease-out infinite;
}
.wf-chip.c0 { animation-delay: 1.4s; }
.wf-chip.c1 { animation-delay: 1.7s; }
.wf-chip.c2 { animation-delay: 2.0s; }
.wf-chip.c3 { animation-delay: 2.3s; }
@keyframes wfChipIn {
  0%, 30% { opacity: 0; transform: translateX(-12px); }
  40%     { opacity: 1; transform: translateX(0); }
  85%     { opacity: 1; transform: translateX(0); }
  95%     { opacity: 0; }
  100%    { opacity: 0; transform: translateX(-12px); }
}

/* ── 03 Compute ─────────────────────────────────────────────────────── */
.wf-bar {
  animation: wfBar 4.2s ease-out infinite;
}
.wf-bar.b0 { animation-delay: 0.0s; }
.wf-bar.b1 { animation-delay: 0.2s; }
.wf-bar.b2 { animation-delay: 0.4s; }
.wf-bar.b3 { animation-delay: 0.6s; }
@keyframes wfBar {
  0%, 5%  { stroke-dashoffset: var(--w, 130); }
  35%     { stroke-dashoffset: 0; }
  85%     { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: var(--w, 130); }
}
.wf-pulse {
  transform-origin: 170px 36px;
  animation: wfPulse 1.4s ease-out infinite;
}
@keyframes wfPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50%      { transform: scale(1.6); opacity: 1; }
}

/* ── 04 Decide ──────────────────────────────────────────────────────── */
.wf-promote {
  animation: wfPromote 4.2s ease-out infinite;
}
@keyframes wfPromote {
  0%, 30% { transform: translateY(34px); opacity: 0; }
  45%     { transform: translateY(0); opacity: 1; }
  85%     { transform: translateY(0); opacity: 1; }
  95%     { opacity: 0; }
  100%    { transform: translateY(34px); opacity: 0; }
}
.wf-next  { animation: wfNextSlide 4.2s ease-out infinite; }
.wf-next.n0 { animation-delay: 0.0s; }
.wf-next.n1 { animation-delay: 0.15s; }
.wf-next.n2 { animation-delay: 0.30s; }
@keyframes wfNextSlide {
  0%, 30% { transform: translateX(-12px); opacity: 0; }
  45%     { transform: translateX(0); opacity: 1; }
  85%     { opacity: 1; }
  95%     { opacity: 0; }
  100%    { transform: translateX(-12px); opacity: 0; }
}

/* ── 05 Execute ─────────────────────────────────────────────────────── */
.wf-tick {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  animation: wfTick 4.2s ease-out infinite;
}
.wf-tick.t0 { animation-delay: 0.0s; }
.wf-tick.t1 { animation-delay: 0.6s; }
.wf-tick.t2 { animation-delay: 1.2s; }
@keyframes wfTick {
  0%, 8%   { stroke-dashoffset: 22; }
  25%      { stroke-dashoffset: 0; }
  85%      { stroke-dashoffset: 0; opacity: 1; }
  95%      { opacity: 0; }
  100%     { opacity: 0; stroke-dashoffset: 22; }
}
.wf-speed {
  stroke: #1B2A4A;
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0;
  animation: wfSpeed 1.4s ease-out infinite;
}
.wf-speed.s0 { animation-delay: 0.0s; }
.wf-speed.s1 { animation-delay: 0.2s; }
.wf-speed.s2 { animation-delay: 0.4s; }
@keyframes wfSpeed {
  0%   { opacity: 0; transform: translateX(0); }
  50%  { opacity: 1; transform: translateX(-6px); }
  100% { opacity: 0; transform: translateX(-12px); }
}

/* ── 06 Learn ───────────────────────────────────────────────────────── */
.wf-loop {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: wfLoopDraw 4s ease-in-out infinite;
}
.wf-loop-head {
  opacity: 0;
  animation: wfLoopHead 4s ease-in-out infinite;
}
@keyframes wfLoopDraw {
  0%   { stroke-dashoffset: 220; }
  50%  { stroke-dashoffset: 0; }
  90%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 220; opacity: 0; }
}
@keyframes wfLoopHead {
  0%, 45% { opacity: 0; }
  55%     { opacity: 1; }
  90%     { opacity: 1; }
  100%    { opacity: 0; }
}
.wf-orbit {
  transform-origin: 0 0;
  animation: wfOrbit 4s linear infinite;
}
@keyframes wfOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .wf-illus { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .wf-illus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .wf-illus * { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
  .wf-draw { stroke-dashoffset: 0 !important; }
}