/* enso.css — page «ENSO и XYKA PRO» /enso of the MOS-HOOKAH demo (018, build P6, 28.09, agent enso).
   Skeleton: tl menu_aromaty B2 (a position as an art object: name caps · price · short line · one line of story ·
   object photo on black; thin dividers) + the-watch (the 3D object answers the scroll).
   Order: hero + «без угля» around one sticky stage (the ENSO window turns and comes closer, then falls apart into the
   parts in flight with arrow tags — R07, R02) · rent (R08) · buy: three kits Good-Better-Best + XYKA PRO typographic ·
   kit layout with arrow tags (R02) · ask: manager + Telegram QR, Premium + ENSO -> /catering.
   Sizes in --u; motion only transform/opacity; ?shot=1 and reduced motion get the static stage (.ew-static). */

body[data-page="enso"] { background: var(--bg); }

/* ---------- the-watch: one stage for the hero and «без угля» ---------- */
.ew { position: relative; isolation: isolate; background: var(--bg); }
.ew__stage { position: absolute; top: 0; bottom: 0; left: 50%; right: calc((100vw - min(100vw, var(--wrap))) / 2); z-index: 2; pointer-events: none; }
.ew__pin { position: sticky; top: 0; height: 100vh; min-height: calc(700 * var(--u)); }
.ew__glow { position: absolute; left: 50%; top: 54%; width: min(100%, 120vh); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(153, 33, 255, .2), rgba(66, 207, 245, .05) 58%, rgba(0, 0, 0, 0) 76%); }
.ew__dev, .ew__parts { position: absolute; inset: 0; transform-origin: 50% 54%; will-change: transform, opacity; }
.ew__v3d { position: absolute; left: 50%; top: 54%; height: min(84vh, 60vw); aspect-ratio: 3 / 4; translate: -50% -50%; pointer-events: auto; }
.ew__v3d .v3d__fb { will-change: transform;
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 58%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(50% 50% at 50% 50%, #000 58%, rgba(0, 0, 0, 0) 100%); }
.ew__parts { opacity: 0; }
.ew__fig { position: absolute; left: 50%; top: 54%; height: min(86vh, 62vw); aspect-ratio: 3 / 4; translate: -50% -50%; margin: 0; }
.ew__fig > img { width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 62%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(50% 50% at 50% 50%, #000 62%, rgba(0, 0, 0, 0) 100%); }

/* arrow tags (R02): dot on the part, line grows, box fades in; shared by the parts and the kit layout */
.ew__tag, .en-kit__tag { left: var(--x); top: var(--y); transform: translate(calc(-6 * var(--u)), -50%); pointer-events: none; }
.ew__tag.tag--l, .en-kit__tag.tag--l { transform: translate(calc(-100% + 6 * var(--u)), -50%); }
.ew__tag .tag__line, .en-kit__tag .tag__line { width: calc(40 * var(--u)); transform: scaleX(0); transition: transform .9s var(--ease) calc(var(--d, 0s) + .15s); }
.ew__tag .tag__dot, .en-kit__tag .tag__dot { opacity: 0; transform: scale(.4); transition: opacity .5s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s); }
.ew__tag .tag__box, .en-kit__tag .tag__box { opacity: 0; transform: translateX(-10px); transition: opacity .7s var(--ease) calc(var(--d, 0s) + .5s), transform .7s var(--ease) calc(var(--d, 0s) + .5s); }
.ew__tag.tag--l .tag__box, .en-kit__tag.tag--l .tag__box { transform: translateX(10px); }
.ew__tag .tag__v, .en-kit__tag .tag__v { font-size: calc(13 * var(--u)); letter-spacing: .06em; line-height: 1.35; }
.ew__tag .tag__v { white-space: normal; width: max-content; max-width: calc(172 * var(--u)); }
.ew__parts.tags-on .ew__tag .tag__line, .en-kit__stage.is-in .en-kit__tag .tag__line { transform: none; }
.ew__parts.tags-on .ew__tag .tag__dot, .en-kit__stage.is-in .en-kit__tag .tag__dot { opacity: 1; transform: none; }
.ew__parts.tags-on .ew__tag .tag__box, .en-kit__stage.is-in .en-kit__tag .tag__box { opacity: 1; transform: none; }

/* static stage: ?shot=1, reduced motion, no GSAP — the device stands by the hero, the parts by «без угля» */
html.shot .ew__pin, .ew-static .ew__pin { position: absolute; inset: 0; height: auto; min-height: 0; }
html.shot .ew__dev, .ew-static .ew__dev { bottom: auto; height: 100vh; min-height: calc(700 * var(--u)); }
html.shot .ew__glow, .ew-static .ew__glow { top: 50vh; }
html.shot .ew__parts, .ew-static .ew__parts { top: max(100vh, calc(700 * var(--u))); opacity: 1; transform: none; }
html.shot .ew__fig, .ew-static .ew__fig { top: calc(150 * var(--u)); height: min(86vh, 62vw, calc(100% - 200 * var(--u))); translate: -50% 0; }
html.shot .ew__tag .tag__line, .ew-static .ew__tag .tag__line, html.shot .ew__tag .tag__dot, .ew-static .ew__tag .tag__dot,
html.shot .ew__tag .tag__box, .ew-static .ew__tag .tag__box { opacity: 1; transform: none; }

/* ---------- 9.B1 hero ---------- */
.en-hero { position: relative; min-height: max(100vh, calc(700 * var(--u))); display: flex; align-items: flex-end; }
.en-hero__in { width: 100%; padding-top: calc(var(--hdr) + 40 * var(--u)); padding-bottom: calc(92 * var(--u)); }
.en-hero__txt { grid-column: 1 / span 6; }
.en-hero__over, .en-hero__lead, .en-hero__cta { position: relative; z-index: 3; }
.en-hero__over { display: flex; align-items: center; }
.en-new { display: inline-block; margin-right: calc(16 * var(--u)); padding: calc(5 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)); border: 1px solid var(--warn); color: var(--warn); letter-spacing: .24em; line-height: 1.2; }
.en-hero__h { position: relative; z-index: 1; margin-top: calc(26 * var(--u)); font-weight: 400; }
.en-hero__k { display: block; font-size: var(--t-h3); line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; }
.en-hero__w { display: block; margin-top: calc(14 * var(--u)); font-family: var(--f-disp); font-weight: 700; font-size: calc(236 * var(--u)); line-height: .8; letter-spacing: -.01em; white-space: nowrap; }
.en-hero__lead { margin-top: calc(36 * var(--u)); max-width: calc(470 * var(--u)); }
.en-hero__cta { margin-top: calc(40 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(14 * var(--u)); }

/* ---------- 9.B2 without coal (left column, the stage stays on the right) ---------- */
.en-why { position: relative; padding: calc(150 * var(--u)) 0 calc(170 * var(--u)); }
.en-why__col { grid-column: 1 / span 6; position: relative; z-index: 3; }
.en-why__head .h1 { margin-top: calc(18 * var(--u)); }
.en-why__head .lead { margin-top: calc(24 * var(--u)); max-width: calc(520 * var(--u)); }
.en-why__chips { margin-top: calc(30 * var(--u)); }
.en-why__chips .chip { color: var(--text-2); }
.en-facts { margin-top: calc(70 * var(--u)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(40 * var(--u)) var(--gap); }
.en-facts li { position: relative; padding-top: calc(22 * var(--u)); border-top: 1px solid var(--line-2); }
.en-facts li::before { content: ""; position: absolute; left: 0; top: -1px; width: 38%; height: 1px; background: var(--grad); }
.en-facts .num { font-size: calc(26 * var(--u)); line-height: 1; color: var(--cyan); }
.en-facts p { margin-top: calc(12 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.42; }
.en-about { margin-top: calc(70 * var(--u)); display: grid; gap: calc(18 * var(--u)); }
.en-about .txt { max-width: calc(560 * var(--u)); }
.en-spec { margin-top: calc(70 * var(--u)); }
.en-spec__dl { margin: calc(16 * var(--u)) 0 0; border-top: 1px solid var(--line); }
.en-spec__dl div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap); padding: calc(13 * var(--u)) 0; border-bottom: 1px solid var(--line); font-size: var(--t-m); }
.en-spec__dl dt { color: var(--text-3); }
.en-spec__dl dd { margin: 0; text-align: right; }

/* price in one line (tl catering B3: big figure, thin rule, the unit grey) */
.en-price { margin-top: calc(34 * var(--u)); padding-top: calc(26 * var(--u)); border-top: 1px solid var(--line-2); font-size: calc(20 * var(--u)); letter-spacing: .04em; color: var(--text-2); }
.en-price .num { margin-right: calc(4 * var(--u)); font-size: calc(64 * var(--u)); line-height: 1; letter-spacing: .01em; color: var(--text); }

/* ---------- 9.B3 rent ---------- */
.en-rent { background: var(--bg-2); }
.en-rent__in { align-items: center; row-gap: calc(80 * var(--u)); }
.en-rent__txt { grid-column: 1 / span 5; }
.en-rent__txt .h1 { margin-top: calc(18 * var(--u)); }
.en-rent__txt .lead { margin-top: calc(22 * var(--u)); max-width: calc(440 * var(--u)); }
.en-rent__rule { margin-top: calc(16 * var(--u)); max-width: calc(430 * var(--u)); }
.en-rent__cta { margin-top: calc(34 * var(--u)); }
.en-rent__ph { grid-column: 6 / span 7; }
.en-rent__ph .ph { aspect-ratio: 16 / 9; }
.en-rent__xy { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-top: calc(44 * var(--u)); border-top: 1px solid var(--line); align-items: start; }
.en-rent__xy-name { grid-column: 1 / span 5; }
.en-rent__xy-name .h3 { margin-top: calc(14 * var(--u)); max-width: calc(470 * var(--u)); }
.en-rent__xy-txt { grid-column: 6 / span 7; }
.en-rent__xy-txt .txt { max-width: calc(620 * var(--u)); }
.en-rent__xy-go { margin-top: calc(18 * var(--u)); color: var(--cyan); }

/* ---------- 9.B4 buy: three kits as tl menu positions, XYKA PRO typographic ---------- */
.en-buy { background: var(--bg); }
.en-buy__head { text-align: center; }
.en-buy__head .h1 { margin: calc(18 * var(--u)) auto 0; max-width: calc(980 * var(--u)); }
.en-buy__head .txt { margin: calc(22 * var(--u)) auto 0; max-width: calc(520 * var(--u)); }
.en-kits { margin-top: calc(70 * var(--u)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.en-kitc { position: relative; display: flex; flex-direction: column; padding: calc(40 * var(--u)) calc(32 * var(--u)) calc(36 * var(--u)); }
.en-kitc + .en-kitc { border-left: 1px solid var(--line); }
.en-kitc--main::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--grad); }
.en-kitc__top { display: grid; grid-template-columns: minmax(0, 1fr) calc(112 * var(--u)); gap: calc(18 * var(--u)); align-items: start; }
.en-kitc__name { margin-top: calc(14 * var(--u)); font-size: calc(20 * var(--u)); letter-spacing: .04em; hyphens: auto; overflow-wrap: break-word; }
/* 28.09 r1: «Со вторым аккумулятором» ran under the photo at 1440 (one word wider than the column) */
.en-kitc__price { margin-top: calc(18 * var(--u)); display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(6 * var(--u)) calc(14 * var(--u)); }
.en-kitc__price b { font-family: var(--f-disp); font-weight: 700; font-size: calc(30 * var(--u)); line-height: 1.1; letter-spacing: .01em; }
.en-kitc__price s { color: var(--text-3); font-size: var(--t-s); letter-spacing: .06em; }
.en-kitc__line { display: block; width: calc(130 * var(--u)); height: 1px; margin: calc(28 * var(--u)) 0 calc(20 * var(--u)); background: var(--line-2); }
.en-kitc__add { font-size: calc(16 * var(--u)); line-height: 1.45; }
.en-kitc .small { margin-top: calc(10 * var(--u)); }
.en-kitc__go { margin-top: auto; padding-top: calc(30 * var(--u)); }

/* object photo cut out of the one kit layout: --cx/--cy centre, --cw width, % of en_kit.webp (2000 x 1125) */
.en-crop { position: relative; overflow: hidden; aspect-ratio: 22 / 25; background: #262626; }
.en-crop img { position: absolute; left: 50%; top: 50%; max-width: none; width: calc(100% * 100 / var(--cw)); height: auto;
  margin-left: calc(-100% * var(--cx) / var(--cw)); margin-top: calc(-100% * var(--cy) * .5625 / var(--cw)); }
.en-crop::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); pointer-events: none; }

.en-xy { margin-top: calc(90 * var(--u)); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: calc(40 * var(--u)); align-items: start; }
.en-xy__name { grid-column: 1 / span 4; }
.en-xy__w { font-family: var(--f-disp); font-weight: 700; font-size: calc(80 * var(--u)); line-height: .9; letter-spacing: 0; white-space: nowrap; }
.en-xy__sub { margin-top: calc(22 * var(--u)); max-width: calc(380 * var(--u)); color: var(--text-2); }
.en-xy__price { margin-top: calc(20 * var(--u)); }
.en-xy__go { margin-top: calc(30 * var(--u)); }
.en-xy__txt { grid-column: 5 / span 4; }
.en-xy__kit-h { margin-top: calc(34 * var(--u)); }
.en-xy__kit { margin-top: calc(14 * var(--u)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(8 * var(--u)) var(--gap); color: var(--text-2); }
.en-xy__kit li { position: relative; padding-left: calc(16 * var(--u)); }
.en-xy__kit li::before { content: ""; position: absolute; left: 0; top: .72em; width: calc(8 * var(--u)); height: 1px; background: var(--cyan); }
.en-xy__spec { grid-column: 9 / span 4; margin-top: 0; }

/* ---------- 9.B5 what is in the box ---------- */
.en-kit { background: var(--bg-2); }
.en-kit__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.en-kit__head > div { grid-column: 1 / span 6; }
.en-kit__head .h1 { margin-top: calc(18 * var(--u)); }
.en-kit__head .txt { grid-column: 8 / span 5; justify-self: end; text-align: right; }
.en-kit__stage { position: relative; margin-top: calc(56 * var(--u)); }
.en-kit__img { aspect-ratio: 16 / 9; }
.en-kit__tags { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.en-kit__list { margin-top: calc(44 * var(--u)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(14 * var(--u)) var(--gap); }
.en-kit__list li { display: flex; align-items: baseline; gap: calc(14 * var(--u)); padding-bottom: calc(12 * var(--u)); border-bottom: 1px solid var(--line); font-size: var(--t-s); color: var(--text-3); }
.en-kit__list li b { font-family: var(--f-disp); font-weight: 700; font-size: calc(12 * var(--u)); letter-spacing: .06em; color: var(--text-3); }
.en-kit__list li.on { color: var(--text); }
.en-kit__list li.on b { color: var(--cyan); }

/* ---------- 9.B6 ask: the manager with the QR, Premium + ENSO ---------- */
.en-ask { background: var(--bg); border-top: 1px solid var(--line); }
.en-ask__in { align-items: center; row-gap: calc(60 * var(--u)); }
.en-ask__human { grid-column: 1 / span 6; }
.en-ask__human .h1 { margin-top: calc(18 * var(--u)); }
.en-ask__human .lead { margin-top: calc(22 * var(--u)); max-width: calc(500 * var(--u)); }
.en-ask__row { margin-top: calc(44 * var(--u)); display: flex; align-items: center; gap: calc(34 * var(--u)); }
.en-ask__qr { display: block; flex: none; width: calc(168 * var(--u)); padding: calc(14 * var(--u)); border: 1px solid var(--line-2); background: rgba(255, 255, 255, .02); }
.en-ask__qr img { width: 100%; height: auto; }
.en-ask__tg { margin-top: calc(10 * var(--u)); font-size: calc(20 * var(--u)); letter-spacing: .02em; }
.en-ask__btns { margin-top: calc(22 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); }
.en-cat { grid-column: 8 / span 5; border: 1px solid var(--line); background: radial-gradient(90% 70% at 50% 100%, rgba(153, 33, 255, .14), rgba(0, 0, 0, 0)); }
.en-cat__ph { aspect-ratio: 16 / 10; }
.en-cat__b { padding: calc(30 * var(--u)) calc(32 * var(--u)) calc(34 * var(--u)); }
.en-cat__h { margin-top: calc(14 * var(--u)); }
.en-cat__b .txt { margin-top: calc(16 * var(--u)); }
.en-cat__b .small { margin-top: calc(8 * var(--u)); }
.en-cat__go { margin-top: calc(26 * var(--u)); display: flex; flex-wrap: wrap; align-items: center; gap: calc(14 * var(--u)) calc(24 * var(--u)); }
.en-cat__code { color: var(--text-2); }