/* home.css — the homepage of the 017 demo (build P6). Scenes: hero sequence (1.B2–1.B3), trust (1.B4), crab leader (1.B5),
   holiday (1.B6), shelves (1.B7), how it arrives (1.B8), reviews (1.B9), questions (1.B10). */

/* ---------- the start (Operator 27.09 evening, second word): the logo, then the scroll drives it again — shorter and crisper.
   A sticky stage over 360vh of travel for the frames and the split (was ≈500vh; the crab hero before them is gone). Sizes follow the stage HEIGHT (--sh), not px caps:
   the same composition at 1440, 1920, 2560 and in a laptop window. ---------- */
.hs { --sh: calc(calc(var(--vh, 1vh) * 100) - var(--hdr)); --travel: calc(var(--vh, 1vh) * 360); position: relative; height: calc(var(--sh) + var(--travel)); }
.hs__stage { position: sticky; top: var(--hdr); height: var(--sh); overflow: hidden; }
.hs--static { height: var(--sh); }
.hs--static .hs__stage { position: relative; top: 0; }
html.hs-lock, html.hs-lock body { overflow: hidden; }   /* only while the logo plays */

/* until the timeline sets its start states (after the logo), layer B and the tags stay hidden */
.hs--pending .fc__prod img, .hs--pending .fc__ribbon, .hs--pending .fc__disc, .hs--pending .fc__lab, .hs--pending .fc__count,
.hs--pending [data-dot], .hs--pending .ch__skip, .hs--pending .ch__t--w, .hs--pending .cut, .hs--pending .hs__cue { opacity: 0; }

/* layer D — categories on ice. The picture is 21:9 and COVERS the stage (no blurred bands: the Operator's word): at 16:9 the
   calm blue sides are cut, at a wide laptop window a little of the top and bottom — the six groups stay inside. The headline
   and the tags are measured from the picture (cqi) and the headline is kept inside the visible part. */
