/* Лендинг «Сенека II» (/local/templates/kc/seneka-2/). Макет: Figma «Константин Чайкин», кадры 1440 (СЕНЕКА) и 370 (Моб).
   Все размеры — в пикселях макета, умноженных на --u (1px макета на текущей ширине экрана). */

@font-face { font-family: "SnForum"; src: url(fonts/forum-cyr.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "SnForum"; src: url(fonts/forum-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2212; font-display: swap; }
@font-face { font-family: "SnGolos"; src: url(fonts/golos-cyr.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "SnGolos"; src: url(fonts/golos-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2212; font-display: swap; }
@font-face { font-family: "SnCinzel"; src: url(fonts/cinzel-latin.woff2) format("woff2"); font-display: swap; }

html, .sn-body { margin: 0; padding: 0; background: #000; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.sn-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sn {
    --pink: #fb37e1;
    container-type: inline-size;
    background: #000;
    color: #fff;
    font-family: "SnGolos", Arial, sans-serif;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}
.sn * { box-sizing: border-box; }
:where(.sn) :where(p, h2, dl, dd) { margin: 0; }
:where(.sn) img { display: block; max-width: none; }
.sn-stage, .sn-wrap, .sn-rot, .sn-face, .sn-ticker, .sn-pair, .sn-mech, .sn-show, .sn-gallery, .sn-strip, .sn-hero {
    --u: min(1px, 100cqw / 1440);
}
.sn-wrap { width: calc(1440 * var(--u)); margin: 0 auto; padding: 0 calc(99 * var(--u)) 0 calc(126 * var(--u)); position: relative; z-index: 2; }

/* ---------- типографика ---------- */
.sn-h2 {
    font-family: "SnForum", Georgia, serif;
    font-weight: 400;
    font-size: clamp(44px, calc(70 * var(--u)), 70px);
    line-height: .8;
    text-transform: uppercase;
    max-width: calc(600 * var(--u));
    min-width: 280px;
}
.sn-lead { font-family: "SnForum", Georgia, serif; font-size: clamp(22px, calc(30 * var(--u)), 30px); line-height: 1.1; color: #858585; }
.sn-text { font-size: 16px; line-height: 1.5; letter-spacing: .01em; }
.sn-text p + p { margin-top: 24px; }
/* переносы по слогам — ровнее правый край у всех текстов (заголовки не переносим) */
.sn-text, .sn-lead, .sn-specs__list dd, .sn-prev__pill p { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3; text-wrap: pretty; }
.sn-cols { display: grid; grid-template-columns: calc(566 * var(--u)) calc(595 * var(--u)); column-gap: calc(54 * var(--u)); margin-top: 47px; align-items: start; }

/* ---------- первый экран ---------- */
.sn-hero { position: relative; overflow: hidden; }
.sn-head { position: relative; z-index: 3; width: calc(1440 * var(--u)); height: calc(104 * var(--u)); margin: 0 auto; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.sn-head__logo { position: absolute; left: 50%; top: calc(24 * var(--u)); width: max(154px, calc(200 * var(--u))); height: auto; transform: translateX(-50%); }
.sn-hero__bg { position: absolute; inset: 0; background: #8c8c8c; }
.sn-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.05); will-change: transform; }
.sn-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0) 19%), linear-gradient(to top, #000 0, rgba(0, 0, 0, .85) 8%, rgba(0, 0, 0, 0) 30%); }
.sn-stage { position: relative; width: calc(1440 * var(--u)); height: calc(911 * var(--u)); margin: 0 auto; }
.sn-hero__title { position: absolute; left: calc(111 * var(--u)); top: calc(54 * var(--u)); width: calc(1232 * var(--u)); height: auto; }
.sn-title__svg { display: block; width: 100%; height: auto; overflow: visible; }
.sn-title__svg--m { display: none; }
/* «СЕНЕКА» появляется по буквам: каждая проявляется и чуть поднимается, шаг 0,07 с (--i — номер буквы слева) */
.sn-title__l { transform-box: fill-box; transform-origin: 50% 100%; }
.sn-js .sn-title__l {
    opacity: 0; transform: translateY(16%);
    transition: opacity .45s ease calc(.1s + var(--i) * .07s), transform .6s cubic-bezier(.22, 1, .36, 1) calc(.1s + var(--i) * .07s);
}
.sn-js.sn-ready .sn-title__l { opacity: 1; transform: none; }
.sn-hero__watch { position: absolute; left: calc(444 * var(--u)); top: calc(132 * var(--u)); width: calc(553 * var(--u)); height: calc(700 * var(--u)); object-fit: cover; }
.sn-hero__num-m { display: none; }
.sn-hero__num { position: absolute; left: calc(1010.7 * var(--u)); top: calc(339.5 * var(--u)); width: calc(335.35 * var(--u)); height: auto; }
.sn-hero__unique { position: absolute; left: calc(125 * var(--u)); top: calc(331 * var(--u)); font-family: "SnForum", Georgia, serif; font-size: calc(40 * var(--u)); line-height: .975; text-transform: uppercase; }
.sn-hero__label { position: absolute; left: calc(136 * var(--u)); top: calc(654 * var(--u)); font-size: max(8px, calc(10 * var(--u))); line-height: 1.8; letter-spacing: .25em; text-transform: uppercase; }
.sn-hero__ela { position: absolute; left: calc(135 * var(--u)); top: calc(731 * var(--u)); width: calc(169 * var(--u)); height: auto; }

/* ---------- вступление ---------- */
.sn-intro { margin-top: calc(-9 * var(--u)); }
.sn-intro .sn-h2 { max-width: none; }
.sn-intro .sn-lead { margin-top: 22px; }
.sn-quote {
    position: relative; margin: 57px 0 0 calc(110 * var(--u)); width: calc(996 * var(--u));
    display: grid; grid-template-columns: calc(129 * var(--u)) 1fr; column-gap: calc(52 * var(--u));
    padding: 45px 0 46px calc(64 * var(--u));
}
/* розовые линии с «II» сверху слева и снизу справа */
.sn-quote::before, .sn-quote::after {
    content: ""; position: absolute; height: 26.4px;
    background: linear-gradient(var(--pink), var(--pink)) 0 13px / 100% 1px no-repeat;
}
.sn-quote::before { top: 0; left: 24px; width: calc(100% - 50px); }
.sn-quote::after { bottom: 0; left: 24px; width: calc(100% - 50px); }
.sn-quote__text::before, .sn-quote__text::after {
    content: ""; position: absolute; width: 18.5px; height: 26.4px;
    background: url(img/i.svg) 0 0 / 5.72px 26.4px no-repeat, url(img/i.svg) 12.7px 0 / 5.72px 26.4px no-repeat;
}
.sn-quote__text::before { top: 0; left: 0; }
.sn-quote__text::after { bottom: 0; right: 0; }
.sn-quote__bust { width: calc(129 * var(--u)); height: auto; min-width: 72px; }

.sn-prev { display: grid; grid-template-columns: max(340px, calc(443 * var(--u))) minmax(0, calc(595 * var(--u))); column-gap: calc(89 * var(--u)); margin: 51px 0 0 calc(27 * var(--u)); align-items: start; }
.sn-prev__pill { position: relative; display: flex; align-items: center; gap: 8px; min-height: 141px; padding: 0 78px 0 8px; border-radius: 50px; color: inherit; text-decoration: none; }
/* рамка и подложка — отдельным слоем, чтобы не спорить с анимацией появления */
.sn-prev__pill::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .2); border-radius: inherit; background: rgba(255, 255, 255, 0); transition: border-color .4s ease, background-color .4s ease; pointer-events: none; }
.sn-prev__pill img { width: 114px; height: 114px; flex: none; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.sn-prev__pill p { font-size: 14px; line-height: 1.5; color: #858585; transition: color .4s ease; }
.sn-prev__arrow { position: absolute; right: 36px; top: 50%; margin-top: -9px; color: #d0a47c; opacity: 0; transform: translate(-6px, 6px); transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.sn-prev__pill:hover::before, .sn-prev__pill:focus-visible::before { border-color: rgba(208, 164, 124, .6); background-color: rgba(255, 255, 255, .03); }
.sn-prev__pill:hover img, .sn-prev__pill:focus-visible img { transform: scale(1.07) rotate(-4deg); }
.sn-prev__pill:hover p, .sn-prev__pill:focus-visible p { color: #c9c9c9; }
.sn-prev__pill:hover .sn-prev__arrow, .sn-prev__pill:focus-visible .sn-prev__arrow { opacity: 1; transform: none; }
.sn-prev__pill:focus-visible { outline: none; }
.sn-prev__text { margin-top: 27px; }

/* ---------- повёрнутое фото ---------- */
.sn-rot { position: relative; height: calc(1022 * var(--u)); width: calc(1440 * var(--u)); margin: 11px auto 0; overflow: hidden; }
.sn-rot__box { position: absolute; left: calc(-204 * var(--u)); top: calc(-462 * var(--u)); width: calc(1740 * var(--u)); height: calc(1792 * var(--u)); display: flex; align-items: center; justify-content: center; }
.sn-rot__img { position: relative; flex: none; width: calc(1002 * var(--u)); height: calc(1503 * var(--u)); transform: rotate(40.76deg); }
.sn-rot__img img { width: 100%; height: 100%; object-fit: cover; }
.sn-rot__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180.58deg, #000 6%, rgba(0, 0, 0, 0) 24.7%), linear-gradient(1.53deg, #000 5.6%, rgba(0, 0, 0, 0) 34.2%); }

/* ---------- «Взгляд сквозь вечность» + «Борода мудреца» на крупном фото ---------- */
.sn-face { position: relative; margin-top: calc(-177 * var(--u)); }
.sn-face__img { position: absolute; left: calc(50% - 720 * var(--u)); top: calc(4 * var(--u)); width: calc(1440 * var(--u)); height: calc(1385 * var(--u)); overflow: hidden; }
.sn-face__img img { position: absolute; left: -10.55%; top: -7.8%; width: 121.06%; height: 125.86%; object-fit: cover; }
.sn-face__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 56%, #000 90.1%), linear-gradient(0deg, rgba(0, 0, 0, 0) 60.4%, #000 85.7%); }
.sn-face__top { position: absolute; left: 0; right: 0; top: 0; }
.sn-face__bottom { padding-top: calc(1193 * var(--u)); }

/* ---------- бегущая строка с линзой ---------- */
.sn-ticker { position: relative; height: calc(240 * var(--u)); margin-top: calc(14 * var(--u)); overflow: hidden; }
.sn-ticker__line {
    position: absolute; top: 50%; left: 0; display: flex; white-space: nowrap; transform: translateY(-50%);
    font-family: "SnCinzel", Georgia, serif; font-size: calc(158 * var(--u)); line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: #7ca2d0;
    will-change: transform;
}
.sn-ticker__line span { flex: none; }
/* «прыгающий час»: строка перескакивает на одну букву — быстро, с лёгкой пружинкой */
.sn-ticker__line.is-jump { transition: transform .55s cubic-bezier(.5, 0, .25, 1.3); }
.sn-ticker__lens {
    position: absolute; top: 0; left: calc(50% - 109 * var(--u)); width: calc(240 * var(--u)); height: calc(240 * var(--u)); border-radius: 50%;
}
/* стекло линзы: чёрное «дно» закрывает строку под линзой, сверху — её искажённая копия (фильтр #sn-glass, карту строит seneca.js) */
.sn-lens__view {
    position: absolute; inset: 3.3%; border-radius: 50%; overflow: hidden; filter: url(#sn-glass);
    background: radial-gradient(circle at 38% 32%, #101826 0, #05070b 55%, #000 80%);
}
.sn-lens__mag { position: absolute; inset: 0; transform: scale(1.2); }
.sn-lens__track { position: absolute; }
/* стекло: мягкий блик и яркая точка сверху слева (свет −45°), отсвет-каустика снизу справа, светлая кромка и объём по краю */
.sn-lens__light {
    position: absolute; inset: 3.3%; border-radius: 50%; pointer-events: none;
    background:
        radial-gradient(ellipse 46% 30% at 34% 21%, rgba(255, 255, 255, .34) 0, rgba(255, 255, 255, .1) 45%, rgba(255, 255, 255, 0) 72%),
        radial-gradient(circle at 27% 19%, rgba(255, 255, 255, .95) 0, rgba(255, 255, 255, .35) 1.6%, rgba(255, 255, 255, 0) 4.2%),
        radial-gradient(ellipse 58% 22% at 62% 87%, rgba(170, 205, 255, .22) 0, rgba(170, 205, 255, 0) 70%),
        radial-gradient(circle, rgba(255, 255, 255, 0) 70%, rgba(200, 225, 255, .1) 86%, rgba(255, 255, 255, .22) 93%, rgba(0, 0, 0, .55) 100%);
    box-shadow: inset calc(3 * var(--u)) calc(3 * var(--u)) calc(5 * var(--u)) rgba(255, 255, 255, .28),
                inset calc(-4 * var(--u)) calc(-5 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .65);
}
.sn-lens__light::after {
    content: ""; position: absolute; inset: 7% 9% auto auto; width: 30%; height: 12%; border-radius: 50%;
    border-top: max(1px, calc(2 * var(--u))) solid rgba(255, 255, 255, .45); transform: rotate(38deg); filter: blur(.6px);
}
.sn-ticker__lens::after { content: ""; position: absolute; inset: 0; background: url(img/group24.svg) center / 100% 100% no-repeat; pointer-events: none; }
.sn-lens__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- текстовые блоки и пары фото ---------- */
.sn-block { margin-top: calc(33 * var(--u)); }
.sn-block--design { margin-top: calc(76 * var(--u)); }
.sn-lead--after { margin-top: 40px; }
.sn-pair { width: calc(1440 * var(--u)); margin: 43px auto 0; position: relative; z-index: 2; }
.sn-pair__track { display: flex; justify-content: space-between; gap: calc(4 * var(--u)); }
.sn-pair--2 { margin-top: 71px; }
.sn-pair--2 .sn-pair__track { gap: calc(8 * var(--u)); }
.sn-pair picture { display: block; flex: 1 1 0; min-width: 0; }
.sn-pair img { width: 100%; height: calc(479 * var(--u)); object-fit: cover; }

/* ---------- механизм ---------- */
.sn-mech { position: relative; margin-top: calc(-202 * var(--u)); }
.sn-mech__img { position: relative; width: calc(966 * var(--u)); height: calc(1517 * var(--u)); margin: 0 auto; z-index: 1; }
.sn-mech__img img { width: 100%; height: 100%; object-fit: cover; }
.sn-mech__img::after { content: ""; position: absolute; inset: -1px; background: linear-gradient(0deg, #000 11.3%, rgba(0, 0, 0, 0) 40.7%), linear-gradient(180deg, #000 12.7%, rgba(0, 0, 0, 0) 28.3%); }
.sn-mech__text { display: grid; grid-template-columns: calc(566 * var(--u)) calc(595 * var(--u)); column-gap: calc(61 * var(--u)); margin-top: calc(-225 * var(--u)); align-items: start; }
.sn-mech__text .sn-h2 + .sn-text { margin-top: 37px; }
.sn-mech__right { padding-top: 77px; }

/* ---------- часы на фактурном фоне ---------- */
.sn-show { position: relative; height: calc(888 * var(--u)); margin-top: 39px; overflow: hidden; }
.sn-show__bg { position: absolute; inset: 0; background: url(img/mech-bg.webp) center / cover no-repeat; opacity: .6; }
.sn-show__watch { position: absolute; left: calc(50% - 196 * var(--u)); top: calc(106 * var(--u)); width: calc(458 * var(--u)); height: calc(631 * var(--u)); object-fit: cover; }
/* 3D: холст на весь блок; пальцем внутри блока страница не листается — крутим только часы */
.sn-show__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; touch-action: pan-y; cursor: grab; }
.sn-show.is-3d .sn-show__canvas { touch-action: none; }
.sn-show.is-drag .sn-show__canvas { cursor: grabbing; }
.sn-show.is-3d .sn-show__canvas { opacity: 1; }
.sn-show.is-3d .sn-show__watch { opacity: 0 !important; transition: opacity .8s ease; }
/* кнопка «Приблизить / Уменьшить» — появляется, когда 3D готово */
.sn-show__ui {
    position: absolute; left: 50%; top: calc(799 * var(--u)); display: flex; gap: 8px;
    transform: translate(-50%, 10px); opacity: 0; pointer-events: none; transition: opacity .6s ease .4s, transform .6s ease .4s;
}
.sn-show.is-3d .sn-show__ui { opacity: 1; transform: translate(-50%, 0); }
.sn-show__hint {
    display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px 0 12px; border: 0; border-radius: 50px;
    background: rgba(70, 70, 70, .8); color: #fff; font: 700 12px/1 "SnGolos", Arial, sans-serif; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap;
}
.sn-show__zoom { pointer-events: auto; cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.sn-show.is-3d .sn-show__zoom { pointer-events: auto; }
.sn-show__zoom:hover, .sn-show__zoom:focus-visible { background: rgba(208, 164, 124, .85); color: #000; outline: none; }
.sn-show__zoom-plus { transition: opacity .2s ease; }
.sn-show__zoom[aria-pressed="true"] .sn-show__zoom-plus { opacity: 0; }
.sn-show__spin[aria-pressed="true"] svg { animation: sn-spin .8s linear infinite; }
@keyframes sn-spin { to { transform: rotate(360deg); } }
/* прелоадер 3D: золотое кольцо заполняется по мере загрузки, фото на это время приглушено */
.sn-show__loader {
    position: absolute; left: 50%; top: calc(421 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: 10px;
    transform: translate(-50%, -50%); opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; pointer-events: none;
}
.sn-show.is-loading .sn-show__loader { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.sn-show__loader svg { width: 72px; height: 72px; transform: rotate(-90deg); overflow: visible; }
.sn-show__loader circle { fill: none; stroke-width: 1.5; }
.sn-show__loader-bg { stroke: rgba(255, 255, 255, .14); }
.sn-show__loader-ring { stroke: #d0a47c; stroke-linecap: round; stroke-dasharray: 176; stroke-dashoffset: 176; transition: stroke-dashoffset .4s ease; filter: drop-shadow(0 0 4px rgba(208, 164, 124, .45)); }
.sn-show__loader-pct { position: absolute; top: 36px; transform: translateY(-50%); font-family: "SnForum", Georgia, serif; font-size: 18px; color: #fff; font-variant-numeric: tabular-nums; }
.sn-show__loader-text { font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.sn-show.is-loading .sn-show__watch { opacity: .25 !important; filter: blur(2px); transition: opacity .6s ease, filter .6s ease; }

/* ---------- характеристики ---------- */
.sn-specs { margin-top: 93px; padding-left: calc(158 * var(--u)); }
.sn-specs__list { display: grid; grid-template-columns: calc(140 * var(--u)) calc(818 * var(--u)); column-gap: calc(74 * var(--u)); row-gap: 24px; margin: 42px 0 0 calc(-30 * var(--u)); align-items: baseline; }
.sn-specs__list dt { font-family: "SnForum", Georgia, serif; font-size: clamp(20px, calc(26 * var(--u)), 26px); letter-spacing: .01em; text-transform: uppercase; color: var(--pink); text-align: right; white-space: nowrap; justify-self: end; }
.sn-specs__list dd { font-size: 16px; line-height: 1.5; letter-spacing: .01em; }

/* ---------- галерея ---------- */
.sn-gallery { width: 100%; margin: 89px 0 0; }
.sn-gallery__item { position: sticky; top: 0; overflow: hidden; }
/* кадр галереи — на всю высоту экрана, чтобы под ним не оставалось пустой полосы (лишнее по бокам обрезается) */
.sn-gallery img { width: 100%; height: 100vh; height: 100lvh; object-fit: cover; }

/* ---------- Watches for ELA ---------- */
.sn-ela { margin-top: 108px; }
.sn-ela__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.sn-ela__head .sn-h2 { max-width: calc(640 * var(--u)); }
.sn-ela__logo { width: 169px; height: auto; margin: 49px calc(-11 * var(--u)) 0 0; }
.sn-ela__logo--m { display: none; }
.sn-strip { display: flex; gap: 10px; margin-top: 41px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #444 transparent; }
.sn-strip img { flex: none; width: calc(500 * var(--u)); min-width: 300px; aspect-ratio: 4 / 3; height: auto; object-fit: cover; scroll-snap-align: start; }
.sn-strip:focus-visible { outline: 1px solid var(--pink); outline-offset: 2px; }
.sn-ela--bottom { margin-top: 51px; padding-bottom: 121px; }
.sn-ela--bottom .sn-cols { margin-top: 0; }
.sn-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 365px; max-width: 100%; height: 60px; margin-top: 51px;
    border-radius: 999px; background: #92007f; color: #fff; font-size: 16px; text-decoration: none; transition: background .2s;
}
.sn-btn:hover, .sn-btn:focus-visible { background: #b3009b; color: #fff; }

/* ================= телефон (макет 370) ================= */
@media (max-width: 767px) {
    .sn-stage, .sn-wrap, .sn-rot, .sn-face, .sn-ticker, .sn-pair, .sn-mech, .sn-show, .sn-gallery, .sn-strip, .sn-hero {
        --u: calc(100cqw / 370);
    }
    .sn-wrap { width: 100%; padding: 0 calc(23 * var(--u)) 0 calc(28 * var(--u)); }
    .sn-h2 { font-size: clamp(34px, calc(40 * var(--u)), 52px); line-height: .875; max-width: none; min-width: 0; }
    .sn-lead { font-size: clamp(17px, calc(19 * var(--u)), 24px); line-height: 1; }
    .sn-text { font-size: 14px; line-height: 1.3; }
    .sn-text p + p { margin-top: 18px; }
    .sn-cols { display: block; margin-top: 21px; }
    .sn-cols > * + * { margin-top: 21px; }

    .sn-stage { height: calc(656 * var(--u)); }
    .sn-head { width: 100%; height: calc(68 * var(--u)); }
    .sn-head__logo { top: calc(10 * var(--u)); width: calc(154 * var(--u)); }
    .sn-hero__bg img { object-position: 38% 30%; }
    /* точно по мобильному макету: рамка 20,84 (327,3×61,8) с отступами вектора −0,31% / −4,63% */
    .sn-hero__title { left: calc(18.99 * var(--u)); top: calc(13.14 * var(--u)); width: calc(329.34 * var(--u)); height: calc(65.67 * var(--u)); }
    .sn-title__svg--d { display: none; }
    .sn-title__svg--m { display: block; height: 100%; }
    .sn-hero__watch { left: calc(54 * var(--u)); top: calc(54 * var(--u)); width: calc(270 * var(--u)); height: calc(405 * var(--u)); }
    .sn-hero__num { display: none; }
    /* на телефоне «II» залитое, как в мобильном макете (Cinzel 100, #d0a47c) */
    .sn-hero__num-m { display: block; position: absolute; left: calc(289 * var(--u)); top: calc(106 * var(--u)); font-family: "SnCinzel", Georgia, serif; font-size: calc(100 * var(--u)); line-height: calc(55 * var(--u)); text-transform: uppercase; white-space: nowrap; color: #d0a47c; }
    .sn-hero__unique { left: calc(20 * var(--u)); top: calc(94 * var(--u)); font-size: calc(16 * var(--u)); line-height: .94; }
    .sn-hero__label { left: calc(183 * var(--u)); top: calc(471 * var(--u)); font-size: calc(7 * var(--u)); line-height: 1.43; }
    .sn-hero__ela { left: calc(43 * var(--u)); top: calc(462 * var(--u)); width: calc(123 * var(--u)); }

    .sn-intro { margin-top: calc(-121 * var(--u)); }
    .sn-intro .sn-lead { margin-top: 22px; }
    .sn-quote { display: block; width: auto; margin: 24px 0 0; padding: 0 0 48px 3px; }
    .sn-quote::after { clear: both; }
    .sn-quote__text { padding-top: 58px; }
    .sn-quote::before { top: 27px; left: 24px; width: calc(209 * var(--u)); }
    .sn-quote::after { left: calc(-28 * var(--u)); width: calc(317 * var(--u)); }
    .sn-quote__text::before { top: 27px; left: 0; }
    /* голова справа, текст обтекает её слева */
    .sn-quote__bust { float: right; width: 72px; min-width: 0; margin: 0 -2px 6px 12px; shape-outside: ellipse(48% 52% at 55% 50%); shape-margin: 6px; }
    .sn-prev { display: block; margin: 22px 0 0 -5px; }
    .sn-prev__pill { min-height: 119px; padding: 0 52px 0 0; gap: 0; }
    .sn-prev__arrow { right: 22px; opacity: .7; transform: none; }
    .sn-prev__pill p { font-size: 12px; line-height: 1.2; }
    .sn-prev__text { margin: 32px 0 0 -3px; }

    .sn-rot { height: calc(450 * var(--u)); width: 100%; margin-top: 10px; }
    .sn-rot__box { left: calc(-232 * var(--u)); top: calc(-212 * var(--u)); width: calc(781 * var(--u)); height: calc(804 * var(--u)); }
    .sn-rot__img { width: calc(449.6 * var(--u)); height: calc(674.3 * var(--u)); }

    .sn-face { margin-top: calc(-73 * var(--u)); }
    .sn-face__img { left: calc(-152 * var(--u)); top: calc(252 * var(--u)); width: calc(659 * var(--u)); height: calc(634 * var(--u)); }
    .sn-face__top { padding-left: calc(25 * var(--u)); }
    .sn-face__bottom { padding-top: calc(773 * var(--u)); padding-left: calc(25 * var(--u)); }

    .sn-ticker { height: calc(169 * var(--u)); margin-top: 21px; }
    .sn-ticker__line { font-size: calc(88 * var(--u)); }
    .sn-ticker__lens { left: calc(50% - 84 * var(--u)); width: calc(169 * var(--u)); height: calc(169 * var(--u)); }

    .sn-block { margin-top: 41px; }
    .sn-block--design { margin-top: 30px; }
    .sn-lead--after { margin-top: 18px; }
    /* пара фото перелистывается с первого на второе, пока блок проезжает по экрану (сдвиг ставит seneca.js) */
    .sn-pair { width: 100%; margin-top: 28px; overflow-x: clip; }
    .sn-pair--2 { margin-top: 30px; }
    .sn-pair__track { gap: 5px; justify-content: flex-start; will-change: transform; }
    .sn-pair--2 .sn-pair__track { gap: 8px; }
    .sn-pair picture { flex: 0 0 100%; }
    .sn-pair img { height: calc(247 * var(--u)); }

    .sn-mech { margin-top: calc(-49 * var(--u)); }
    .sn-mech__img { width: calc(336 * var(--u)); height: calc(528 * var(--u)); }
    .sn-mech__text { display: block; margin-top: calc(-83 * var(--u)); }
    .sn-mech__text .sn-h2 + .sn-text { margin-top: 21px; }
    .sn-mech__right { padding-top: 0; margin-top: 18px; }

    .sn-show { height: calc(388 * var(--u)); margin-top: 38px; }
    .sn-show__watch { left: calc(50% - 84 * var(--u)); top: calc(39 * var(--u)); width: calc(201 * var(--u)); height: calc(276 * var(--u)); }
    .sn-show__ui { top: calc(343 * var(--u)); gap: 6px; }
    .sn-show__hint { height: 30px; padding: 0 12px 0 10px; font-size: 10px; background: rgba(54, 54, 54, .8); }
    .sn-show__loader { top: calc(177 * var(--u)); }

    .sn-specs { margin-top: 28px; padding-left: calc(31 * var(--u)); }
    .sn-specs__list { display: block; margin: 28px 0 0; }
    .sn-specs__list dt { font-size: 23px; line-height: 2.1; text-align: left; justify-self: start; }
    .sn-specs__list dd { font-size: 14px; }
    .sn-specs__list dd + dt { margin-top: 24px; }

    .sn-gallery { width: 100%; margin-top: 58px; }
    .sn-gallery img { height: 100vh; height: 100lvh; object-position: 50% 50%; }

    .sn-ela { margin-top: 44px; }
    .sn-ela__head .sn-h2 { max-width: none; }
    .sn-ela__head .sn-ela__logo { display: none; }
    .sn-ela__logo--m { display: block; width: calc(129 * var(--u)); margin: 17px calc(25 * var(--u)) 18px auto; }
    .sn-strip { margin-top: 20px; scrollbar-width: none; }
    .sn-strip::-webkit-scrollbar { display: none; }
    .sn-strip { scroll-snap-type: x mandatory; scroll-padding-left: calc(28 * var(--u)); padding: 0 calc(28 * var(--u)); }
    .sn-strip img { width: calc(280 * var(--u)); min-width: 0; height: calc(210 * var(--u)); aspect-ratio: auto; }
    .sn-ela--bottom { margin-top: 0; padding-bottom: 83px; padding-left: calc(31 * var(--u)); }
    .sn-btn { width: 100%; height: 58px; font-size: 14px; margin-top: 34px; }
}

/* ================= анимации ================= */
/* первый экран — при загрузке */
.sn-js .sn-in { opacity: 0; transition: opacity 1.4s ease, transform 1.8s cubic-bezier(.22, 1, .36, 1), filter 1.6s ease; }
.sn-js .sn-in--title { transform: translateY(30px); filter: blur(10px); transition-delay: .1s; }
.sn-js .sn-in--watch { transform: translateY(70px) scale(.94); transition-delay: .35s; }
.sn-js .sn-in--num { transform: translateY(30px); filter: blur(10px); transition-delay: .55s; }
.sn-js .sn-in--side { transform: translateY(20px); transition-delay: 1s; }
/* подпись аукциона и логотип ELA — самыми последними: после того как часы собрались из частиц */
.sn-js .sn-in--last { transform: translateY(20px); transition-delay: 1.4s; }
.sn-js.sn-fx:not(.sn-fx-done) .sn-in--last { opacity: 0 !important; transform: translateY(20px) !important; }
.sn-js.sn-fx.sn-fx-done .sn-in--last { transition-delay: .35s; }
.sn-js.sn-ready .sn-in { opacity: 1; transform: none; filter: none; }
/* сборка часов из частиц: пока идёт эффект, фото спрятано; в конце фото проявляется, холст с частицами гаснет */
.sn-hero__fx { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; transition: opacity .9s ease; }
.sn-js.sn-fx .sn-hero__watch { opacity: 0 !important; transform: none !important; filter: none !important; transition: opacity .9s ease !important; }
/* фото встаёт под частицами сразу целиком, гаснут только частицы поверх — без полупрозрачного момента */
.sn-js.sn-fx.sn-fx-done .sn-hero__watch { opacity: 1 !important; transition: none !important; }
.sn-fx-done .sn-hero__fx { opacity: 0; }

/* блоки — при прокрутке */
.sn-js .rv { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.22, 1, .36, 1) var(--d, 0s), transform 1.2s cubic-bezier(.22, 1, .36, 1) var(--d, 0s); }
.sn-js .rv.is-in { opacity: 1; transform: none; }
.sn-js .rv--img { transform: translateY(60px); overflow: hidden; }
.sn-js .rv--img img { transform: scale(1.15); transition: transform 1.8s cubic-bezier(.22, 1, .36, 1) var(--d, 0s); }
.sn-js .rv--img.is-in img { transform: none; }
.sn-js .rv--zoom { transform: scale(1.08); transition-duration: 1.6s, 2.2s; }
/* крупные фото часов и механизма — всплывают снизу вверх */
.sn-js .rv--rise { transform: translateY(min(220px, 22vh)) scale(.97); transition-duration: 1.6s, 2.2s; transition-timing-function: ease, cubic-bezier(.16, 1, .3, 1); }
.sn-js .rv--slide { transform: translateX(160px); transition-duration: 1.4s, 2s; }
.sn-js .rv--watch { transform: translateY(80px) scale(.92); transition-duration: 1.4s, 2s; }
.sn-js .rv--line::before, .sn-js .rv--line::after { background-size: 0 1px; transition: background-size 1.6s cubic-bezier(.65, 0, .35, 1) .3s; }
.sn-js .rv--line::after { background-position: 100% 13px; }
.sn-js .rv--line.is-in::before, .sn-js .rv--line.is-in::after { background-size: 100% 1px; }

@media (prefers-reduced-motion: reduce) {
    .sn-js .sn-in, .sn-js .rv, .sn-js .rv--img img, .sn-js .sn-title__l { opacity: 1; transform: none; filter: none; transition: none; }
    .sn-js .rv--line::before, .sn-js .rv--line::after { background-size: 100% 1px; }
}

/* ================= лупа для фото (компьютер, js/loupe.js) ================= */
.sn-zoomable { cursor: none; }
.sn-rot.sn-zoomable { pointer-events: auto; }
.sn-face__img.sn-zoomable { pointer-events: auto; }
/* текстовый слой над крупным циферблатом не должен перехватывать мышь — иначе лупа не включится */
.sn-face__bottom, .sn-face__top { pointer-events: none; }
.sn-face__bottom > *, .sn-face__top > * { pointer-events: auto; }
.sn-loupe {
    position: fixed; left: 0; top: 0; z-index: 50; width: 220px; height: 220px; border-radius: 50%; pointer-events: none;
    opacity: 0; transition: opacity .25s ease; will-change: transform;
    /* металлический ободок */
    padding: 7px; background: linear-gradient(160deg, #f4f4f4 0%, #7a7a7a 35%, #1c1c1c 55%, #8d8d8d 80%, #e9e9e9 100%);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .6);
}
.sn-loupe.is-on { opacity: 1; }
.sn-loupe__img, .sn-loupe__glass { position: absolute; inset: 7px; border-radius: 50%; }
.sn-loupe__img { background-color: #111; background-repeat: no-repeat; }
/* стекло: блик сверху слева, затемнение и радужная кромка по краю (как у линзы над бегущей строкой) */
.sn-loupe__glass {
    background:
        radial-gradient(ellipse 50% 32% at 32% 20%, rgba(255, 255, 255, .32) 0, rgba(255, 255, 255, .06) 55%, rgba(255, 255, 255, 0) 75%),
        radial-gradient(circle, rgba(0, 0, 0, 0) 74%, rgba(0, 0, 0, .35) 100%);
    box-shadow: inset 4px 3px 6px rgba(255, 60, 120, .35), inset -4px -3px 6px rgba(60, 170, 255, .35), inset 0 0 14px rgba(0, 0, 0, .55);
}

/* «СЕНЕКА» и «II» из песчинок (js/title-fx.js): холст под часами, обычные надписи прячем после подмены */
.sn-hero__sand { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sn-sand .sn-hero__title, .sn-sand .sn-hero__num { visibility: hidden; transform: none !important; filter: none !important; transition: none !important; }

/* ================= прелоадер страницы (как на chaykin.ru) ================= */
.sn-loader { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.sn-loader__content { position: absolute; top: 50%; left: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%); transition: opacity .4s ease; }
.sn-loader__content img { width: 200px; height: auto; }
.sn-loader__bar {
    margin-top: 20px; width: 200px; height: 2px; background-color: #333;
    --c: no-repeat linear-gradient(#fff 0 0); background-image: var(--c), var(--c); background-size: 60% 100%;
    animation: sn-l16 3s infinite;
}
@keyframes sn-l16 { 0% { background-position: -150% 0, -150% 0; } 66% { background-position: 250% 0, -150% 0; } 100% { background-position: 250% 0, 250% 0; } }
.sn-loader__lines { position: absolute; inset: 0; display: flex; flex-direction: column; }
.sn-loader__lines > div { flex: 1; margin-bottom: -1px; background: #000; transform-origin: center top; transition: transform .7s cubic-bezier(.76, 0, .24, 1); }
.sn-loaded .sn-loader__content { opacity: 0; }
.sn-loaded .sn-loader__lines > div { transform: scaleY(0); }
.sn-loaded .sn-loader__lines > div:nth-child(1) { transition-delay: .25s; }
.sn-loaded .sn-loader__lines > div:nth-child(2) { transition-delay: .28s; }
.sn-loaded .sn-loader__lines > div:nth-child(3) { transition-delay: .31s; }
.sn-loaded .sn-loader__lines > div:nth-child(4) { transition-delay: .34s; }
.sn-loaded .sn-loader__lines > div:nth-child(5) { transition-delay: .37s; }
.sn-loaded .sn-loader__lines > div:nth-child(6) { transition-delay: .40s; }
.sn-loaded .sn-loader__lines > div:nth-child(7) { transition-delay: .43s; }
.sn-loaded .sn-loader__lines > div:nth-child(8) { transition-delay: .46s; }
.sn-loaded .sn-loader__lines > div:nth-child(9) { transition-delay: .49s; }
.sn-loaded .sn-loader__lines > div:nth-child(10) { transition-delay: .52s; }
.sn-loaded .sn-loader__lines > div:nth-child(11) { transition-delay: .55s; }
.sn-loaded .sn-loader__lines > div:nth-child(12) { transition-delay: .58s; }
.sn-loaded .sn-loader__lines > div:nth-child(13) { transition-delay: .61s; }
.sn-loaded .sn-loader__lines > div:nth-child(14) { transition-delay: .64s; }
.sn-loaded .sn-loader__lines > div:nth-child(15) { transition-delay: .67s; }
.sn-loader-gone .sn-loader { display: none; }
@media (prefers-reduced-motion: reduce) { .sn-loader__bar { animation: none; } .sn-loader__lines > div { transition-duration: .01s; } }
html:not(.sn-js) .sn-loader { display: none; }

/* пары фото: эффект увеличения на three.js (js/pair-fx.js) — холст поверх фото, виден только во время эффекта */
.sn-pair picture { position: relative; }
.sn-pair__fx { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.sn-pair picture.is-fx .sn-pair__fx { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .sn-pair picture { cursor: zoom-in; } }

/* галерея: объёмное листание на three.js (js/gallery-fx.js) — «липкий» холст поверх фото; фото остаются в разметке для прокрутки и как запасной вариант */
.sn-gallery { position: relative; }
.sn-gallery__fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sn-gallery__fx-in { position: sticky; top: 0; overflow: hidden; background: #000; }
.sn-gallery__fx canvas { display: block; width: 100%; height: 100%; }
.sn-gallery.is-fx .sn-gallery__item picture { visibility: hidden; }

/* телефон: подпись аукциона и логотип ELA появляются вместе с заголовком «Философия добра», не дожидаясь сборки часов */
@media (max-width: 767px) {
    html.sn-js.sn-ready .sn-hero .sn-in--last { opacity: 1 !important; transform: none !important; transition: opacity 1s cubic-bezier(.22, 1, .36, 1) .5s, transform 1.2s cubic-bezier(.22, 1, .36, 1) .5s !important; }
}

/* chaykin.ru: страница живёт внутри шаблона сайта — шапка сайта фиксированная, своя шапка лендинга остаётся только отступом */
.sn-head { border-bottom: 0; }