/* ═══════════════════════════════════════════════════════
   ТЕРАПИЯ КРАСОТЫ · ГЕЙТ ВХОДА (index.html)
   Только стили гейта. Токены, шрифты и утилиты — из main.css.
   Ничего из :root и существующих классов не переопределяется,
   кроме точечных правил, ограниченных областью .gate.
   ═══════════════════════════════════════════════════════ */

body.gate-page{background:var(--coal);color:var(--bone);}

/* ── Каркас ── */
.gate{
  --gate-foot:46px;
  position:relative;
  display:flex;align-items:stretch;
  min-height:100svh;
  padding-bottom:var(--gate-foot);   /* полоса контактов живёт в этом отступе */
  background:var(--coal);
  overflow:hidden;
}

/* ── Панель направления ── */
.gate__pane{
  position:relative;
  flex:1 1 0;min-width:0;
  display:flex;align-items:flex-end;
  overflow:hidden;
  color:var(--bone);
  transition:filter .7s var(--ease);
  animation:gateRise .55s var(--ease) both;
}
.gate__pane--cosmo{animation-delay:0s;}
.gate__pane--dent{animation-delay:.12s;}

/* Затемнение поверх фото. Референс цветокора — nymphaicosmetics.com: скрим там
   не серый, он сам несёт цвет. Поэтому у половин разные вуали: косметология —
   тёплая карамель, стоматология — прохладный минерал. Так гейт с первого кадра
   читается как два разных мира, а не как одно выцветшее полотно. */
.gate__pane::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(24,21,18,.74) 0%,rgba(24,21,18,.24) 55%,rgba(24,21,18,.55) 100%);
}
.gate__pane--cosmo::after{
  background:
    linear-gradient(140deg,rgba(167,92,63,.26) 0%,rgba(120,100,75,.10) 52%,rgba(120,100,75,0) 78%),
    linear-gradient(to top,rgba(38,23,14,.78) 0%,rgba(52,31,19,.20) 55%,rgba(44,26,16,.52) 100%);
}
.gate__pane--dent::after{
  background:
    linear-gradient(220deg,rgba(90,132,120,.20) 0%,rgba(90,132,120,0) 62%),
    linear-gradient(to top,rgba(17,24,22,.76) 0%,rgba(23,33,30,.22) 55%,rgba(19,28,25,.52) 100%);
}

/* ── Фото ── */
.gate__media{position:absolute;inset:0;overflow:hidden;}
.gate__media img,
.gate__clip{
  width:100%;height:100%;object-fit:cover;
  /* Одна ручка приближения на панель: снимки сняты с разной дистанции,
     и без неё лицо слева выходило заметно крупнее правого. */
  --pane-zoom:1;
  /* Вторая ручка — горизонтальный сдвиг кадра. object-position по X здесь
     бессилен: снимки вертикальные, cover всегда растягивает их ровно по
     ширине панели, горизонтального запаса нет вообще. Запас появляется
     только от приближения, и двигать кадр приходится трансформом.
     Проценты, а не пиксели: запас равен 50 % * (zoom - 1) от ширины
     панели, поэтому в процентах сдвиг безопасен на любом экране. */
  --pane-shift-x:0%;
  /* Третья ручка — зеркало по горизонтали. Нужна там, где лицо в исходнике
     стоит слева от центра, а по макету должно стоять справа: приближением
     его туда не увести, зум только укрупняет. Отражение переносит лицо
     симметрично, не трогая масштаб. Фото и ролик отражаются вместе. */
  --pane-flip:1;
  transform:translateX(var(--pane-shift-x)) scale(calc(var(--pane-zoom) * var(--pane-flip)),var(--pane-zoom));
  transition:transform 1.2s var(--ease),filter .7s var(--ease);
}
/* Цвет вместо блёклости. Раньше на обе половины падал общий saturate(.82) —
   он и съедал цвет. Теперь грейд свой на каждую сторону: тёплый и плотный
   на косметологии, чистый и чуть прохладный на стоматологии. */
.gate__pane--cosmo .gate__media img,
.gate__pane--cosmo .gate__clip{filter:saturate(1.18) contrast(1.07) brightness(1.02);}
.gate__pane--dent .gate__media img,
.gate__pane--dent .gate__clip{filter:saturate(1.04) contrast(1.05);}
/* Ожившее фото: петля лежит ровно поверх снимка и её первый кадр совпадает с ним,
   поэтому подмена не заметна. Проявляем только когда браузер реально заиграл —
   если ролик не догрузился или движение выключено, на экране остаётся фото. */
