/* Лаборатория v2 «Кинетический фильм о продукте»: общее для обеих вёрсток —
 * токены, типографика, кнопки, рисунки кадров, ручки. Раскладка сцен своя:
 * компьютер — film-d.css (широкие сцены, прокрутка «прокручивает» ролик),
 * телефон — film-m.css (вертикальные сцены 9:16, свайпы).
 * Фильм всегда тёмный: это кино, тема не переключается.
 */
:root {
  --bg: #14110f;
  --bg-2: #1d1916;
  --bg-3: #27211c;
  --ink: #f3ece2;
  --ink-2: #c9bdae;
  --mute: #9a8e80;
  --acc: #e58b55;
  --acc-2: #f2a676;
  --acc-ink: #1b1714;
  --line: #3a322b;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --bar-h: 56px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
/* зерно плёнки: шум SVG data-URI поверх всего, не ловит касания */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h2 { font-family: var(--serif); letter-spacing: -.01em; line-height: 1.05; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acc-2); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 80; background: var(--ink); color: var(--bg);
  padding: 8px 14px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 10px; }

/* uk-посетитель: английский текст разметки не мелькает до подстановки */
html[data-lang="uk"]:not(.i18n) [data-i], html[data-lang="uk"]:not(.i18n) [data-split] { visibility: hidden; }

/* ------------------------------------------------------------------ шапка */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--bar-h);
  display: flex; align-items: center; gap: 14px; padding: 0 max(16px, env(safe-area-inset-left));
  background: linear-gradient(var(--bg) 0, rgb(20 17 15 / 70%) 70%, transparent);
}
.logo { font: 600 20px/1 var(--serif); text-decoration: none; letter-spacing: -.01em; }
.logo b { color: var(--acc); font-weight: 600; }
.tc { font: 500 11px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--mute);
  letter-spacing: .12em; display: flex; gap: 10px; font-variant-numeric: tabular-nums; }
.tc-sc { color: var(--acc-2); }
.rm .tc, .rm .dots { visibility: hidden; }   /* без прокрутки-ролика таймкод не нужен */
.bar-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lang { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.lang button { border: 0; background: none; padding: 6px 10px; min-height: 32px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; cursor: pointer; color: var(--mute); }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.snd { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); background: none; cursor: pointer; }
.snd svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.snd .snd-w { display: none; }
.snd[aria-pressed="true"] .snd-w { display: inline; }
.snd[aria-pressed="true"] .snd-x { display: none; }
.cart { font-size: 13px; text-decoration: none; color: var(--ink-2); }
.cart b { background: var(--acc); color: var(--acc-ink); border-radius: 999px; padding: 1px 7px; font-size: 12px; }
.prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--acc);
  transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); }
.sda .prog { animation: grow linear both; animation-timeline: scroll(root); }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------------------------ кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--acc); color: var(--acc-ink); text-decoration: none; font-weight: 650;
  border-radius: 999px; padding: 0 22px; min-height: 48px; position: relative; overflow: hidden;
  transition: transform .25s var(--spring), background .2s;
}
.btn::after { /* блик проходит по кнопке */
  content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 45%), transparent);
  animation: sheen 3.6s var(--ease) infinite 1.5s;
}
@keyframes sheen { 0%, 60% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(220%) skewX(-20deg); } }
.btn:hover { transform: translateY(-2px); background: var(--acc-2); }
.btn-s { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn-s::after { display: none; }
.btn-l { min-height: 60px; padding: 0 34px; font-size: 18px; }
.more { color: var(--ink); font-weight: 600; text-underline-offset: 5px; }

/* ------------------------------------------------------------------ сцены, общее */
.scene { position: relative; }
.stage { position: relative; overflow: hidden; }
.kicker { font: 600 12px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--acc-2); }
.lead { color: var(--ink-2); }

