/* Тот самый Слон — макет Figma «сайт» (29.10): секции 1400×820 одна под другой, обычная прокрутка.
   Десктоп-адаптив: элементы лежат в слоях .art (куски секции 1400×820 в пикселях макета),
   слой масштабируется под экран и прижимается к своему краю (data-x / data-y). Телефон — отдельный макет, в конце файла. */
:root {
  --cream: #fff9e8;
  --milk: #fffcf3;
  --hero-title: #fce9c1;
  --foot: #811e1e;
  --foot-ink: #e8cdb8;
  --foot-line: #ad6654;

  --s: 1;          /* масштаб элементов: вписать секцию 1400×820 в экран (app.js) */
  --vh: 100svh;    /* высота экрана в px (app.js) */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --soft: cubic-bezier(.33, 0, .15, 1);       /* мягкая кривая для появлений */
  --sans: "Open Sans", sans-serif;           /* так Figma рисует кириллицу для Academy Engraved / Rambla / Rock Salt */
  --mono: "Anonymous Pro", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #120a06; color: var(--milk); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; }
h1, h2 { font: inherit; }
address { font-style: normal; }
/* текст только для поисковиков и экранных дикторов — на экране не виден */
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* видимый фокус для навигации с клавиатуры */
a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* ───────── слой макета ───────── */
.art {
  --k: var(--s); --h: 820px;
  position: absolute; width: 1400px; height: var(--h);
  transform: scale(var(--k)); transform-origin: 0 0;
  pointer-events: none;
}
.art > * { position: absolute; pointer-events: auto; }
.art[data-x="l"] { left: 0; }
.art[data-x="c"] { left: calc((100% - 1400px * var(--k)) / 2); }
.art[data-x="r"] { left: calc(100% - 1400px * var(--k)); }
.art[data-y="t"] { top: 0; }
.art[data-y="c"] { top: calc((100% - var(--h) * var(--k)) / 2); }
.art[data-y="b"] { top: calc(100% - var(--h) * var(--k)); }

/* ───────── шапка ───────── */
/* меню стоит по сетке макета (лого от 40, пункты в колонке 531–871, «Забронировать» до 1360),
   а текст в нём мельче макета: --m = 0.8, на крупных мониторах ещё меньше (не крупнее 0.92 от макета 1:1) */
.nav { --m: calc(.8 * min(1, 1.15 / var(--s))); }
.nav { position: fixed; left: 0; top: 0; width: 100%; height: calc(87px * var(--s)); z-index: 50; color: var(--milk); pointer-events: none; }
/* лёгкое затемнение под шапкой, чтобы меню читалось на светлых кадрах */
.nav::before { content: ""; position: absolute; inset: 0 0 -60% 0; background: linear-gradient(rgba(10,5,2,.38), rgba(10,5,2,0)); opacity: 0; transition: opacity .6s ease; }
.nav.is-scrolled::before { opacity: 1; }
.nav__logo { position: absolute; left: 40px; top: 23px; width: 241px; height: 41px; transform: scale(var(--m)); transform-origin: 0 50%; }
.nav__mark { position: absolute; left: 0; top: 0; width: 53px; height: 41px; }
.nav__mark svg { width: 100%; height: 100%; display: block; }
.nav__title, .nav__sub { position: absolute; font-family: Montserrat, sans-serif; line-height: 1; white-space: nowrap; transform: translateY(-50%); }
.nav__title { left: 71px; top: 13px; font-weight: 500; font-size: 16px; letter-spacing: 3px; }
.nav__sub { left: 91px; top: 28px; font-size: 13px; letter-spacing: 2.5px; }
.nav__item { position: absolute; top: 30px; font-family: Inter, sans-serif; font-size: calc(20px * var(--m)); line-height: 24.2px; white-space: nowrap; }
/* три пункта по сетке макета: «О нас» от линии 531 (прижата влево), «Контакты» до линии 871 (прижата вправо) */
.nav__menu {
  position: absolute; left: calc(531px * var(--s)); right: calc(529px * var(--s)); top: calc(30px * var(--s));
  display: flex; justify-content: space-between; pointer-events: auto;
}
.nav__menu .nav__item { position: relative; top: 0; font-size: calc(20px * var(--s) * var(--m)); line-height: calc(24.2px * var(--s)); }
.nav__item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease-out);
}
.nav__book { font-weight: 500; }
.nav__item:hover::after, .nav__item.is-active::after { transform: scaleX(1); transform-origin: left; }

