/* ---- about.html: геройский блок из двух наслаиваемых фото ---- */
/* передний слой (арка) вырезан внутри (альфа-канал) — задний слой (сад)
   виден сквозь проём. Между ними — .gallery-hero__mid со "шторой из букв".
   Маскировать вручную под форму арки не нужно — снаружи проёма её всё равно
   перекрывает непрозрачная часть переднего слоя */
.gallery-hero {
  width: 100%;
}

.gallery-hero__stage {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.gallery-hero__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
  transform-origin: center center;
}

/* киношный долли-зум (эффект "Вертиго"/тромбон-шот): передний план — сама
   арка с фигурой, "объект" — остаётся практически неподвижным (едва
   заметный дрейф, чтобы не резать глаз жёстким стоп-кадром), а задний план
   (сад за аркой) ощутимо и плавно наезжает камерой — это и создаёт саму
   иллюзию долли-зума: субъект стоит на месте, а пространство вокруг него
   "тянется"/наезжает. .gallery-hero__stage режет всё лишнее (overflow:
   hidden), так что сам блок героя остаётся ровно 100vh */
.gallery-hero__back { z-index: 0; animation: heroDollyBack 3.2s cubic-bezier(0.45, 0, 0.2, 1) both; }
.gallery-hero__front { animation: heroDollyFront 3.2s cubic-bezier(0.45, 0, 0.2, 1) both; }

@keyframes heroDollyBack {
  from { transform: scale(0.75); }
  to   { transform: scale(1.3); }
}

@keyframes heroDollyFront {
  from { transform: scale(1.02); }
  to   { transform: scale(1); }
}

.gallery-hero__mid {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* свет + туман ЗА шторой (между задним фото и буквами) — мягкое тёплое
   (в тёмной теме — холодное) свечение у "устья" сада на заднем фото плюс
   лёгкая горизонтальная дымка, создающая ощущение глубины. Медленно и
   почти незаметно дышит — не отвлекает от букв поверх него */
.gallery-hero__backlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  --glow: 255, 214, 150;
  --fog: 255, 244, 224;
  background:
    radial-gradient(circle at 50% 40%, rgba(var(--glow), 0.35) 0%, rgba(var(--glow), 0) 38%),
    linear-gradient(to top, rgba(var(--fog), 0.32) 0%, rgba(var(--fog), 0.1) 30%, rgba(var(--fog), 0) 55%);
  animation: heroBacklightBreathe 9s ease-in-out infinite;
}
[data-theme="dark"] .gallery-hero__backlight {
  --glow: 140, 175, 255;
  --fog: 150, 180, 255;
}
@keyframes heroBacklightBreathe {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

/* туман с пыльцой НА переднем плане — поверх всего, во весь экран (не
   вписан в форму арки специально: как будто пыль/дымка перед самой
   камерой, а не внутри сцены). Пылинки генерирует gallery-hero.js */
.gallery-hero__frontfog {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 45%);
  mix-blend-mode: screen;
}
[data-theme="dark"] .gallery-hero__frontfog {
  background: linear-gradient(to top, rgba(190, 210, 255, 0.14) 0%, rgba(190, 210, 255, 0) 45%);
}

.hero-pollen {
  position: absolute;
  bottom: -4%;
  left: var(--x, 50%);
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 220, 0.95) 0%, rgba(255, 244, 220, 0) 75%);
  opacity: 0;
  filter: blur(0.3px);
  animation: heroPollenRise var(--dur, 14s) linear infinite;
  animation-delay: var(--delay, 0s);
}
[data-theme="dark"] .hero-pollen {
  background: radial-gradient(circle, rgba(210, 225, 255, 0.95) 0%, rgba(210, 225, 255, 0) 75%);
}

@keyframes heroPollenRise {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  12%  { opacity: 0.85; }
  50%  { transform: translate(var(--drift, 20px), -55vh) scale(1); }
  88%  { opacity: 0.5; }
  100% { transform: translate(calc(var(--drift, 20px) * 2), -108vh) scale(0.5); opacity: 0; }
}

