/* Згенеровано web/packages/ui/scripts/sync-maket.mjs з design/maket/e. НЕ ПРАВИТИ руками — правки зникнуть при наступному запуску. */
/* ZRAZU · E «Кіно» — основа: шрифти, скидання, типографіка, службові класи, поява і тихий режим. Спільний файл.
   Шрифти: Inter 4.1 (OFL), JetBrains Mono (OFL). Іконки: Lucide (ISC). */
@font-face{font-family:'Inter E';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-var-e.woff2) format('woff2')}
@font-face{font-family:'JB Mono E';font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/jbmono-cyrillic.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+2116}
@font-face{font-family:'JB Mono E';font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/jbmono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122,U+2212}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 16px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.5 var(--f);font-optical-sizing:auto;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:'cv11' 1}
img,svg{display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
code,kbd,samp,.mono{font-family:var(--mono);font-size:max(12.5px,.88em);letter-spacing:0}
s{text-decoration-thickness:1.5px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--btn-pri-bg);color:var(--btn-pri-fg);padding:12px 18px;border-radius:12px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:10px}
.ic{width:20px;height:20px;flex:none}
.ic-sm{width:18px;height:18px}
.ic-xs{width:15px;height:15px}
.spin{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wrap{width:min(1120px,calc(100% - 2*var(--gut)));margin-inline:auto}
.wrap-narrow{width:min(760px,calc(100% - 2*var(--gut)));margin-inline:auto}
.nowrap{white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- Типографіка ---------- */
.eyebrow{margin:0 0 10px;font-size:17px;font-weight:600;letter-spacing:-.005em;line-height:1.3;color:var(--eyebrow-solid);background:var(--beam-ink);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.eyebrow-sec{margin-bottom:14px}
.statement{margin:0 0 26px;font-size:clamp(40px,6.2vw,92px);font-weight:720;letter-spacing:-.048em;line-height:1.02;max-width:17ch;text-wrap:balance}
.statement .w{transition:opacity .5s ease}
.js .statement[data-words] .w{opacity:.4}                                   /* 3.5:1 на #050506 */
html.js[data-theme="light"] .statement[data-words] .w:not(.on){opacity:.52}  /* 3.3:1 на смузі */
.js .statement[data-words] .w.on{opacity:1}
.statement-xl{font-size:clamp(56px,10vw,168px);max-width:none;margin-inline:auto}
.h1{margin:0 0 16px;font-size:clamp(40px,5.6vw,76px);font-weight:720;letter-spacing:-.045em;line-height:1.03;text-wrap:balance}
.h2{margin:0 0 14px;font-size:clamp(34px,4.4vw,60px);font-weight:720;letter-spacing:-.045em;line-height:1.05;text-wrap:balance}
.h3{margin:0 0 10px;font-size:clamp(24px,2.4vw,34px);font-weight:700;letter-spacing:-.035em;line-height:1.12}
.h4{margin:0 0 8px;font-size:20px;font-weight:680;letter-spacing:-.02em;line-height:1.25}
.lead{margin:0 0 20px;font-size:clamp(19px,1.7vw,24px);line-height:1.45;color:var(--text-2);max-width:42ch;font-weight:450;letter-spacing:-.015em}
.lead-sm{font-size:clamp(18px,1.4vw,21px)}
.fine{margin:22px 0 0;font-size:15px;color:var(--text-2);max-width:80ch}
.muted{color:var(--text-2)}
.prose{font-size:17px;line-height:1.6;color:var(--text-2);max-width:68ch}
.prose h2{font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1.15;color:var(--text);margin:40px 0 12px}
.prose h3{font-size:20px;font-weight:680;letter-spacing:-.02em;color:var(--text);margin:28px 0 8px}
.prose p,.prose ul,.prose ol{margin:0 0 14px}
.prose li{margin:0 0 6px}
.prose a{color:var(--text);text-underline-offset:3px;text-decoration-color:var(--line-3)}
.prose strong{color:var(--text);font-weight:640}

/* ---------- Світла тема: кольорові поля вздовж усього скролу ----------
   Плитка з чотирьох м'яких полів (бурштин ліворуч → фіалка праворуч → троянда ліворуч → бурштин праворуч) повторюється
   вниз на будь-якій довжині сторінки — колір є не лише в першому екрані. Без blur і без fixed: дешево на мобільному.
   У кабінеті ліві поля сховані під сайдбаром — там лише праві, тихіші (кабінет — інструмент, не вітрина). */
html[data-theme="light"] body{background-image:var(--fields);background-size:100% var(--fields-h);background-repeat:repeat-y;background-position:0 var(--fields-y)}
html[data-theme="light"][data-layout="cabinet"] body{background-image:radial-gradient(720px 560px at 100% 22%,rgba(var(--tone-a),.11),rgba(var(--tone-a),0) 70%),radial-gradient(760px 600px at 100% 72%,rgba(var(--tone-c),.11),rgba(var(--tone-c),0) 70%);background-size:100% 2400px;background-position:0 0}
[data-theme="light"] .prose a{text-decoration-color:var(--accent-line)}

/* ---------- Поява ---------- */
.intro [data-intro]{animation:introUp 1s var(--ease-out) both}
@keyframes introUp{from{opacity:0;transform:translateY(18px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
.js [data-reveal]{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out),filter 1s var(--ease-out)}
.js [data-reveal].in{opacity:1;transform:none;filter:blur(0)}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Тихий режим (prefers-reduced-motion) і знімки (?static) ---------- */
html[data-rm] [data-reveal]{transform:none;filter:none;transition:opacity .3s ease}
html[data-rm] .sk,html[data-rm] .spin{animation:none}
html[data-static] *,html[data-static] *::before,html[data-static] *::after{animation:none!important;transition:none!important}
html[data-static] [data-reveal]{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
}
@media (max-width:760px){ body{font-size:16px} }