/* home.css — the homepage of the MOS-HOOKAH demo (018, build P6, 28.09).
   Order (prompt + tl home): preloader + 18+ · 3D hero · 3D slider of three directions · ladder of four phrases ·
   vertical showreel · proof line · showcase with arrow tags · flavours deck · how we deliver · questions · reviews ·
   contacts + Telegram cards · R18 brand frame · footer-screen. Motion only transform/opacity (base.css header). */

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

/* 28.09 «сайт более плавный»: the big photo cut-outs lost filter: drop-shadow — on the near-black ground it was invisible, and its first
   raster at the page bottom cost 137-139 ms of GPU per visit (tools/smooth_probe.py, trace: RasterDecoderImpl::DoEndRasterCHROMIUM 153 ms) */
/* ---------- fixed stage behind the first three blocks ---------- */
.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 62% 55%, #1a0f2a 0%, #0b0b0c 58%); }
.stage__gl { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.stage__fb { position: absolute; inset: 0; }
.stage__hk { position: absolute; left: 60%; top: 50%; height: 86vh; width: auto; max-width: none; translate: -50% -46%; will-change: transform, opacity; }
main { position: relative; z-index: 1; }

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; min-height: calc(700 * var(--u)); display: flex; align-items: flex-end; }
.hero__in { height: 100%; display: flex; align-items: flex-end; padding-bottom: calc(110 * var(--u)); }
.hero__txt { width: calc(700 * var(--u)); position: relative; z-index: 2; }
.hero__h { margin-top: calc(22 * var(--u)); }
.hero__sub { margin-top: calc(26 * var(--u)); max-width: calc(520 * var(--u)); }
.hero__sub2 { display: block; color: var(--text); margin-top: 6px; }
.hero__cta { margin-top: calc(40 * var(--u)); display: flex; align-items: center; gap: calc(34 * var(--u)); }
.hero__cta .hint { opacity: 0; transition: opacity .8s var(--ease); }
.hero__tag { left: 64%; top: 29%; z-index: 2; }
.hero__tag .tag__line { width: calc(120 * var(--u)); }
.hero__scroll { position: absolute; left: 50%; translate: -50% 0; bottom: calc(40 * var(--u)); display: flex; align-items: center; gap: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-3); }
.hero__scroll i { display: block; width: 1px; height: calc(46 * var(--u)); background: linear-gradient(var(--cyan), transparent); transform-origin: top; animation: drip 2.4s var(--ease) infinite; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- directions slider ---------- */
.dirs { position: relative; height: 300vh; }
.dirs__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.dirs__in { height: 100%; }
.dirs__over { position: absolute; top: calc(var(--hdr) + 40 * var(--u)); left: var(--pad); }
.dirs__slides { position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%); width: calc(560 * var(--u)); height: calc(420 * var(--u)); z-index: 2; }
.dir { position: absolute; inset: 0; opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); pointer-events: none; }
.dir.is-on { opacity: 1; transform: none; pointer-events: auto; }
.dir__n { font-size: calc(15 * var(--u)); color: var(--cyan); letter-spacing: .2em; }
.dir__h { margin-top: calc(14 * var(--u)); }
.dir__t { margin-top: calc(20 * var(--u)); }
.dir__orb { margin-top: calc(36 * var(--u)); }
.dirs__forms { position: absolute; left: 54%; top: 52%; width: calc(640 * var(--u)); height: calc(640 * var(--u)); translate: -50% -50%; }
.dirs__forms img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(.86) rotate(-4deg); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.dirs__forms img.is-on { opacity: 1; transform: none; }
.dirs__line { position: absolute; left: 50%; bottom: calc(46 * var(--u)); transform: translateX(-50%); display: flex; align-items: center; gap: calc(26 * var(--u)); }
.dirs__arr { width: calc(52 * var(--u)); height: calc(52 * var(--u)); border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; }
.dirs__arr svg { width: 40%; }
.dirs__arr:active { transform: scale(.94); }
.dirs__dots { display: flex; align-items: center; gap: calc(34 * var(--u)); position: relative; }
.dirs__dots::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.dirs__dots li { position: relative; font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); padding-top: calc(26 * var(--u)); }
.dirs__dots li::before { content: ""; position: absolute; left: 50%; top: -4px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--bg); border: 1px solid var(--text-3); }
.dirs__dots li.is-on { color: var(--text); }
.dirs__dots li.is-on::before { background: var(--cyan-2); border-color: var(--cyan-2); box-shadow: 0 0 12px var(--cyan-2); }
.dirs__dots .dirs__new { color: var(--warn); }
.dirs__dots .dirs__new::before { border-color: var(--warn); }
.dirs__dots button, .dirs__dots a { letter-spacing: inherit; text-transform: inherit; }