.gate__clip{
  position:absolute;inset:0;display:block;pointer-events:none;
  opacity:0;transition:opacity 1s ease,transform 1.2s var(--ease);
}
/* появление быстрее ухода: по наведению улыбка должна начаться сразу,
   а гаснуть — мягко, растворяясь обратно в фотографию */
.gate__clip.is-playing{opacity:1;transition-duration:.45s;}
/* лицо в правой части кадра */
.gate__pane--cosmo .gate__media img,
.gate__pane--cosmo .gate__clip{object-position:62% 34%;}
/* 28.08: справа лицо было мельче левого — портрет снят с большей дистанции.
   Приближаем (--pane-zoom) и подбираем высоту кадра так, чтобы глаза и губы
   встали примерно на те же высоты, что у косметологии.
   31.08: было 55% — при таком кадре верхний край резал глаза, лицо упиралось
   в потолок панели. Опущено до 28%, затем приподнято до 32% — чтобы между
   улыбкой и заголовком осталось больше воздуха. 32% — верхняя граница, при
   которой брови ещё целиком в кадре: на 36% край снова начинает их резать.
   Старая оговорка «при 30% рот уезжал под заголовок» больше не действует:
   панели давно не разъезжаются под курсором (см. блок наведения ниже),
   на наведении меняется только масштаб 1.03 от центра, а он кадр не сдвигает.
   Меньше 22% в кадр лезет макушка и волосы — это нижняя граница. */
/* 14.09: 1.24 давало слишком крупный план — лицо упиралось в края панели.
   Отдалено до 1.10: кадр стал общее, в него вернулись плечи, при этом
   лицо всё ещё не мельче левой панели. */
.gate__pane--dent .gate__media img,
.gate__pane--dent .gate__clip{--pane-zoom:1.10;object-position:50% 32%;}

/* ── Текст на панели ── */
/* В панели осталось одно название направления: подпись и кнопка «Записаться»
   убраны 29.08 — на входе не нужен ни пересказ, ни второе действие, вся
   панель и так ведёт на страницу направления.
   position:static — намеренно: растянутая ссылка заголовка считает inset:0
   от .gate__pane, поэтому кликабельна вся карточка, а не только строка.
   Над скримом блок держится z-index как флекс-элемент, позиция не нужна. */
.gate__in{position:static;z-index:2;width:100%;padding:clamp(20px,3vw,44px);}
.gate__title{
  font-family:var(--font-display);
  font-weight:300;letter-spacing:.03em;
  font-size:clamp(34px,6.2vh,72px);line-height:.98;text-transform:uppercase;margin:0;
}
/* Заголовок — ссылка, растянутая на всю панель: кликабельна вся карточка. */
.gate__link{display:inline-block;}
.gate__link::after{content:"";position:absolute;inset:0;z-index:1;}
.gate__link:hover{text-decoration:underline;text-underline-offset:.12em;text-decoration-thickness:1px;}
.gate__link:focus-visible{outline:2px solid var(--bone);outline-offset:4px;border-radius:3px;}

/* ── Шов между панелями ──
   z-index выше вордмарка (6): скрим знака живёт в его стекинговом
   контексте, и если панель под курсором расширится и подвинет шов
   влево, волосяная линия всё равно останется одного тона сверху
   донизу — затемнению её не достать. */
.gate__seam{
  flex:0 0 1px;align-self:stretch;position:relative;z-index:7;pointer-events:none;
  background:rgba(245,240,232,.5);
  animation:gateFade .5s .1s var(--ease) both;
}

/* ── Вордмарк сверху ─────────────────────────────────────────────
   Плашки нет. Контраст берёт мягкий скрим на ::before самого знака
   (z-index:-1 внутри его же стекингового контекста), поэтому ни
   титры панелей, ни правый кадр он не задевает. Объём — оттиск на
   буквах: свет по верхней грани, тень по нижней. Без обводки.
   Локап собран в колонку: монограмма + вордмарк, подпись третьей
   строкой на оси вордмарка — она попадает в глубокую зону скрима. */
.gate__brand{
  --brand-top:clamp(16px,2.4vw,30px);
  --mk:clamp(44px,3.5vw,52px);       /* диаметр монограммы */
  --mk-gap:clamp(11px,1.1vw,15px);   /* до вордмарка — по ней же ось подписи */
  position:absolute;z-index:6;
  top:var(--brand-top);left:var(--gutter);right:auto;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(6px,.7vw,9px);
  color:var(--bone);pointer-events:none;
  animation:gateFade .5s .18s var(--ease) both;
}

