/* ============================================================
   flow.css — Animasi "Alurnya" 3 langkah (loop 9 detik)
   Dipakai: index.html (section Alurnya / .flow)

   TIMELINE (persen dari --fv-dur = 9s, 1 step = 33.3%):
     0%   – 33%  : layar 1 (pilih template) + kartu 1 glow + label 1
     33%  – 66%  : layar 2 (form isi)      + kartu 2 glow + label 2
     66%  – 100% : layar 3 (simpan PDF)    + kartu 3 glow + label 3

   Semua jendela waktu DITULIS EXPLICIT di keyframes (persen),
   stagger pakai animation-delay kecil (0/.3s/.6s) — gak ada
   delay negatif kecuali 3 kartu kiri & label (-3s/-6s).

   TOKEN: nama var() harus persis sama base.css:
     --line, --txt2, --panel2 (bukan --bd/--txt-2/--panel-2).

   Edit: --fv-dur (durasi total), --acc (warna aksen).
   ============================================================ */

/* ---------------- LAYOUT ---------------- */
.flow{
  --fv-dur:9s;
  --fv-step:3s;
  display:grid;
  gap:34px;
  align-items:center;
}
@media(min-width:960px){
  .flow{ grid-template-columns:1fr 1fr }
}
/* mobile: stage lebih pendek, padding dikurangi */
@media(max-width:600px){
  .fv-stage{ aspect-ratio:auto;min-height:200px;padding:16px }
  .fv-pick,.fv-form,.fv-save{ inset:44px 16px 16px }
  .fv-ring{ width:38px;height:38px;left:10px;top:10px }
  .fv-label{ font-size:10px;top:10px;right:10px }
  .flow-step{ padding:14px 16px }
  .flow-step b{ width:28px;height:28px;font-size:13px }
}

/* ---------------- KIRI: 3 kartu langkah ---------------- */
.flow-left{ display:grid;gap:16px }
.flow-step{
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 20px;
  background:var(--panel);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 14px;
  align-items:baseline;
  animation:fv-step1 var(--fv-dur) linear infinite;
}
.flow-step:nth-child(1){ animation-name:fv-step1 }
.flow-step:nth-child(2){ animation-name:fv-step2 }
.flow-step:nth-child(3){ animation-name:fv-step3 }

.flow-step b{
  grid-row:1 / span 2;
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:10px;
  border:1px solid transparent;
  background:var(--gr-100);
  color:var(--gr-700);
  font-size:15px;font-weight:800;
}
/* angka kotak ikut keyframe parent: saat step aktif bg putih +
   teks/border hijau tua (kontras jelas di light & dark) */
.flow-step:nth-child(1) b{ animation:fv-badge1 var(--fv-dur) linear infinite }
.flow-step:nth-child(2) b{ animation:fv-badge2 var(--fv-dur) linear infinite }
.flow-step:nth-child(3) b{ animation:fv-badge3 var(--fv-dur) linear infinite }