/* ---------- ladder ---------- */
.ladder { position: relative; height: 420vh; }
.ladder__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.ladder__frames { position: absolute; inset: 0; }
.ladder__fr { position: absolute; margin: 0; width: calc(330 * var(--u)); aspect-ratio: 3 / 4; overflow: hidden; opacity: 0; transform: translateY(60px) scale(.94); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.ladder__fr img { width: 100%; height: 100%; object-fit: cover; }
.ladder__fr::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.ladder__fr[data-fr="0"] { left: 8%; top: 20%; } .ladder__fr[data-fr="1"] { right: 8%; top: 24%; }
.ladder__fr[data-fr="2"] { left: 9%; top: 26%; } .ladder__fr[data-fr="3"] { right: 9%; top: 18%; }
.ladder__fr.is-on { opacity: 1; transform: none; }
.ladder__steps { position: absolute; inset: 0; display: grid; place-items: center; }
.step { position: absolute; left: 50%; top: 50%; width: calc(760 * var(--u)); translate: -50% -50%; text-align: center; opacity: 0; transform: scaleX(1.1); transition: opacity .9s var(--ease), transform 1s var(--ease); pointer-events: none; }
.step.is-on { opacity: 1; transform: none; pointer-events: auto; }
.step__t { font-size: calc(46 * var(--u)); }
.step .btn { margin-top: calc(34 * var(--u)); opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease) .45s, transform .7s var(--ease) .45s; }
.step.is-on .btn { opacity: 1; transform: none; }

/* ---------- showreel 9:16 ---------- */
.reel { position: relative; height: 200vh; background: var(--bg); }
.reel__pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.reel__frame { position: relative; height: 84vh; aspect-ratio: 9 / 16; overflow: hidden; background: #111; transform: scale(.62); will-change: transform; }
.reel__v { width: 100%; height: 100%; object-fit: cover; }
.reel__orb { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.reel.playing .reel__orb { opacity: 0; pointer-events: none; }
.reel__side { position: absolute; top: 50%; translate: 0 -50%; font-size: calc(120 * var(--u)); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.16); white-space: nowrap; pointer-events: none; }
.reel__side--l { right: calc(50% + 30vh); }
.reel__side--r { left: calc(50% + 30vh); }

/* ---------- proof line ---------- */
.proof { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof__claim { text-align: center; }
.proof__row { margin-top: calc(40 * var(--u)); display: grid; grid-template-columns: repeat(4, 1fr); }
.proof__it { display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u)); padding: 0 calc(20 * var(--u)); border-left: 1px solid var(--line); text-align: center; }
.proof__it:first-child { border-left: 0; }
.proof__big { font-size: calc(64 * var(--u)); line-height: 1; }
.proof__stars { color: #ffcc00; letter-spacing: .2em; font-size: calc(14 * var(--u)); }
.proof__maps:hover .proof__big { color: var(--cyan); }
.proof__ico { width: calc(64 * var(--u)); height: calc(64 * var(--u)); color: var(--cyan); }
.proof__all { display: table; margin: calc(34 * var(--u)) auto 0; color: var(--text-2); }

/* ---------- showcase ---------- */
.show { position: relative; background: var(--bg); padding: calc(150 * var(--u)) 0 calc(110 * var(--u)); }
.show__head { text-align: center; }
.show__head .h1 { margin-top: calc(18 * var(--u)); }
.show__head .txt { margin: calc(22 * var(--u)) auto 0; text-align: center; }
.show__stage { position: relative; margin-top: calc(70 * var(--u)); width: 100%; aspect-ratio: 16 / 9; max-height: 100vh; }
.show__img { position: absolute; inset: 0; }
.show__tag { left: var(--x); top: var(--y); cursor: pointer; transform: translate(-50%, calc(-100% + 6 * var(--u))); }
.show__tag .tag__box { text-align: left; }
.show__tag:hover .tag__box { border-color: var(--cyan); }
.show__tag .tag__line { transform: scaleY(0); transition: transform .9s var(--ease) .3s; }
.show__tag .tag__box { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease) .7s, transform .7s var(--ease) .7s; }
.show__tag:nth-of-type(3) .tag__line, .show__tag:nth-of-type(3) .tag__box { transition-delay: .45s, .85s; }
.show__stage.is-in .show__tag .tag__line { transform: none; }
.show__stage.is-in .show__tag .tag__box { opacity: 1; transform: none; }
/* R03 / R04: one tone + the chosen hookah lit + its word behind (hover, focus, or a slow round when idle).
   Every layer blends itself and fades by opacity only (a blend inside a fading parent would flash flat colour). */