.ch { --iwv: max(100vw, calc(var(--sh) * 21 / 9)); position: absolute; inset: 0; z-index: 1; background: var(--cobalt); overflow: hidden; }
/* at a narrow window the calm left of the picture is cut first: the right edge of the view stays at 92% of the picture (the langoustines) */
.ch__img { --iw: max(100%, calc(var(--sh) * 21 / 9)); position: absolute; left: clamp(calc(100% - var(--iw)), calc(100% - var(--iw) * .92), 0px); top: 50%; width: var(--iw); aspect-ratio: 21 / 9; transform: translateY(-50%); container-type: inline-size; }
.ch__img > img { width: 100%; height: 100%; object-fit: cover; }
.ch__dots { position: absolute; inset: 0; }
.ch__shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 60% at 0% 0%, rgba(13, 26, 69, .35) 0%, rgba(13, 26, 69, 0) 55%); }
.ch__head { position: absolute; left: var(--g); top: calc(var(--sh) * .1); z-index: 2; color: #fff; pointer-events: none; }
.ch__head .t-cap { opacity: .8; font-size: max(11px, calc(var(--iwv) * .0066)); }
.ch__title { position: relative; margin: calc(var(--iwv) * .01) 0 calc(var(--iwv) * .014); font-size: calc(var(--iwv) * .05); max-width: 7.6em; line-height: .92; }
.ch__t { display: block; }
.ch__t--g { position: absolute; inset: 0; color: rgba(255, 255, 255, .28); }
.ch__skip { color: #fff; pointer-events: auto; font-size: max(13px, calc(var(--iwv) * .0085)); }
.ch .dot__btn { width: clamp(24px, 1.6cqi, 44px); height: clamp(24px, 1.6cqi, 44px); left: calc(clamp(24px, 1.6cqi, 44px) / -2); top: calc(clamp(24px, 1.6cqi, 44px) / -2); }
.ch .dot__card { min-width: 0; white-space: nowrap; padding: clamp(7px, .53cqi, 15px) clamp(11px, .84cqi, 24px) clamp(8px, .58cqi, 16px); border-radius: clamp(12px, .84cqi, 22px); }
.ch .dot--left .dot__card { right: clamp(16px, 1.14cqi, 32px); }
.ch .dot:not(.dot--left) .dot__card { left: clamp(16px, 1.14cqi, 32px); }
.ch .dot__card { top: clamp(-40px, -1.49cqi, -22px); }
.ch .dot__card b { font-size: clamp(15px, 1.11cqi, 31px); }
.ch .dot__card span { font-size: clamp(11px, .74cqi, 21px); margin-top: .4em; }
.ch .dot__card svg { width: 1.2em; height: 1.2em; }
.dot--chip .dot__card { transform: none; opacity: 1; pointer-events: auto; }
.dot--chip .dot__card::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 0 2px var(--red); opacity: 0; transform: scale(.96); transition: opacity .35s, transform .45s var(--out); }
.dot--chip:hover .dot__card::after { opacity: 1; transform: none; }
.dot--chip:hover .dot__card { transform: translateX(4px); }
/* «Листайте» sits on the paper of the start frame and leaves with the first scroll */
.hs__cue { position: absolute; left: 50%; bottom: calc(var(--sh) * .025); z-index: 5; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font-size: 11px; color: var(--ink); opacity: .7; }
.hs__cue i { width: 1px; height: 38px; background: var(--ink); transform-origin: top; animation: cue 2.2s var(--inout) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.hs--static .hs__cue { display: none; }

/* layer B — the frame-by-frame change, drawn twice */
.fc { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; z-index: 2; will-change: transform; }
.fc--l { left: 0; }
.fc--r { left: 50%; }
.fc__in { position: absolute; top: 0; bottom: 0; width: 100vw; background: var(--paper) url(../img/paper.webp) repeat; }
.fc--r .fc__in { left: -50vw; }
.fc__pattern { position: absolute; inset: 0; background: url(../img/pattern.webp) repeat; background-size: calc(var(--sh) * 1.0); opacity: .07; }
.fc__ribbon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); white-space: nowrap; will-change: transform; }
.fc__ribbon span { display: inline-block; font: 500 calc(var(--sh) * .25)/1 var(--serif); letter-spacing: -.01em; color: var(--ink); padding: 0 .28em; }
.fc__ribbon span.o { color: transparent; -webkit-text-stroke: max(1.2px, calc(var(--sh) * .0014)) var(--ink); }
.fc__disc { position: absolute; left: 50%; top: 50%; width: calc(var(--sh) * .7); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: var(--cobalt); overflow: hidden; box-shadow: 0 0 0 calc(var(--sh) * .012) var(--paper), 0 0 0 calc(var(--sh) * .0135) var(--ink), 0 40px 80px -20px rgba(13, 26, 69, .45); }
.fc__disc .fc__ribbon { left: 0; }
.fc__disc .fc__ribbon span { color: #fff; }
.fc__disc .fc__ribbon span.o { color: transparent; -webkit-text-stroke: max(1.2px, calc(var(--sh) * .0014)) rgba(255, 255, 255, .8); }
.fc__disc::after { content: ""; position: absolute; inset: calc(var(--sh) * .02); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.fc__prod { position: absolute; left: 50%; top: 50%; width: calc(var(--sh) * .86); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 3; }
.fc__prod img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(13, 26, 69, .35)); will-change: transform, opacity; }
.fc__label { position: absolute; left: var(--g); bottom: calc(var(--sh) * .08); z-index: 4; width: calc(var(--sh) * .6); height: calc(var(--sh) * .15); }
.fc__lab { position: absolute; left: 0; bottom: 0; display: grid; gap: calc(var(--sh) * .01); }
.fc__lab .t-cap { opacity: .7; font-size: clamp(11px, calc(var(--sh) * .016), 20px); }
.fc__lab b { font: 500 calc(var(--sh) * .042)/1.05 var(--serif); }
.fc__lab .t-small { font-size: clamp(13px, calc(var(--sh) * .019), 24px); }
.fc__count { position: absolute; right: var(--g); bottom: calc(var(--sh) * .08); z-index: 4; font: 500 calc(var(--sh) * .021)/1 var(--serif); letter-spacing: .2em; }
.cut { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cut__line { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--red); transform: scaleY(0); transform-origin: top; }
.cut__tick { position: absolute; left: 50%; top: var(--t); width: 64px; height: 3px; margin-left: -32px; background: var(--red); transform: scaleX(0) rotate(-18deg); }

