/* Tokens */
:root {
  --ivory: #F1EBE1;
  --basalt: #0E0E0D;
  --ochre: #B39A57;
  /* the dark band of the logo; used only by the menu blinds */
  --charcoal: #2C2B29;
  /* the logo's band edge, in its two tilts; used by the menu blinds */
  --wave-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V5C66 1 34 9 0 4Z'/%3E%3C/svg%3E");
  --wave-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V4C66 9 34 1 0 5Z'/%3E%3C/svg%3E");

  --ease: cubic-bezier(.22, 1, .36, 1);

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Golos Text", system-ui, sans-serif;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 20px;
  --s-5: 32px;
  --s-6: 52px;
  --s-7: 84px;
  --s-8: 136px;

  --gutter: 20px;
  --hit: 48px;
}

@media (min-width: 900px) {
  :root { --gutter: 48px; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* nothing may pan the page sideways (iOS rubber-band would show what sits past the edges) */
html, body { overflow-x: hidden; overflow-x: clip; }

body {
  margin: 0;
  background: var(--basalt);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }

:focus-visible { outline: 1px solid var(--ivory); outline-offset: 4px; }

/* Entrance: blur + rise, staggered via --d set from script */
.js .rise {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(14px);
}
.js.is-in .rise {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity 900ms var(--ease) var(--d, 0ms),
    transform 900ms var(--ease) var(--d, 0ms),
    filter 900ms var(--ease) var(--d, 0ms);
}

/* Header: the toggle stays above the overlay in the same corner */
.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  padding: max(var(--s-4), env(safe-area-inset-top)) var(--gutter) 0;
  pointer-events: none;
}
.bar > * { pointer-events: auto; }

/* Logo symbol: colours come from custom properties so one drawing serves both themes */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.m-a { fill: var(--logo-gold, var(--ochre)); }
.m-i { fill: var(--logo-ink, var(--ivory)); }
.m-word { font-family: "Playfair Display", "Times New Roman", serif; font-weight: 700; font-size: 80px; letter-spacing: -.01em; }
.m-tag { font-family: "Playfair Display", "Times New Roman", serif; font-weight: 700; font-size: 14.5px; letter-spacing: .02em; opacity: var(--tag-o, 1); }
.m-by { font-size: 13.5px; }

/* Toggle: hairline pill, text only, labels crossfade in one grid cell */
.toggle { justify-content: center; transition: color 320ms var(--ease), box-shadow 320ms var(--ease); }
.toggle__label { display: grid; text-align: center; }
.toggle__label > span {
  grid-area: 1 / 1;
  transition: opacity 400ms var(--ease), transform 600ms var(--ease);
}
.toggle__close { opacity: 0; transform: translateY(8px); }
.is-nav-open .toggle__open { opacity: 0; transform: translateY(-8px); }
.is-nav-open .toggle__close { opacity: 1; transform: none; }
.is-nav-open .toggle { color: var(--basalt); box-shadow: inset 0 0 0 1px rgba(14, 14, 13, .32); }
/* open: a clean ink hairline pill on the ivory overlay, never a fill (press, hover or focus) */
.is-nav-open .toggle .btn__fill { display: none; }
.is-nav-open .toggle:focus-visible { outline-color: var(--basalt); }
/* the state just flipped: the press fill snaps back instead of shrinking across the new state */
.toggle.is-flipping .btn__fill { transition: none; }

/* Overlay: opens like the wooden blinds in the hall, slat by slat */
.nav {
  position: fixed;
  inset: 0;
  z-index: 35;
  color: var(--basalt);
  visibility: hidden;
  transition: visibility 0s linear 1300ms;
}
.is-nav-open .nav {
  visibility: visible;
  /* solid ground behind the slats (hides sub-pixel seams), painted only after every reveal has finished */
  background-color: var(--ivory);
  transition: visibility 0s, background-color 0s 2100ms;
}

.nav__blinds {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
/* each slat is one band of the logo: ochre and charcoal unfold, then blanch to ivory as they land */
.nav__blinds i {
  --wave: var(--wave-a);
  position: relative;
  flex: 1 0 0;
  /* 14px taller than its step: the wavy lower edge tucks well under the next slat before landing,
     so no sliver of the wall shows through the troughs in the last part of the ease */
  margin-bottom: -14px;
  background: var(--ivory);
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 8px) no-repeat, var(--wave) bottom / 100% 8px no-repeat;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 8px) no-repeat, var(--wave) bottom / 100% 8px no-repeat;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 700ms var(--ease) calc(160ms + var(--r) * 38ms);
}
/* alternate the tilt of the wave, like the logo's bands */
.nav__blinds i:nth-child(even) {
  --wave: var(--wave-b);
}
/* the band colour: opacity only, so it costs nothing on the slat's layer */
.nav__blinds i::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ochre);
  /* closing: the colour comes back first, then the slat folds */
  transition: opacity 220ms var(--ease) calc(var(--r) * 38ms);
}
.nav__blinds i:nth-child(even)::before { background: var(--charcoal); }
.is-nav-open .nav__blinds i {
  transform: none;
  transition-delay: calc(var(--i) * 38ms);
  /* keep the slats on their own layers while open: no demotion and re-raster as they land */
  will-change: transform;
}
.is-nav-open .nav__blinds i::before {
  opacity: 0;
  transition: opacity 380ms var(--ease) calc(260ms + var(--i) * 38ms);
}
.nav__blinds i:nth-child(1)  { --i: 0;  --r: 11; }
.nav__blinds i:nth-child(2)  { --i: 1;  --r: 10; }
.nav__blinds i:nth-child(3)  { --i: 2;  --r: 9; }
.nav__blinds i:nth-child(4)  { --i: 3;  --r: 8; }
.nav__blinds i:nth-child(5)  { --i: 4;  --r: 7; }
.nav__blinds i:nth-child(6)  { --i: 5;  --r: 6; }
.nav__blinds i:nth-child(7)  { --i: 6;  --r: 5; }
.nav__blinds i:nth-child(8)  { --i: 7;  --r: 4; }
.nav__blinds i:nth-child(9)  { --i: 8;  --r: 3; }
.nav__blinds i:nth-child(10) { --i: 9;  --r: 2; }
.nav__blinds i:nth-child(11) { --i: 10; --r: 1; }
.nav__blinds i:nth-child(12) { --i: 11; --r: 0; }

