/* PK: граматика процесу (overhaul/Direction_H6v2_2026-10-05.md §2) для головної «Одна година»
   і кроків 1-3 «Як працює». Процес = стани справжніх кадрів: плитка-креслення (рамки, номер) →
   проявлення фото під фіолетовим сканером → бурштинова галочка. Жодних намальованих фігур.
   Фіолетовий = AI працює, бурштин = готово / ваша дія. Рух: лише transform / opacity / clip-path.
   Усі значення прогресу ставить скрипт через --pk-*; без скрипта кадр = кінцевий стан. */
.pk{
  --pk-vio:#7c5cff; --pk-vio-2:#b14bd8; --pk-vio-ink:#a892ff;
  --pk-amber:#f0a500; --pk-amber-ink:#1b1206;
  --pk-glow:rgba(124,92,255,.55);
  --pk-fg:#f6f4f1; --pk-dim:#b3aea7; --pk-mute:#8a857f;
  --pk-mono:var(--mono, ui-monospace, "JetBrains Mono", monospace);
}
.pk img{ display:block }

/* ── Плитка-кадр (9:16) ── */
.pk-board{ display:grid; grid-template-columns:repeat(4, minmax(0, var(--pk-tw, 120px))); justify-content:space-between; gap:10px }
.pk-shot{ position:relative; margin:0; aspect-ratio:9/16; min-width:0; transform-origin:50% 50% }
.pk-in{ position:absolute; inset:0; border-radius:var(--pk-r, 14px); overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), #16130f;
  box-shadow:0 0 0 1px rgba(255,255,255,.07) inset, 0 20px 40px -20px rgba(0,0,0,.9) }
/* креслення: фіолетове світіння й тонкі горизонталі, гаснуть у міру проявлення */
.pk-in::before{ content:""; position:absolute; inset:0; opacity:calc(1 - var(--pk-r, 1));
  background:radial-gradient(90% 55% at 50% 58%, color-mix(in srgb, var(--pk-vio) 20%, transparent), transparent 72%),
             repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 18px) }
.pk-plan .pk-in::before{ opacity:1 }
.pk-in img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 32%;
  clip-path:inset(0 0 calc((1 - var(--pk-r, 1)) * 100%) 0);
  transform:scale(var(--pk-kb, 1)); transform-origin:50% 40% }
