/* =========================================================
   EKKA
   ========================================================= */
:root {
  --night: #0d0a0c;
  --ivory: #f1ebe3;
  --ivory-2: #e7dfd4;
  --ink: #1c171d;
  --ink-2: #4a4149;
  --mute: #8d8288;
  --rose: #dd9889;
  --line-dark: rgba(241, 235, 227, .14);
  --line-light: rgba(28, 23, 29, .12);

  --font: "Google Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Google Sans", system-ui, sans-serif;
  --gutter: clamp(20px, 4.4vw, 72px);
  --ease: cubic-bezier(.22, .8, .14, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--hero-edge); color-scheme: dark; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--hero-edge);
  color: var(--ivory);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-loading { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  background: var(--hero-edge);   /* what Safari sees at load: the colour its bars keep */
}
.loader__word { width: 96px; filter: brightness(0) invert(1); opacity: .9; }
.loader__bar { width: 120px; height: 1px; background: var(--line-dark); overflow: hidden; }
.loader__bar i { display: block; height: 100%; width: 100%; background: var(--ivory); transform-origin: left; transform: scaleX(0); }

/* ---------- nav ---------- */
/* the bar sits 5px below the top edge (its padding gives them back), frost included: Safari 26 takes
   a fixed layer touching the edge as its status bar, and stops drawing the page on under it */
.nav {
  position: fixed; top: 5px; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px var(--gutter);
  padding-top: calc(15px + env(safe-area-inset-top));
  color: var(--ivory);
  transition: color .5s var(--ease), background-color .5s var(--ease);
}
.nav.is-light { color: var(--ink); }
/* the bar behind the menu once the page turns to text. On a phone it is a plain, nearly solid tone:
   a backdrop blur up here makes Safari 26 stop drawing the page under its bars (they turn dark) */
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s var(--ease), background-color .5s var(--ease);
  background: rgba(13, 10, 12, .92); }
.nav.is-solid::before { opacity: 1; }
.nav.is-solid.is-light::before { background: rgba(241, 235, 227, .95); }
@media (hover: hover) and (pointer: fine) {
  .nav::before { background: rgba(13, 10, 12, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .nav.is-solid.is-light::before { background: rgba(241, 235, 227, .8); }
}

/* from «Что внутри» on, a haze behind the menu in the colour of the page under it (motion/nav.js sets --nav-rgb
   every frame), solid under the words and melting away below them on an eased curve. Being the page's own colour,
   its edge never shows; on a phone it rises out of the clear strip under the status bar, which stays Safari's. */
.nav::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -64px; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity .6s var(--ease); background: rgb(var(--nav-rgb, 241, 234, 226));
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,1.000) 30.0%, rgba(0,0,0,0.976) 37.0%, rgba(0,0,0,0.905) 44.0%, rgba(0,0,0,0.794) 51.0%, rgba(0,0,0,0.655) 58.0%, rgba(0,0,0,0.500) 65.0%, rgba(0,0,0,0.345) 72.0%, rgba(0,0,0,0.206) 79.0%, rgba(0,0,0,0.095) 86.0%, rgba(0,0,0,0.024) 93.0%, rgba(0,0,0,0.000) 100.0%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,1.000) 30.0%, rgba(0,0,0,0.976) 37.0%, rgba(0,0,0,0.905) 44.0%, rgba(0,0,0,0.794) 51.0%, rgba(0,0,0,0.655) 58.0%, rgba(0,0,0,0.500) 65.0%, rgba(0,0,0,0.345) 72.0%, rgba(0,0,0,0.206) 79.0%, rgba(0,0,0,0.095) 86.0%, rgba(0,0,0,0.024) 93.0%, rgba(0,0,0,0.000) 100.0%); }
.nav.has-haze::after { opacity: .96; }
@media (max-width: 860px) {
  .nav.has-haze::after { opacity: .72; }   /* lighter: over a photo or a scene not in the chapter's colour it reads as a shade, not a band */
  .nav::after { top: env(safe-area-inset-top); bottom: -72px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.000) 0.0%, rgba(0,0,0,0.095) 2.8%, rgba(0,0,0,0.345) 5.6%, rgba(0,0,0,0.655) 8.4%, rgba(0,0,0,0.905) 11.2%, rgba(0,0,0,1.000) 14.0%, #000 50%, rgba(0,0,0,1.000) 50.0%, rgba(0,0,0,0.976) 55.0%, rgba(0,0,0,0.905) 60.0%, rgba(0,0,0,0.794) 65.0%, rgba(0,0,0,0.655) 70.0%, rgba(0,0,0,0.500) 75.0%, rgba(0,0,0,0.345) 80.0%, rgba(0,0,0,0.206) 85.0%, rgba(0,0,0,0.095) 90.0%, rgba(0,0,0,0.024) 95.0%, rgba(0,0,0,0.000) 100.0%); mask-image: linear-gradient(180deg, rgba(0,0,0,0.000) 0.0%, rgba(0,0,0,0.095) 2.8%, rgba(0,0,0,0.345) 5.6%, rgba(0,0,0,0.655) 8.4%, rgba(0,0,0,0.905) 11.2%, rgba(0,0,0,1.000) 14.0%, #000 50%, rgba(0,0,0,1.000) 50.0%, rgba(0,0,0,0.976) 55.0%, rgba(0,0,0,0.905) 60.0%, rgba(0,0,0,0.794) 65.0%, rgba(0,0,0,0.655) 70.0%, rgba(0,0,0,0.500) 75.0%, rgba(0,0,0,0.345) 80.0%, rgba(0,0,0,0.206) 85.0%, rgba(0,0,0,0.095) 90.0%, rgba(0,0,0,0.024) 95.0%, rgba(0,0,0,0.000) 100.0%); }
}
/* on a computer the haze is frosted glass: what passes under the menu is blurred, most at the top and less and
   less below (four layers of growing blur, each fading out higher up), with only a light tint of the chapter's
   colour on it. Under the menu run photos and 3D scenes whose colour is not the chapter's: a solid haze in that
   colour drew a band over them, the blur shows their own colours and has no edge. The blur itself is what
   eases in (an opacity on the layers would cut them off from the page under them). */