.nav__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: max(var(--s-4), env(safe-area-inset-top)) var(--gutter) max(var(--s-5), env(safe-area-inset-bottom));
}
/* overlay content: transform and opacity only (no blur: it re-rasterises every frame and snaps when removed) */
.nav__inner > *, .nav__list li {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
.is-nav-open .nav__inner > *, .is-nav-open .nav__list li {
  opacity: 1;
  transform: none;
  transition: opacity 800ms var(--ease) var(--d), transform 800ms var(--ease) var(--d);
  will-change: transform, opacity;
}
.nav__inner > .nav__list { opacity: 1; transform: none; transition: none; will-change: auto; }
.nav__brand { --d: 420ms; }
.nav__list li:nth-child(1) { --d: 520ms; }
.nav__list li:nth-child(2) { --d: 570ms; }
.nav__list li:nth-child(3) { --d: 620ms; }
.nav__list li:nth-child(4) { --d: 670ms; }
.nav__list li:nth-child(5) { --d: 720ms; }
.nav__list li:nth-child(6) { --d: 770ms; }
.nav__list li:nth-child(7) { --d: 820ms; }
.nav__foot { --d: 820ms; }

.nav__brand {
  align-self: flex-start;
  width: 92px;
  --logo-ink: var(--basalt);
}
.nav__brand svg { display: block; width: 100%; height: auto; }

/* Rows set like the printed menu: name, then a dotted leader to the column edge (no arrowheads) */
.nav__list {
  position: relative;
  margin-top: auto;
  padding-top: var(--s-3);
}
/* ochre heading rule that ends in a small lozenge, as on the printed menu headings */
.nav__list::before, .nav__list::after {
  content: "";
  position: absolute;
  opacity: 0;
  transition: opacity 240ms var(--ease);
}
.is-nav-open .nav__list::before, .is-nav-open .nav__list::after { opacity: 1; transition: opacity 800ms var(--ease) 480ms; }
.nav__list::before { top: 0; left: 0; right: 9px; height: 1px; background: var(--ochre); }
.nav__list::after { top: -2px; right: 0; width: 5px; height: 5px; background: var(--ochre); transform: rotate(45deg); }

.nav__list a {
  --bleed: var(--gutter);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  min-height: 60px;
  padding: var(--s-3) 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color 400ms var(--ease);
}
/* pressed menu line: dark fill sweeps in from the left behind the row, fades on release */
.nav__list a::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--bleed) * -1);
  z-index: -1;
  background: var(--basalt);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 400ms var(--ease), transform 0s 400ms;
}
.nav__list a.is-pressed { color: var(--ivory); transition: color 200ms var(--ease); }
.nav__list a.is-pressed::before {
  opacity: 1;
  transform: none;
  transition: transform 320ms var(--ease), opacity 0s;
}
.nav :focus-visible { outline-color: var(--basalt); }
.nav__name {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
  hyphens: none;
  transition: transform 620ms var(--ease);
}
/* zero-height box: its baseline is the text baseline, the line hangs from it */
.nav__lead {
  position: relative;
  flex: 1 1 auto;
  min-width: var(--s-6);
  height: 0;
}
.nav__line {
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 1px;
  overflow: hidden;
  opacity: .45;
  transition: opacity 320ms var(--ease);
}
.nav__line::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1px dotted currentColor;
}
/* the dots never scale (that re-rasterises them every frame): an ivory cover slides off them instead */
.nav__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ivory);
  /* closed: hold the drawn line while the row fades, reset only once it is gone */
  transition: transform 0s 300ms;
}
.is-nav-open .nav__line::after {
  transform: translateX(101%);
  transition: transform 700ms var(--ease) var(--ld);
}
.nav__list li:nth-child(1) { --ld: 900ms; }
.nav__list li:nth-child(2) { --ld: 960ms; }
.nav__list li:nth-child(3) { --ld: 1020ms; }
.nav__list li:nth-child(4) { --ld: 1080ms; }
.nav__list li:nth-child(5) { --ld: 1140ms; }
.nav__list li:nth-child(6) { --ld: 1200ms; }
.nav__list li:nth-child(7) { --ld: 1260ms; }

.nav__list a:focus-visible .nav__name { transform: translateX(4px); }
.nav__list a:focus-visible .nav__line { opacity: .8; }
.nav__list a.is-pressed .nav__line { opacity: .8; }

.nav__foot {
  margin: auto 0 0;
  padding-top: var(--s-6);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .18em;
  text-transform: uppercase;
  /* dimmed by colour, so its entrance opacity (0 -> 1 with the rows) is not overridden */
  color: rgba(14, 14, 13, .6);
}

/* short phones (seven rows): tighter rows so the list and the handle fit one screen */
@media (max-height: 720px) and (max-width: 899px) {
  .nav__list a { min-height: 48px; padding: 8px 0; }
  .nav__name { font-size: 24px; }
  .nav__foot { padding-top: var(--s-4); }
}

/* Hero: scheme A, the wall video fills the frame, text bottom-left */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--basalt);
}
/* own stacking context: the media layers never rise above the hero content */
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  /* the clip's first frame from the first paint (preloaded in index.html), framed exactly like
     the video; basalt only if the image is missing */
  background: var(--basalt) url("assets/video/posters/wall-wide.jpg") 72% 50% / cover no-repeat;
}
@media (max-aspect-ratio: 1/1) {
  .hero__media { background-image: url("assets/video/posters/wall-mobile.jpg"); }
}
/* transparent until it has frames, so the poster underneath shows through */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* phones: keep the travertine column and doorway on the right in frame */
  object-position: 72% 50%;
}
/* seamless loop: the last frame held as a still while the video rewinds underneath, then dissolved */
.loop-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.loop-still.is-shown { opacity: 1; }
.loop-still.is-shown.is-fading { opacity: 0; transition: opacity 500ms var(--ease); }
.hero__content {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0 var(--gutter) max(var(--s-5), calc(env(safe-area-inset-bottom) + var(--s-4)));
  pointer-events: none;
}
.hero__content a { pointer-events: auto; }

.hero__logo {
  margin: 0 0 var(--s-6);
  width: min(62vw, 300px);
  font-size: 0;
}
.hero__logo svg { display: block; width: 100%; height: auto; }
.hero__logo .hero__logo-mark { display: none; }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

/* Hero frame (owner's request, overrides IMG-06): a faint darkening along the top and the sides,
   so the corner logo and the menu pill read a little better; static, under the hero content */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(14, 14, 13, .26), rgba(14, 14, 13, 0) 22%),
    linear-gradient(to right, rgba(14, 14, 13, .22), rgba(14, 14, 13, 0) 18%, rgba(14, 14, 13, 0) 82%, rgba(14, 14, 13, .22));
}

/* Logo trial: small lockup in the top-left corner, only the actions stay bottom-left */
.hero--logo-corner .hero__content { inset: 0; }
.hero--logo-corner .hero__logo-full { display: none; }
.hero--logo-corner .hero__logo-mark { display: block; }
/* MOT-01 ladder: the corner logo leads (300ms), before the menu pill (420ms) */
.js.is-in .hero--logo-corner .hero__logo.rise { transition-delay: 300ms; }
.hero--logo-corner .hero__logo {
  position: absolute;
  top: max(var(--s-4), env(safe-area-inset-top));
  left: var(--gutter);
  width: 92px;
  margin: 0;
}
/* legibility over the bright travertine without a dark box (IMG-06): soft shadow under the lockup and the hairline labels */
.hero__logo svg { filter: drop-shadow(0 1px 10px rgba(14, 14, 13, .7)); }
.hero .btn--ghost, :root:not(.is-nav-open) .toggle { box-shadow: inset 0 0 0 1px rgba(241, 235, 225, .9), 0 0 12px rgba(14, 14, 13, .35); }
.hero .btn--ghost .btn__label, :root:not(.is-nav-open) .toggle .btn__label {
  text-shadow: 0 0 12px rgba(14, 14, 13, .9), 0 0 3px rgba(14, 14, 13, .75);
  transition: color 320ms var(--ease), text-shadow 320ms var(--ease);
}
.hero .btn--ghost.is-pressed .btn__label, :root:not(.is-nav-open) .toggle.is-pressed .btn__label,
.hero .btn--ghost:focus-visible .btn__label, :root:not(.is-nav-open) .toggle:focus-visible .btn__label { text-shadow: none; }
.hero--logo-corner .hero__cta {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: max(var(--s-5), calc(env(safe-area-inset-bottom) + var(--s-4)));
}

/* Buttons: two types only, solid pill and hairline pill */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--hit);
  padding: 0 var(--s-4);
  font-size: 14px;
  line-height: 20px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  white-space: nowrap;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* narrow phones: both hero actions keep one row at 360px without squeezing the pills */
@media (max-width: 419px) {
  .btn { padding-inline: 16px; font-size: 13px; }
}
.btn__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease);
}
.btn__label {
  /* Manrope's ascender is taller than its descender, so lowercase Cyrillic sits low in the box */
  translate: 0 -.07em;
  transition: color 320ms var(--ease);
}
.btn:focus-visible .btn__fill, .btn.is-pressed .btn__fill { transform: scaleX(1); }

.btn--solid { background: var(--ivory); color: var(--basalt); }
.btn--solid .btn__fill { background: var(--ochre); }

.btn--ghost { box-shadow: inset 0 0 0 1px rgba(241, 235, 225, .38); color: var(--ivory); }
.btn--ghost .btn__fill { background: var(--ivory); }
.btn--ghost:focus-visible .btn__label, .btn--ghost.is-pressed .btn__label { color: var(--basalt); }