.pk-scan{ position:absolute; left:0; right:0; top:calc(var(--pk-r, 1) * 100%); height:2px; margin-top:-1px;
  background:linear-gradient(90deg, transparent, var(--pk-vio-ink), #fff, var(--pk-vio-ink), transparent);
  box-shadow:0 0 18px 4px var(--pk-glow); opacity:var(--pk-so, 0) }
/* рамки-видошукач по кутах */
.pk-br{ position:absolute; inset:10px; opacity:var(--pk-bo, .25); --c1:rgba(255,255,255,.55);
  background:
    linear-gradient(var(--c1), var(--c1)) 0 0/14px 1.5px no-repeat, linear-gradient(var(--c1), var(--c1)) 0 0/1.5px 14px no-repeat,
    linear-gradient(var(--c1), var(--c1)) 100% 0/14px 1.5px no-repeat, linear-gradient(var(--c1), var(--c1)) 100% 0/1.5px 14px no-repeat,
    linear-gradient(var(--c1), var(--c1)) 0 100%/14px 1.5px no-repeat, linear-gradient(var(--c1), var(--c1)) 0 100%/1.5px 14px no-repeat,
    linear-gradient(var(--c1), var(--c1)) 100% 100%/14px 1.5px no-repeat, linear-gradient(var(--c1), var(--c1)) 100% 100%/1.5px 14px no-repeat }
.pk-plan .pk-br{ opacity:.7 }
.pk-sn{ position:absolute; left:12px; top:10px; font:500 10.5px/1 var(--pk-mono); letter-spacing:.1em; color:rgba(255,255,255,.72);
  text-shadow:0 1px 6px rgba(0,0,0,.6); pointer-events:none }
/* галочка «готово» */
.pk-ok{ position:absolute; right:-7px; top:-7px; width:22px; height:22px; border-radius:50%; background:var(--pk-amber);
  transform:scale(var(--pk-c, 1)); box-shadow:0 0 0 3px #110f0c, 0 6px 16px -4px rgba(240,165,0,.6); z-index:2 }
.pk-ok::after{ content:""; position:absolute; left:7.5px; top:4.5px; width:5px; height:9px; border:solid var(--pk-amber-ink); border-width:0 2px 2px 0; transform:rotate(45deg) }

/* підписи під плитками: час + один рядок опису кадру */
.pk-caps{ display:grid; grid-template-columns:repeat(4, minmax(0, var(--pk-tw, 120px))); justify-content:space-between; gap:10px }
.pk-cap{ display:flex; flex-direction:column; gap:3px; min-width:0; padding-top:10px; position:relative }
.pk-cap::before{ content:""; position:absolute; left:0; top:-5px; width:1.5px; height:10px; background:rgba(255,255,255,.35) }
.pk-cap b{ font:600 11px/1 var(--pk-mono); letter-spacing:.05em; color:var(--pk-fg) }
.pk-cap em{ font:400 12.5px/1.3 var(--sans, system-ui); font-style:normal; color:var(--pk-dim) }

/* ── Товар: кремова плитка, вирізаний пекшот ── */
.pk-prod{ position:relative; display:block; overflow:hidden; border-radius:18px;
  background:radial-gradient(110% 80% at 50% 28%, oklch(.97 .01 85), oklch(.86 .02 75) 70%, oklch(.78 .025 70));
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 18px 40px -18px rgba(0,0,0,.8) }
.pk-prod::after{ content:""; position:absolute; left:24%; right:24%; bottom:11%; height:6%; border-radius:50%; background:rgba(40,25,10,.35); filter:blur(7px) }
.pk-prod img{ position:absolute; left:15%; right:15%; bottom:13%; width:70%; height:auto; z-index:1;
  transform:scale(var(--pk-pz, 1)); transform-origin:50% 80% }
.pk-prod-l{ position:absolute; left:0; right:0; top:0; z-index:2; padding:9px 12px; font:500 10px/1 var(--pk-mono); letter-spacing:.14em; text-transform:uppercase; color:oklch(.35 .03 60) }

/* ── Пілюля стану ── */
.pk-pill{ display:inline-grid; height:26px; border-radius:99px; font:500 11px/1 var(--pk-mono); letter-spacing:.06em }
.pk-pill > span{ grid-area:1/1; display:inline-flex; align-items:center; gap:7px; padding:0 12px 0 10px; border-radius:99px; white-space:nowrap }
.pk-pill > span::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor }
.pk-pill .w{ color:var(--pk-vio-ink); background:color-mix(in srgb, var(--pk-vio) 16%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--pk-vio) 40%, transparent);
  opacity:calc(1 - var(--pk-done, 1)) }
.pk-pill .d{ color:var(--pk-amber); background:color-mix(in srgb, var(--pk-amber) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--pk-amber) 45%, transparent);
  opacity:var(--pk-done, 1) }
.pk-pbar{ height:5px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden }
.pk-pbar i{ display:block; height:100%; border-radius:inherit; transform-origin:0 50%; transform:scaleX(var(--pk-pb, 1));
  background:linear-gradient(90deg, var(--pk-vio), var(--pk-vio-2) 55%, var(--pk-amber)) }

/* ── Телефон ── */
.pk-phone{ position:relative; width:var(--pk-pw, 190px); padding:calc(var(--pk-pw, 190px) * .028); border-radius:calc(var(--pk-pw, 190px) * .145);
  background:linear-gradient(160deg, #25211c, #0b0a09 40%);
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset, 0 1px 0 rgba(255,255,255,.14) inset, 0 40px 80px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.6) }
.pk-scr{ position:relative; aspect-ratio:9/16; border-radius:calc(var(--pk-pw, 190px) * .117); overflow:hidden; background:#000 }
.pk-scr img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform-origin:50% 40% }
.pk-scr img:last-of-type{ opacity:1 }
.pk-sub{ position:absolute; left:8%; right:8%; bottom:14%; text-align:center; font:600 calc(var(--pk-pw, 190px) * .068)/1.25 var(--sans, system-ui); color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.7); opacity:0; z-index:2 }
.pk-sub::before{ content:""; position:absolute; inset:-5px -6px; z-index:-1; border-radius:7px; background:rgba(0,0,0,.4) }
.pk-sub:last-of-type{ opacity:1 }
.pk-sweep{ position:absolute; top:-20%; bottom:-20%; left:0; width:55%; opacity:var(--pk-swo, 0); mix-blend-mode:screen; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.22) 50%, transparent);
  transform:translateX(calc(var(--pk-sw, -1) * 360%)) skewX(-12deg) }

@media (prefers-reduced-motion:reduce){
  .pk-scan, .pk-sweep{ display:none }
}