/* сцена 1: слова под маской; вход — CSS (без ожидания скрипта: быстрый LCP) */
.kin { font-family: var(--serif); font-weight: 600; line-height: .92; letter-spacing: -.035em; }
.lw { display: block; }
.line { display: block; }
.w { display: inline-block; }
.l2 { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.l3 .w:last-child { color: var(--acc); font-style: italic; }
.kin .w { animation: rise 1s var(--ease) both; }
.l1 .w:nth-child(1) { animation-delay: .05s; } .l1 .w:nth-child(2) { animation-delay: .14s; }
.l2 .w:nth-child(1) { animation-delay: .32s; } .l2 .w:nth-child(2) { animation-delay: .41s; }
.l3 .w:nth-child(1) { animation-delay: .6s; } .l3 .w:nth-child(2) { animation-delay: .69s; }
.l3 .w:nth-child(3) { animation-delay: .78s; } .l3 .w:nth-child(4) { animation-delay: .87s; }
@keyframes rise { from { transform: translateY(.9em) rotate(4deg); opacity: 0; } to { transform: none; opacity: 1; } }
.sub { color: var(--ink-2); animation: fade 1s var(--ease) both 1s; }
.kicker { animation: fade .8s var(--ease) both; }
@keyframes fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.draw { fill: none; stroke: var(--acc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .55; }
.draw.thin { stroke-width: 1.2; stroke: var(--ink-2); opacity: .35; }

/* единорог первой сцены: контур рисуется линиями, из него проявляется 3D движка */
.h3d { position: absolute; }
.uni-art { position: absolute; left: 6%; right: 6%; top: 0; bottom: 52px; width: 88%; height: calc(100% - 52px);
  pointer-events: none; overflow: visible; transition: opacity 1.2s var(--ease) .1s; }
.uni-art .draw { stroke-width: 3.2; opacity: .8; }
.uni-art .draw.thin { stroke-width: 2.4; stroke: var(--ink-2); opacity: .6; }
.uni-fl { fill: #ffb347; transform-box: fill-box; transform-origin: 50% 100%; animation: flin .9s var(--spring) both 3.4s; }
@keyframes flin { from { opacity: 0; transform: scale(.2); } to { opacity: .9; transform: none; } }
.h3d:has(.cv.ready) .uni-art { opacity: 0; }   /* 3D проявился — линии уходят */
.h3d .cv { height: calc(100% - 52px); }
.h3d .cv.ready { animation: reveal 1.4s var(--ease) both; }
@keyframes reveal { from { clip-path: inset(100% 0 0 0); filter: blur(8px); } to { clip-path: inset(0 0 0 0); filter: none; } }
.h-foot { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 3px; text-align: center;
  animation: fade 1s var(--ease) both 1.6s; }
.h-go { font-weight: 650; font-size: 15px; text-underline-offset: 5px; text-decoration-color: var(--acc); }
.h-go::after { content: " →"; color: var(--acc); }
.credit { font-size: 11px; line-height: 1.35; color: var(--mute); max-width: 46ch; }
.credit a { color: var(--ink-2); }
.hint { display: flex; align-items: center; gap: 10px; color: var(--mute); font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; animation: fade 1s var(--ease) both 1.3s; }
.hint i { width: 1px; height: 36px; background: linear-gradient(var(--acc), transparent); position: relative; overflow: hidden; }
.hint i::after { content: ""; position: absolute; left: -2px; width: 5px; height: 8px; border-radius: 3px; background: var(--acc-2);
  animation: drip 1.8s var(--ease-io) infinite; }
@keyframes drip { from { top: -8px; } to { top: 36px; } }
.lb { position: absolute; left: 0; right: 0; height: 0; background: #000; z-index: 3; }
.lb-t { top: 0; } .lb-b { bottom: 0; }

/* сцена 2: просмотр и ручки */
.viewer { position: relative; }
.cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s; touch-action: pan-y; }
.cv.ready { opacity: 1; }
.viewer:has(.cv.ready) .poster { opacity: 0; }
.poster { position: absolute; inset: 10% 18%; width: 64%; height: 76%; transition: opacity .6s; overflow: visible;
  fill: none; stroke: var(--pc, #efe6d2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
#s2[data-m="candle"] .poster { display: none; }
.viewer .credit { position: absolute; left: 12px; right: 12px; bottom: 0; text-align: center; margin: 0 auto; z-index: 2; }
.viewer .badge { bottom: calc(6% + 22px); }
/* подложка под тёмное изделие: фильм всегда тёмный, поэтому тёмный цвет фигурки
   получает светлое пятно за моделью (правило яркости, как stageContrast) */
.viewer::before, .h3d::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(86%, 62svh); aspect-ratio: 1;
  border-radius: 50%; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.7);
  background: radial-gradient(closest-side, rgb(255 246 232 / 88%), rgb(250 232 206 / 52%) 58%, rgb(250 232 206 / 0%));
  transition: opacity .7s var(--ease), transform .7s var(--ease); }
.h3d::before { top: calc(50% - 26px); }
.viewer.pod::before, .h3d.pod::before { opacity: 1; transform: translate(-50%, -50%); }
/* режимы ручек: фигурка / свеча-циліндр */
#s2[data-m="figure"] .c-only, #s2[data-m="candle"] .f-only { display: none !important; }
.picks { display: flex; gap: 6px; flex-wrap: wrap; }
.picks button, .mat button { border: 1px solid var(--line); background: none; border-radius: 999px; padding: 0 13px; min-height: 38px;
  cursor: pointer; font-size: 13px; color: var(--ink-2); transition: all .25s; white-space: nowrap; }
.picks button[aria-checked="true"], .mat button[aria-checked="true"] { border-color: var(--acc); color: var(--ink); background: rgb(229 139 85 / 14%); }
.picks button[data-p="candle"] { border-style: dashed; }
.mat { display: flex; gap: 6px; flex-wrap: wrap; }
.b-go { grid-column: 1 / -1; justify-self: start; min-height: 46px; font-size: 15px; padding: 0 20px; }
.ghost { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; overflow: hidden;
  font: italic 600 clamp(80px, 22vw, 300px)/1 var(--serif); letter-spacing: -.04em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px rgb(243 236 226 / 14%); white-space: nowrap; }
.ghost-w { display: inline-block; }
.badge { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); z-index: 2; white-space: nowrap;
  background: rgb(29 25 22 / 86%); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
  font-size: 13px; color: var(--ink-2); backdrop-filter: blur(6px); animation: pop .5s var(--spring) both; }
.badge-t { color: var(--acc-2); font-weight: 600; }
.badge-t::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #7bc47f; margin-right: 7px; vertical-align: 1px; }
.badge.wait .badge-t::before { background: var(--acc); animation: blink .8s infinite alternate; }
.badge.bad .badge-t::before { background: #f2877f; }
@keyframes blink { to { opacity: .2; } }
@keyframes pop { from { opacity: 0; transform: translate(-50%, 10px) scale(.9); } }

.knob { position: relative; display: grid; justify-items: center; gap: 2px; cursor: ew-resize; }
.knob svg { width: 100%; height: auto; overflow: visible; }
.k-track, .k-val { fill: none; stroke-width: 7; stroke-linecap: round; }
.k-track { stroke: var(--bg-3); }
.k-val { stroke: var(--acc); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--v, 0)); }
.k-ptr { transform-origin: 60px 60px; transform: rotate(calc(-135deg + var(--v, 0) * 270deg)); }
.k-cap { fill: var(--bg-2); stroke: var(--line); stroke-width: 1.5; }
.k-tick { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.k-num { position: absolute; top: 36%; left: 0; right: 0; text-align: center; font: 600 22px/1 var(--sans);
  font-variant-numeric: tabular-nums; pointer-events: none; }
.k-num small { font-size: 11px; color: var(--mute); margin-left: 2px; font-weight: 500; }
.k-name { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); transition: color .3s; }
.knob.on .k-name { color: var(--acc-2); }
.knob.on .k-cap { stroke: var(--acc); }
.knob input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; }
.knob:has(input:focus-visible) svg { outline: 2px solid var(--acc-2); outline-offset: 2px; border-radius: 50%; }
.shape { display: flex; gap: 6px; }
.shape button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: none;
  border-radius: 999px; padding: 0 12px; min-height: 40px; cursor: pointer; font-size: 13px; color: var(--ink-2); transition: all .25s; }
