/* LifeHome — спільні стилі. Витягнуто з index.html 2026-07-29.
Підключати в кожній сторінці: */
:root {
color-scheme: light;
--ease-out-expo: cubic-bezier(.16,1,.3,1);
--dur-micro: 180ms;
--dur-enter: 600ms;
--dur-exit: 380ms;
}
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.font-display { font-optical-sizing: auto; }
/* Display headlines: tight tracking + no orphan words */
.h-display { letter-spacing: -0.008em; text-wrap: balance; }
h1, h2, h3 { text-wrap: balance; }
/* ---- Scroll reveal (CSS fallback when GSAP absent / JS off) ---- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--dur-enter) var(--ease-out-expo), transform var(--dur-enter) var(--ease-out-expo); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .07s; } .reveal-d2 { transition-delay: .14s; } .reveal-d3 { transition-delay: .21s; }
/* When GSAP drives motion, it sets .js-anim on and manages reveals itself */
html.js-anim .reveal { transition: none; }
/* ---- Line-mask headline (intro). Lines hidden only when JS+motion present ---- */
/* clip-path instead of overflow:hidden — negative insets clip ONLY top/bottom
(for the rise-in reveal) and leave generous room below the baseline and past
the box edges, so italic descenders („у“/"y") and overhang are never cut */
.line-mask { display: block; clip-path: inset(-0.35em -6em -0.45em -0.6em); }
.line-mask > span { display: block; will-change: transform; }
@media (min-width: 640px) { .line-mask > span { white-space: nowrap; } }
@media (max-width: 640px) { .marquee-track { animation-duration: 20s; } }
/* lines are VISIBLE by default; the GSAP intro sets its own hidden from-state (fromTo),
so a failed/absent GSAP can never leave the headline stuck out of view. */
/* ---- Hero ---- */
@keyframes slowzoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero-zoom { animation: slowzoom 14s ease-out forwards; }
.grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .035; mix-blend-mode: multiply;
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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* ---- Marquee ---- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { animation: marquee 32s linear infinite; }
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
/* ---- i18n visibility ---- */
.lang-en { display: none; }
html[data-lang="en"] .lang-uk { display: none; }
html[data-lang="en"] .lang-en { display: inline; }
html[data-lang="en"] .lang-en.block-en { display: block; }
/* ---- Animated nav underline ---- */
.nav-underline { position: relative; }
.nav-underline::after { content: ''; position: absolute; left: 0; bottom: -4px; height: 1.5px; width: 100%;
background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-micro) var(--ease-out-expo); }
.nav-underline:hover::after, .nav-underline:focus-visible::after { transform: scaleX(1); }
/* ---- Хедер поверх темного героя (клас hdr-over ставить main.js) -------------
Над фото героя хедер прозорий, а типографіка в ньому за замовчуванням темна —
меню зливалося з фото. Тут перефарбовуємо все світлим і збільшуємо лого:
на головному екрані воно має читатись першим. ------------------------------- */
/* Лого зменшується не висотою, а transform — компонується на GPU, тому перехід
між великим (над героєм) і малим (на світлому хедері) справді плавний.
Масштабуємо весь : разом із лого їдуть і золота маска, і оверлей анімації. */
[data-header] [data-logo-img],
[data-header] [data-logo-img-light] { height: 3.4rem; width: auto; pointer-events: none; -webkit-user-drag: none; user-select: none; }
@media (min-width: 640px) {
[data-header] [data-logo-img],
[data-header] [data-logo-img-light] { height: 4.2rem; }
}
/* Зсув уліво росте разом із боковим відступом контейнера — на телефоні
великий від'ємний margin виносив знак за край екрана. */
[data-logo-link] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
transform-origin: left center; will-change: transform; margin-left: -0.6rem;
transform: translateY(8px); transition: transform .55s cubic-bezier(.22,.9,.32,1); }
@media (min-width: 640px) { [data-logo-link] { margin-left: -1.7rem; } }
@media (min-width: 1280px) { [data-logo-link] { margin-left: -2.7rem; } }
@media (min-width: 1536px) { [data-logo-link] { margin-left: -3.5rem; } }
/* Над героєм знак стоїть нижче й лівіше, на світлому хедері — вище.
Обидві посадки підбирались оком, це не розрахунок. */
[data-header].hdr-over [data-logo-link] { transform: translate(-0.75rem, 13px); }
[data-header]:not(.hdr-over) [data-logo-link] { transform: translateY(2px) scale(.68); }
/* Два примірники лого один поверх одного: нижній темний (#0F1A24), верхній
світлий (#F5EFDD). Переходимо ПРОЗОРІСТЮ верхнього — анімація filter ішла
через каламутні проміжні кольори і виглядала брудно.
Колір ЗАПЕЧЕНИЙ У ФАЙЛИ (`logo-600-ink.png` / `logo-600-sand.png`,
генерує `node tools/recolor-logo.mjs`), а не даний filter-ланцюжком:
Safari й WebView на iOS рахують ланцюжок sepia/saturate/hue-rotate в іншому
колірному просторі — на телефоні знак виходив рожевуватим. CSS-маска теж не
годиться: на file:// картинка-маска крос-origin і мовчки з'їдає шар. */
/* Перехід миттєвий (правка замовника): будь-яке плавне змішування двох
шарів давало проміжний брудний колір. */
[data-header] [data-logo-img-light] {
position: absolute; left: 0; top: 50%; transform: translateY(-50%);
opacity: 0; transition: none; }
[data-header].hdr-over [data-logo-img-light] { opacity: 1; }
/* Колір знака, що збирається при кліку, живе в CSS (а не в JS) — тоді він
переходить із глиняного в біле тим самим плавним переходом, що й саме лого. */
[data-logo-build] { color: #0F1A24; transition: none; }
[data-header].hdr-over [data-logo-build] { color: #F5EFDD; }
/* Вбудовані браузери (Telegram, Instagram) віддають WebView власний верхній
відступ: position:fixed стає ПІД ним, а сторінка малюється й вище — і над
хедером лишалась смужка контенту, ніби хедер опущений. Дотягуємо фон
хедера вгору тим самим кольором. У звичайному браузері ця смуга лежить
вище краю екрана й просто не видно. Над героєм хедер прозорий — тоді й
заглушка прозора, нічого не з'являється. */
[data-header]::before {
content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 140px;
background: inherit; pointer-events: none;
}
[data-header].hdr-over [data-nav] a { color: #F6F1E9; text-shadow: 0 1px 12px rgba(15,26,36,.55); }
[data-header].hdr-over [data-nav] a:hover,
[data-header].hdr-over [data-nav] a[aria-current="page"] { color: #C97F45; }
[data-header].hdr-over [data-langswitch] { border-color: rgba(246,241,233,.45); color: #F6F1E9; }
[data-header].hdr-over [data-langswitch] button[aria-pressed="true"],
[data-header].hdr-over [data-langswitch] button.bg-ink { background: #F6F1E9; color: #0F1A24; }
[data-header].hdr-over [data-menu-btn] { color: #F6F1E9; }
[data-header].hdr-over [data-header-ai] { border-color: rgba(246,241,233,.45); color: #F6F1E9; }
[data-header].hdr-over [data-header-ai]:hover { border-color: #C97F45; color: #C97F45; }
/* ---- Підписи країн на карті поставок ----------------------------------
Базова карта взята без назв (light_nolabels): рідні підписи OSM ішли
в п'яти мовах одночасно і засмічували кадр. Назви малюємо самі. */
/* .leaflet-tooltip у селекторі навмисно: leaflet.css підключається після
styles.css, тож на рівній вазі перемагав би він і лишав білу плашку. */
.leaflet-tooltip.geo-label { background: none; border: 0; box-shadow: none; padding: 0;
font-family: Inter, system-ui, sans-serif; font-size: 12.5px; font-weight: 600;
color: #0F1A24; text-shadow: 0 1px 4px rgba(246,241,233,.95), 0 0 10px rgba(246,241,233,.8); }
.leaflet-tooltip.geo-label::before { display: none; }
.leaflet-tooltip.geo-label-home { font-family: '"IBM Plex Mono"', monospace; font-size: 10.5px;
letter-spacing: .08em; color: #824E2B; text-transform: uppercase; }
/* На телефоні підписи менші: кадр вузький, і що вужчий підпис — то легше
розкладці в export.html знайти для нього чисте місце. */
@media (max-width: 639px) {
.leaflet-tooltip.geo-label { font-size: 11px; }
.leaflet-tooltip.geo-label-home { font-size: 9.5px; letter-spacing: .06em; }
}
/* ---- Паспорт фактів у героях: легкий нахил у 3D (правка замовника) ----
Тільки на широких екранах і тільки коли рух не вимкнено — на дотикових
пристроях карта показується плоскою, там перспектива лише заважає. */
/* Фото «Ми — завод» їде шторкою (clip-path). Без власного шару анімація
рвалася на першому проході — браузер перемальовував JPEG на CPU. */
[data-clip-img] { will-change: clip-path; transform: translateZ(0); backface-visibility: hidden; }
.lh-tilt { transform: perspective(1600px) rotateY(-3.5deg) translateZ(0);
transform-origin: left center; transition: transform .6s var(--ease-out-expo); }
.lh-tilt:hover { transform: perspective(1400px) rotateY(0deg); }
@media (prefers-reduced-motion: reduce) { .lh-tilt, .lh-tilt:hover { transform: none; } }
/* ---- FAQ ----
Гарантуємо, що згорнутий не лишає нічого видимого: без цього
правила в закритому стані знизу стирчав хвостик відповіді. */
[data-faq] details > summary { list-style: none; }
[data-faq] details > summary::-webkit-details-marker { display: none; }
[data-faq] details:not([open]) > :not(summary) { display: none !important; }
/* відступ переносимо з margin у padding: margin лежить ПОЗА height, і при
анімації згортання лишався б порожній зазор у 12 px */
[data-faq] details > :not(summary) { overflow: hidden; margin-top: 0 !important; padding-top: .75rem; }
/* ---- «Шлях модуля» на сторінці виробництва ----------------------------
Кожна сцена лежить у тому самому viewBox і спирається на ту саму лінію
землі, тому при перемиканні нічого не з'їжджає. Лінії малюються через
pathLength=1: довжина шляху нормалізована, і одна й та сама пара
dasharray/dashoffset працює для будь-якої фігури. */
/* Без JS/анімації видно першу сцену суцільними лініями — блок ніколи не
лишається порожнім прямокутником. Пунктир вмикає тільки html.js-anim. */
[data-jstage] .jr-scene { opacity: 0; }
[data-jstage] .jr-scene[data-scene="1"], [data-jstage] .jr-scene.on { opacity: 1; }
html.js-anim [data-jstage] .dr { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-jstage] .jr-ground { opacity: .35; }
[data-jstage] .jr-dash { stroke-dasharray: .06 .06; stroke-dashoffset: 0; opacity: .45; }
.jr-step { opacity: .5; }
.jr-step.on { opacity: 1; border-color: #A9683C; background: rgba(246,241,233,.7); }
@media (prefers-reduced-motion: reduce) {
[data-jstage] .dr { stroke-dasharray: none; stroke-dashoffset: 0; }
}
/* ---- Підказка «гортайте вниз» ---- */
@keyframes lhBob { 0%,100% { transform: translateY(0); opacity:.75 } 50% { transform: translateY(4px); opacity:1 } }
.lh-bob { animation: lhBob 2.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .lh-bob { animation: none; } }
/* ---- Button fill-sweep ---- */
.btn-sweep { position: relative; overflow: hidden; isolation: isolate; }
.btn-sweep::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--sweep, #824E2B);
transform: translateX(-101%); transition: transform var(--dur-enter) var(--ease-out-expo); }
.btn-sweep:hover::before, .btn-sweep:focus-visible::before { transform: translateX(0); }
/* ---- Custom cursor (desktop, pointer:fine) ---- */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 80; pointer-events: none; border-radius: 9999px; opacity: 0; }
.cursor-dot { width: 6px; height: 6px; background: #A9683C; margin: -3px 0 0 -3px; }
.cursor-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid rgba(169,104,60,.55);
transition: width .2s var(--ease-out-expo), height .2s var(--ease-out-expo), margin .2s var(--ease-out-expo), background-color .2s; }
html.cursor-on, html.cursor-on * { cursor: none !important; }
.cursor-ring.is-hot { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(169,104,60,.10); }
/* ---- Dimension-line signature (technical-drawing motif) ---- */
.dim { font-family: '"IBM Plex Mono"', monospace; }
.dim-line { display: inline-flex; align-items: center; gap: .5rem; }
.dim-line::before, .dim-line::after { content: ''; height: 1px; flex: 1; min-width: 14px; background: currentColor; opacity: .5; }
/* ---- Process pin (signature) ---- */
.proc-step { transition: opacity var(--dur-enter) var(--ease-out-expo); }
.proc-layer { transition: opacity .5s var(--ease-out-expo), transform .5s var(--ease-out-expo); }
[data-pimg] { opacity: 0; transition: opacity .45s var(--ease-out-expo); }
[data-pimg].on, [data-pimg][data-layer="1"]:not(.off) { opacity: 1; }
/* schematic scenes draw themselves in when their step activates */
html.js-anim [data-pimg] .dr { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease-out-expo); }
html.js-anim [data-pimg] .fd { opacity: 0; transition: opacity .5s var(--ease-out-expo); }
html.js-anim [data-pimg].on .dr, html.js-anim [data-pimg][data-layer="1"]:not(.off) .dr { stroke-dashoffset: 0; }
html.js-anim [data-pimg].on .fd, html.js-anim [data-pimg][data-layer="1"]:not(.off) .fd { opacity: 1; }
/* wall diagram ↔ list: hover previews, click opens layer details */
.wall-x [data-wl] { transition: opacity .25s var(--ease-out-expo); cursor: pointer; }
.wall-x.dim [data-wl] { opacity: .18; }
.wall-x.dim [data-wl].hl { opacity: 1; }
.wl-row { cursor: pointer; transition: background-color .2s; }
.wl-row:hover, .wl-row.act { background-color: #F1EADF; }
/* FAQ cards: mono index numbers via CSS counter */
/* ---- Range slider (calculator) ---- */
input[type="range"].lh-range { -webkit-appearance: none; appearance: none; background: transparent; }
input[type="range"].lh-range::-webkit-slider-runnable-track { height: 4px; border-radius: 9999px;
background: linear-gradient(to right, #A9683C var(--fill,40%), #E9DECE var(--fill,40%)); }
input[type="range"].lh-range::-moz-range-track { height: 4px; border-radius: 9999px; background: #E9DECE; }
input[type="range"].lh-range::-moz-range-progress { height: 4px; border-radius: 9999px; background: #A9683C; }
input[type="range"].lh-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -9px;
width: 22px; height: 22px; border-radius: 9999px; background: #0F1A24; border: 3px solid #F6F1E9; box-shadow: 0 2px 8px rgba(15,26,36,.25); cursor: grab; transition: transform var(--dur-micro); }
input[type="range"].lh-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
input[type="range"].lh-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 9999px; background: #0F1A24; border: 3px solid #F6F1E9; cursor: grab; }
input[type="range"].lh-range:focus-visible { outline: none; }
input[type="range"].lh-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(169,104,60,.4); }
/* ---- Focus-visible global ---- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid #A9683C; outline-offset: 3px; border-radius: 3px; }
/* keep direction-card CTA text discoverable for keyboard users (a11y) */
a.group:focus-within .opacity-0 { opacity: 1 !important; transform: translateX(0) !important; }
/* modals: [hidden] must beat the .flex utility */
[data-passport-modal][hidden], [data-consult-modal][hidden] { display: none !important; }
/* .logo-invert / .logo-clay прибрані: колір лого тепер запечений у самі PNG
(`logo-600-ink.png` / `logo-600-sand.png`) — див. коментар біля [data-logo-img]. */
/* hide scrollbar on the mobile model carousel */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
/* ---- Mobile menu ---- */
.m-menu { transition: opacity var(--dur-exit) var(--ease-out-expo), visibility var(--dur-exit); }
.m-menu[hidden] { display: flex !important; opacity: 0; visibility: hidden; pointer-events: none; }
.m-menu .m-item { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-enter) var(--ease-out-expo), transform var(--dur-enter) var(--ease-out-expo); }
.m-menu:not([hidden]) .m-item { opacity: 1; transform: none; }
/* ---- Reduced motion: full static fallback ---- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto !important; }
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.line-mask > span { transform: none !important; }
.hero-zoom, .marquee-track { animation: none !important; }
.grain { display: none; }
.proc-layer { opacity: 1 !important; transform: none !important; }
* { scroll-behavior: auto !important; }
}
/* ================= EXPERIMENT LAYER (design trials — not in main) ================= */
/* 1 · unified warm grade: every content photo pulled toward the hero's dusk palette */
section:not(#hero) img:not([data-notone]) {
filter: sepia(.18) saturate(1.08) contrast(.97) brightness(1.01) hue-rotate(-6deg);
}
/* 2 · blueprint grid on ink sections — factory-drawing undertone */
.blueprint {
background-image:
linear-gradient(rgba(246,241,233,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(246,241,233,.05) 1px, transparent 1px);
background-size: 34px 34px;
}
/* 3 · roof-line divider (the mark's exact gable angle) between light sections */
.chev-divider { display:flex; align-items:center; gap:1.5rem; max-width:80rem; margin:0 auto; padding:2.5rem 2rem; }
.chev-divider::before, .chev-divider::after { content:''; flex:1; height:1px; background:rgba(15,26,36,.14); }
.chev-divider svg { width:30px; height:16px; flex:none; }
/* 4 · stamped factory plate for the $/m² figure */
.plate { display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.06em;
color:#5C6470; background:#F6F1E9; border:1px solid rgba(15,26,36,.3); border-radius:3px; padding:3px 8px; margin-top:5px;
box-shadow: inset 0 0 0 2px #F6F1E9, inset 0 0 0 3px rgba(15,26,36,.15); }
/* 5 · drawing-style dimension terminators on model photos */
.dimline { position:relative; }
.dimline.tl::before, .dimline.tr::after { content:''; position:absolute; top:-3px; width:1px; height:7px; background:rgba(246,241,233,.85); }
.dimline.tl::before { left:0; } .dimline.tr::after { right:0; }
/* ---- experiment batch 2 ---- */
.dropcap::first-letter { font-family:"Playfair Display",serif; font-weight:600; font-size:3.3em; line-height:.82; float:left; padding:.05em .12em 0 0; color:#0F1A24; }
.bigquote { position:absolute; left:-0.1em; top:-0.58em; font-family:"Playfair Display",serif; font-size:6.5rem; line-height:1; color:rgba(169,104,60,.15); pointer-events:none; user-select:none; }
.secno-wrap { isolation:isolate; }
.secno { position:absolute; z-index:-1; left:-0.04em; top:-0.3em; font-family:"Playfair Display",serif; font-weight:600;
font-size:clamp(5.5rem,9vw,9rem); line-height:1; letter-spacing:normal; color:transparent;
-webkit-text-stroke:1.5px rgba(15,26,36,.10); pointer-events:none; user-select:none; }
.secno-light { -webkit-text-stroke-color:rgba(246,241,233,.13); }
.hand-u { position:relative; display:inline-block; }
.hand-u .hand-u-svg { position:absolute; left:-2%; bottom:-0.12em; width:104%; height:.18em; overflow:visible; }
html.js-anim .hand-u .hand-u-svg path { stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .9s ease-out .35s; }
html.js-anim .hand-u.drawn .hand-u-svg path { stroke-dashoffset:0; }
.corner-marks { position:absolute; inset:1.1rem; pointer-events:none; --cm:rgba(246,241,233,.28);
background:
linear-gradient(var(--cm),var(--cm)) left 0 top 0/16px 1px, linear-gradient(var(--cm),var(--cm)) left 0 top 0/1px 16px,
linear-gradient(var(--cm),var(--cm)) right 0 top 0/16px 1px, linear-gradient(var(--cm),var(--cm)) right 0 top 0/1px 16px,
linear-gradient(var(--cm),var(--cm)) left 0 bottom 0/16px 1px, linear-gradient(var(--cm),var(--cm)) left 0 bottom 0/1px 16px,
linear-gradient(var(--cm),var(--cm)) right 0 bottom 0/16px 1px, linear-gradient(var(--cm),var(--cm)) right 0 bottom 0/1px 16px;
background-repeat:no-repeat; }
.mark-pattern { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-36 -30 155 193'%3E%3Cg%20fill='%230F1A24'%20fill-opacity='.026'%3E%3Cpolygon%20points='0,46.5%2012,58.2%2012,111.3%200,123'/%3E%3Cpolygon%20points='20.4,91.8%2037.2,91.8%2037.2,108.9%2020.4,108.9'/%3E%3Cpolygon%20points='45.6,91.8%2062.7,91.8%2062.7,108.9%2045.6,108.9'/%3E%3Cpolygon%20points='71.1,57.9%2083.1,46.5%2083.1,108.9%2071.1,108.9'/%3E%3Cpolygon%20points='20.4,49.2%2036.6,33%2037.2,33%2037.2,66.3%2062.7,66.3%2062.7,83.4%2020.4,83.4'/%3E%3Cpolygon%20points='45.6,33%2062.7,49.5%2062.7,58.2%2045.6,58.2'/%3E%3Cpolygon%20points='41.7,0%2079.5,38.1%2071.1,46.2%2041.7,16.8%2012,46.2%203.6,37.5'/%3E%3C/g%3E%3C/svg%3E"); background-size:150px auto; }
.receipt { box-shadow:0 12px 34px -20px rgba(15,26,36,.4); }
.receipt::after { content:''; position:absolute; top:100%; left:0; right:0; height:9px;
background:radial-gradient(circle at 8px 9px, transparent 5.5px, #FDFAF5 6px) 0 0/16px 9px repeat-x; }
.rec-stamp { position:absolute; top:14px; right:14px; transform:rotate(-8deg); border:2px solid rgba(169,104,60,.45);
color:rgba(169,104,60,.55); border-radius:6px; padding:3px 8px; font-size:10px; letter-spacing:.14em; font-weight:600; }
.bp-hover { pointer-events:none; }
.model-card:hover .bp-hover, .model-card:focus-within .bp-hover { opacity:1; }
html.js-anim .bp-hover .bp-line { stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .8s ease .15s; }
html.js-anim .model-card:hover .bp-hover .bp-line, html.js-anim .model-card:focus-within .bp-hover .bp-line { stroke-dashoffset:0; }
.bp-hover .bp-fd { opacity:0; transition:opacity .4s ease .55s; }
.model-card:hover .bp-fd, .model-card:focus-within .bp-fd { opacity:1; }
.film-perf { position:absolute; top:7px; left:10px; right:10px; height:8px; opacity:0; transition:opacity .3s; pointer-events:none;
background-image:radial-gradient(rgba(246,241,233,.75) 1.6px, transparent 2.1px); background-size:14px 8px; background-position:center; }
.group:hover .film-perf { opacity:.85; }
[data-wl-ruler] .wlr-seg { height:11px; background:rgba(15,26,36,.08); border-right:1.5px solid #F6F1E9; cursor:pointer; transition:background .25s; min-width:5px; }
[data-wl-ruler] .wlr-seg:first-child { border-radius:6px 0 0 6px; }
[data-wl-ruler] .wlr-seg:last-child { border-radius:0 6px 6px 0; border-right:0; }
[data-wl-ruler] .wlr-seg.on { background:#A9683C; }
[data-lightbox][hidden] { display:none !important; }
/* gallery "wall": collapsed state clips the second row mid-way, fade hints at more */
/* На телефоні лінія обрізу нижча (правка замовника): 21rem різало другий
ряд надто високо й стіна виглядала обрубаною. */
[data-gl-wall] { position:relative; overflow:hidden; max-height:28rem; transition:max-height .8s cubic-bezier(.65,0,.2,1); }
@media (min-width:640px) { [data-gl-wall] { max-height:50rem; } }
/* Зріз галереї: не «світіння», а лінія обрізу в дусі креслення —
суцільний волосок плюс дрібний пунктир під ним (правка замовника). */
[data-gl-wall]::after { content:''; position:absolute; left:0; right:0; bottom:0; height:5px; pointer-events:none;
background:
linear-gradient(to bottom, #D9CBB4 0 1px, transparent 1px 100%),
repeating-linear-gradient(to right, #C9B79C 0 6px, transparent 6px 12px);
background-size: 100% 100%, 100% 1px;
background-position: 0 0, 0 4px;
background-repeat: no-repeat, repeat-x;
transition:opacity .45s; }
[data-gl-wall].open { max-height:600rem; }
[data-gl-wall].open::after { opacity:0; }
/* gentle page-open: soft fade + header drop-in (only when motion is on) */
html.js-anim body { animation: pageIn .6s ease-out both; }
html.js-anim [data-header] { animation: headIn .85s .1s cubic-bezier(.22,.9,.32,1) both; }
@keyframes pageIn { from { opacity: 0; } }
@keyframes headIn { from { transform: translateY(-100%); opacity: 0; } }
/* ---- Фільтр-чипи каталогу моделей (models.html) ---- */
.f-chip {
font: 500 0.8125rem/1 'Inter', sans-serif;
padding: 0.5rem 0.85rem;
border-radius: 9999px;
border: 1px solid rgb(15 26 36 / 0.15);
color: #5C6470;
cursor: pointer;
transition: border-color .2s, background-color .2s, color .2s;
}
.f-chip:hover { border-color: rgb(15 26 36 / 0.4); color: #0F1A24; }
.f-chip[aria-pressed="true"] { background: #0F1A24; border-color: #0F1A24; color: #F6F1E9; }