/* ---------- 1.B4 trust ---------- */
.trust { background: var(--paper) url(../img/paper.webp) repeat; padding-top: 110px; }
.trust__lead { max-width: 36em; margin: 0 auto 56px; text-align: center; color: var(--ink); font-size: clamp(22px, 1.9vw, 30px); }
.trust__row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.trust__it { position: relative; display: grid; align-content: start; justify-items: center; text-align: center; gap: 10px; padding: 34px 26px 36px; }
.trust__it + .trust__it { border-left: 1px solid var(--ink-3); }
.trust__it::before { content: ""; position: absolute; inset: 14px; pointer-events: none; opacity: .55;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M4 36C4 18 18 4 36 4M4 26c0-8 6-14 14-14M10 36c0-4 3-8 8-8' fill='none' stroke='%2316245e' stroke-width='1.4'/%3E%3Ccircle cx='18' cy='18' r='2.2' fill='%2316245e'/%3E%3C/svg%3E") left top / 34px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M36 36C36 18 22 4 4 4M36 26c0-8-6-14-14-14M30 36c0-4-3-8-8-8' fill='none' stroke='%2316245e' stroke-width='1.4'/%3E%3Ccircle cx='22' cy='18' r='2.2' fill='%2316245e'/%3E%3C/svg%3E") right top / 34px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M4 4C4 22 18 36 36 36M4 14c0 8 6 14 14 14M10 4c0 4 3 8 8 8' fill='none' stroke='%2316245e' stroke-width='1.4'/%3E%3Ccircle cx='18' cy='22' r='2.2' fill='%2316245e'/%3E%3C/svg%3E") left bottom / 34px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M36 4C36 22 22 36 4 36M36 14c0 8-6 14-14 14M30 4c0 4-3 8-8 8' fill='none' stroke='%2316245e' stroke-width='1.4'/%3E%3Ccircle cx='22' cy='22' r='2.2' fill='%2316245e'/%3E%3C/svg%3E") right bottom / 34px no-repeat; }
.trust__it img { height: 78px; width: auto; margin-bottom: 6px; transition: transform .8s var(--out); }
.trust__it:hover img { transform: rotate(-8deg) scale(1.06); }
.trust__it b { font: 500 26px/1.1 var(--serif); }
.trust__it span { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); max-width: 22em; }
.trust__it em { font-style: normal; font-size: 13px; color: var(--ink-2); }
.trust__num { font: 500 58px/1 var(--serif) !important; }
.trust__num span { font: inherit; color: inherit; max-width: none; }
.trust__num small { font-size: 30px; color: var(--red); margin-left: 4px; vertical-align: 8px; }
a.trust__it::after { content: "→"; position: absolute; right: 18px; top: 18px; font-size: 18px; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .45s var(--out); }
a.trust__it:hover::after { opacity: 1; transform: none; }