/* Скрим. Одна эллиптическая радиаль с якорем ровно в углу кадра:
   пик лежит на границе экрана, поэтому «вершину холма» увидеть
   негде. Плато держит локап, дальше косинусный спад — производная
   на обоих концах нулевая, края не читается нигде. Живёт под самим
   знаком, за пределы своего блока не выходит. */
.gate__brand::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:calc(-1 * var(--brand-top));left:calc(-1 * var(--gutter));
  /* второй предел держит скрим внутри левой панели на любом окне:
     до шва остаётся зазор, кадр стоматологии затемнение не трогает */
  width:min(clamp(430px,46vw,700px),calc(50vw - 24px));
  height:clamp(300px,40vh,400px);
  background:radial-gradient(farthest-side at 0% 0%,
    rgba(24,21,18,.640)    0%, rgba(24,21,18,.640)   34%,
    rgba(24,21,18,.624) 40.6%, rgba(24,21,18,.579) 47.2%,
    rgba(24,21,18,.508) 53.8%, rgba(24,21,18,.419) 60.4%,
    rgba(24,21,18,.320)   67%, rgba(24,21,18,.221) 73.6%,
    rgba(24,21,18,.132) 80.2%, rgba(24,21,18,.061) 86.8%,
    rgba(24,21,18,.016) 93.4%, rgba(24,21,18,0)     100%);
}

.gate__brand .logo{margin:0;align-items:center;gap:var(--mk-gap);}

/* Монограмма — ровно печать из шапки cosmetology/stomatologia:
   ОДНО волосяное кольцо, внутри пусто, ТК в размер круга
   (13/34 из main.css = .382 диаметра). Второго кольца нет —
   оно делало марку декоративной и мельчило буквы.
   Объём даёт не форма, а свет: блик по верхней грани кольца,
   посадочная тень под ним, оттиск на самих литерах. */
.gate__brand .logo__mark{
  width:var(--mk);height:var(--mk);
  background:none;color:var(--bone);
  border:1px solid rgba(236,230,218,.58);
  font-family:var(--font-display);
  font-size:calc(var(--mk) * .382);
  letter-spacing:.08em;text-indent:.08em;   /* трекинг не уводит пару влево */
  box-shadow:
    inset 0 1px 0 rgba(251,248,243,.13),    /* свет лёг на верхнюю грань кольца */
    0 10px 28px rgba(24,21,18,.40);         /* мягкая посадочная тень */
  text-shadow:
    0 -1px 0 rgba(251,248,243,.15),
    0 1px 0 rgba(24,21,18,.72),
    0 3px 12px rgba(24,21,18,.55);
}

/* Вордмарк: тиснение. Боковых смещений у теней нет — на 1x они
   двоят волосяные штрихи Prata. */
.gate__brand .logo__text{
  font-family:var(--font-display);
  font-size:clamp(15px,1.34vw,20px);
  letter-spacing:.29em;line-height:1.34;
  color:var(--bone);
  text-shadow:
    0 -1px 0 rgba(251,248,243,.13),         /* верхняя грань в свету */
    0 1px 0 rgba(24,21,18,.80),             /* нижняя — в тени: оттиск */
    0 2px 5px rgba(24,21,18,.52),           /* лепка */
    0 12px 30px rgba(24,21,18,.50);         /* отрыв от фотографии */
}
/* rose вместо clay: тот же ряд палитры, но добирает 4.5:1 на светлом
   кадре. Правка заперта в .gate__brand — токен --accent не трогаем,
   иначе поедет body[data-direction="dent"]. */
.gate__brand .logo__text em{color:var(--rose);}

/* 31.08: подпись под вордмарком снята — в локапе остались только
   монограмма и название. Правила её кегля убраны отсюда и из трёх
   медиазапросов ниже, чтобы не тянуть мёртвый код. */

/* Узкий десктоп 761–1024. Панель тут всего 380–512px, и скрим упёрт в
   шов — шире он быть не может. Поэтому ужимается сам локап: он садится
   глубже в то же пятно. Кегль остаётся выше исходных 11/9. */