@media (hover: hover) {
  .btn:hover .btn__fill { transform: scaleX(1); }
  .btn--ghost:hover .btn__label { color: var(--basalt); }
  .hero .btn--ghost:hover .btn__label, :root:not(.is-nav-open) .toggle:hover .btn__label { text-shadow: none; }
  .is-nav-open .toggle:hover { box-shadow: inset 0 0 0 1px var(--basalt); }
  .nav__list a:hover .nav__name { transform: translateX(4px); }
  .nav__list a:hover .nav__line { opacity: .8; }
}

/* Scenes under the hero: one full-height block each, video full-bleed, text bottom-left (scheme A) */
.scene {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--basalt);
  color: var(--ivory);
}
.scene__media { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
/* hidden until a frame is decoded; a missing file leaves the basalt ground */
.scene__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  /* the poster (set by script.js as the block nears) is drawn with this same fit and position */
}
.scene__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 34rem;
  padding: var(--s-8) var(--gutter) max(var(--s-6), calc(env(safe-area-inset-bottom) + var(--s-5)));
  text-shadow: 0 0 18px rgba(14, 14, 13, .7);
}
.scene__title {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-weight: 400;
  /* poster scale: condensed capitals, set large and tight */
  font-size: clamp(3.2rem, 17vw, 9rem);
  line-height: .86;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: none;
}
.scene__text {
  margin: 0 0 var(--s-3);
  max-width: 34ch;
  opacity: .8;
  /* two to three lines each: balanced, not ragged (BRK-01) */
  text-wrap: balance;
}

.scene .btn--ghost { box-shadow: inset 0 0 0 1px rgba(241, 235, 225, .9); }
.scene .btn--ghost .btn__label { text-shadow: 0 0 12px rgba(14, 14, 13, .9), 0 0 3px rgba(14, 14, 13, .75); }
.scene .btn--ghost.is-pressed .btn__label, .scene .btn--ghost:focus-visible .btn__label { text-shadow: none; }

/* Title signs (#sign-cocktail, #sign-pizza in the sprite), sitting on the title's baseline at about
   cap height. Their parts live in a <use> shadow tree, so animations are handed in through inherited
   custom properties; they run only while the block is live (seen, menu closed) and start with its
   text entrance. The neon look is the owner's request and overrides the "no blue-violet" guidance (§8). */
.sign {
  display: inline-block;
  /* about the cap height of the condensed capitals */
  width: clamp(36px, .81em, 120px);
  height: auto;
  aspect-ratio: 1;
  /* the drawing has its own side bearing inside the box, so this small margin reads as ~.15em */
  margin-left: .02em;
  vertical-align: baseline;
  overflow: visible;
  --sign-state: paused;
}
.scene.is-live .sign { --sign-state: running; }
/* the sign stays on the line of the last word of the title */
.nobr { white-space: nowrap; }