.show__fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.show__fx > * { position: absolute; opacity: 0; transition: opacity .9s var(--ease); }
.show__tint, .show__glow, .show__vig { inset: 0; }
.show__tint { background: var(--c); mix-blend-mode: color; }
.show__glow { background: radial-gradient(ellipse 13% 42% at var(--x) 50%, var(--c), rgba(0,0,0,0) 72%); mix-blend-mode: soft-light; }
.show__vig { background: radial-gradient(ellipse 16% 64% at var(--x) 60%, rgba(0,0,0,0) 0, rgba(0,0,0,0) 52%, rgba(6,5,10,.7) 100%); }
.show__word { left: 50%; top: 40%; transform: translate(-50%, -50%) scale(1.08);
  font-family: var(--f-disp); font-weight: 700; font-size: calc(210 * var(--u)); line-height: 1; letter-spacing: .01em; text-transform: uppercase;
  white-space: nowrap; color: #fff; mix-blend-mode: overlay; transition: opacity .9s var(--ease), transform 1.4s var(--ease); }
.show__stage[data-hot="chasha"] .show__fx [data-k="chasha"], .show__stage[data-hot="greipfrut"] .show__fx [data-k="greipfrut"],
.show__stage[data-hot="pomelo"] .show__fx [data-k="pomelo"], .show__stage[data-hot="dynya"] .show__fx [data-k="dynya"] { opacity: 1; }
.show__stage[data-hot="chasha"] .show__tint[data-k="chasha"], .show__stage[data-hot="greipfrut"] .show__tint[data-k="greipfrut"],
.show__stage[data-hot="pomelo"] .show__tint[data-k="pomelo"], .show__stage[data-hot="dynya"] .show__tint[data-k="dynya"] { opacity: .6; }
.show__stage[data-hot="chasha"] .show__word[data-k="chasha"], .show__stage[data-hot="greipfrut"] .show__word[data-k="greipfrut"],
.show__stage[data-hot="pomelo"] .show__word[data-k="pomelo"], .show__stage[data-hot="dynya"] .show__word[data-k="dynya"] { opacity: .8; transform: translate(-50%, -50%) scale(1); }
.show__tag { transition: opacity .6s var(--ease); }
.show__stage[data-hot] .show__tag { opacity: .55; }
.show__stage[data-hot] .show__tag.is-hot { opacity: 1; }
.show__foot { margin-top: calc(40 * var(--u)); display: flex; align-items: center; justify-content: space-between; gap: var(--gap); }

/* ---------- flavours deck (tl home B9: each card slides over the previous one, a strip with its name stays) ---------- */
.deck { position: relative; background: var(--bg-2); padding: calc(150 * var(--u)) 0; }
.deck__in { display: grid; grid-template-columns: 5fr 7fr; gap: calc(80 * var(--u)); align-items: start; }
.deck__txt { position: sticky; top: calc(var(--hdr) + 40 * var(--u)); }
.deck__txt .h1 { margin-top: calc(18 * var(--u)); }
.deck__txt .txt { margin-top: calc(22 * var(--u)); }
.deck__tin { width: calc(300 * var(--u)); aspect-ratio: 1; margin: calc(34 * var(--u)) 0 calc(26 * var(--u)); }
.deck__cards { position: relative; }
.card { position: sticky; top: calc(var(--hdr) + 30 * var(--u) + var(--i) * 64 * var(--u)); display: block; height: calc(620 * var(--u)); margin-bottom: calc(80 * var(--u)); overflow: hidden; background: #0f0f10; box-shadow: 0 -20px 50px rgba(0,0,0,.55); transform-origin: top center; }
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card:hover img { transform: scale(1.04); }
.card__t { position: absolute; left: 0; right: 0; top: 0; height: calc(64 * var(--u)); display: flex; align-items: center; padding: 0 calc(26 * var(--u)); font-size: var(--t-s); letter-spacing: .24em; text-transform: uppercase; background: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,0)); }
.card:last-child { margin-bottom: 0; }