/* штора из букв: рендерится на canvas (gallery-hero.js) как пучок свисающих
   "верёвок" из символов — пружинная цепочка узлов на каждой верёвке даёт
   плавный волновой изгиб (не жёсткие сегменты), плюс отталкивание соседних
   верёвок друг от друга и лёгкое фоновое покачивание "от ветра" без мыши.
   Свечение — один drop-shadow на весь canvas (а не тень на каждую букву);
   двойной shadow на такой плотности текста ощутимо грузил кадр, оставили
   один, чуть шире радиусом */
.hero-curtain-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.75));
}

.gallery-hero__front { z-index: 2; }

.gallery-hero__back--dark,
.gallery-hero__front--dark {
  opacity: 0;
}

[data-theme="dark"] .gallery-hero__back--light,
[data-theme="dark"] .gallery-hero__front--light {
  opacity: 0;
}

[data-theme="dark"] .gallery-hero__back--dark,
[data-theme="dark"] .gallery-hero__front--dark {
  opacity: 1;
}

/* ---- about.html: сцена закреплена, поверх неё выезжает обычный фон с футером ---- */
.about-page .gallery-hero {
  position: fixed;
  inset: 0;
  z-index: 0;
  height: 100vh;
}
.about-page .gallery-hero__stage {
  transition: filter 0.2s linear;
  filter: brightness(calc(1 - var(--cover, 0) * 0.5));
}

/* первый экран: поверх закреплённой сцены — три картины с тем же эффектом, что на главной (наклон, блик,
   чёрно-белые → цветные при наведении), «Scroll» и крупный заголовок. Едет вверх вместе со страницей,
   открывая сцену целиком, потом выезжает панель с фоном. Размеры картин и поля — как на главной (css/style.css) */
.about-first {
  position: relative;
  z-index: 1;
  height: 100vh;
  pointer-events: none;
}
.about-first .showcase__photo { pointer-events: auto; }
.about-first__photo {
  position: absolute;
  left: var(--page-gutter);
  top: max(150px, 29.5vh);
}
.about-first__right {
  position: absolute;
  right: var(--page-gutter);
  top: max(150px, 29.5vh);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
}
.about-first__title {
  position: absolute;
  left: calc(var(--page-gutter) + 0.015em); /* видимый край «A» — на линии меню и левой картины */
  bottom: 8.45vh;
  margin: 0;
  font-family: "Cormorant Garamond", "Baskerville Display PT", "Baskerville Old Face", Baskerville, Georgia, serif;
  font-weight: 400;
  font-size: clamp(110px, min(12.85vw, 22.85vh), 260px); /* по меньшей стороне: в низком окне заголовок не наезжает на картины */
  line-height: 0.73;
  letter-spacing: -0.049em;
  color: var(--color-text);
}
.about-first__title em { display: block; font-style: italic; }

/* панель с обычным фоном: фон — sticky-слой высотой в экран. Пока панель едет вверх, фон едет с ней;
   как только верх панели достиг верха окна, слой залипает и остаётся неподвижным, а футер идёт по нему */
.about-cover {
  position: relative;
  z-index: 2;
}
.about-cover__bg {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.about-cover__body {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.about-cover__body .footer { padding-top: 150px; }

/* ---- светлая тема: сцена яркая и синяя, поэтому всё, что лежит поверх неё, остаётся светлым ----
   Первый экран и шапка (пока над ними сцена) используют белый вместо цвета темы; сверху и снизу сцену
   чуть затеняет вуаль, чтобы белый текст читался на песочной кладке. Когда панель с фоном доезжает до
   шапки, класс .about-over-hero снимается (js/about-hero.js) и шапка становится такой же, как на других страницах */
.about-first { --color-text: #fff; }
body.about-over-hero .navbar { --color-text: #fff; }
:root:not([data-theme="dark"]) .gallery-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(6, 10, 26, 0.6) 0%, rgba(6, 10, 26, 0.18) 16%, transparent 28%),
    linear-gradient(to top, rgba(6, 10, 26, 0.52) 0%, rgba(6, 10, 26, 0.16) 34%, transparent 52%);
}
:root:not([data-theme="dark"]) body.about-over-hero .navbar::before {
  opacity: 1;
  background: linear-gradient(to bottom, rgba(6, 10, 26, 0.55) 0%, rgba(6, 10, 26, 0.22) 55%, rgba(6, 10, 26, 0) 100%);
}