/* ───────── секции ───────── */
.sec { position: relative; height: var(--vh); overflow: hidden; background: #1a0d07; }
/* прокрутка «примагничивается» к началу секции, как у слайдов (и на компьютере, и на телефоне); подвал — к низу */
html { scroll-snap-type: y mandatory; }
.sec { scroll-snap-align: start; scroll-snap-stop: always; }
.foot { scroll-snap-align: end; }
/* фон на весь экран; чуть выше секции — для мягкого параллакса при прокрутке (app.js двигает --py) */
.sec__bg { position: absolute; left: 0; right: 0; top: -4%; height: 108%; translate: 0 var(--py, 0px); will-change: translate; }
.sec__bg picture { display: block; width: 100%; height: 100%; }
.sec__bg img, .sec__bg video { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); display: block; }

/* ───────── анимации появления (секция получает .is-on, когда въехала в экран) ───────── */
[data-anim] { --d: 0s; }
.js [data-anim="up"] { opacity: 0; translate: 0 16px; transition: opacity 1.6s var(--soft) calc(var(--d) + .2s), translate 1.8s var(--soft) calc(var(--d) + .2s); }
.js [data-anim="line"] { opacity: 0; translate: 30px 0; transition: opacity 1.4s var(--soft) calc(var(--d) + .2s), translate 1.6s var(--soft) calc(var(--d) + .2s); }
.is-on [data-anim="up"], .is-on [data-anim="line"] { opacity: 1; translate: 0 0; }
/* фон при первом появлении медленно «оседает» из лёгкого приближения */
.js .sec__bg > * { scale: 1.06; transition: scale 3s var(--soft); }
.sec.is-on .sec__bg > * { scale: 1; }

.js [data-anim="letters"] .ch {
  display: inline-block; opacity: 0; filter: blur(8px); translate: 0 .3em;
  transition: opacity 1.2s ease, filter 1.4s ease, translate 1.4s var(--soft);
  transition-delay: calc(var(--i) * 60ms + .4s);
}
.is-on [data-anim="letters"] .ch { opacity: 1; filter: blur(0); translate: 0 0; }
/* на телефоне буквы появляются без размытия: blur на каждой букве поверх видео тормозил загрузку (~0,5 с) */
@media (pointer: coarse) { .js [data-anim="letters"] .ch { filter: none; } }