.shape svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.shape button[aria-checked="true"] { border-color: var(--acc); color: var(--ink); background: rgb(229 139 85 / 14%); }
.sw { display: flex; gap: 8px; flex-wrap: wrap; }
.sw button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0;
  background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 25%), 0 0 0 1px rgb(255 255 255 / 16%); transition: transform .25s var(--spring); }
.sw button[aria-checked="true"] { border-color: var(--ink); transform: scale(1.18); }
.try { color: var(--acc-2); font-size: 14px; letter-spacing: .06em; opacity: 0; transition: opacity .5s; }
.try.on { opacity: 1; }

/* сцена 3: рисунки кадров */
.fr-art { width: 100%; height: auto; display: block; overflow: visible; }
.fr-art .ln { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fr-art .ln.thin { stroke-width: 1.6; stroke: var(--ink-2); }
.fr-art .ln.dim { stroke: var(--bg-3); stroke-width: 6; }
.fr-art .ln.ac { stroke: var(--acc); stroke-width: 6; }
.fr-art [pathLength] { stroke-dasharray: 1; }
.fr-art .sf { fill: var(--bg-3); }
.fr-art .sf2 { fill: #362e27; }
.fr-art .ac-fill { fill: var(--acc); }
.fr-art .kn { fill: var(--ink); }
.fr-art .box { fill: none; stroke: var(--ink-2); stroke-width: 2; }
.fr-art g, .fr-art rect, .fr-art circle, .fr-art path { transform-box: fill-box; }
.f1-a, .f1-b, .f1-c { transform-origin: 0 50%; }
.f2-ar { transform-origin: 50% 50%; }
.f3-mg { transform-origin: 50% 50%; }
.f4-s { transform-origin: 50% 50%; }
.f5-lq { transform-origin: 50% 100%; }
.f5-st { transform-origin: 50% 0; }
.f5-jug { transform-origin: 100% 0; }
.f6-fl { transform-origin: 100% 100%; }
.f6-fr { transform-origin: 0 100%; }
.f6-lb { transform-origin: 50% 50%; }
.f6-fx { transform-origin: 50% 100%; }
.fr-art .cd { fill: #efe6d2; }
/* кадры фигурки: контур единорога через <use> (толщина — в единицах символа, он уменьшен) */
.fr-art use.ln { stroke-width: 6; }
.fr-art use.ln.thin { stroke-width: 4; }
.fr-art .fig { fill: none; stroke: #efe6d2; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.f2-u { stroke-dasharray: 1; }
.fr-art .ln.ok { stroke: var(--acc-ink); stroke-width: 4; }
.f2-ok { transform-origin: 50% 50%; }
.fr-art .sil { fill: var(--acc); opacity: .3; }
.f3-cr, .f4-s { transform-origin: 50% 100%; }
.fr-art .f5-lq { opacity: .85; }
.fr-art .wk { fill: none; stroke: #2b211a; stroke-width: 3; stroke-linecap: round; }
.fr-n { font: italic 600 1em/1 var(--serif); color: transparent; -webkit-text-stroke: 1px var(--line); }
.fr h3 { font: 600 clamp(22px, 2.6vw, 34px)/1.1 var(--serif); }
.fr p { color: var(--ink-2); }

/* сцена 4: карточки видов */
.tone-0 { --t1: #e9c9a4; --t2: #c9895a; --t3: #2b2219; }
.tone-1 { --t1: #b9c9ac; --t2: #6f8a5c; --t3: #1f241b; }
.tone-2 { --t1: #e8b9b0; --t2: #b9645a; --t3: #2a1d1b; }
.tone-3 { --t1: #b7a6cf; --t2: #6f5c94; --t3: #211d29; }
.tone-4 { --t1: #a9c6d9; --t2: #4f7d99; --t3: #1a2329; }
.tone-5 { --t1: #e0c36b; --t2: #a3812a; --t3: #29251a; }
.art-bg { fill: var(--t3); }
.art-a { fill: var(--t1); }
.art-b { fill: var(--t2); }
.art-l { fill: none; stroke: var(--t2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.art-f { fill: #ffb347; }
.cards { list-style: none; margin: 0; padding: 0; }
.card a { position: relative; display: grid; text-decoration: none; overflow: hidden; border-radius: 22px;
  background: var(--t3); isolation: isolate; }
.card .art { position: absolute; inset: 0 0 auto; width: 100%; height: 78%; z-index: -2; transition: transform .8s var(--ease); }
.card a::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 30%, rgb(20 17 15 / 88%) 85%); }
.card b { font: 600 clamp(24px, 2.4vw, 32px)/1.05 var(--serif); align-self: end; }
.c-n { position: absolute; top: 16px; left: 18px; font: italic 600 15px/1 var(--serif); color: var(--t1); }
.c-s { color: var(--ink-2); font-size: 14px; }
.c-c { color: var(--t1); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.c-c:empty { display: none; }
.c-go { justify-self: start; margin-top: 8px; font-size: 14px; font-weight: 650; border-bottom: 2px solid var(--t1); }
.marq { position: absolute; left: 0; white-space: nowrap; pointer-events: none;
  font: italic 600 clamp(64px, 12vw, 180px)/1 var(--serif); color: transparent; -webkit-text-stroke: 1px var(--line); }
.marq-t { display: inline-block; animation: marq 40s linear infinite; padding-right: .3em; }
@keyframes marq { to { transform: translateX(-100%); } }

/* сцена 5: финал */
.kin2 { font: 600 clamp(56px, 11vw, 190px)/.9 var(--serif); letter-spacing: -.04em; }
.kin2 .line.ac { color: var(--acc); font-style: italic; }
.ch { display: inline-block; white-space: pre; }
.note { color: var(--mute); font-size: 14px; }
.foot { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--mute); font-size: 13px; }
.foot a { color: var(--ink-2); }

/* появление по прокрутке: CSS scroll-driven (.sda) или IntersectionObserver (.in) */
.rv { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.sda .rv { transition: none; animation: rv linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
@keyframes rv { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ меньше движения: статичные кадры */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
  .draw { stroke-dashoffset: 0; }
  .fr-art [pathLength] { stroke-dashoffset: 0; }
  .try { opacity: 1; }
}