@keyframes fv-badge1{
  0%,30%   { background:#fff; color:var(--gr-700); border-color:var(--acc) }
  34%,100% { background:var(--gr-100); color:var(--gr-700); border-color:transparent }
}
@keyframes fv-badge2{
  0%,30%   { background:var(--gr-100); color:var(--gr-700); border-color:transparent }
  34%,64%  { background:#fff; color:var(--gr-700); border-color:var(--acc) }
  68%,100% { background:var(--gr-100); color:var(--gr-700); border-color:transparent }
}
@keyframes fv-badge3{
  0%,64%   { background:var(--gr-100); color:var(--gr-700); border-color:transparent }
  70%,96%  { background:#fff; color:var(--gr-700); border-color:var(--acc) }
  100%     { background:var(--gr-100); color:var(--gr-700); border-color:transparent }
}
.flow-step h4{ margin:0;font-size:.98rem;color:inherit }
.flow-step p{ margin:0;font-size:.86rem;color:inherit;opacity:.75 }

/* glow per-slot: keyframe terpisah biar urut 1-2-3, bukan loncat.
   Delay negatif DILARANG di sini — itu bikin fase ke-skip.
   Saat aktif: bg hijau muda + TEKS hijau tua (kontras di 2 mode,
   karena --gr-50 light & --gr-700 dark-on-light).                 */
@keyframes fv-step1{
  0%,30%      { background:var(--gr-50); border-color:var(--acc); color:var(--gr-700) }
  34%,100%    { background:var(--panel); border-color:var(--line); color:var(--txt) }
}
@keyframes fv-step2{
  0%,30%      { background:var(--panel); border-color:var(--line); color:var(--txt) }
  34%,64%     { background:var(--gr-50); border-color:var(--acc); color:var(--gr-700) }
  68%,100%    { background:var(--panel); border-color:var(--line); color:var(--txt) }
}
@keyframes fv-step3{
  0%,64%      { background:var(--panel); border-color:var(--line); color:var(--txt) }
  70%,96%     { background:var(--gr-50); border-color:var(--acc); color:var(--gr-700) }
  100%        { background:var(--panel); border-color:var(--line); color:var(--txt) }
}

/* ---------------- KANAN: panggung ---------------- */
.flow-view{ display:grid;justify-items:center }
.fv-stage{
  position:relative;
  width:min(400px,100%);
  max-width:100%;
  box-sizing:border-box;
  aspect-ratio:10/7;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--sh-2);
  padding:24px;
  overflow:hidden;
}

/* label step (pill kanan-atas) — 3 span bergantian,
   keyframes sama dengan layar biar selalu sinkron */
.fv-label{
  position:absolute;top:14px;right:14px;
  width:max-content;height:26px;
}
.fv-label span{
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:11.5px;font-weight:800;color:var(--txt);
  background:var(--panel);
  border:1px solid var(--acc);
  border-radius:99px;
  padding:0 12px;
  opacity:0;
  animation:fv-s1 var(--fv-dur) linear infinite;
}
/* kontras dark mode: bg gelap solid + teks hijau */
html[data-theme="dark"] .fv-label span{
  background:#0c1a12;
  color:var(--gr-300);
  border-color:var(--acc);
}
.fv-label span:nth-of-type(1){ animation-name:fv-s1 }
.fv-label span:nth-of-type(2){ animation-name:fv-s2 }
.fv-label span:nth-of-type(3){ animation-name:fv-s3 }

/* ---------------- 3 LAYAR — jendela waktu utama ----------------
   fv-s1: 0-33% | fv-s2: 33-66% | fv-s3: 66-100%
   fade 4% di tiap perbatahan biar gak keras                  */
.fv-pick,.fv-form,.fv-save{
  position:absolute;
  inset:34px 24px 24px;     /* atas lebih lebar — ruang label */
  opacity:0;
}
.fv-pick{ animation:fv-s1 var(--fv-dur) linear infinite }
.fv-form{ animation:fv-s2 var(--fv-dur) linear infinite }
.fv-save{ animation:fv-s3 var(--fv-dur) linear infinite }

@keyframes fv-s1{
  0%,31%   { opacity:1 }
  35%,100% { opacity:0 }
}
@keyframes fv-s2{
  0%,31%   { opacity:0 }
  37%,64%  { opacity:1 }
  68%,100% { opacity:0 }
}
@keyframes fv-s3{
  0%,64%   { opacity:0 }
  70%,96%  { opacity:1 }
  100%     { opacity:0 }
}

/* ---------------- LAYAR 1: pilih template (0-33%) ---------------- */
.fv-pick{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  align-content:center;
}
.fv-tpl{
  position:relative;
  aspect-ratio:3/4;
  border:2px solid var(--line);
  border-radius:10px;
  background:var(--panel2);
  padding:8px;
  display:grid;
  grid-template-rows:10px 1fr 1fr;
  gap:4px;
  animation:fv-tpl-pick var(--fv-dur) linear infinite;
}

.fv-tpl i{ border-radius:2px;background:var(--line2);opacity:.7 }
.fv-tpl i:nth-child(1){ height:8px }
.fv-tpl.ats i{ border-radius:1px }
.fv-tpl.krv i:first-child{ border-radius:99px }

/* semua kartu ter-highlight bersamaan di slot 1 —
   stagger-nya di checkmark, bukan border */
@keyframes fv-tpl-pick{
  0%,2%    { border-color:var(--line) }
  6%,28%   { border-color:var(--acc) }
  32%,100% { border-color:var(--line) }
}

.fv-tpl .chk{
  position:absolute;right:5px;top:5px;
  width:20px;height:20px;
  display:grid;place-items:center;
  border-radius:99px;
  background:var(--acc);color:var(--on-acc);
  font-size:12px;font-weight:900;
  opacity:0;transform:scale(.4);
  animation:fv-chk-pop var(--fv-dur) linear infinite;
}
/* stagger 0 / .3s / .6s — semua selesai sebelum layar fade di 31% */
.fv-tpl:nth-child(1) .chk{ animation-delay:0s }
.fv-tpl:nth-child(2) .chk{ animation-delay:.3s }
.fv-tpl:nth-child(3) .chk{ animation-delay:.6s }

@keyframes fv-chk-pop{
  0%,5%    { opacity:0;transform:scale(.4) }
  9%,22%   { opacity:1;transform:scale(1) }
  26%,100% { opacity:0;transform:scale(.4) }
}

/* ---------------- LAYAR 2: form auto-isi (33-66%) ---------------- */
.fv-form{
  display:grid;gap:16px;align-content:center;
}
.fv-row{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:10px;align-items:center;
}
.fv-row i{ height:10px;border-radius:3px;background:var(--line2);opacity:.8 }
.fv-row u{
  height:10px;border-radius:3px;
  background:var(--acc);opacity:.8;
  transform-origin:left;
  transform:scaleX(0);
  animation:fv-fill var(--fv-dur) linear infinite;
}
/* stagger 0 / .25s / .5s — baris 3 selesai ~61%, sebelum fade 64% */
.fv-row:nth-child(1) u{ animation-delay:0s }
.fv-row:nth-child(2) u{ animation-delay:.25s }
.fv-row:nth-child(3) u{ animation-delay:.5s }

@keyframes fv-fill{
  0%,33%   { transform:scaleX(0) }
  40%,58%  { transform:scaleX(1) }
  62%,100% { transform:scaleX(0) }
}

/* ---------------- LAYAR 3: simpan PDF (66-100%) ---------------- */
.fv-save{ display:grid;place-items:center;align-content:center;gap:14px }
.fv-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;
  border-radius:12px;
  background:var(--acc);color:var(--on-acc);
  font-weight:800;font-size:.9rem;
  animation:fv-btn-press var(--fv-dur) linear infinite;
}
.fv-btn em{ font-style:normal }
.fv-btn .arr{ animation:fv-arr-slide var(--fv-dur) linear infinite }
.fv-btn .chk{
  display:grid;place-items:center;
  width:20px;height:20px;border-radius:99px;
  background:var(--on-acc);color:var(--acc);
  font-size:12px;font-weight:900;
  opacity:0;transform:scale(.4);
  animation:fv-done-pop var(--fv-dur) linear infinite;
}

@keyframes fv-btn-press{
  0%,72%   { transform:scale(1) }
  76%,80%  { transform:scale(1.06) }
  84%,100% { transform:scale(1) }
}
@keyframes fv-arr-slide{
  0%,73%   { opacity:1;transform:translateX(0) }
  77%,100% { opacity:0;transform:translateX(6px) }
}
@keyframes fv-done-pop{
  0%,79%   { opacity:0;transform:scale(.4) }
  83%,93%  { opacity:1;transform:scale(1) }
  97%,100% { opacity:0;transform:scale(.4) }
}

/* ---------------- progress ring (kiri-atas) ---------------- */
.fv-ring{
  position:absolute;left:16px;top:16px;
  width:46px;height:46px;
  display:grid;place-items:center;
}
.fv-ring svg{
  position:absolute;inset:0;
  width:100%;height:100%;
  transform:rotate(-90deg);
}
.fv-ring circle{ fill:none;stroke-width:4 }
.fv-ring circle.bg{ stroke:var(--line) }
.fv-ring circle.fg{
  stroke:var(--acc);
  stroke-dasharray:100;
  stroke-dashoffset:100;
  animation:fv-ring-draw var(--fv-step) linear infinite;
}
/* counter 1/3 2/3 3/3 — delay negatif geser fase */
.fv-ring span{
  position:absolute;
  font-size:12px;font-weight:800;color:var(--txt);
  animation:fv-s1 var(--fv-dur) linear infinite;
}
.fv-ring span:nth-of-type(1){ animation-name:fv-s1 }
.fv-ring span:nth-of-type(2){ animation-name:fv-s2 }
.fv-ring span:nth-of-type(3){ animation-name:fv-s3 }

@keyframes fv-ring-draw{
  from{ stroke-dashoffset:100 }
  to  { stroke-dashoffset:0 }
}


/* ---------------- fallback: kurangi gerakan ---------------- */
@media (prefers-reduced-motion:reduce){
  .flow-step{ animation:none;border-color:var(--line);background:var(--panel);color:var(--txt) }
  .flow-step b{ animation:none }
  .fv-stage{
    aspect-ratio:auto;
    display:grid;gap:18px;
    grid-template-columns:1fr;
    padding:20px;
  }
  .fv-pick,.fv-form,.fv-save{
    position:static;inset:auto;
    opacity:1;animation:none;
  }
  .fv-tpl{ animation:none;border-color:var(--line) }
  .fv-tpl .chk{ animation:none;opacity:1;transform:scale(1) }
  .fv-row u{ animation:none;transform:scaleX(1) }
  .fv-btn,.fv-btn .arr,.fv-btn .chk{ animation:none;opacity:1;transform:none }
  .fv-ring{ position:static;margin:0 auto }
  .fv-ring circle.fg{ animation:none;stroke-dashoffset:0 }
  .fv-ring span{ position:static }
  .fv-label span{ position:static;opacity:1;animation:none }
  .fv-label span:nth-of-type(2),.fv-label span:nth-of-type(3){ display:none }
}

/* dark mode: ring counter jadi hijau */
html[data-theme="dark"] .fv-ring span{ color:var(--gr-300) }

/* dark mode: tombol simpan PDF lebih kontras */
html[data-theme="dark"] .fv-btn{ border:1px solid rgba(255,255,255,.14) }
html[data-theme="dark"] .fv-btn em{ color:#04240f }