.nav__frost { display: none; }
@media (hover: hover) and (pointer: fine) {
  .nav::after { bottom: -110px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.98) 22%, rgba(0,0,0,.9) 32%, rgba(0,0,0,.76) 42%, rgba(0,0,0,.58) 52%, rgba(0,0,0,.4) 62%, rgba(0,0,0,.24) 72%, rgba(0,0,0,.11) 82%, rgba(0,0,0,.03) 91%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.98) 22%, rgba(0,0,0,.9) 32%, rgba(0,0,0,.76) 42%, rgba(0,0,0,.58) 52%, rgba(0,0,0,.4) 62%, rgba(0,0,0,.24) 72%, rgba(0,0,0,.11) 82%, rgba(0,0,0,.03) 91%, transparent 100%); }
  .nav.has-haze::after { opacity: .6; }
  .nav__frost { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: -110px; z-index: -2; pointer-events: none; }
  .nav__frost i { position: absolute; inset: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
    transition: -webkit-backdrop-filter .6s var(--ease), backdrop-filter .6s var(--ease); }
  .nav__frost i:nth-child(1) { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
  .nav__frost i:nth-child(2) { -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 80%); mask-image: linear-gradient(180deg, #000 40%, transparent 80%); }
  .nav__frost i:nth-child(3) { -webkit-mask-image: linear-gradient(180deg, #000 28%, transparent 62%); mask-image: linear-gradient(180deg, #000 28%, transparent 62%); }
  .nav__frost i:nth-child(4) { -webkit-mask-image: linear-gradient(180deg, #000 18%, transparent 46%); mask-image: linear-gradient(180deg, #000 18%, transparent 46%); }
  .nav.has-haze .nav__frost i:nth-child(1) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .nav.has-haze .nav__frost i:nth-child(2) { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
  .nav.has-haze .nav__frost i:nth-child(3) { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .nav.has-haze .nav__frost i:nth-child(4) { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
}


.nav__logo { display: flex; align-items: center; gap: 10px; }
.nav__mark { width: 26px; height: 26px; }
.nav__word { height: 17px; width: auto; filter: brightness(0) invert(1); transition: filter .5s; }
.nav.is-light .nav__word { filter: none; }
.nav__links { display: flex; gap: 32px; font-size: 14px; }
.nav__links a { opacity: .72; transition: opacity .2s; }
.nav__links a:hover { opacity: 1; }
.nav__cta {
  font-size: 14px; font-weight: 500;
  padding: 10px 18px;
  border-radius: 99px;
  background: var(--ivory); color: var(--ink);
  transition: background .3s, color .3s;
}
.nav.is-light .nav__cta { background: var(--ink); color: var(--ivory); }
/* the language switch, just before the button: RU · UZ · EN, the page's own one full, the others dimmed */
.nav__end { display: flex; align-items: center; gap: 18px; }
.nav__lang { display: flex; gap: 2px; font-size: 12px; font-weight: 500; letter-spacing: .06em; }
.nav__lang a { padding: 6px 5px; opacity: .5; transition: opacity .2s; }
.nav__lang a:hover, .nav__lang a.is-on { opacity: 1; }
.nav__lang a.is-on { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ---------- the pinned 3D story ---------- */
.film { position: relative; }
.film--hero { height: 640vh; }

/* Safari 26 paints its status bar and toolbar from a pinned layer that touches the screen's edge —
   and keeps that colour even after the layer is gone, so the bars stay dark long after the dark
   scenes. Every pinned stage therefore stops 5px short of both edges: Safari then follows the page's
   own background (info.js keeps it in tune with the section on screen), and the section's colour
   fills the 5px seam. */
.film__pin {
  position: sticky; top: 5px;
  height: calc(100vh - 10px); height: calc(100dvh - 10px);
  overflow: hidden;
  background: var(--night);
}

.film__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13, 10, 12, .55) 0%, rgba(13, 10, 12, 0) 22%),
    linear-gradient(0deg, rgba(13, 10, 12, .7) 0%, rgba(13, 10, 12, 0) 45%),
    linear-gradient(90deg, rgba(13, 10, 12, .55) 0%, rgba(13, 10, 12, 0) 50%);
}

.btn-pill {
  display: inline-flex; align-items: center;
  padding: 15px 24px; border-radius: 99px;
  font-size: 15px; font-weight: 500;
  transition: background .3s, color .3s, border-color .3s;
}
.btn-pill--light { background: var(--ivory); color: var(--ink); }
.btn-pill--light:hover { background: #fff; }

/* hero: a soft floor so captions read over the bright end of the film */
/* The edges melt into --hero-edge, the colour of the section behind the stage: on a phone that is
   what shows under the browser bars, so no seam shows. */
:root { --hero-edge: #1a1311; }
.film__shade--hero {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--hero-edge) 100%, transparent) 0%, color-mix(in srgb, var(--hero-edge) 78%, transparent) 4%, color-mix(in srgb, var(--hero-edge) 42%, transparent) 11%, color-mix(in srgb, var(--hero-edge) 14%, transparent) 19%, color-mix(in srgb, var(--hero-edge) 0%, transparent) 28%),
    linear-gradient(0deg, color-mix(in srgb, var(--hero-edge) 100%, transparent) 0%, color-mix(in srgb, var(--hero-edge) 70%, transparent) 8%, color-mix(in srgb, var(--hero-edge) 30%, transparent) 22%, color-mix(in srgb, var(--hero-edge) 0%, transparent) 40%);
}
.film--hero { background: var(--hero-edge); }
/* the pinned stages themselves carry no colour (their sections do): Safari 26 takes the colour of a
   pinned layer near the screen edge for its bars and then holds on to it */
.film--hero .film__pin, .film__pin { background: transparent; }

/* text beats that fade in/out with scroll progress */
.beat {
  position: absolute; z-index: 2;
  opacity: 0;
  will-change: opacity, transform;
}

.film__hint {
  position: absolute; z-index: 2; left: 50%; bottom: 30px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .6;
}
.film__hint i { width: 1px; height: 44px; background: currentColor; transform-origin: top; animation: hint 2.4s var(--ease) infinite; }
@keyframes hint { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav { padding: 9px var(--gutter) 14px; }   /* 9 + the 5px offset = the old 14 */
  .nav__cta { padding: 9px 14px; font-size: 13px; }
  .nav__end { gap: 8px; }
  .nav__lang { font-size: 11px; }
  .nav__lang a { padding: 6px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .film__hint i { animation: none; }
}

/* ---------- without 3D (the loader guard in index.html): a still opening, the 3D chapters set aside ---------- */
.still-hero { display: none; }
.no-3d .still-hero { display: grid; position: relative; z-index: 6; min-height: 100vh; min-height: 100svh; align-content: end;
  padding: 120px var(--gutter) 64px; background: #efe7df; color: var(--ink); overflow: hidden; }
.no-3d .still-hero picture, .no-3d .still-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.no-3d .still-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(239, 231, 223, .97) 18%, rgba(239, 231, 223, 0) 60%); }
.still-hero__text { position: relative; z-index: 1; max-width: 36em; }
.still-hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(38px, 6vw, 84px); line-height: 1.02; letter-spacing: -.02em; margin: 0; }
.still-hero h1 em { font-family: Cormorant, serif; font-style: italic; color: #c97e6e; }
.still-hero p { margin: 18px 0 26px; font-size: clamp(16px, 1.3vw, 20px); color: rgba(35, 28, 38, .7); }
.still-hero .btn-pill { background: var(--ink); color: var(--ivory); }
.no-3d #hero3d, .no-3d #inside, .no-3d #xray, .no-3d .bridge-veil { display: none !important; }

/* the footer is never shorter than the screen: at the very end of the page it covers it whole, so «О нас» settling
   back under it never shows above it, and the top bar reads the footer's dark under it */
.foot-x { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.foot-x > .fx__mark { margin-top: auto; }