/* neon: wide glow, coloured tube, white-hot core */
.sn { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: var(--neon-base, .16); }
.sn-halo { stroke-width: 8; opacity: .28; }
.sn-tube { stroke-width: 3.2; }
.sn-core { stroke-width: 1.2; stroke: #FFFFFF; }
.sn--pink { stroke: #FF5DB1; }
.sn--cyan { stroke: #4FE0FF; }
.sn-buzz { animation: var(--neon-on, none), var(--neon-buzz, none); animation-play-state: var(--sign-state, running); }
.sn-flutter { animation: var(--neon-on, none), var(--neon-flutter, none); animation-play-state: var(--sign-state, running); }
.scene.is-in .sign--neon {
  --neon-base: 1;
  --neon-on: neon-on 900ms steps(1, end) both;
  --neon-buzz: neon-buzz 4.3s ease-in-out 900ms infinite;
  --neon-flutter: neon-flutter 6.7s steps(1, end) 1.6s infinite;
}
@keyframes neon-on {
  0% { opacity: .16; } 10% { opacity: .85; } 18% { opacity: .2; } 31% { opacity: 1; }
  40% { opacity: .35; } 55% { opacity: 1; } 100% { opacity: 1; }
}
@keyframes neon-buzz {
  0%, 100% { opacity: 1; } 34% { opacity: .92; } 51% { opacity: .98; } 73% { opacity: .9; }
}
@keyframes neon-flutter {
  0%, 79% { opacity: 1; } 80% { opacity: .25; } 81% { opacity: 1; } 85% { opacity: .45; } 86%, 100% { opacity: 1; }
}

/* pendant lamp: swings a degree or two on its cord, its warm halo breathes */
.sl-swing { transform-box: view-box; transform-origin: 32px 0; animation: var(--lamp-swing, none); animation-play-state: var(--sign-state, running); }
.sl-halo { animation: var(--lamp-glow, none); animation-play-state: var(--sign-state, running); }
.sl-cord { fill: none; stroke: #E8D2B0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sl-ball { stroke: #FFD59A; stroke-width: 1.2; }
.scene.is-in .sign--lamp {
  --lamp-swing: lamp-swing 7s ease-in-out infinite;
  --lamp-glow: lamp-glow 6.2s ease-in-out infinite;
}
@keyframes lamp-swing { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes lamp-glow { 0%, 100% { opacity: .85; } 45% { opacity: 1; } 70% { opacity: .92; } }

/* firelight: ember lines that breathe, a few sparks rising off the crust */
.sf { fill: none; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.sf-halo { stroke: #FF8A3D; stroke-width: 7; opacity: .3; }
.sf-line { stroke: #FFB45A; stroke-width: 3; }
.sf-core { stroke: #FFF1DC; stroke-width: 1; }
.sf-pep { fill: #FF6A3D; stroke: #FFD9A8; stroke-width: .9; }
.sf-olive { fill: #FFE7C2; stroke: none; }
.sf-spark { fill: #FFC77A; opacity: 0; transform-box: fill-box; }
.sf-breathe { animation: var(--fire-breathe, none); animation-play-state: var(--sign-state, running); }
.sf-spark { animation: var(--fire-spark, none); animation-play-state: var(--sign-state, running); }
.sf-spark:nth-of-type(2) { animation-delay: 1.1s; }
.sf-spark:nth-of-type(3) { animation-delay: 2.3s; }
.scene.is-in .sign--fire {
  --fire-breathe: fire-breathe 3.4s ease-in-out infinite;
  --fire-spark: fire-spark 3.2s ease-out infinite;
}
@keyframes fire-breathe {
  0%, 100% { opacity: .9; transform: scale(.985); }
  42% { opacity: 1; transform: scale(1.015); }
  68% { opacity: .95; transform: scale(1); }
}
@keyframes fire-spark {
  0% { opacity: 0; transform: translateY(6px); }
  20% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-12px); }
}

/* ?debug=video readout */
.video-debug {
  position: fixed;
  left: 8px;
  bottom: 8px;
  z-index: 100;
  margin: 0;
  padding: 6px 8px;
  font: 11px/1.4 ui-monospace, monospace;
  color: #0f0;
  background: rgba(0, 0, 0, .75);
  pointer-events: none;
}

/* bar tab: a few lines of the printed bar menu, names and prices as printed */
.tab { margin: var(--s-4) 0 0; max-width: 22rem; }
.tab li {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: 6px 0;
}
.tab__name {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tab__lead {
  flex: 1 1 auto;
  min-width: var(--s-4);
  border-bottom: 1px dotted rgba(241, 235, 225, .45);
  transform: translateY(-4px);
}
.tab__note { font-size: 12px; opacity: .6; white-space: nowrap; }
@media (max-width: 399px) { .tab__note { display: none; } }
.tab__price { white-space: nowrap; font-size: 15px; font-variant-numeric: tabular-nums; opacity: .8; }

/* per-block framing: Печь's text bottom-left on the dark granite; on phones the frame is lifted
   so the oven mouth and the pizza sit above the text */
.scene--oven .scene__video { object-position: 45% 50%; }
@media (max-aspect-ratio: 1/1) {
  .scene--oven .scene__video { top: -40%; height: 140%; }
}
/* phones: a slightly smaller title and the shortest copy, so the oven mouth and the bar's logo
   panel stay clear above the text */
@media (max-aspect-ratio: 1/1) and (max-width: 600px) {
  .scene__title { font-size: 14vw; }
  .scene--oven .scene__text + .scene__text { display: none; }
  .tab li { padding: 3px 0; }
  /* phones: the sign matches the weight of the capitals (cap height plus a little overshoot);
     the negative top margin keeps the taller sign from opening up the title's line */
  .sign { width: .9em; margin-top: -.1em; }
}
/* bar: until the vertical file exists, phones get the wide one in the upper part of the block,
   cropped around the logo panel (centre-left third of the frame) and fading into basalt */
.scene--bar .scene__video { object-position: 40% 50%; }
/* vertical file on phones: the logo panel is in the upper-left half. The frame is lifted a little and
   widened past the right edge, so the panel ends above the text and the bartender stays cut off;
   the short lead line gives way to the printed rows, which then sit on the dark counter */
@media (max-aspect-ratio: 1/1) {
  .scene--bar .scene__video { top: -8%; width: 112%; height: 108%; object-position: 0% 50%; }
  .scene--bar .scene__title { margin-bottom: var(--s-2); }
  .scene--bar .tab { margin-top: var(--s-2); }
  .scene--bar .tab li { padding: 3px 0; }
  .scene--bar .scene__content { padding-bottom: max(var(--s-5), calc(env(safe-area-inset-bottom) + var(--s-4))); }
}
.scene__media.is-wide-on-tall > * {
  height: 64%;
  object-position: 37% 50%;
  -webkit-mask: linear-gradient(#000 70%, transparent);
  mask: linear-gradient(#000 70%, transparent);
}

/* entrance, once per block when it arrives: the text rises 16px and fades in (no blur) */
.js .scene__content > * { opacity: 0; transform: translateY(16px); }
.js .scene.is-in .scene__content > * {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease) var(--d, 0ms), transform 700ms var(--ease) var(--d, 0ms);
}
.scene__content > :nth-child(2) { --d: 90ms; }
.scene__content > :nth-child(3) { --d: 180ms; }
.scene__content > :nth-child(4) { --d: 270ms; }

/* Seams between blocks (only inside .scenes--seams; remove the class to drop them):
   plain stacked sections, one screen each, and at every junction two static gradients,
   the upper block sinking into basalt at its bottom and the lower one rising out of it,
   so the seam itself is almost basalt and the scroll floats from one block to the next.
   Darkening at the seams is the owner's request and overrides IMG-06. */
.scenes--seams .scene { height: 100svh; min-height: 0; }
/* Seam darkening: tune here. --seam-peak is the opacity at the seam line, --seam-height how far the
   fade reaches into each block. The eased tail (as fractions of the peak and of the height):
   1 at 0, .79 at 15.8%, .52 at 36.8%, .24 at 63.2%, .086 at 84.2%, 0 at 100%;
   with .58 and 38svh that is .58 / .46 at 6svh / .30 at 14svh / .14 at 24svh / .05 at 32svh / 0 at 38svh */
:root {
  --seam-peak: .58;
  --seam-height: 38svh;
  /* a thin band right at the seam line (±1.5svh) is nearly solid, so two different pictures meeting
     there never show a cut; the tail then eases back to the peak value by 6svh */
  --seam-line: .94;
  /* coloured light in the seams (scenes--tint): ember amber around Печь, the bar panel's lavender */
  --tint-amber: .19;
  --tint-hall: .14;
  --tint-amber-out: .17;
  --tint-violet: .17;
  --tint-pink: .08;
  --tint-violet-out: .11;
  --seam-down: linear-gradient(to bottom, rgba(14, 14, 13, var(--seam-line)) 0%, rgba(14, 14, 13, calc(var(--seam-line) * .97)) 3.9%, rgba(14, 14, 13, calc(var(--seam-peak) * 0.79)) 15.8%, rgba(14, 14, 13, calc(var(--seam-peak) * 0.52)) 36.8%, rgba(14, 14, 13, calc(var(--seam-peak) * 0.24)) 63.2%, rgba(14, 14, 13, calc(var(--seam-peak) * 0.086)) 84.2%, rgba(14, 14, 13, 0) 100%);
  --seam-up: linear-gradient(to top, rgba(14, 14, 13, var(--seam-line)) 0%, rgba(14, 14, 13, calc(var(--seam-line) * .97)) 3.9%, rgba(14, 14, 13, calc(var(--seam-peak) * 0.79)) 15.8%, rgba(14, 14, 13, calc(var(--seam-peak) * 0.52)) 36.8%, rgba(14, 14, 13, calc(var(--seam-peak) * 0.24)) 63.2%, rgba(14, 14, 13, calc(var(--seam-peak) * 0.086)) 84.2%, rgba(14, 14, 13, 0) 100%);
}
.scenes--seams .scene::before,
main:has(> .scenes--seams) > .hero .hero__media::after,
.scenes--seams .scene:not(:last-child) .scene__media::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  height: var(--seam-height);
  pointer-events: none;
}
.scenes--seams .scene::before { top: 0; background: var(--seam-down); }
main:has(> .scenes--seams) > .hero .hero__media::after,
.scenes--seams .scene:not(:last-child) .scene__media::after { bottom: 0; background: var(--seam-up); }

/* rows rise one by one, 60ms apart, once the block's text arrives */
.js .scene__content > .tab { opacity: 1; transform: none; }
.js .scene .tab li { opacity: 0; transform: translateY(12px); }
.js .scene.is-in .tab li {
  opacity: 1;
  transform: none;
  transition: opacity 600ms var(--ease) var(--rd), transform 600ms var(--ease) var(--rd);
}
.tab li:nth-child(1) { --rd: 200ms; }
.tab li:nth-child(2) { --rd: 260ms; }
.tab li:nth-child(3) { --rd: 320ms; }
.tab li:nth-child(4) { --rd: 380ms; }
.tab li:nth-child(5) { --rd: 440ms; }
.tab li:nth-child(6) { --rd: 500ms; }

/* text link under the rows: an underline that wipes away on hover, not a pill */
.more {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--hit);
  margin-top: var(--s-2);
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}
.more::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11px;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform 500ms var(--ease);
}
.more:focus-visible::after, .more.is-pressed::after { transform: scaleX(0); }
@media (hover: hover) {
  .more:hover::after { transform: scaleX(0); }
}

/* Seam light (only inside .scenes--tint): each seam carries the light of the block it leaves,
   mixed into the basalt; strengths are the --tint-* values next to --seam-peak. Each glow is a compact
   halo at the seam end, fading to nothing within ~23svh of the seam, well inside its own layer, so
   the layer's far edge never shows as a line and the middle of the block keeps its own colours */
main:has(> .scenes--tint) > .hero .hero__media::after {
  background: radial-gradient(70% 50% at 50% 75%, rgba(255, 138, 61, var(--tint-amber)), rgba(255, 138, 61, 0) 70%), var(--seam-up);
}
.scenes--tint #hall::before {
  background: radial-gradient(70% 50% at 50% 25%, rgba(255, 138, 61, var(--tint-hall)), rgba(255, 138, 61, 0) 70%), var(--seam-down);
}
.scenes--tint #hall .scene__media::after {
  background: radial-gradient(70% 50% at 50% 75%, rgba(255, 138, 61, var(--tint-hall)), rgba(255, 138, 61, 0) 70%), var(--seam-up);
}
.scenes--tint #oven::before {
  background: radial-gradient(70% 50% at 50% 25%, rgba(255, 138, 61, var(--tint-amber)), rgba(255, 138, 61, 0) 70%), var(--seam-down);
}
.scenes--tint #oven .scene__media::after {
  background: radial-gradient(70% 50% at 50% 75%, rgba(255, 138, 61, var(--tint-amber-out)), rgba(255, 138, 61, 0) 70%), var(--seam-up);
}
/* violet left of the logo panel, pink right of it, so the panel itself stays white */
.scenes--tint #bar::before {
  background:
    radial-gradient(25% 50% at 12% 25%, rgba(139, 92, 255, var(--tint-violet)), rgba(139, 92, 255, 0) 70%),
    radial-gradient(25% 50% at 92% 25%, rgba(255, 79, 163, var(--tint-pink)), rgba(255, 79, 163, 0) 70%),
    var(--seam-down);
}
/* the bar's foot: the same seam into the dark «Популярное» block, with a faint violet */
.scenes--tint #bar .scene__media::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--seam-height);
  pointer-events: none;
  background: radial-gradient(70% 50% at 50% 75%, rgba(139, 92, 255, var(--tint-violet-out)), rgba(139, 92, 255, 0) 70%), var(--seam-up);
}

/* Embers in the Печь block (script.js): amber sparks rising a short way from the oven mouth,
   in the middle band of the frame, which holds no text; under the content layer */
.embers {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 10svh;
  height: 30svh;
  overflow: hidden;
  pointer-events: none;
}
.embers i {
  position: absolute;
  left: var(--x);
  bottom: 0;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #FFB45A;
  box-shadow: 0 0 4px rgba(255, 138, 61, .8);
  opacity: 0;
  animation: ember-rise var(--t) ease-in-out var(--delay) infinite;
  animation-play-state: paused;
}
.embers.is-live i { animation-play-state: running; }
@keyframes ember-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  15% { opacity: .85; }
  70% { opacity: .5; }
  100% { opacity: 0; transform: translate3d(var(--dx), -24svh, 0); }
}

/* tablets and up: the poster scale of the phone would dwarf the rows beside it, so the titles stop
   growing at a size that still reads as a headline, and the signs follow at about cap height */
@media (min-width: 600px) {
  .scene__title { font-size: clamp(3.2rem, 10vw, 6.5rem); }
  .sign { width: clamp(36px, .8em, 84px); margin-top: -.06em; }
}


/* Laptop: lockup and actions share one bottom line, the rest of the wall stays open */
@media (min-width: 900px) {
  .hero__content {
    display: flex;
    align-items: flex-end;
    gap: var(--s-7);
    padding-bottom: var(--s-6);
  }
  .hero__logo { margin: 0; width: clamp(280px, 24vw, 360px); }
  .hero__cta { padding-bottom: 6px; }
  .hero--logo-corner .hero__logo { width: 108px; }
  .hero--logo-corner .hero__cta { bottom: var(--s-6); padding-bottom: 0; }
  .hero__video { object-position: 50% 50%; }
  .hero__media { background-position: 50% 50%; }

  .nav__inner { padding-bottom: var(--s-6); }
  .nav__brand { width: 116px; }
  .nav__list { width: min(100%, 520px); }
  .nav__list a { min-height: 72px; --bleed: 24px; }
  .nav__name { font-size: 36px; }

  .scene__content { max-width: 40rem; padding-left: var(--gutter); padding-bottom: var(--s-7); }
  /* laptops: titles are tall, so the word is smaller, higher and moves less */
  /* laptops: two title lines at 9rem plus rows would fill the screen; a little smaller keeps the
     upper half of each block clear */
  .scene__title { font-size: clamp(3.2rem, 7.2vw, 6.5rem); }
  /* bar: the frame is pushed left so the bartender stands right, the logo panel centre;
     the text sits bottom-left over the dark counter and the glass, narrow enough to clear the panel */
  .scene--bar .scene__video { object-position: 0% 50%; }
  .scene--bar .scene__content { max-width: 25rem; }
}


.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* «Всё меню»: the way to the full menu, between «Популярное» and the booking */
.allmenu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-5) var(--gutter) var(--s-7);
}

