/* Кириллица для основного шрифта: у Questrial русских букв нет, поэтому они берутся из Manrope — самого близкого по рисунку
   (те же одноэтажные «a» и «g», та же ширина и вес). Для сайта это один шрифт «Questrial». */
@font-face {
  font-family: "Questrial";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  size-adjust: 108%;
  src: url("../fonts/cormorant-garamond-light-italic-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  size-adjust: 108%;
  src: url("../fonts/cormorant-garamond-light-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  size-adjust: 108%;
  src: url("../fonts/cormorant-garamond-light-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  size-adjust: 108%;
  src: url("../fonts/cormorant-garamond-light-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  size-adjust: 108%;
  src: url("../fonts/cormorant-garamond-light-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  size-adjust: 108%;
  src: url("../fonts/cormorant-garamond-light-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Baskerville Display PT";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/baskerville-display-pt.ttf") format("truetype");
}

@font-face {
  font-family: "Questrial";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/questrial-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

#uzbek-text-2:

@font-face {
  font-family: "Questrial";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/questrial-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Questrial";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/questrial-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --page-gutter: 200px; /* боковые поля шапки; по ним же выравнивается экран работы (css/work.css) */
  --color-accent: #9A7F59; /* акцент сайта: светлая тема — бронзовый, тёмная — оранжевый (см. ниже) */
  --color-text: #242424;
  --color-circle-bg: var(--color-accent);
  --color-circle-icon: #fff;
  --color-curtain: #eae2d3;
  --hero-bg: url("../images/hero background light.png");
  --ring-track-hover: transparent;
  --journey-tint: rgba(234, 226, 211, 0.28);
  --journey-shadow: 0 25px 55px rgba(234, 226, 211, 0.75);
  --journey-text-shadow: none;
  --filter-capsule-bg: rgba(0, 0, 0, 0.6);
  --filter-capsule-border: rgba(255, 255, 255, 0.3);
  /* подложка под шапкой при скролле: светлая тема — бежевый свет, тёмная — тёмная тень */
  --nav-fade: linear-gradient(to bottom, rgba(238, 229, 209, 0.96) 0%, rgba(238, 229, 209, 0.78) 45%, rgba(238, 229, 209, 0) 100%);
}

[data-theme="dark"] {
  --color-accent: #ed6f12;
  --color-text: #fff;
  --color-circle-bg: #fff;
  --color-circle-icon: #0d0d0d;
  --color-curtain: #000;
  --hero-bg: url("../images/hero background.png");
  --ring-track-hover: var(--color-text);
  --journey-tint: rgba(0, 0, 0, 0.45);
  --journey-shadow: 0 25px 55px rgba(0, 0, 0, 0.6);
  --journey-text-shadow: 0 6px 30px rgba(0, 0, 0, 0.8);
  --filter-capsule-bg: rgba(0, 0, 0, 0.7);
  --filter-capsule-border: rgba(255, 255, 255, 0.3);
  --journey-title-bg: rgba(0, 0, 0, 0.4);
  --nav-fade: linear-gradient(to bottom, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.62) 45%, rgba(0, 0, 0, 0) 100%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  font-family: "Questrial", sans-serif;
  background-color: var(--color-curtain);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body::-webkit-scrollbar {
  display: none;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--color-accent);
  z-index: 10000;
}

.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero {
  width: 100%;
  min-height: 100vh;
  padding-top: 120px;
  display: flex;
  flex-direction: column;
}

.hero__title {
  color: var(--color-text);
  font-family: "Cormorant Garamond", "Baskerville Display PT", "Baskerville Old Face", Baskerville, Georgia, serif;
  font-weight: 400;
  font-size: 260px;
  line-height: 1;
  letter-spacing: -0.049em;
  text-align: center;
  padding: 0 40px;
  margin-top: 50px;
}

.hero__title em {
  font-style: italic;
}

.gallery-intro {
  width: 100%;
  padding: 160px 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gallery-intro__title {
  color: var(--color-text);
  font-family: "Cormorant Garamond", "Baskerville Display PT", "Baskerville Old Face", Baskerville, Georgia, serif;
  font-weight: 400;
  font-size: 110px;
  line-height: 1;
}

.gallery-intro__title em {
  font-style: italic;
}

.gallery-intro__text {
  margin-top: 32px;
  max-width: 620px;
  color: var(--color-text);
  font-family: "Questrial", sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

.gallery-filters {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.gallery-filters__tabs {
  position: relative;
  display: flex;
  align-items: center;
  /* --bp (js/script.js): в конце сворачивания капсула гаснет, остаётся только оранжевый круг */
  background: color-mix(in srgb, var(--filter-capsule-bg) calc((1 - var(--bp, 0)) * 100%), transparent);
  border: 1px solid color-mix(in srgb, var(--filter-capsule-border) calc((1 - var(--bp, 0)) * 100%), transparent);
  border-radius: 999px;
  padding: 4px;
  overflow: hidden;
}

.gallery-filters__pill {
  position: absolute;
  top: 4px;
  left: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-accent);
  border-radius: 999px;
  color: #fff;
  font-family: "Questrial", sans-serif;
  font-size: 14px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1), width 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
/* подпись и бургер внутри плашки видны только пока вкладки свёрнуты в круг (js/script.js) */
.gallery-filters__pill-label,
.gallery-filters__pill-burger { opacity: 0; }
.gallery-filters__pill-burger { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }

.gallery-filters__tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 44px;
  background: none;
  border: none;
  color: #fff;
  font-family: "Questrial", sans-serif;
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 0 24px;
  cursor: var(--cursor-pointer, pointer);
  white-space: nowrap;
}

.gallery-filters__icon {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-accent);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: var(--cursor-pointer, pointer);
}

/* поиск: круг слева от воронки. По клику вкладки закрываются краем капсулы (тексты не двигаются,
   их перекрывает край), активная плашка уезжает влево поверх соседних текстов, потом её надпись
   становится бургером и она сжимается в круг, а поиск растёт на освободившееся место.
   Все размеры по кадрам считает js/script.js (переменная --sp: 0 — круг, 1 — раскрытый поиск) */
.gallery-filters__search {
  position: relative;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  margin-left: auto;
}

.gallery-filters__search-pill {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  width: 54px;
  height: 54px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--filter-capsule-bg) calc(var(--sp, 0) * 100%), var(--color-accent));
  border-color: color-mix(in srgb, var(--filter-capsule-border) calc(var(--sp, 0) * 100%), transparent);
  overflow: hidden;
}

.gallery-filters__search-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) calc(var(--sp, 0) * 100%), transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: var(--cursor-pointer, pointer);
}

.gallery-filters__search-input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 20px 0 16px;
  border: none;
  outline: none;
  background: none;
  color: #fff;
  font-family: "Questrial", sans-serif;
  font-size: 14px;
  letter-spacing: 0.5px;
  opacity: 0;
  pointer-events: none;
}
.gallery-filters__search-input::placeholder { color: rgba(255, 255, 255, 0.55); }
.gallery-filters__search-input::-webkit-search-cancel-button { display: none; }

/* пока вкладки сворачиваются: плашка поверх текстов, настоящий текст активной вкладки спрятан
   (его место занимает такая же надпись внутри плашки), вкладки не нажимаются */
.gallery-filters.is-collapsing .gallery-filters__pill { z-index: 2; }
.gallery-filters.is-collapsing .gallery-filters__tab { pointer-events: none; }
.gallery-filters.is-collapsing .gallery-filters__tab.is-active { color: transparent; }
.gallery-filters.is-searching .gallery-filters__pill { cursor: var(--cursor-pointer, pointer); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60px 32px;
  padding: 48px 200px 160px;
  text-align: center;
}

.gallery-card {
  position: relative;
  z-index: 1;
  transition: opacity 0.45s cubic-bezier(0.65, 0, 0.35, 1), margin 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.gallery-card.is-hovered {
  z-index: 3;
}

.gallery-grid.has-hover .gallery-card:not(.is-hovered) {
  opacity: 0.6;
}

.gallery-card.row-hover {
  margin: 28px 14px 0;
}

.gallery-card__frame {
  position: relative;
}

/* .gallery-card__photo — фиксированный бокс 320x320, одинаковый у всех
   карточек (не даёт сетке "поехать"), центрирует содержимое. Внутри —
   .gallery-card__stage, который сжимается по реальному размеру картины
   (object-fit: contain своими силами через max-width/max-height + width:
   auto) — вертикальные картины упираются в высоту бокса, горизонтальные —
   в ширину. Стрелки размера — дети stage, поэтому показывают настоящие
   пропорции и масштабируются вместе с картиной при hover, никогда не
   съезжая. Тилт-transform (JS) применяется к .photo, scale при hover —
   к .stage, поэтому они не конфликтуют друг с другом */
.gallery-card__photo {
  position: relative;
  width: 320px;
  height: 320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.gallery-card__photo:hover .showcase__photo-glow {
  opacity: 1;
}

.gallery-card__stage {
  position: relative;
  width: fit-content;
  transform-origin: 50% 100%;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.gallery-card.is-hovered .gallery-card__stage {
  transform: scale(1.05);
}

.gallery-grid.has-hover .gallery-card:not(.is-hovered) .gallery-card__stage {
  transform: scale(0.95);
}

.gallery-card__stage img {
  display: block;
  max-width: 320px;
  max-height: 320px;
  width: auto;
  height: auto;
  transition: filter 0.45s ease;
}

.gallery-grid.has-hover .gallery-card:not(.is-hovered) .gallery-card__stage img {
  filter: grayscale(50%);
}

.gallery-card__dim {
  position: absolute;
  z-index: 2;
  display: flex;
  color: var(--color-text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.gallery-card.is-hovered .gallery-card__dim {
  opacity: 1;
}

.gallery-card__dim--top {
  left: 0;
  right: 0;
  bottom: 100%;
  height: 36px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.gallery-card__dim--top .gallery-card__dim-line {
  width: 100%;
  height: 9px;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.gallery-card__dim--left {
  top: 0;
  bottom: 0;
  right: 100%;
  width: 36px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.gallery-card__dim--left .gallery-card__dim-line {
  width: 9px;
  height: 100%;
  clip-path: inset(50% 0 50% 0);
  transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.gallery-card.is-hovered .gallery-card__dim-line {
  clip-path: inset(0 0 0 0);
}

.gallery-card__dim-label {
  font-family: "Questrial", sans-serif;
  font-size: 11px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.gallery-card__dim--left .gallery-card__dim-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.gallery-card__title {
  margin-top: 24px;
  color: var(--color-text);
  font-family: "Cormorant Garamond", "Baskerville Display PT", "Baskerville Old Face", Baskerville, Georgia, serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
}

.gallery-card__title em {
  font-style: italic;
}

.gallery-card__meta {
  margin-top: 10px;
  color: var(--color-text);
  opacity: 0.55;
  font-family: "Questrial", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.gallery-card__price {
  margin-top: 18px;
  color: var(--color-text);
  font-family: "Questrial", sans-serif;
  font-size: 18px;
  letter-spacing: 0.3px;
}

/* "SHOW MORE" под сеткой на главной — утверждённая капсула с волной и рисующейся
   обводкой (.navbar__contact-group, как CONTACT US в шапке), но в масштабе секции:
   высота 66px, как у круга "Visit Gallery" в начале страницы (в шапке — 44px).
   Анимация та же; меняются только размеры, поэтому высота обводки (SVG rect) и
   сдвиг капсулы на hover (= ширина круга + зазор) переопределены здесь.
   Блок — последний элемент сетки на всю ширину, по центру */
.gallery-more {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding-top: 56px;
}

.gallery-more .navbar__contact-group {
  gap: 16px;
}

.gallery-more .navbar__btn {
  height: 66px;
  padding: 0 52px;
  font-size: 16px;
  letter-spacing: 0.6px;
}

.gallery-more .navbar__btn-ring-track,
.gallery-more .navbar__btn-ring-progress {
  height: 66px;
  rx: 33px;
  ry: 33px;
}

.gallery-more .navbar__arrow,
.gallery-more .navbar__new-arrow {
  width: 66px;
  height: 66px;
}

.gallery-more .navbar__arrow svg,
.gallery-more .navbar__new-arrow svg {
  width: 22px;
  height: 22px;
}

.gallery-more .navbar__contact-group:hover .navbar__btn {
  transform: translateX(82px);
}

.journey-pin {
  position: relative;
  height: 230vh;
}

.journey {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.journey__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 280px);
  grid-template-rows: repeat(3, 280px);
  gap: 18px;
  align-content: center;
  justify-content: center;
  perspective: 1900px;
}

.journey__cell {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  box-shadow: var(--journey-shadow);
  will-change: transform, opacity;
}

.journey__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--journey-tint);
  pointer-events: none;
}

.journey__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.journey__title {
  position: relative;
  z-index: 2;
  color: var(--color-text);
  font-family: "Cormorant Garamond", "Baskerville Display PT", "Baskerville Old Face", Baskerville, Georgia, serif;
  font-weight: 400;
  font-size: 180px;
  line-height: 1.15;
  text-align: center;
  text-shadow: var(--journey-text-shadow);
}

.journey__title em {
  font-style: italic;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 32px var(--page-gutter);
}

/* Подложка шапки: когда страница прокручена (.is-scrolled ставит js/script.js), под шапкой
   проявляется мягкий бежевый свет (светлая тема) или тёмная тень (тёмная) — карточки и
   заголовки, проезжающие под шапкой, не сливаются с её кнопками. Без размытия. Края
   плавно растворяются маской, подложка заходит ниже шапки на 36px и не ловит клики */
.navbar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 56px);
  z-index: -1;
  pointer-events: none;
  background: var(--nav-fade);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.navbar.is-scrolled::before {
  opacity: 1;
}

.navbar__cta {
  justify-self: end;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
}

.navbar__links a {
  position: relative;
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  transition: color 0.35s ease;
}

/* наведение — как в футере: цвет акцента и линия, выезжающая слева; у активной страницы линия всегда на месте */
.navbar__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.navbar__links a:hover,
.navbar__links a[aria-current="page"] { color: var(--color-accent); }
.navbar__links a:hover::after,
.navbar__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.navbar__logo img {
  height: 76px;
  display: block;
}

.navbar__cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.navbar__contact-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.navbar__btn {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.5px;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), color 0.3s ease;
}

.navbar__contact-group:hover .navbar__btn {
  transform: translateX(56px);
}

.navbar__contact-group.is-filling .navbar__btn {
  color: #fff;
}

.navbar__btn-text {
  position: relative;
  z-index: 1;
}

.navbar__btn-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.navbar__btn-wave-path {
  fill: var(--color-accent);
}

.navbar__btn-wave-level {
  transform: translateY(30px);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.navbar__btn-wave-level.is-active {
  transform: translateY(-30px);
}

.navbar__btn-wave-drift {
  animation: navbar-wave-drift 2s linear infinite;
}

@keyframes navbar-wave-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-66px);
  }
}

.navbar__btn-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.navbar__btn-ring-track {
  fill: none;
  stroke: var(--color-text);
  stroke-width: 1.5;
  transition: stroke 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.navbar__contact-group:hover .navbar__btn-ring-track {
  stroke: var(--ring-track-hover);
}

.navbar__btn-ring-progress {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-dasharray: var(--ring-length, 400);
  stroke-dashoffset: var(--ring-length, 400);
  transition: stroke-dashoffset 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.navbar__contact-group:hover .navbar__btn-ring-progress {
  stroke-dashoffset: 0;
}

.navbar__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-circle-bg);
  flex-shrink: 0;
  transform: scale(1);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.navbar__arrow path {
  stroke: var(--color-circle-icon);
  transition: stroke 0.3s ease;
}

.navbar__contact-group:hover .navbar__arrow {
  transform: scale(0);
}

.navbar__new-arrow {
  position: absolute;
  left: 0;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  transform: translateY(-50%) scale(0);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.navbar__contact-group:hover .navbar__new-arrow {
  transform: translateY(-50%) scale(1);
}

.navbar__theme-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.navbar__theme-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  object-fit: contain;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.navbar__theme-icon--moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

.navbar__theme-icon--sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

[data-theme="dark"] .navbar__theme-icon--moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

[data-theme="dark"] .navbar__theme-icon--sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

.navbar__lang-switch {
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  flex-shrink: 0;
  transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.navbar__lang-switch:hover {
  width: 148px;
}

.navbar__lang-switch-mask {
  position: absolute;
  inset: -1px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  overflow: hidden;
}

.navbar__lang-current {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
  z-index: 1;
}

.navbar__lang-options {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-left: 64px;
  padding-right: 20px;
  white-space: nowrap;
}

.navbar__lang-option {
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.5px;
}

/* корзина справа от переключателя языка: круг как у темы и языка, число работ — значок
   в углу. Значок подстраивается под число (1 → кружок, 12 → капсула, 99+), при 0 скрыт */
.navbar__cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.navbar__cart:hover {
  transform: scale(1.06);
}

.navbar__cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff;
  color: #0D0D0D;
  box-shadow: 0 0 0 2px var(--color-accent);
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transform: scale(1);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), min-width 0.3s ease;
}

.navbar__cart-count.is-empty {
  transform: scale(0);
}

.navbar__cart-count.is-bump {
  animation: navbar-cart-bump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes navbar-cart-bump {
  0% { transform: scale(0.4); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* showcase */

.showcase {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: 24px 200px 0;
}

.showcase__col {
  display: flex;
  flex-direction: column;
}

.showcase__col--right {
  justify-self: end;
}

.showcase__col--left {
  height: 536px;
  justify-content: space-between;
}

.showcase__col--right {
  height: 536px;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 24px;
}

.showcase__top {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 40px;
}

.showcase__text {
  color: var(--color-text);
  font-size: 18px;
  line-height: 1.5;
  max-width: 320px;
}

.showcase__visit {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--color-text);
  text-decoration: none;
  font-size: 15px;
}

.showcase__visit-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  flex-shrink: 0;
}

.showcase__visit-wave {
  position: absolute;
  inset: 0;
}

.showcase__visit-wave-path {
  fill: var(--color-accent);
}

.showcase__visit-wave-level {
  transform: translateY(36px);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.showcase__visit-wave-level.is-active {
  transform: translateY(-36px);
}

.showcase__visit-wave-drift {
  animation: showcase-wave-drift 1.6s linear infinite;
}

@keyframes showcase-wave-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-44px);
  }
}

.showcase__visit-ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.showcase__visit-ring-track {
  fill: none;
  stroke: var(--color-text);
  stroke-width: 1.5;
  transition: stroke 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.showcase__visit:hover .showcase__visit-ring-track {
  stroke: var(--ring-track-hover);
}

.showcase__visit-ring-progress {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-dasharray: 202.6549;
  stroke-dashoffset: 202.6549;
  transition: stroke-dashoffset 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.showcase__visit:hover .showcase__visit-ring-progress {
  stroke-dashoffset: 0;
}

.showcase__visit-arrow {
  position: relative;
}

.showcase__visit-arrow path {
  stroke: var(--color-text);
  transition: stroke 0.3s ease;
}

.showcase__visit.is-filling .showcase__visit-arrow path {
  stroke: #fff;
}

.showcase__photo {
  position: relative;
  overflow: hidden;
  will-change: transform;
}

.showcase__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.4s ease;
}

.showcase__photo-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.16) 30%,
    transparent 65%
  );
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}

.showcase__photo:hover .showcase__photo-glow {
  opacity: 1;
}

.showcase__photo--left {
  width: 210px;
  height: 210px;
}

.showcase__photo--center {
  width: 536px;
  height: 536px;
}

.showcase__right-photos {
  position: relative;
  width: 350px;
  height: 350px;
}

.showcase__photo--right-little {
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 140px;
}

.showcase__photo--right-big {
  position: absolute;
  top: 140px;
  left: 140px;
  width: 210px;
  height: 210px;
}

.showcase__photo--left img,
.showcase__photo--right-little img,
.showcase__photo--right-big img {
  filter: grayscale(1);
}

.showcase__photo--left:hover img,
.showcase__photo--right-little:hover img,
.showcase__photo--right-big:hover img {
  filter: grayscale(0);
}

.showcase__scroll {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
  font-size: 18px;
}

.showcase__scroll path {
  stroke: var(--color-text);
}

/* «Scroll» и стрелка: у каждого свое окно высотой --step (рамок не видно, края гаснут), в нем лента из четырех
   одинаковых строк/стрелок. Цикл 4,2 с: все нежно качается вниз-вверх, затем лента неспешно едет «рулеткой» вниз —
   последняя строка уходит вниз, сверху одна за другой проплывают новые и встают на место. В конце цикла
   первая и последняя неотличимы, поэтому возврат ленты незаметен. Обе ленты стартуют вместе и идут синхронно */
.showcase__scroll { --step: 28px; }
.showcase__word,
.showcase__arrow {
  position: relative;
  display: block;
  height: var(--step);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.showcase__arrow { width: 14px; }
.showcase__reel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transform: translateY(calc(var(--step) * -3));
  animation: scrollReel 4.2s infinite;
}
.showcase__reel > span,
.showcase__reel > svg {
  flex: none;
  display: block;
  height: var(--step);
  line-height: var(--step);
}
.showcase__reel > svg { height: 14px; margin: 7px 0; }
@keyframes scrollReel {
  0%   { transform: translateY(calc(var(--step) * -3)); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  22%  { transform: translateY(calc(var(--step) * -3 + 5px)); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  44%  { transform: translateY(calc(var(--step) * -3)); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  54%  { transform: translateY(calc(var(--step) * -3)); animation-timing-function: cubic-bezier(0.5, 0.05, 0.25, 1); }
  88%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .showcase__reel { animation: none; }
}

/* curtain intro */

.curtain {
  position: fixed;
  top: 0;
  width: 50vw;
  height: 100vh;
  background: var(--color-curtain);
  z-index: 9999;
  transition: transform 1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.curtain--left {
  left: 0;
}

.curtain--right {
  right: 0;
}

.curtain.is-open.curtain--left {
  transform: translateX(-100%);
}

.curtain.is-open.curtain--right {
  transform: translateX(100%);
}

/* служебная кнопка перехода к плану сайта */

.plan-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  font-family: "Questrial", sans-serif;
  font-size: 14px;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease;
}

.plan-btn:hover {
  transform: translateY(-2px);
}

/* gallery page */

.gallery {
  padding: 140px 200px 120px;
}

.gallery__title {
  color: var(--color-text);
  font-family: "Cormorant Garamond", "Baskerville Display PT", "Baskerville Old Face", Baskerville, Georgia, serif;
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
}

.gallery__subtitle {
  color: var(--color-text);
  opacity: 0.7;
  font-size: 16px;
  margin-top: 12px;
}

.gallery__filters {
  display: flex;
  gap: 24px;
  margin-top: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-text);
}

.gallery__filter {
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.gallery__filter.is-active,
.gallery__filter:hover {
  opacity: 1;
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
  margin-top: 40px;
}

.gallery__card {
  color: var(--color-text);
  text-decoration: none;
  display: block;
}

.gallery__card-photo {
  aspect-ratio: 1;
  overflow: hidden;
}

.gallery__card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
  transition: filter 0.4s ease;
}

.gallery__card:hover .gallery__card-photo img {
  filter: grayscale(0);
}

.gallery__card-title {
  margin-top: 12px;
  font-size: 14px;
}

.gallery__card-price {
  margin-top: 4px;
  font-size: 13px;
  opacity: 0.6;
}

/* product page */

.product {
  padding: 140px 200px 120px;
}

.product__back {
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px;
  opacity: 0.7;
}

.product__back:hover {
  opacity: 1;
}

.product__main {
  display: flex;
  gap: 64px;
  margin-top: 40px;
}

.product__photo {
  flex: 1;
  aspect-ratio: 1;
  overflow: hidden;
}

.product__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product__info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product__title {
  color: var(--color-text);
  font-family: "Cormorant Garamond", "Baskerville Display PT", "Baskerville Old Face", Baskerville, Georgia, serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
}

.product__price {
  color: var(--color-accent);
  font-size: 24px;
  margin-top: 12px;
}

.product__meta {
  color: var(--color-text);
  opacity: 0.6;
  font-size: 13px;
  margin-top: 16px;
}

.product__desc {
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.6;
  max-width: 420px;
  margin-top: 20px;
}

.product__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 48px;
  padding: 0 32px;
  margin-top: 32px;
  border: 1px solid var(--color-text);
  border-radius: 999px;
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.5px;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.product__btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.product__note {
  color: var(--color-text);
  opacity: 0.5;
  font-size: 12px;
  margin-top: 20px;
}

/* свой курсор по умолчанию: рисунок 32px (64px на ретина-экранах), кончик стрелки — точка клика в левом верхнем углу;
   остальные состояния (ссылка, текст, ползунок) пока системные. Над картинами курсор прячет линза (photo-lens) */
html {
  cursor: url("../images/cursors/arrow-32.png") 0 0, auto;
  cursor: -webkit-image-set(url("../images/cursors/arrow-32.png") 1x, url("../images/cursors/arrow-64.png") 2x) 0 0, auto;
}

/* курсор-рука для ссылок и кнопок: 32px (64px на ретина-экранах), кончик стрелки — точка клика;
   переменная подставляется во все правила `cursor: pointer` в css/ */
:root {
  --cursor-pointer: url("../images/cursors/pointer-32.png") 0 0, pointer;
  --cursor-pointer: -webkit-image-set(url("../images/cursors/pointer-32.png") 1x, url("../images/cursors/pointer-64.png") 2x) 0 0, pointer;
}
a[href],
button:not(:disabled),
select,
summary,
[role="button"],
label[for] {
  cursor: var(--cursor-pointer, pointer);
}

/* курсор «запрет»: SOLD и недоступные кнопки; 32px (64px на ретина-экранах), точка клика — центр круга */
:root {
  --cursor-not-allowed: url("../images/cursors/not-allowed-32.png") 16 16, not-allowed;
  --cursor-not-allowed: -webkit-image-set(url("../images/cursors/not-allowed-32.png") 1x, url("../images/cursors/not-allowed-64.png") 2x) 16 16, not-allowed;
}
button:disabled,
a[href][aria-disabled="true"],
[aria-disabled="true"] {
  cursor: var(--cursor-not-allowed, not-allowed);
}

/* плавающий курсор (js/cursor.js): пока скрипт работает (html.has-cursor), системные курсоры состояний
   подменяются прозрачными пикселями с разными именами — по ним скрипт определяет состояние, —
   а картинки рисует элемент .cursor, который ездит за мышью и перетекает между состояниями */
html.has-cursor {
  cursor: url("../images/cursors/blank-arrow.png") 0 0, none;
  --cursor-pointer: url("../images/cursors/blank-pointer.png") 0 0, none;
  --cursor-not-allowed: url("../images/cursors/blank-no.png") 0 0, none;
}
html.is-busy,
html.is-busy * { cursor: none !important; }

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483000;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.cursor.is-hidden,
.cursor.is-away { opacity: 0; }
html.photo-lens-on .cursor { opacity: 0; }

.cursor__s {
  position: absolute;
  display: block;
  opacity: 0;
  transform: scale(0.45) rotate(35deg);
  transition: opacity 0.2s ease, transform 0.42s cubic-bezier(0.34, 1.4, 0.5, 1);
  will-change: transform, opacity;
}
/* пришедшее состояние разворачивается из поворота в одну сторону, ушедшее сворачивается в другую */
.cursor__s.is-on {
  opacity: 1;
  transform: none;
  transition: opacity 0.28s ease 0.05s, transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1) 0.05s;
}
.cursor.is-down .cursor__s.is-on { transform: scale(0.86); transition-duration: 0.12s, 0.12s; transition-delay: 0s; }
.cursor__s img { display: block; width: 100%; height: 100%; }
.cursor__spin { animation: cursorSpin 1.1s linear infinite; }
@keyframes cursorSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cursor__s, .cursor__s.is-on { transition-duration: 0.01s; transition-delay: 0s; }
  .cursor__spin { animation-duration: 3s; }
}