/* =========================================================
   EKKA — the text chapters, alive (motion/motion.js)
   The turn with its aura and running line, the places gallery, the wall's measurements, the partners' bento,
   the manifesto and the magnetic buttons. Loaded after the page's own styles, so it wins on ties.
   ========================================================= */
:root { --m-ease: cubic-bezier(.22, .8, .14, 1); --m-rose: #c97e6e; --m-rose-2: #f0b6a8; --m-dark: #1f1a1c; }

/* ---------- arrows in buttons ---------- */
.turn__btns svg, .px__send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .5s var(--m-ease); }
@media (hover: hover) { .turn__btns a:hover svg, .px__send:hover svg { transform: translateX(4px); } }
[data-magnetic] { will-change: transform; }
[data-magnetic] > span { display: inline-block; pointer-events: none; }

/* ---------- the turn: an aura that breathes and follows the hand, a running line of places at the foot ---------- */
.turn { isolation: isolate; }
.turn::before { display: none; }
.turn__aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.turn__aura i, .turn__aura b { position: absolute; border-radius: 50%; aspect-ratio: 1; }
.turn__aura i:nth-child(1) { width: min(900px, 130vw); left: -18%; top: -30%;
  background: radial-gradient(closest-side, rgba(221, 152, 137, .30), rgba(221, 152, 137, 0)); animation: aura1 18s ease-in-out infinite alternate; }
.turn__aura i:nth-child(2) { width: min(800px, 120vw); right: -20%; bottom: -35%;
  background: radial-gradient(closest-side, rgba(110, 96, 170, .26), rgba(110, 96, 170, 0)); animation: aura2 22s ease-in-out infinite alternate; }
.turn__aura b { width: 640px; left: 0; top: 0; margin: -320px 0 0 -320px; opacity: 0; transition: opacity .8s;
  transform: translate3d(var(--ax, 50vw), var(--ay, 50vh), 0);
  background: radial-gradient(closest-side, rgba(240, 182, 168, .22), rgba(240, 182, 168, 0)); }
.turn.is-hot .turn__aura b { opacity: 1; }
@keyframes aura1 { to { transform: translate3d(22%, 18%, 0) scale(1.15); } }
@keyframes aura2 { to { transform: translate3d(-24%, -14%, 0) scale(.9); } }
.turn__title { font-size: clamp(46px, 8vw, 148px); line-height: .95; max-width: 11em; }
.turn__title em { font-family: Cormorant, serif; font-style: italic; font-weight: 500; color: var(--m-rose-2); letter-spacing: -.01em; }
.turn__btns a { height: 60px; padding: 0 30px; font-size: 16px; }
.turn__btns .is-main { position: relative; overflow: hidden; }


/* ---------- one wall: the words only; the measurements are on the machine itself, in the washroom scene after ---------- */
.wall { display: grid; gap: clamp(36px, 6vh, 64px); padding-top: clamp(96px, 15vh, 170px); padding-bottom: clamp(48px, 7vh, 80px); }
.wall__title { font-size: clamp(44px, 6.4vw, 110px); line-height: .98; }
.wall__title em, .px__title em, .ax__title em, .fx__title em { font-family: Cormorant, serif; font-style: italic; font-weight: 500; color: var(--m-rose); }