/* ---------- how ---------- */
.how { background: var(--bg-2); }
.how__head { text-align: center; }
.how__head .h1 { margin-top: calc(18 * var(--u)); }
.how__steps { margin-top: calc(70 * var(--u)); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); counter-reset: s; }
.how__steps li { position: relative; padding-top: calc(28 * var(--u)); border-top: 1px solid var(--line-2); }
.how__steps li::before { content: ""; position: absolute; left: 0; top: -1px; width: 38%; height: 1px; background: var(--grad); }
.how__steps .num { font-size: calc(34 * var(--u)); color: var(--cyan); }
.how__steps p { margin-top: calc(14 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1.4; }
.how__steps .muted { display: block; font-size: var(--t-s); margin-top: 6px; }
.how__time { margin-top: calc(70 * var(--u)); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.how__time .h3 { margin-top: calc(10 * var(--u)); font-size: calc(16 * var(--u)); letter-spacing: .03em; text-transform: none; }
.how__pair { margin-top: calc(90 * var(--u)); display: grid; grid-template-columns: 7fr 5fr; gap: calc(70 * var(--u)); align-items: center; }
.how__ph { aspect-ratio: 1; }
.how__note .h3 { margin-top: calc(16 * var(--u)); }
.how__note .txt { margin-top: calc(20 * var(--u)); }
.how__note .lnk { display: inline-block; margin-top: calc(24 * var(--u)); color: var(--cyan); }

/* ---------- faq ---------- */
.faq { background: var(--bg-2); border-top: 1px solid var(--line); }
.faq__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--hdr) + 30 * var(--u)); align-self: start; }
.faq__head .h1 { margin-top: calc(18 * var(--u)); }
.faq__rules { margin-top: calc(30 * var(--u)); display: grid; gap: 10px; color: var(--text-2); font-size: var(--t-s); max-width: calc(380 * var(--u)); }
.faq__list { grid-column: 6 / span 7; }