/* ───────── 1. хиро ───────── */
.hero__title {
  left: 0; top: 362px; width: 1400px; height: 35px; line-height: 35px;
  font-family: var(--sans); font-weight: 300; font-size: 48px; letter-spacing: 2.88px;   /* в макете 58px — уменьшили */
  color: var(--hero-title); white-space: nowrap; text-align: center;
}
.hero__corner {
  top: 712px; font-family: var(--sans); font-size: 15px; line-height: 22px; letter-spacing: 3.3px;   /* в макете 18px */
  text-transform: uppercase; color: var(--cream); white-space: nowrap;
}
.hero__corner--r { right: 40px; text-align: right; }
.hero__line { top: 767px; width: 60px; height: 1px; background: #fff; opacity: .9; }
.js .hero__line { transform: scaleX(0); transition: transform 1.4s var(--soft) 1.1s; }
.is-on .hero__line { transform: scaleX(1); }
/* «большой ассортимент» ведёт к блоку «чай», «большой выбор» — к «посуде»: при наведении линия вытягивается */
.hero__line { transition: transform 1.4s var(--soft) 1.1s, width .6s var(--ease-out); }
.art:has(.hero__corner:hover) .hero__line { width: 120px; }
.art:has(.hero__corner--r:hover) .hero__line { left: 1240px !important; }

/* ───────── блок «заголовок / линия / текст» (о нас, чайная, чай, посуда) ───────── */
.blk { width: 408px; font-family: var(--mono); font-size: 16px; line-height: 20.2px; letter-spacing: 2.88px; color: var(--milk); }
.blk__title { position: relative; left: 2px; text-transform: uppercase; }
.blk__line { display: block; margin: 10px 0 20px; height: .5px; background: var(--milk); opacity: .85; }
.js .blk__line { transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--soft) .35s; }
.is-on .blk__line { transform: scaleX(1); }
.blk__text { width: var(--w); }

/* ───────── 6. соцсети ───────── */
.links { list-style: none; left: 0; top: 0; }
.links li { position: absolute; left: 960px; width: 400px; height: 34px; border-bottom: 1px solid var(--milk); }
.links a {
  position: absolute; inset: 0; padding-left: 10px;
  font-family: var(--sans); font-size: 18px; line-height: 28.44px; letter-spacing: 4.5px; color: var(--milk);
  transition: padding-left .6s var(--ease-out);
}
.links a::after {
  content: ""; position: absolute; right: 10px; top: 10px; width: 8px; height: 8px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor; rotate: 45deg;
  opacity: 0; translate: -8px 0; transition: .6s var(--ease-out);
}
.links a:hover { padding-left: 22px; }
.links a:hover::after { opacity: 1; translate: 0 0; }
.links__note { left: 960px; top: 765px; width: 400px; font: 13px/1.5 Inter, sans-serif; color: var(--milk); opacity: .8; }

/* ───────── 7. контакты ───────── */
.info__item, .info__route { top: 390px; font-family: Inter, sans-serif; font-size: 14px; line-height: 25px; color: var(--milk); white-space: nowrap; }
.info__item b { display: block; font-weight: 500; font-size: 15px; }
.info__route { left: 1190px; width: 173px; font-weight: 500; font-size: 15px; }
.arrow { position: absolute; left: 158px; top: 13px; width: 15px; height: 1px; background: currentColor; transition: width .35s var(--ease-out); }
.arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; rotate: 45deg; }
.info__route:hover .arrow { width: 24px; }

/* ───────── подвал ───────── */
.foot { position: relative; height: calc(184px * var(--s)); background: var(--foot); color: var(--foot-ink); overflow: hidden; }
.foot__line { position: absolute; left: calc(40px * var(--s)); right: calc(40px * var(--s)); top: calc(40px * var(--s)); height: 1px; background: var(--foot-line); }
.foot__t { position: absolute; font-family: Montserrat, sans-serif; font-size: 12px; line-height: 14.63px; white-space: nowrap; }
.foot__doc { line-height: 18px; }
.foot a:hover { text-decoration: underline; }

.foot__btn { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-align: left; }
.foot__btn:hover { text-decoration: underline; }