/* ---------- partners: what the place gets, as four numbered lines ---------- */
.px__title { font-size: clamp(44px, 6.4vw, 110px); line-height: .98; }
/* steps: a line that draws down as you read */
.px__steps { position: relative; }
.px__steps::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px; background: rgba(35, 28, 38, .12); }
.px__steps::after { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px; background: var(--m-rose); transform-origin: top; transform: scaleY(var(--sp, 0)); }
.px__steps li { position: relative; z-index: 1; }
.px__steps i { transition: background .5s, color .5s; }
.px__steps li.is-on i { background: var(--m-rose); color: #fff; border-color: var(--m-rose); }

/* the form: lines instead of boxes, a button that pulls */
.px__form { border-radius: 28px; box-shadow: 0 50px 100px -60px rgba(35, 28, 38, .5); }
.px__fields input, .px__fields select, .px__fields textarea { transition: border-color .4s, background .4s, box-shadow .4s; }
.px__fields input:focus, .px__fields select:focus, .px__fields textarea:focus { box-shadow: 0 0 0 4px rgba(201, 126, 110, .14); }
.px__send { display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 30px; font-size: 16px; }

/* ---------- about: a manifesto that fills in as you read ---------- */
.about-x { display: block; padding-top: clamp(96px, 15vh, 170px); padding-bottom: clamp(96px, 15vh, 170px); }
.ax__title { font-size: clamp(48px, 8vw, 150px); line-height: .92; margin-bottom: clamp(30px, 5vh, 56px); }
.ax__big { font-family: var(--display); font-size: clamp(24px, 3.1vw, 50px); line-height: 1.22; letter-spacing: -.02em; max-width: 22em; color: #231c26; text-wrap: pretty; }
.ax__big em { font-family: Cormorant, serif; font-style: italic; color: var(--m-rose); }
.ax__big .fw { opacity: calc(.16 + .84 * var(--f, 1)); transition: opacity .25s linear; }

/* ---------- footer: contacts that answer the hand ---------- */
.fx__title { font-size: clamp(44px, 6.4vw, 110px); line-height: .98; }
.fx__title em { color: var(--m-rose-2); }
.fx__list li { position: relative; padding: 22px 0; font-size: clamp(17px, 1.5vw, 22px); align-items: center; overflow: hidden; }
.fx__list li::before { content: ""; position: absolute; inset: 0; background: rgba(240, 182, 168, .08); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--m-ease); }
.fx__list li > * { position: relative; transition: transform .6s var(--m-ease); }
@media (hover: hover) {
  .fx__list li:hover::before { transform: none; }
  .fx__list li:hover > a { transform: translateX(-10px); color: var(--m-rose-2); }
  .fx__list li:hover > span { transform: translateX(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .turn__aura i { animation: none; }
  .ax__big .fw { opacity: 1; }
}

/* ---------- places: one stage, the machine always in the middle, the rooms change around it (motion/stage.js) ---------- */
.st { position: relative; z-index: 6; height: 570vh; background: #efe7df; color: #231c26; border-radius: 28px 28px 0 0; margin-top: -28px; overflow: clip; }
.st__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; border-radius: inherit; }
.st__world { position: absolute; inset: 0; transform: scale(var(--z, 1)); transform-origin: 50% 50%; }
.st__rooms, .st__fix { position: absolute; inset: 0; }
/* the frame the renders were cut from, as it covers the screen (stage.js sizes it); the machine and its shadow are
   small crops placed in it by their boxes */
.st__frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.st__room, .st__shadow, .st__ekka { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.st__room { transform-origin: 50% 50%; }
.st__room img, .st__shadow img, .st__ekka img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; max-width: none; }
.st__shadow, .st__ekka { inset: auto; }
.st__shadow img, .st__ekka img { object-fit: fill; }
.st__fix { pointer-events: none; }
/* a soft band of daylight that passes over the wall while the room changes */
.st__light { position: absolute; inset: -10%; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 247, 236, .35) 46%, rgba(255, 244, 228, .45) 50%, rgba(255, 247, 236, .35) 54%, transparent 68%);
  transform: translate3d(var(--lx, -60%), 0, 0); }
.st__shade { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(239, 231, 223, .96) 0%, rgba(239, 231, 223, .75) 18%, rgba(239, 231, 223, 0) 40%),
              linear-gradient(0deg, rgba(239, 231, 223, .95) 0%, rgba(239, 231, 223, 0) 34%); }