/* Booking (demo): dark ground, condensed capitals, hairline fields */
.book {
  position: relative;
  padding: var(--s-7) var(--gutter) var(--s-7);
  border-top: 1px solid rgba(241, 235, 225, .12);
}
.book__inner { max-width: 34rem; }
.book__title {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 14vw, 6.5rem);
  line-height: .86;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: none;
}
.book__sub { color: var(--ochre); }
.book__lead { margin: 0 0 var(--s-5); max-width: 34ch; opacity: .8; text-wrap: pretty; }
.book__form { display: grid; gap: var(--s-4); }
.field { display: grid; gap: var(--s-2); }
.field__label { font-size: 13px; letter-spacing: .04em; opacity: .7; }
.field__input {
  width: 100%;
  min-height: var(--hit);
  padding: 0 var(--s-4);
  border: 0;
  border-radius: 999px;
  background: none;
  box-shadow: inset 0 0 0 1px rgba(241, 235, 225, .34);
  color: inherit;
  font: inherit;
  /* 16px: iOS does not zoom into the field */
  font-size: 16px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow 320ms var(--ease);
}
.field__input::placeholder { color: rgba(241, 235, 225, .4); }
.field__input:focus { box-shadow: inset 0 0 0 1px var(--ivory); }
.field__input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--ochre); }
.book__send { justify-self: start; margin-top: var(--s-2); }
.book__status { margin: 0; min-height: 1.6em; font-size: 14px; color: var(--ochre); text-wrap: pretty; }
.book__alt { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin-top: var(--s-4); }

/* Footer: contacts in columns, the wordmark across the full width at the very bottom */
.foot {
  padding: var(--s-7) var(--gutter) max(var(--s-5), calc(env(safe-area-inset-bottom) + var(--s-4)));
  border-top: 1px solid rgba(241, 235, 225, .12);
  overflow: hidden;
}
.foot__grid { display: grid; gap: var(--s-6) var(--s-7); }
.foot__label { margin: 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .55; }
.foot__value { margin: var(--s-1) 0 var(--s-4); }
.foot__value .more { margin: 0; min-height: var(--hit); }
.foot__links { margin-top: var(--s-1); }
.foot__links .more { margin: 0; }
.foot__map {
  position: relative;
  display: block;
  aspect-ratio: 5 / 3;
  border-radius: 4px;
  background: var(--charcoal);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.foot__map svg { display: block; width: 100%; height: 100%; }
.foot__street { fill: none; stroke: rgba(241, 235, 225, .16); stroke-width: 6; stroke-linecap: round; }
.foot__street--main { stroke: rgba(241, 235, 225, .3); stroke-width: 10; }
.foot__pin { fill: var(--ochre); stroke: var(--basalt); stroke-width: 3; }
.foot__map-label { position: absolute; left: var(--s-4); bottom: var(--s-3); font-size: 14px; }
.foot__wordbox {
  margin-top: var(--s-7);
  /* the rise comes from behind the bottom edge only: clipped below, never at the sides or the top */
  clip-path: inset(-40% -8% 0 -8%);
}
.foot__word { display: block; width: 100%; height: auto; overflow: visible; }
.foot__word text { font-family: "Playfair Display", serif; font-weight: 700; font-size: 200px; fill: var(--ivory); letter-spacing: -.01em; }
.foot__small { margin: var(--s-4) 0 0; font-size: 12px; opacity: .5; }
@media (min-width: 768px) {
  .foot__grid { grid-template-columns: 1fr 1fr 1.4fr; align-items: start; }
}

/* Phones: sticky booking button, shown after the hero (script.js toggles is-shown) */
.dock { display: none; }
@media (max-width: 767px) {
  .dock {
    display: block;
    position: fixed;
    z-index: 30;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 var(--gutter) max(var(--s-3), env(safe-area-inset-bottom));
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity 400ms var(--ease), transform 400ms var(--ease);
  }
  .dock.is-shown { opacity: 1; transform: none; pointer-events: auto; }
  /* hidden dock: also invisible to Safari's bar tint (it samples fixed boxes at the bottom edge) */
  .dock:not(.is-shown) { visibility: hidden; transition: opacity 400ms var(--ease), transform 400ms var(--ease), visibility 0s 600ms; }
  .dock--soft:not(.is-shown) { transition: opacity 600ms cubic-bezier(.45, 0, .2, 1), transform 600ms cubic-bezier(.45, 0, .2, 1), visibility 0s 600ms; }
  .dock__btn { width: 100%; justify-content: center; box-shadow: 0 6px 24px rgba(14, 14, 13, .45); }
  /* the scenes' bottom links stay clear of the dock: their text sits one dock higher */
  /* the dock takes the bottom 60px (+ safe area): each link ends just above it, no higher */
  .has-dock .scene__content { padding-bottom: calc(max(var(--s-6), calc(env(safe-area-inset-bottom) + var(--s-5))) + 20px); }
  .has-dock .scene--bar .scene__content { padding-bottom: calc(max(var(--s-5), calc(env(safe-area-inset-bottom) + var(--s-4))) + 40px); }
}


/* (10) Laptops: a soft darkening rising from the lower left under the scene text (a falloff, no panel
   edge), a 480-520px text column and 18px body text. Only inside .scenes--shade; phones unchanged. */
@media (min-width: 1024px) {
  .scenes--shade .scene__content { max-width: calc(500px + 2 * var(--gutter)); }
  .scenes--shade .scene__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 0;
    /* only a pocket behind the text (the owner saw the first, much larger one as a haze over the whole video) */
    width: min(56vw, 800px);
    height: min(56svh, 520px);
    pointer-events: none;
    background: radial-gradient(ellipse 100% 100% at 0% 100%, rgba(14, 14, 13, .34), rgba(14, 14, 13, .16) 50%, rgba(14, 14, 13, 0) 100%);
  }
  .scenes--shade .scene__text { max-width: none; font-size: 18px; }
  .scenes--shade .tab { max-width: 480px; }
  /* bar: the column stays clear of the logo panel in the middle of the frame */
  .scenes--shade .scene--bar .scene__content { max-width: calc(480px + 2 * var(--gutter)); }
}