@media(min-width:761px) and (max-width:1024px){
  .gate__brand{--mk:40px;--mk-gap:11px;}
  .gate__brand .logo__text{font-size:15px;letter-spacing:.24em;}
  /* плато шире: пятно то же, но глубокая зона накрывает весь локап */
  .gate__brand::before{
    background:radial-gradient(farthest-side at 0% 0%,
      rgba(24,21,18,.660)    0%, rgba(24,21,18,.660)   42%,
      rgba(24,21,18,.644) 47.8%, rgba(24,21,18,.597) 53.6%,
      rgba(24,21,18,.524) 59.4%, rgba(24,21,18,.432) 65.2%,
      rgba(24,21,18,.330)   71%, rgba(24,21,18,.228) 76.8%,
      rgba(24,21,18,.136) 82.6%, rgba(24,21,18,.063) 88.4%,
      rgba(24,21,18,.016) 94.2%, rgba(24,21,18,0)     100%);
  }
}

/* ── Контакты снизу ── */
.gate__foot{
  position:absolute;z-index:6;left:0;right:0;bottom:0;height:var(--gate-foot);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 var(--gutter);
  border-top:1px solid rgba(236,230,218,.2);
  background:var(--coal);color:var(--bone);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  animation:gateFade .5s .2s var(--ease) both;
}
.gate__foot span{opacity:.62;}
/* Ссылка на телефон в подвале гейта была высотой 17 px — по WCAG 2.2 (2.5.8)
   отдельно стоящая цель не может быть ниже 24 px. Подвал фиксированной высоты,
   элемент центрируется, поэтому вёрстка не едет. */
.gate__foot a{transition:color .4s;display:inline-flex;align-items:center;min-height:24px;}
.gate__foot a:hover{color:var(--accent);}

/* ── Появление (замена прелоадера, ≤700 мс суммарно) ── */
@keyframes gateRise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes gateFade{from{opacity:0;}to{opacity:1;}}

/* ── Десктоп: отклик на наведение без смены деления ──
   Экран всегда поделён ровно пополам: панели не разъезжаются под курсором,
   заголовки и кнопки стоят на месте. Наведение читается по свету — соседняя
   половина уходит в тень, активная проясняется и фото чуть приближается. */
@media(min-width:761px){
  .gate:has(.gate__pane:hover) .gate__pane:not(:hover):not(:focus-within){
    filter:brightness(.84) saturate(.9);
  }
  .gate__pane:hover,
  .gate__pane:focus-within{filter:none;}
  .gate__pane:hover .gate__media img,
  .gate__pane:hover .gate__clip,
  .gate__pane:focus-within .gate__media img,
  .gate__pane:focus-within .gate__clip{
    transform:translateX(var(--pane-shift-x))
              scale(calc(var(--pane-zoom) * 1.03 * var(--pane-flip)),calc(var(--pane-zoom) * 1.03));}
}

/* фокус с клавиатуры: светлая линия на тёмной подложке — читается на любом фото */
.gate__pane:focus-within{z-index:5;}
.gate__pane:focus-within::after{box-shadow:inset 0 0 0 10px rgba(24,21,18,.62);}

