/* ============================================================
   BanKolor — efekty animowane
   ============================================================ */
:root{
  --bk-accent:var(--accent, #1567C8);
  --bk-accent-soft:var(--accent-soft, #E7F0FB);
  --bk-ink:var(--ink, #12171C);
  --bk-muted:var(--ink-3, #657079);
  --bk-line:var(--line, #D9DDE1);
  --bk-surface:var(--bg-3, #F4F6F8);
  --bk-panel:var(--bg-2, #FFFFFF);
  --bk-booth-top:#2B3238;
  --bk-booth-bottom:#171B1F;
}

/* ---------- wspólne ---------- */
.bk-panel{background:var(--bk-panel);border:1px solid var(--bk-line)}
.bk-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  border-top:1px solid var(--bk-line);padding:12px 14px;background:var(--bk-surface);
}
.bk-label{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bk-muted);
  display:flex;align-items:center;gap:8px;
}
.bk-label::before{content:"";width:8px;height:8px;background:var(--bk-accent);flex:0 0 auto}
.bk-btn{
  font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--bk-panel);color:var(--bk-ink);
  border:1px solid var(--bk-line);padding:7px 12px;cursor:pointer;
  transition:border-color .15s, color .15s;
}
.bk-btn:hover{border-color:var(--bk-accent);color:var(--bk-accent)}
.bk-swatches{display:flex;gap:6px;flex-wrap:wrap}
.bk-sw{
  width:30px;height:30px;border:1px solid var(--bk-line);
  cursor:pointer;padding:0;background-clip:padding-box;
}
.bk-sw[aria-pressed="true"]{outline:2px solid var(--bk-accent);outline-offset:2px}
.bk-sw:focus-visible{outline:2px solid var(--bk-accent);outline-offset:2px}

/* ---------- 01 kabina ---------- */
.bk-booth{position:relative;background:var(--bk-booth-bottom);overflow:hidden}
.bk-booth canvas{display:block;width:100%;height:auto;touch-action:pan-y;cursor:crosshair}
.bk-hud{
  position:absolute;left:14px;top:12px;
  display:flex;flex-direction:column;gap:3px;
  font-size:11px;letter-spacing:.06em;color:#9AA3AA;
  text-transform:uppercase;pointer-events:none;
}
.bk-hud b{color:#fff;font-weight:600;text-transform:none}
.bk-hint{
  position:absolute;right:14px;bottom:12px;
  font-size:10.5px;letter-spacing:.08em;color:#7C858C;
  text-transform:uppercase;pointer-events:none;
}
.bk-start{display:none}
@media (pointer:coarse){
  /* na dotyku malowanie startuje dopiero po tapnięciu - przeciąganie palcem po canvasie
     bez tego przycisku kolidowałoby z przewijaniem strony */
  .bk-start{
    display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    z-index:2;padding:14px 28px;border-radius:999px;border:1px solid rgba(255,255,255,.28);
    font:inherit;font-weight:700;font-size:14px;letter-spacing:.02em;color:#fff;
    background:var(--bk-accent);box-shadow:0 16px 34px -14px rgba(0,0,0,.6);
  }
  .bk-start.is-active{
    left:auto;top:auto;right:14px;bottom:44px;transform:none;
    padding:8px 14px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
    background:rgba(15,17,19,.7);border-color:rgba(255,255,255,.3);box-shadow:none;
  }
}

/* ---------- 02 konfigurator RAL ---------- */
.bk-ral{display:grid;grid-template-columns:1fr}
@media (min-width:760px){.bk-ral{grid-template-columns:1fr 240px}}
.bk-ral__stage{background:var(--bk-surface);overflow:hidden}
.bk-ral__stage svg{display:block;width:100%;height:auto}
.bk-ral__side{
  border-top:1px solid var(--bk-line);
  padding:16px;display:flex;flex-direction:column;gap:14px;
}
@media (min-width:760px){.bk-ral__side{border-top:0;border-left:1px solid var(--bk-line)}}
.bk-ral__code{font-size:28px;font-weight:700;line-height:1.05}
.bk-ral__name{color:var(--bk-muted);font-size:14px;margin-top:2px}
.bk-ral__kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:11.5px;letter-spacing:.04em;margin:0}
.bk-ral__kv dt{color:var(--bk-muted);text-transform:uppercase}
.bk-ral__kv dd{margin:0;color:var(--bk-ink);text-align:right;font-variant-numeric:tabular-nums}

/* ---------- 03 oś procesu ---------- */
.bk-steps{display:grid;gap:1px;background:var(--bk-line);border:1px solid var(--bk-line)}
@media (min-width:640px){.bk-steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.bk-steps{grid-template-columns:repeat(5,1fr)}}
.bk-step{background:var(--bk-panel);padding:18px 16px 20px;display:flex;flex-direction:column;gap:10px}
.bk-step__num{font-size:11px;color:var(--bk-muted);letter-spacing:.14em}
.bk-step svg{width:56px;height:56px;overflow:visible}
.bk-step__spec{font-size:11px;color:var(--bk-muted);letter-spacing:.04em;text-transform:uppercase}
.bk-step p{font-size:14px;color:var(--bk-ink);line-height:1.5;margin:0}
.bk-ico{fill:none;stroke:var(--bk-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bk-ico--a{stroke:var(--bk-accent)}
.bk-ico--f{fill:var(--bk-accent);stroke:none}

/* stan spoczynku = ikona narysowana; animacja tylko po dodaniu .is-playing */
.bk-draw{stroke-dasharray:var(--len,200);stroke-dashoffset:0}
.bk-step.is-playing .bk-draw{animation:bkDraw .9s cubic-bezier(.65,0,.35,1) both}
.bk-step.is-playing .bk-fade{animation:bkFade .5s ease .5s both}
@keyframes bkDraw{from{stroke-dashoffset:var(--len,200)}to{stroke-dashoffset:0}}
@keyframes bkFade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

.bk-grit{animation:bkGrit 1.6s linear infinite}
@keyframes bkGrit{0%{transform:translate(0,0);opacity:0}20%{opacity:1}100%{transform:translate(13px,7px);opacity:0}}
.bk-drip{animation:bkDrip 2.2s ease-in-out infinite}
@keyframes bkDrip{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.bk-heat{animation:bkHeat 2.4s ease-in-out infinite}
@keyframes bkHeat{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(-4px);opacity:1}}
.bk-dust{animation:bkDust 1.4s linear infinite}
@keyframes bkDust{0%{transform:translateX(0);opacity:0}25%{opacity:1}100%{transform:translateX(11px);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .bk-grit,.bk-drip,.bk-heat,.bk-dust,
  .bk-step.is-playing .bk-draw,.bk-step.is-playing .bk-fade{animation:none !important}
}