/* (11) Soft entrance (main page only): each block's title and text rise 12px and fade in once, when the
   block arrives; list rows follow 40ms apart. One easing. Only inside .scenes--soft-rise. */
.js .scenes--soft-rise .scene__content > * { transform: translateY(12px); }
.js .scenes--soft-rise .scene .tab li { transform: translateY(12px); }
.js .scenes--soft-rise .scene.is-in .scene__content > *, .js .scenes--soft-rise .scene.is-in .tab li { transform: none; }
.scenes--soft-rise .scene__content > :nth-child(2) { --d: 40ms; }
.scenes--soft-rise .scene__content > :nth-child(3) { --d: 80ms; }
.scenes--soft-rise .scene__content > :nth-child(4) { --d: 120ms; }
.scenes--soft-rise .scene__content > :nth-child(5) { --d: 160ms; }
.scenes--soft-rise .tab li:nth-child(1) { --rd: 120ms; }
.scenes--soft-rise .tab li:nth-child(2) { --rd: 160ms; }
.scenes--soft-rise .tab li:nth-child(3) { --rd: 200ms; }
.scenes--soft-rise .tab li:nth-child(4) { --rd: 240ms; }
.scenes--soft-rise .tab li:nth-child(5) { --rd: 280ms; }
.scenes--soft-rise .tab li:nth-child(6) { --rd: 320ms; }


/* (B) Instagram pill beside «Меню»: same hairline pill, a line icon, 48px round target */
.bar { gap: var(--s-2); }
.bar__ig { width: var(--hit); padding: 0; justify-content: center; }
.bar__ig-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; translate: none; overflow: visible; }
.bar__ig-dot { fill: currentColor; stroke: none; }
.bar__ig .bar__ig-icon { filter: drop-shadow(0 0 6px rgba(14, 14, 13, .8)); transition: color 320ms var(--ease), filter 320ms var(--ease); }
:root:not(.is-nav-open) .bar__ig { box-shadow: inset 0 0 0 1px rgba(241, 235, 225, .9), 0 0 12px rgba(14, 14, 13, .35); }
.bar__ig:focus-visible .bar__ig-icon, .bar__ig.is-pressed .bar__ig-icon { color: var(--basalt); filter: none; }
@media (hover: hover) { .bar__ig:hover .bar__ig-icon { filter: none; } }
/* on the open overlay: ink hairline like the toggle */
.is-nav-open .bar__ig { color: var(--basalt); box-shadow: inset 0 0 0 1px rgba(14, 14, 13, .32); }
.is-nav-open .bar__ig .bar__ig-icon { filter: none; }
.is-nav-open .bar__ig .btn__fill { background: var(--basalt); }
.is-nav-open .bar__ig:focus-visible .bar__ig-icon, .is-nav-open .bar__ig.is-pressed .bar__ig-icon { color: var(--ivory); }
@media (hover: hover) { .is-nav-open .bar__ig:hover .bar__ig-icon { color: var(--ivory); } }

/* (A) Flying hero logo (only with .hero--logo-fly, on top of .hero--logo-corner): script.js sizes the
   corner lockup to its large width (--fly-w), parks it in the middle and moves it with the scroll
   progress into the corner, where it ends exactly at the corner size (transform: translate + scale,
   from the large size down, so it stays sharp). Without script or with reduced motion it simply
   stays in the corner. The large lockup takes no entrance blur. */
/* start size of the full lockup (with the tag lines): about 48% of a phone's width, 26vw on laptops
   up to 420px; never taller than ~46% of the screen (the full lockup is 1.1 times as tall as wide) */
.hero--logo-fly { --fly-w: min(clamp(160px, 48vw, 300px), 42svh); --fly-y: .55; }
@media (min-width: 900px) { .hero--logo-fly { --fly-w: min(clamp(240px, 26vw, 420px), 42svh); --fly-y: .47; } }
/* phones (portrait): larger and higher, about 57% of the width, centred at 45% of the height; still
   clear of the Instagram/«Меню» pills above and well above the booking buttons below */
@media (max-aspect-ratio: 1/1) and (max-width: 899px) { .hero--logo-fly { --fly-w: min(clamp(170px, 57vw, 320px), 40svh); --fly-y: .45; } }
/* not a link while it stands in the middle: no taps, no pointer cursor, out of the tab order
   (script.js sets .is-landed once it has (nearly) reached the corner) */
.hero--logo-fly.is-fly:not(.is-landed) .hero__logo-link,
.hero--logo-fly.is-fly:not(.is-landed) .hero__logo-link * { pointer-events: none !important; cursor: default; }
/* the corner lockup stays on screen over every block (owner's request; this overrides the old note
   about a second logo over the bar video), above the dock, under the open menu overlay (z 35) */