/* ---------- reviews ---------- */
.revs { background: var(--bg); }
.revs__head { text-align: center; }
.revs__head .h1 { margin-top: calc(18 * var(--u)); }
.revs__row { margin-top: calc(70 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.rev { margin: 0; padding: calc(36 * var(--u)); border: 1px solid var(--line); background: linear-gradient(160deg, rgba(153,33,255,.07), rgba(66,207,245,.03)); display: flex; flex-direction: column; justify-content: space-between; min-height: calc(260 * var(--u)); }
.rev blockquote { font-size: calc(21 * var(--u)); line-height: 1.4; margin: 0; }
.rev figcaption { margin-top: calc(26 * var(--u)); font-size: var(--t-xs); letter-spacing: .24em; text-transform: uppercase; color: var(--cyan); }
.revs__all { display: flex; width: max-content; margin: calc(50 * var(--u)) auto 0; }

/* ---------- contacts + Telegram cards (R16) ---------- */
.cont { background: var(--bg); border-top: 1px solid var(--line); }
.cont__in { row-gap: calc(70 * var(--u)); }
.cont__info { grid-column: 1 / span 5; }
.cont__info .h1 { margin-top: calc(18 * var(--u)); }
.cont__dl { margin: calc(34 * var(--u)) 0 0; display: grid; grid-template-columns: calc(170 * var(--u)) 1fr; row-gap: calc(12 * var(--u)); font-size: var(--t-m); }
.cont__dl dt { color: var(--text-3); font-size: var(--t-s); }
.cont__dl dd { margin: 0; }
.cont__btns { margin: calc(34 * var(--u)) 0 calc(20 * var(--u)); display: flex; gap: 10px; flex-wrap: wrap; }
.tgc { grid-column: 7 / span 6; position: relative; min-height: calc(560 * var(--u)); padding: calc(26 * var(--u)); border: 1px solid var(--line); background: radial-gradient(90% 70% at 50% 60%, rgba(153,33,255,.16), rgba(0,0,0,0)); }
.tgc__head { display: flex; align-items: center; gap: 14px; }
.tgc__head .btn { margin-left: auto; }
.tgc__head b { display: block; font-size: var(--t-m); }
.tgc__head small { color: var(--text-3); font-size: var(--t-xs); letter-spacing: .06em; }
.tgc__ava { width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; object-fit: cover; }
.tgc__cards { position: absolute; left: 50%; top: 58%; width: 0; height: 0; }
.tgc__card { position: absolute; left: 0; top: 0; width: calc(230 * var(--u)); translate: -50% -50%; transform: translate(var(--x), var(--y)) rotate(var(--r)); background: #1c1c1f; border: 1px solid var(--line-2); padding: 10px 10px 16px; box-shadow: 0 30px 60px rgba(0,0,0,.5); transition: transform .8s var(--ease); }
.tgc__card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.tgc__card span { display: block; margin-top: 12px; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.tgc__card:hover { transform: translate(var(--x), calc(var(--y) - 16px)) rotate(0deg) scale(1.04); z-index: 3; }
.cont__map { grid-column: 1 / -1; }
.map { position: relative; aspect-ratio: 21 / 8; border: 1px solid var(--line); background: radial-gradient(60% 80% at 43% 41%, rgba(66,207,245,.08), rgba(0,0,0,0) 60%), #0e0e10; overflow: hidden; }
.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__pin { position: absolute; width: calc(78 * var(--u)); translate: -50% -100%; }
/* the violet glow under the pin is a gradient, not filter: drop-shadow — the blur filter cost a 140-160 ms frame on first draw (28.09) */
.map__pin::before { content: ""; position: absolute; inset: 10% -25% -35%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(153,33,255,.45), rgba(153,33,255,0)); }
.map__lnk { position: absolute; left: calc(26 * var(--u)); bottom: calc(22 * var(--u)); color: var(--text-2); }

/* ---------- R18 brand frame ---------- */
.brand { position: relative; height: 100vh; min-height: calc(700 * var(--u)); overflow: hidden; background: #1b0a28; }
.brand__bg { position: absolute; inset: 0; }
.brand__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .95; }
.brand__w { position: absolute; left: 0; right: 0; top: 38%; translate: 0 -50%; text-align: center; font-family: var(--f-disp); font-weight: 700; font-size: calc(214 * var(--u)); line-height: 1; letter-spacing: -.01em; color: rgba(255,255,255,.93); white-space: nowrap; will-change: transform; }
.brand__hk { position: absolute; left: 50%; bottom: 0; height: 97%; width: auto; max-width: none; translate: -50% 0; will-change: transform; }
.brand__cap { position: absolute; left: 0; right: 0; bottom: calc(40 * var(--u)); text-align: center; }

html.shot .dirs, html.shot .ladder, html.shot .reel { height: auto; }
html.shot .ladder__pin { height: auto; padding: calc(120 * var(--u)) 0; }
html.shot .ladder__frames { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding: 0 var(--pad); }
html.shot .ladder__fr { position: relative; left: auto !important; right: auto !important; top: auto !important; width: 100%; opacity: 1; transform: none; }
html.shot .ladder__steps { position: relative; inset: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding: calc(40 * var(--u)) var(--pad) 0; }
html.shot .step { position: relative; left: auto; top: auto; width: auto; translate: none; opacity: 1; transform: none; text-align: left; }
html.shot .step__t { font-size: calc(24 * var(--u)); }
html.shot .step .btn { opacity: 1; transform: none; }
html.shot .reel__pin { height: auto; padding: calc(100 * var(--u)) 0; }
html.shot .reel__frame { height: calc(760 * var(--u)); transform: none; }
html.shot .stage { position: absolute; height: 100vh; }
html.shot .dirs__pin, html.shot .ladder__pin, html.shot .reel__pin { position: relative; }