.st__ring { position: absolute; left: 50%; top: 50%; z-index: 4; width: var(--mw, 120px); height: var(--mh, 160px); transform: translate(-50%, -50%) scale(var(--z, 1));
  pointer-events: none; opacity: var(--ro, 0); transition: opacity .6s; }
.st__ring i { position: absolute; inset: -18%; --c: rgba(35, 28, 38, .55);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 16px 1.5px, linear-gradient(var(--c), var(--c)) 0 0 / 1.5px 16px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 16px 1.5px, linear-gradient(var(--c), var(--c)) 100% 0 / 1.5px 16px,
    linear-gradient(var(--c), var(--c)) 0 100% / 16px 1.5px, linear-gradient(var(--c), var(--c)) 0 100% / 1.5px 16px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 16px 1.5px, linear-gradient(var(--c), var(--c)) 100% 100% / 1.5px 16px;
  background-repeat: no-repeat; animation: focus 2.8s var(--m-ease) infinite; }
@keyframes focus { 0%, 100% { inset: -18%; } 50% { inset: -24%; } }
.st__ring span { position: absolute; left: 50%; bottom: calc(100% + 30%); transform: translateX(-50%); white-space: nowrap;
  padding: 7px 14px; border-radius: 999px; background: rgba(35, 28, 38, .86); color: #f4ede6; font-size: 11px; font-weight: 600; letter-spacing: .18em;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.st__head { position: absolute; z-index: 5; left: var(--gutter); top: clamp(96px, 13vh, 130px); max-width: 40vw; }
.st__title { font-family: var(--display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.025em; margin: 0; }
.st__title em { font-family: Cormorant, serif; font-style: italic; font-weight: 500; color: #a85f50; }
.st__caps { position: absolute; z-index: 5; left: var(--gutter); bottom: clamp(36px, 7vh, 72px); width: min(520px, 80vw); height: 9em; }
.st__cap { position: absolute; left: 0; bottom: 0; display: grid; gap: 8px; opacity: 0; transform: translateY(36px);
  transition: opacity .55s, transform .9s var(--m-ease); }
.st__cap.is-on { opacity: 1; transform: none; transition-delay: .12s; }
.st__cap.is-gone { transform: translateY(-36px); }
.st__cap i { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .18em; color: var(--m-rose); }
.st__cap b { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4.2vw, 68px); line-height: 1; letter-spacing: -.03em; }
.st__cap span { font-size: var(--fs-lead); color: rgba(35, 28, 38, .66); }
.st__nav { position: absolute; z-index: 5; right: var(--gutter); bottom: clamp(36px, 7vh, 72px); list-style: none; margin: 0; padding: 0 0 0 18px; display: grid; gap: 10px;
  border-left: 1px solid rgba(35, 28, 38, .15); font-size: 14px; }
.st__nav::before { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: 100%; background: var(--m-rose); transform-origin: top; transform: scaleY(var(--sp, 0)); }
.st__nav li { color: rgba(35, 28, 38, .38); transition: color .5s, transform .6s var(--m-ease); }
.st__nav li.is-on { color: #231c26; transform: translateX(6px); }
.st + .wall { border-radius: 28px 28px 0 0; margin-top: -28px; }
@media (max-width: 860px) {
  .st { border-radius: 22px 22px 0 0; }
  .st__head { max-width: none; right: var(--gutter); top: 92px; }
  .st__nav { display: none; }
  .st__caps { height: 8em; }
  .st__shade { background: linear-gradient(180deg, rgba(239, 231, 223, .95) 0%, rgba(239, 231, 223, 0) 26%),
                            linear-gradient(0deg, rgba(239, 231, 223, .97) 0%, rgba(239, 231, 223, 0) 30%); }
}
@media (prefers-reduced-motion: reduce) { .st__ring i { animation: none; } }

/* «Где работает»: the words sit on the room itself, over a soft dark that fades out toward the machine — the same
   treatment as the opening's captions (page.css .film__side): dark down the left on a wide screen, under the top
   bar and along the bottom; on a phone, from the top and from the bottom. The machine in the middle stays clear. */
.st { background: #1a1311; }          /* what the top bar reads (motion/nav.js): its haze joins the dark at the top */
.st__shade { display: block; background:
    linear-gradient(90deg, rgba(9, 7, 8, .78) 0%, rgba(9, 7, 8, .55) 20%, rgba(9, 7, 8, .2) 34%, rgba(9, 7, 8, 0) 46%),
    linear-gradient(180deg, rgba(9, 7, 8, .7) 0%, rgba(9, 7, 8, .3) 12%, rgba(9, 7, 8, 0) 24%),
    linear-gradient(0deg, rgba(9, 7, 8, .72) 0%, rgba(9, 7, 8, .32) 16%, rgba(9, 7, 8, 0) 32%); }
.st__head, .st__caps, .st__nav { color: #f4ede6; text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
.st__head .eyebrow, .st__cap i { color: var(--m-rose-2); }
.st__title em { color: var(--m-rose-2); }
.st__cap span { color: rgba(244, 237, 230, .78); }
.st__nav { border-left-color: rgba(244, 237, 230, .2); }
.st__nav li { color: rgba(244, 237, 230, .45); }
.st__nav li.is-on { color: #f4ede6; }
@media (max-width: 860px) {
  .st__shade { background:
    linear-gradient(180deg, rgba(9, 7, 8, .88) 0%, rgba(9, 7, 8, .72) 18%, rgba(9, 7, 8, .4) 30%, rgba(9, 7, 8, 0) 42%),
    linear-gradient(0deg, rgba(9, 7, 8, .9) 0%, rgba(9, 7, 8, .62) 18%, rgba(9, 7, 8, .2) 30%, rgba(9, 7, 8, 0) 40%); }
}


/* ---------- one language for every chapter's opening: a rose rule draws in before the eyebrow ---------- */
.rule { position: relative; padding-left: 34px; }
.rule::before { content: ""; position: absolute; left: 0; top: .55em; width: 22px; height: 1.5px; background: currentColor; opacity: .9;
  transform: scaleX(0); transform-origin: left; transition: transform .9s var(--m-ease) .05s; }
.rule.is-in::before { transform: none; }

/* ---------- the thread: one rose line down the page, drawn as you read, a dot for every chapter (thread.js) ---------- */
.thread { position: fixed; left: calc(var(--gutter) * .5); top: 5px; bottom: 5px; z-index: 45; width: 1px; pointer-events: none;
  opacity: 0; transition: opacity .6s; }
.thread.is-on { opacity: 1; }
.thread__line { position: absolute; inset: 0; background: rgba(221, 152, 137, .22); }
.thread__fill { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--tp, 0) * 100%); background: var(--rose); }
.thread a { position: absolute; left: 50%; top: calc(var(--y) * 100%); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--rose); opacity: .4; pointer-events: auto; transition: opacity .4s, box-shadow .4s; }
.thread a.is-on { opacity: 1; box-shadow: 0 0 0 5px rgba(221, 152, 137, .22); }
.thread a span { position: absolute; left: 18px; top: 50%; transform: translate(-6px, -50%); white-space: nowrap; padding: 6px 11px; border-radius: 999px;
  background: rgba(26, 19, 17, .88); color: #f4ede6; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; transition: opacity .3s, transform .4s var(--m-ease); }
@media (hover: hover) { .thread a:hover span { opacity: 1; transform: translate(0, -50%); } }
@media (max-width: 860px) {
  .thread { left: 9px; opacity: 0; }
  .thread.is-on { opacity: .7; }
  .thread a { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
  .thread a span { display: none; }
}

/* the places stage stops 5px short of the screen's edges like every pinned stage (styles.css, .film__pin): Safari 26
   takes the colour of a layer touching the edge for its bars and keeps it */
.st__pin { top: 5px; height: calc(100vh - 10px); height: calc(100dvh - 10px); }