.hero--logo-fixed .hero__logo, .hero--logo-fly .hero__logo { position: fixed; z-index: 34; }
.hero__logo-link { display: block; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
/* the link's own box keeps the large size; only the drawn (scaled) lockup takes the tap */
.hero--logo-fly .hero__logo-link { pointer-events: none; }
.hero--logo-fly .hero__logo-mark, .hero--logo-fly .hero__logo-full { pointer-events: auto; cursor: pointer; }
.hero--logo-fly.is-fly .hero__logo { width: var(--fly-w); }
/* While flying, one composited box moves: the link, holding the corner lockup (mark + АГАТА), the tag
   lines cut from the same symbol below it (.hero__logo-tags) and a soft halo behind (.hero__logo-halo).
   Only its transform changes (from script.js or a scroll-driven animation), so the lockup with its
   static shadow is rasterised once and never repainted per frame; the tag lines and the halo fade by
   opacity on their own layers. In the corner the box is exactly the corner lockup (same width, same
   top), the tag lines and the halo gone. Without script or with reduced motion .is-fly never comes
   and the plain corner lockup shows. */
.hero__logo-tags, .hero__logo-halo { display: none; }
.hero--logo-fly.is-fly .hero__logo-link { position: relative; transform-origin: 0 0; will-change: transform; }
.hero--logo-fly.is-fly .hero__logo-tags { display: block; will-change: opacity; }
.hero--logo-fly.is-fly .hero__logo-halo {
  display: block;
  position: absolute;
  z-index: -1;
  left: -22%;
  right: -22%;
  top: 34%;
  bottom: -14%;
  /* a soft dark pool under АГАТА and the tag lines, fading to nothing at its edges: no panel */
  background: radial-gradient(closest-side, rgba(14, 14, 13, .55), rgba(14, 14, 13, .3) 55%, rgba(14, 14, 13, 0));
  pointer-events: none;
  will-change: opacity;
}
/* scroll-driven: the browser runs the flight on the compositor, in step with the scroll itself
   (script.js adds .is-sda and the start values --fly-tx/--fly-ty/--fly-s/--fly-span) */
@supports (animation-timeline: scroll()) {
  .hero--logo-fly.is-fly.is-sda .hero__logo-link {
    animation: logo-fly 1s cubic-bezier(.37, 0, .63, 1) both;
    animation-timeline: scroll(root block);
    animation-range: 0 var(--fly-span, 60svh);
  }
  .hero--logo-fly.is-fly.is-sda .hero__logo-tags {
    animation: logo-tags 1s linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 var(--fly-span, 60svh);
  }
  .hero--logo-fly.is-fly.is-sda .hero__logo-halo {
    animation: logo-halo 1s linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 var(--fly-span, 60svh);
  }
}
@keyframes logo-fly {
  from { transform: translate3d(var(--fly-tx, 0px), var(--fly-ty, 0px), 0) scale(1); }
  to { transform: translate3d(0, 0, 0) scale(var(--fly-s, 1)); }
}
@keyframes logo-tags { 0% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes logo-halo { 0% { opacity: 1; } 100% { opacity: 0; } }
.js .hero--logo-fly .hero__logo.rise { filter: none; }


/* Booking on paper (.book--paper; remove the class for the plain dark form): the hero's wet basalt
   still behind the block, evenly darkened, with the amber seam light rising from below (same tint
   token); the form sits on an ivory card like the menu page, ink text, the graphite button. */
.book--paper {
  background:
    radial-gradient(70% 45% at 50% 100%, rgba(255, 138, 61, var(--tint-amber)), rgba(255, 138, 61, 0) 70%),
    linear-gradient(rgba(14, 14, 13, .8), rgba(14, 14, 13, .8)),
    var(--basalt) url("assets/video/posters/wall-wide.jpg") 50% 50% / cover no-repeat;
  background:
    radial-gradient(70% 45% at 50% 100%, rgba(255, 138, 61, var(--tint-amber)), rgba(255, 138, 61, 0) 70%),
    linear-gradient(rgba(14, 14, 13, .8), rgba(14, 14, 13, .8)),
    var(--basalt) image-set(url("assets/video/posters/wall-wide.webp") type("image/webp"), url("assets/video/posters/wall-wide.jpg") type("image/jpeg")) 50% 50% / cover no-repeat;
}
@media (max-aspect-ratio: 1/1) {
  .book--paper {
    background:
      radial-gradient(70% 45% at 50% 100%, rgba(255, 138, 61, var(--tint-amber)), rgba(255, 138, 61, 0) 70%),
      linear-gradient(rgba(14, 14, 13, .8), rgba(14, 14, 13, .8)),
      var(--basalt) url("assets/video/posters/wall-mobile.jpg") 50% 50% / cover no-repeat;
  background:
    radial-gradient(70% 45% at 50% 100%, rgba(255, 138, 61, var(--tint-amber)), rgba(255, 138, 61, 0) 70%),
    linear-gradient(rgba(14, 14, 13, .8), rgba(14, 14, 13, .8)),
    var(--basalt) image-set(url("assets/video/posters/wall-mobile.webp") type("image/webp"), url("assets/video/posters/wall-mobile.jpg") type("image/jpeg")) 50% 50% / cover no-repeat;
  }
}
.book--paper .book__form {
  gap: var(--s-4);
  margin: 0 calc(var(--s-2) * -1);
  padding: var(--s-5) var(--s-4) var(--s-4);
  border-radius: 6px;
  background: var(--ivory);
  color: var(--basalt);
  text-shadow: none;
}
/* (3) the card lets the stone show through faintly (no backdrop blur); remove .book--sheer for solid ivory.
   Ink on the card measures about 13:1 over the darkened stone */
.book--sheer .book__form { background: rgba(241, 235, 225, .89); }
.book--paper .field__label { font-size: 14px; opacity: 1; color: rgba(14, 14, 13, .78); }
.book--paper .field__input { box-shadow: inset 0 0 0 1px rgba(14, 14, 13, .34); color: var(--basalt); }
.book--paper .field__input::placeholder { color: rgba(14, 14, 13, .45); }
.book--paper .field__input:focus { box-shadow: inset 0 0 0 2px var(--basalt); }
.book--paper .field__input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #8A6A1F; }
.book--paper .book__send { background: var(--basalt); color: var(--ivory); justify-self: stretch; justify-content: center; }
.book--paper .book__send .btn__fill { background: var(--ochre); }
.book--paper .book__send:focus-visible { outline-color: var(--basalt); }
.book--paper .book__send:focus-visible .btn__label, .book--paper .book__send.is-pressed .btn__label { color: var(--basalt); }
@media (hover: hover) { .book--paper .book__send:hover .btn__label { color: var(--basalt); } }
.book--paper .book__status { color: var(--basalt); font-size: 14px; }
.book--paper .book__status:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 var(--s-2) 2px 0;
  background: var(--ochre);
  transform: rotate(45deg);
}
.book--paper .field__input:focus-visible { outline: none; }
/* room above the title for the fixed corner logo, on every width */
.book { padding-top: var(--s-8); }
@media (min-width: 1024px) {
  .book--paper .book__inner {
    max-width: 1100px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--s-7);
    align-items: start;
  }
  .book--paper .book__title { grid-column: 1; grid-row: 1; }
  .book--paper .book__lead { grid-column: 1; grid-row: 2; }
  .book--paper .book__alt { grid-column: 1; grid-row: 3; align-self: start; }
  .book--paper .book__form { grid-column: 2; grid-row: 1 / 4; margin: 0; padding: var(--s-5); }
}

/* Entrance for the booking and the footer, the same system as (11): one easing, once when the block
   arrives (script.js adds is-in), transform/opacity only, nothing hidden with reduced motion.
   Booking: title, lead, then the fields and the button 60ms apart, the phone/Instagram links last.
   Footer: the wordmark rises from behind its own edge (overflow hidden), then the contacts 50ms apart,
   the map fades in. */