/* ───────── уведомление о cookie: компактная карточка в левом нижнем углу ───────── */
.cc {
  position: fixed; left: 20px; bottom: 20px; z-index: 90; width: min(340px, calc(100vw - 40px));
  padding: 16px 18px 14px; background: rgba(18, 10, 6, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: .5px solid rgba(255, 252, 243, .25); color: var(--milk); font: 12px/1.5 Inter, sans-serif;
  transition: opacity .6s var(--soft), translate .6s var(--soft);
}
.cc[hidden] { display: none; }
.cc:not(.is-in) { opacity: 0; translate: 0 10px; }
.cc a { text-decoration: underline; text-underline-offset: 3px; }
.cc__text { padding-right: 18px; }
.cc__close { position: absolute; right: 8px; top: 8px; width: 24px; height: 24px; border: 0; background: none; cursor: pointer; opacity: .7; transition: opacity .3s; }
.cc__close::before, .cc__close::after { content: ""; position: absolute; left: 6px; top: 11.5px; width: 12px; height: 1px; background: var(--milk); rotate: 45deg; }
.cc__close::after { rotate: -45deg; }
.cc__close:hover { opacity: 1; }
.cc__prefs { margin-top: 10px; border-top: .5px solid rgba(255, 252, 243, .3); }
.cc__row { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: .5px solid rgba(255, 252, 243, .3); cursor: pointer; }
.cc__row b { display: block; font-weight: 500; }
.cc__row span { opacity: .85; }
/* переключатель */
.cc__row input { appearance: none; flex: none; position: relative; width: 28px; height: 15px; margin-top: 2px; border: 1px solid var(--milk); border-radius: 8px; cursor: pointer; transition: background .3s; }
.cc__row input::after { content: ""; position: absolute; left: 2px; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--milk); transition: translate .3s var(--ease-out); }
.cc__row input:checked { background: rgba(255, 252, 243, .25); }
.cc__row input:checked::after { translate: 13px 0; }
.cc__row input:disabled { opacity: .5; cursor: default; }
.cc__btns { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-top: 12px; }
.cc__btn { padding: 6px 12px; border: .5px solid var(--milk); background: none; color: var(--milk); font: inherit; cursor: pointer; transition: background .3s, color .3s; }
.cc__btn:hover { background: rgba(255, 252, 243, .12); }
.cc__btn--main { background: var(--milk); color: #1a0d07; }
.cc__btn--main:hover { background: #fff; }
.cc__btn--link { border-color: transparent; padding-left: 2px; padding-right: 2px; text-decoration: underline; text-underline-offset: 3px; }
.cc__btn[hidden] { display: none; }
/* значок свёрнутого окна */
.cc-mini {
  position: fixed; left: 14px; bottom: 12px; z-index: 90; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--milk);
  background: rgba(18, 10, 6, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: .5px solid rgba(255, 252, 243, .35); transition: opacity .5s var(--soft), scale .5s var(--soft), background .3s;
}
.cc-mini[hidden] { display: none; }
.cc-mini:not(.is-in) { opacity: 0; scale: .6; }
.cc-mini:hover { background: rgba(40, 22, 12, .92); }
.cc-mini:focus-visible, .cc button:focus-visible, .cc input:focus-visible { outline: 1px solid var(--milk); outline-offset: 3px; }

/* ───────── заставка ───────── */
.loader { display: none; }
.js .loader { display: block; position: fixed; inset: 0; z-index: 100; background: #f9ebd1; transition: transform 1.2s cubic-bezier(.77, 0, .18, 1); }
.loader__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.loader.is-done { transform: translateY(-100%); }
.loader.is-gone { display: none; }
body.is-loading { overflow: hidden; }

/* ───────── телефон и планшет вертикально — мобильный макет Figma «мобил сайт» (31.10) ─────────
   Экран макета 390×844, поля 20. Секция = экран; вертикальные отступы взяты из макета в долях высоты
   экрана (calc(var(--vh) * Y / 844)), поэтому на коротком экране (Safari с панелями) пропорции сохраняются.
   Фоны для телефона свои: вертикальные видео (*-m.mp4) и кадры фото (*-m.webp) по кадрированию макета. */
.nav__burger, .mmenu { display: none; }
.only-m { display: none !important; }
/* телефон/планшет: секция = экран со спрятанными панелями браузера (не прыгает и не короче экрана при прокрутке) */
@media (pointer: coarse) { @supports (height: 100lvh) { :root { --vh: 100lvh; } } }

@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
  :root { --g: 20px; --y: calc(var(--vh) / 844); }       /* --y — 1 px макета по высоте */
  .only-d { display: none !important; }
  .only-m { display: block !important; }

  /* шапка: знак слона слева, две линии меню справа */
  .nav { height: 72px; }
  .nav .art { transform: none; }
  .nav__logo { left: var(--g); top: 20px; width: 34px; height: 26px; transform: none; }
  .nav__mark { width: 34px; height: 26px; }
  .nav__title, .nav__sub, .nav__menu, .nav__book { display: none; }
  .nav__burger {
    display: block; position: absolute; right: calc(var(--g) - 10px); top: 16px; width: 60px; height: 40px;
    border: 0; background: none; cursor: pointer; pointer-events: auto; color: var(--milk);
  }
  .nav__burger i { position: absolute; left: 22px; right: 10px; height: .75px; background: currentColor; }   /* 28 px, тонкие */
  .nav__burger i:first-child { top: 17px; } .nav__burger i:last-child { top: 24px; }

  /* меню на весь экран — фрейм «открытое меню» */
  .mmenu {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 95; padding: 130px var(--g) 32px;
    background: #1e0800; color: #fff; font-family: Inter, sans-serif; transition: opacity .5s var(--soft);
  }
  .mmenu[hidden] { display: none; }
  .mmenu:not(.is-in) { opacity: 0; }
  .mmenu__mark { position: absolute; left: var(--g); top: 20px; width: 34px; height: 26px; }
  .mmenu__mark svg { width: 100%; height: 100%; display: block; }
  .mmenu__close { position: absolute; right: calc(var(--g) - 12px); top: 14px; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; }
  .mmenu__close::before, .mmenu__close::after { content: ""; position: absolute; left: 11px; top: 22px; width: 22px; height: .75px; background: #fff; rotate: 45deg; }
  .mmenu__close::after { rotate: -45deg; }
  .mmenu__list { display: flex; flex-direction: column; }
  .mmenu__list a { padding: 18px 0 12px; border-bottom: .5px solid rgba(255, 255, 255, .45); font: 300 20px/28px Inter, sans-serif; letter-spacing: 1.2px; }
  .mmenu__list a:first-child { padding-top: 0; }
  .mmenu__book { display: grid; place-items: center; height: 48px; margin-top: 36px; border: .5px solid rgba(255, 255, 255, .7); font: 300 15px/20px Inter, sans-serif; letter-spacing: 1.2px; }
  .mmenu__info { display: grid; grid-template-columns: 149px auto; row-gap: 5px; margin-top: auto; font: 300 12px/20.6px Inter, sans-serif; letter-spacing: .72px; }

  /* секции: фон на весь экран, содержимое с отступом сверху по макету */
  /* В новом Safari и Telegram страница видна и под плавающей нижней панелью, а 100lvh этой полосы не учитывает —
     внизу выглядывала следующая секция. Секция на 100 px выше экрана (отступы текста считаются от --vh, не меняются),
     а прокрутка «примагничивается» к началу секции (правило выше, общее с компьютером). */
  .sec { height: calc(var(--vh) + 100px); display: flex; flex-direction: column; padding: var(--top, 0) var(--g) 0; }
  #hero .art[data-x="c"] { margin-top: -50px; }
  .sec__bg img, .sec__bg video { object-position: var(--mpos, var(--pos)); }
  /* затемнение под текстом: у блоков текст в верхней трети — темнее сверху, у соцсетей и контактов — снизу */
  .sec::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(10, 5, 2, .55), rgba(10, 5, 2, .3) 45%, rgba(10, 5, 2, .08) 75%); pointer-events: none; }
  #hero::after { background: rgba(10, 5, 2, .15); }
  #social::after, #info::after { background: linear-gradient(rgba(10, 5, 2, .08) 30%, rgba(10, 5, 2, .5) 80%); }
  .blk, .links a, .info__item, .info__route, .hero__title { text-shadow: 0 1px 14px rgba(10, 5, 2, .6); }
  .sec .art { position: relative; z-index: 1; left: auto; top: auto; width: auto; height: auto; transform: none; }
  .sec .art > * { position: relative !important; left: auto !important; top: auto !important; right: auto !important; }
  /* текст всех четырёх блоков на одной высоте — как у «тот самый слон» (213 в макете) */
  #about, #tea, #leaf, #dishes { --top: calc(var(--y) * 213); }
  #social { --top: calc(var(--y) * 225); }        /* в макете 447: группа выше, вся на светло-коричневом фоне над краем пиалы */
  #info { justify-content: center; padding-bottom: 100px; }   /* контакты по центру видимого экрана (100 — запас секции ниже экрана), пиала под ними */

  /* хиро: только заголовок по центру, в две строки (углы «большой ассортимент / выбор» в мобильном макете убраны) */
  #hero .art[data-x="l"], #hero .art[data-x="r"] { display: none; }
  #hero .art[data-x="c"] { position: absolute; left: var(--g); right: var(--g); top: 50%; translate: 0 -50%; }
  .hero__title { width: auto; height: auto; font-size: clamp(28px, 9vw, 38px); line-height: 1.3; letter-spacing: .06em; white-space: nowrap; }   /* одна строка */

  /* блоки «заголовок / линия / текст» — как на компьютере, на всю ширину между полями */
  /* моноширинный шрифт с разрядкой макета (2,88) на узком экране рвёт строки — разрядка и кегль чуть меньше */
  .blk { width: 100%; font-size: 15px; line-height: 1.5; letter-spacing: 1.4px; }
  .blk__title { letter-spacing: 2.4px; }
  .blk__title { left: 0; }
  .blk__text { width: auto; }

  /* соцсети: шаг строк 75 px макета */
  .links li { position: relative; left: auto; top: auto !important; width: 100%; height: 44px; margin-bottom: calc(var(--y) * 12); }
  .links li { border-bottom: .5px solid rgba(255, 252, 243, .85); }   /* как линия под заголовками блоков */
  .links a { padding-left: 0; padding-top: 12px; font-size: 16px; letter-spacing: 3px; }
  .links a::after { display: none; }
  .links__note { width: auto; margin-top: 14px; font-size: 12px; }
  .links a:hover { padding-left: 0; }

  /* контакты: столбиком, шаг 81 px макета */
  #info .art + .art { margin-top: calc(var(--y) * 31); }
  .art > .info__item + .info__item { margin-top: calc(var(--y) * 31); }
  .info__item, .info__route { white-space: normal; }
  .info__route { width: auto; display: inline-block; padding-right: 30px; }
  .arrow { left: auto; right: 0; }

  /* подвал — фрейм «подвал» 390×425: документы, затем реквизиты (ИНН и ОГРН в одну строку) */
  .foot { height: auto; display: grid; grid-template-columns: 133px 1fr; padding: 151px var(--g) 62px; }
  .foot__line { display: none; }
  .foot .art { display: contents; }
  .foot .art > * { position: static !important; grid-column: 1 / -1; white-space: normal; text-align: left; }
  .foot__t { margin-bottom: 8px; line-height: 15px; }
  .foot__doc { order: 1; margin-bottom: 20px; line-height: 18px; justify-self: start; }
  .foot [href="/consent/"] { order: 2; }
  .foot__btn { order: 3; margin-bottom: 34px; }
  .foot .art[data-x="l"] > * { order: 4; }
  .foot .art[data-x="l"] > :nth-child(2) { grid-column: 1; }
  .foot .art[data-x="l"] > :nth-child(3) { grid-column: 2; }
  .foot .art[data-x="l"] > :last-child { margin-bottom: 0; }

  /* окно cookie — на всю ширину внизу */
  .cc { left: 12px; right: 12px; bottom: 12px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
}