/* ── Мобильный: колонка, обе панели раскрыты ── */
@media(max-width:760px){
  /* Подвал на телефоне переносится на три строки, и иконки соцсетей сделали
     первую строку выше: при 58px нижняя ссылка обрезалась. */
  /* 18.09: в подвал добавилась кнопка версии для слабовидящих, и при
     жёсткой высоте её срезал нижний край экрана. Ставим подвал в поток:
     он берёт столько, сколько нужно содержимому, а кадры делят остаток. */
  .gate{--gate-foot:72px;flex-direction:column;padding-bottom:0;}
  .gate__foot{position:static;height:auto;min-height:var(--gate-foot);}
  .gate__pane{flex:1 1 0;}                       /* два равных полуэкрана */
  .gate__seam{flex:0 0 1px;width:auto;height:1px;align-self:auto;}
  .gate__pane::after{
    background:linear-gradient(to top,rgba(24,21,18,.78) 0%,rgba(24,21,18,.30) 62%,rgba(24,21,18,.58) 100%);
  }
  /* На телефоне видно 67,6% высоты кадра: при 72% полоса начиналась на уровне
     глаз и срезала их краем. 40% ставит рез на лоб — брови и глаза в кадре. */
  .gate__pane--cosmo .gate__media img,
  .gate__pane--cosmo .gate__clip{object-position:62% 40%;}
  /* Стоматология. Лицо МЕНЬШЕ, кадр ПРАВЕЕ и улыбка НЕ под словом
     «Стоматология». Приближением это не свести: горизонтального запаса у
     вертикального снимка нет вовсе, вправо кадр двигает только зум
     (запас = 50% * (zoom − 1)), а зум как раз укрупняет лицо. Поэтому зум
     убран совсем — лицо на четверть мельче прежнего, — а вправо кадр уводит
     зеркало: в исходнике лицо стоит на 42% ширины, отражение ставит его на 58%.

     По вертикали кадр держится за НИЗ панели, а не за процент вылета.
     object-position в процентах отмеряет долю от вылета, а вылет свой на
     каждом телефоне: те же 37,9% на экране 667px опускали улыбку прямо под
     заголовок. calc(100% + 59,48vw − 85px) ставит нижний край зубов ровно
     в 85px над низом панели на любой высоте экрана. 59,48vw — это часть кадра
     ниже зубов (0,399 высоты снимка при соотношении 1200:1789), она растёт
     вместе с шириной панели. min(0px, ...) страхует от щели сверху.

     Запас был 168px, пока под заголовком стояли подпись и кнопка. Их убрали,
     текстовый блок похудел со 156px до 67px — и кадр опустился на те же 83px:
     теперь в панель попадают глаза и брови, а не одна нижняя половина лица.
     Зазор от зубов до верха заголовка: 390x844 — 34px, 430x932 — 30px,
     375x812 — 35px, 375x667 — 35px (на SE глаза тоже в кадре). */
  .gate__pane--dent .gate__media img,
  .gate__pane--dent .gate__clip{
    --pane-zoom:1;--pane-shift-x:0%;--pane-flip:-1;
    object-position:50% min(0px,calc(100% + 59.48vw - 85px));}
  .gate__in{padding:16px var(--gutter) 20px;}
  .gate__title{font-size:clamp(30px,8.2vw,46px);}
  .gate__brand{--brand-top:14px;--mk:36px;--mk-gap:11px;gap:6px;}
  /* высота скрима привязана к панели: он всегда гаснет выше её титров,
     на любой высоте экрана */
  .gate__brand::before{
    width:100vw;
    height:max(120px,min(26svh,calc(50svh - 190px)));
    background:radial-gradient(farthest-side at 0% 0%,
      rgba(24,21,18,.680)    0%, rgba(24,21,18,.680)   36%,
      rgba(24,21,18,.663) 42.4%, rgba(24,21,18,.615) 48.8%,
      rgba(24,21,18,.540) 55.2%, rgba(24,21,18,.445) 61.6%,
      rgba(24,21,18,.340)   68%, rgba(24,21,18,.235) 74.4%,
      rgba(24,21,18,.140) 80.8%, rgba(24,21,18,.065) 87.2%,
      rgba(24,21,18,.017) 93.6%, rgba(24,21,18,0)     100%);
  }
  .gate__brand .logo__mark{font-size:14px;}
  .gate__brand .logo__text{font-size:13.5px;letter-spacing:.24em;line-height:1.3;}
  .gate__foot{
    flex-wrap:wrap;justify-content:center;align-content:center;gap:3px 14px;
    padding:7px var(--gutter);text-align:center;font-size:9px;letter-spacing:.16em;line-height:1.5;
  }
}

/* очень узкие экраны — подпись не должна ломаться на две строки.
   Кегль ниже исходного (11/9) не опускаем: на 1x штрих Prata по фото
   рассыпается раньше, чем это ловит контрастное отношение. */
@media(max-width:340px){
  .gate__brand{--mk:32px;--mk-gap:10px;}
  .gate__brand .logo__mark{font-size:12.5px;}
  .gate__brand .logo__text{font-size:12.5px;letter-spacing:.2em;}
  /* на 320px подпись встаёт под монограмму, а не под вордмарк: ближе к
     углу — глубже в скриме, и локап не лезет на титры панели */
}

/* ── Меньше движения ── */
@media(prefers-reduced-motion:reduce){
  .gate__pane,.gate__seam,.gate__brand,.gate__foot{animation:none;}
  .gate__pane,.gate__media img{transition:none;}
  .gate__pane:hover .gate__media img,
  .gate__pane:focus-within .gate__media img{
    transform:scale(calc(var(--pane-zoom) * var(--pane-flip)),var(--pane-zoom));}
  .gate__clip{display:none;}
  .gate:has(.gate__pane:hover) .gate__pane:not(:hover):not(:focus-within){filter:none;}
}