.js .book .book__title, .js .book .book__lead, .js .book .field, .js .book .book__send, .js .book .book__alt,
.js .foot .foot__col > *, .js .foot .foot__links li {
  opacity: 0;
  transform: translateY(12px);
}
.js .book .book__form { opacity: 0; }
.js .foot .foot__map { opacity: 0; }
.js .foot .foot__word { transform: translateY(102%); }
.js .book.is-in .book__title, .js .book.is-in .book__lead, .js .book.is-in .field, .js .book.is-in .book__send, .js .book.is-in .book__alt,
.js .foot.is-in .foot__col > *, .js .foot.is-in .foot__links li {
  opacity: 1;
  transform: none;
  transition: opacity 600ms var(--ease) var(--rd, 0ms), transform 600ms var(--ease) var(--rd, 0ms);
}
.js .book.is-in .book__form { opacity: 1; transition: opacity 600ms var(--ease) 100ms; }
.js .foot.is-in .foot__map { opacity: 1; transition: opacity 900ms var(--ease) var(--rd, 0ms); }
.js .foot.is-in .foot__word { transform: none; transition: transform 700ms var(--ease); }
.book .book__lead { --rd: 60ms; }
.book .field:nth-of-type(1) { --rd: 160ms; }
.book .field:nth-of-type(2) { --rd: 220ms; }
.book .field:nth-of-type(3) { --rd: 280ms; }
.book .book__send { --rd: 340ms; }
.book .book__alt { --rd: 440ms; }
.foot .foot__col > :nth-child(1) { --rd: 300ms; }
.foot .foot__col > :nth-child(2) { --rd: 350ms; }
.foot .foot__col > :nth-child(3) { --rd: 400ms; }
.foot .foot__col > :nth-child(4) { --rd: 450ms; }
.foot .foot__col > :nth-child(5) { --rd: 500ms; }
.foot .foot__col > :nth-child(6) { --rd: 550ms; }
.foot .foot__links li:nth-child(1) { --rd: 400ms; }
.foot .foot__links li:nth-child(2) { --rd: 450ms; }
.foot .foot__links li:nth-child(3) { --rd: 500ms; }
.foot .foot__links li:nth-child(4) { --rd: 550ms; }
.foot .foot__links li:nth-child(5) { --rd: 600ms; }
.foot .foot__map { --rd: 500ms; }
.js .foot .foot__links { opacity: 1; transform: none; }
/* scroll-linked footer (script.js writes each line's transform/opacity): no transitions, it follows the scroll */
.js .foot--scroll .foot__col > *, .js .foot--scroll .foot__links li, .js .foot--scroll .foot__map, .js .foot--scroll .foot__word { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .js .book *, .js .foot * { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* (1) Menu overlay as waves (only with html.nav-waves; remove the class for the straight blinds).
   The waves are the shared component in waves.css (also used for the page transition).
   The menu content comes in once the ivory layer has landed. */
.nav-waves .nav__blinds { display: none; }
/* the layers themselves are the shared component in waves.css; script.js toggles .is-on with the overlay */
/* the solid ground and the content wait for the ivory wave (lands at about 1060ms) */
.nav-waves.is-nav-open .nav { transition: visibility 0s, background-color 0s 1100ms; }
.nav-waves.is-nav-open .nav__inner > *, .nav-waves.is-nav-open .nav__list li { transition-delay: calc(var(--d) + 480ms); }
.nav-waves.is-nav-open .nav__list::before, .nav-waves.is-nav-open .nav__list::after { transition-delay: 960ms; }
.nav-waves.is-nav-open .nav__line::after { transition-delay: calc(var(--ld) + 480ms); }

/* the «Меню» pill: a soft press (the fill fades in and out, no sweep or snap) and its ink colours
   switch only once the waves have reached the top corner, both ways */
.nav-waves .toggle .btn__fill, .nav-waves .bar__ig .btn__fill { transform: none; opacity: 0; transition: opacity 420ms var(--ease); }
.nav-waves .toggle.is-pressed .btn__fill, .nav-waves .toggle:focus-visible .btn__fill { opacity: 1; transition-duration: 160ms; }
.nav-waves .bar__ig.is-pressed .btn__fill, .nav-waves .bar__ig:focus-visible .btn__fill { opacity: 1; transition-duration: 160ms; }
@media (hover: hover) {
  .nav-waves .toggle:hover .btn__fill, .nav-waves .bar__ig:hover .btn__fill { opacity: 1; }
}
.nav-waves .toggle.is-flipping .btn__fill { transition: opacity 420ms var(--ease); }
.nav-waves.is-nav-open .toggle .btn__fill { display: block; opacity: 0; }
.nav-waves .toggle, .nav-waves .bar__ig { transition: color 320ms var(--ease) 280ms, box-shadow 320ms var(--ease) 280ms; }
.nav-waves.is-nav-open .toggle, .nav-waves.is-nav-open .bar__ig { transition: color 320ms var(--ease) 820ms, box-shadow 320ms var(--ease) 820ms; }
.nav-waves .toggle .btn__label { transition: color 320ms var(--ease), text-shadow 320ms var(--ease); }


/* (5) softer dock: a longer rise and fade both ways, one gentle in-out curve (only with .dock--soft) */
@media (max-width: 767px) {
  .dock--soft { transform: translateY(24px); transition: opacity 600ms cubic-bezier(.45, 0, .2, 1), transform 600ms cubic-bezier(.45, 0, .2, 1); }
  .dock--soft.is-shown { transform: none; }
}
/* «Популярное»: the tap hint only on phones and touch screens */
.pop__hint { display: none; }
@media (max-width: 767px), (pointer: coarse) { .pop__hint { display: block; margin-top: var(--s-2); } }


/* (4) The corner lockup fades out while «Бронь» or the footer is on screen and comes back above them
   (only with .hero--logo-hides; script.js sets html.is-logo-off). It takes no taps while hidden. */
.hero--logo-hides .hero__logo-link { transition: opacity 500ms var(--ease); }
.is-logo-off .hero--logo-hides .hero__logo-link { opacity: 0; }
.is-logo-off .hero--logo-hides .hero__logo-link, .is-logo-off .hero--logo-hides .hero__logo-link * { pointer-events: none !important; }



/* (3) with html.posters-eager: the videos stay invisible over their CSS posters until they play */
.posters-eager .hero__video, .posters-eager .scene__video { opacity: 0; transition: opacity 500ms var(--ease); }
.posters-eager .hero__video.is-playing, .posters-eager .scene__video.is-playing { opacity: 1; }


/* «Позвонить нам» (only with .hero--call): the same hairline pill as Instagram, left of it in the fixed
   top row, always on screen; an icon-only round pill (48x48) at every width.
   Hidden under the open menu overlay. */
.bar__call { display: none; }
:root:has(.hero--call) .bar__call { display: inline-flex; }
.bar__call { width: var(--hit); padding: 0; justify-content: center; }
.bar__call-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; translate: none; overflow: visible; filter: drop-shadow(0 0 6px rgba(14, 14, 13, .8)); transition: color 320ms var(--ease), filter 320ms var(--ease); }
:root:not(.is-nav-open) .bar__call { box-shadow: inset 0 0 0 1px rgba(241, 235, 225, .9), 0 0 12px rgba(14, 14, 13, .35); }
.bar__call:focus-visible .bar__call-icon, .bar__call.is-pressed .bar__call-icon { color: var(--basalt); filter: none; }
@media (hover: hover) { .bar__call:hover .bar__call-icon { filter: none; } }
.nav-waves .bar__call .btn__fill { transform: none; opacity: 0; transition: opacity 420ms var(--ease); }
.nav-waves .bar__call.is-pressed .btn__fill, .nav-waves .bar__call:focus-visible .btn__fill { opacity: 1; transition-duration: 160ms; }
@media (hover: hover) { .nav-waves .bar__call:hover .btn__fill { opacity: 1; } }
/* narrow phones (under 375px): the flying logo passes through the call pill's spot on its way to the
   corner, so the pill steps aside for that stretch of the same scroll (scroll-driven, compositor only) */
@supports (animation-timeline: scroll()) {
  @media (max-width: 374px) {
    :root:has(.hero--logo-fly.is-fly.is-sda) .bar__call {
      animation: call-make-way 1s linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 var(--fly-span, 60svh);
    }
  }
}
@keyframes call-make-way { 0%, 30% { opacity: 1; } 42%, 80% { opacity: 0; visibility: hidden; } 92%, 100% { opacity: 1; } }
/* always hidden under the open menu */
.is-nav-open .bar__call { opacity: 0 !important; visibility: hidden; pointer-events: none; transition: opacity 200ms var(--ease), visibility 0s 200ms; }


/* hero--muted: the wall a touch quieter, in the booking block's language but far lighter and warm, so the
   stone never turns grey: an even warm dark (18,14,10 at .22) and a faint amber glow from below (the seam
   tint). A real element between the video and the content (iOS did not draw pseudo-elements over the
   video), static, no blur. */
.hero__mute { display: none; }
.hero--muted .hero__mute {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(80% 45% at 50% 100%, rgba(255, 138, 61, calc(var(--tint-amber) * .55)), rgba(255, 138, 61, 0) 70%),
    rgba(18, 14, 10, .22);
}

@media (prefers-reduced-motion: reduce) {
  .scene .sign, .scene.is-in .sign--neon, .scene.is-in .sign--fire, .scene.is-in .sign--lamp {
    --neon-on: none; --neon-buzz: none; --neon-flutter: none; --fire-breathe: none; --fire-spark: none; --neon-base: 1;
    --lamp-swing: none; --lamp-glow: none;
  }

  .js .rise, .js.is-in .rise, .js .scene__content > *, .scene .tab li, .scene__video,
  .nav, .nav *, .nav *::before, .nav *::after, .btn, .btn *, .dock {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}