/* ---------- 1.B5 crab leader ---------- */
.lead { padding-top: 120px; padding-bottom: 150px; overflow-x: clip; }
.lead .wave--top { color: var(--sea); }
.lead__sea { position: absolute; inset: 0; opacity: .22; overflow: hidden; }
.lead__sea img { width: 100%; height: 130%; object-fit: cover; object-position: 30% 50%; mix-blend-mode: luminosity; }
.lead .wrap { position: relative; z-index: 2; }
.lead .head { color: #fff; }
.lead .link { color: #fff; }
.lead__grid .tile__img { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.lead__grid .tile__name { color: #fff; }
.lead__grid .price small { color: rgba(255, 255, 255, .6); }
.lead__grid .step { color: #fff; }
.rstamp { position: absolute; right: calc(var(--g) + 200px); top: 36px; width: 150px; height: 150px; z-index: 3; }
.rstamp svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 26s linear infinite; }
.rstamp text { font: 600 13.5px var(--sans); letter-spacing: .12em; fill: var(--coral); text-transform: uppercase; }
.rstamp img { position: absolute; left: 50%; top: 50%; width: 64px; transform: translate(-50%, -50%); filter: brightness(0) invert(1); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 1.B6 holiday ---------- */
.fest { position: relative; min-height: calc(var(--vh, 1vh) * 118); display: flex; align-items: center; overflow: hidden; color: var(--ink); }
.fest__img { position: absolute; inset: -8% 0; }
.fest__img img { width: 100%; height: 100%; object-fit: cover; }
.fest .wave--top { top: 0; transform: none; color: var(--sea); }
.fest .wave--bot { bottom: 0; transform: none; color: var(--paper); }
.fest .wave--bot svg { bottom: 0; }
.fest__in { position: relative; z-index: 3; width: 100%; }
.fest__card { max-width: 520px; padding: 46px 46px 42px; background: var(--paper) url(../img/paper.webp); border-radius: 28px; box-shadow: 0 40px 80px -30px rgba(13, 26, 69, .5); }
.fest__card .t-h2 { margin: 16px 0 18px; }
.fest__prod { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 18px; padding: 16px 0; border-top: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3); font: 500 21px/1.2 var(--serif); }
.fest__q { margin: 22px 0 28px; }
.fest__q p { margin: 0 0 8px; font: italic 400 30px/1.2 var(--serif); color: var(--cobalt); }
.fest__q cite { font: 400 13px var(--sans); font-style: normal; color: var(--ink-2); }

/* ---------- 1.B7 shelves (rendered by home.js) ---------- */
.shelf { position: relative; padding: 0 0 110px; }
.shelf__ban { position: relative; height: clamp(300px, 34vw, 480px); overflow: hidden; }
.shelf__ban img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; }
.shelf__ban .wrap { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.shelf__ban .t-h2 { max-width: 9em; }
.shelf__ban .t-promise { max-width: 30ch; margin: 14px 0 22px; }
.shelf__body { position: relative; z-index: 3; margin-top: -70px; }
.shelf--air { background: linear-gradient(#e7eef6, #f4f7fa 40%, var(--paper)); }
.shelf--marble { background: #f7f3ec; }
.shelf--slate { background: #111d44; color: #fff; }
.shelf--slate .tile__name, .shelf--slate .link { color: #fff; }
.shelf--slate .tile__meta, .shelf--slate .price small { color: rgba(255, 255, 255, .7); }
.shelf--slate .step { color: #fff; }
.shelf--slate .shelf__ban { color: #fff; }
.shelf--sky { background: linear-gradient(#dfeaf7, var(--paper)); }
.shelf .grid4 .tile__img { box-shadow: 0 24px 50px -28px rgba(13, 26, 69, .45); }
.shelf .wave--top { color: inherit; }
.shelf__mix { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: start; }
.mixc { display: grid; gap: 24px; }
.mixc__ban { position: relative; display: block; height: 230px; border-radius: 22px; overflow: hidden; isolation: isolate; }
.mixc__ban img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; transition: transform 1.2s var(--out); }
.mixc__ban:hover img { transform: scale(1.05); }
.mixc__ban span { position: absolute; left: 22px; bottom: 20px; display: flex; gap: 14px; align-items: center; padding: 12px 18px; border-radius: 16px; background: rgba(255, 255, 255, .9); }
.mixc__ban svg { width: 20px; height: 20px; }
.mixc__tiles--1 { display: grid; grid-template-columns: 1fr; }
.mixc__tiles--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* ---------- 1.B8 how ---------- */
.how { overflow: hidden; }
.how__grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center; }
.how__map { position: relative; aspect-ratio: 1; }
.how__map img { width: 100%; height: 100%; object-fit: contain; }
.how__map.is-empty { background: radial-gradient(circle, rgba(42, 79, 191, .12), transparent 65%); border-radius: 50%; }
.how__text .t-h2 { font-size: clamp(38px, 3.4vw, 56px); margin: 16px 0 34px; }
.how__steps { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 0; }
.how__steps li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid var(--ink-3); }
.how__steps i { font: italic 500 30px/1 var(--serif); color: var(--cobalt); font-style: italic; }
.how__steps b { display: block; font: 500 22px/1.2 var(--serif); margin-bottom: 4px; }
.how__steps span { font-size: 15px; color: var(--ink-2); }
.how__box { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; padding: 14px; margin-bottom: 26px; border-radius: 20px; background: rgba(255, 255, 255, .6); }
.how__box img { width: 150px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.how__box p { margin: 0; font: italic 400 20px/1.35 var(--serif); }

/* ---------- 1.B9 reviews ---------- */
.revs { background: var(--paper-2) url(../img/paper.webp); }
.revs__top { display: grid; grid-template-columns: 300px 1fr; gap: 60px; align-items: end; margin-bottom: 50px; }
.revs__score { display: grid; gap: 6px; }
.revs__big { font: 500 128px/.9 var(--serif); }
.revs__stars { color: var(--red); font-size: 22px; letter-spacing: 6px; }
.revs__score em { font-style: normal; font-size: 14px; color: var(--ink-2); }
.revs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 40px; align-items: start; }
.rev { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px 26px 24px; background: var(--paper) url(../img/paper.webp); border-radius: 22px; box-shadow: 0 1px 0 var(--ink-3); }
.rev::before { content: "“"; position: absolute; right: 22px; top: 6px; font: 500 90px/1 var(--serif); color: var(--cobalt); opacity: .25; }
.rev p { margin: 0; font: 400 19px/1.4 var(--serif); }
.rev__t { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
.rev.is-open .rev__t { display: block; }
.rev__more { align-self: start; font: 600 13px var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.rev__who { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ink-3); }
.rev__who b { color: var(--ink); font-weight: 600; }
.rev__ans { font-size: 13.5px; color: var(--ink-2); padding-left: 12px; border-left: 2px solid var(--coral); }
.rev__ans b { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }

.revs__tin { position: absolute; right: calc(var(--g) - 10px); top: 40px; width: 230px; z-index: 2; transform: rotate(8deg); filter: drop-shadow(0 26px 30px rgba(13, 26, 69, .28)); }
.revs { position: relative; }

/* ---------- 1.B10 questions ---------- */
.faqh { overflow: hidden; }
.faqh__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 80px; align-items: start; }
.faqh .t-h2 { font-size: clamp(38px, 3.6vw, 58px); margin: 16px 0 34px; max-width: 12em; }
.faqh__wa { position: sticky; top: calc(var(--hdr) + 40px); padding: 40px; border-radius: 28px; background: var(--ink); color: #fff; overflow: hidden; }
.faqh__wa .t-h3 { margin-bottom: 26px; position: relative; z-index: 2; }
.faqh__wa .coral { white-space: nowrap; }
.faqh__btns { display: flex; flex-wrap: wrap; gap: 12px; position: relative; z-index: 2; }
.faqh__btns .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.faqh__btns .btn--ghost::before { background: #fff; }
.faqh__btns .btn--ghost:hover { color: var(--ink); }
.faqh__shell3d { position: relative; height: 200px; margin: -20px -10px 10px; }
.faqh__shell3d img { position: absolute; right: 0; top: 0; height: 100%; width: auto; filter: brightness(0) invert(1); opacity: .9; animation: bob 6s var(--inout) infinite alternate; }
.faqh__shell3d canvas { position: absolute; inset: -30px; width: calc(100% + 60px) !important; height: calc(100% + 60px) !important; }
.faqh__shell3d.is-3d img { opacity: 0; }
@keyframes bob { to { transform: translateY(-10px) rotate(-6deg); } }
.faqh__gull { width: 170px; right: 8%; top: 40px; opacity: .6; }
.faqh__shell { width: 110px; left: 3%; bottom: 60px; opacity: .45; }

/* shot mode and prefers-reduced-motion: the final state — the layout with its six tags */
.hs--static .fc, .hs--static .cut { display: none; }

/* theos M1 loader */
.intro { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; background: var(--paper) url(../img/paper.webp); }
.intro img { width: 150px; height: auto; }