/* Фреска v2 — общий каркас прототипов: сцена со слоями, вход, эмбиент, страница раздела */
@font-face { font-family: "Cormorant Garamond"; src: url("/v2/fresque/assets/cormorant-cyrillic-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/v2/fresque/assets/cormorant-cyrillic-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/v2/fresque/assets/manrope-cyrillic-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0400-045F; }
@font-face { font-family: "Manrope"; src: url("/v2/fresque/assets/manrope-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF; }
@font-face { font-family: "JetBrains Mono"; src: url("/v2/fresque/assets/jbmono-cyrillic-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0400-045F; }
@font-face { font-family: "JetBrains Mono"; src: url("/v2/fresque/assets/jbmono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF; }

:root {
  --red: #e91b1a; --navy: #1d537a; --sky: #b5daeb; --paper: #f5fafd; --ink: #17313d; --muted: #587182;
  --soft: cubic-bezier(0.22, 1, 0.36, 1); --swift: cubic-bezier(0.7, 0, 0.2, 1);
  --display: "Cormorant Garamond", Georgia, serif; --sans: "Manrope", system-ui, sans-serif; --mono: "JetBrains Mono", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #efe6d4; overflow: hidden; -webkit-tap-highlight-color: transparent; }
body { font-family: var(--sans); color: var(--ink); }

/* сцена: пропорция картины 1536×2752, заполняет экран по высоте, по бокам срез */
.viewport { position: fixed; inset: 0; overflow: hidden; background: #efe6d4; }
.stage {
  position: absolute; top: 50%; left: 50%;
  height: 100svh; aspect-ratio: 1536 / 2752;
  transform: translate(-50%, -50%);
  transform-origin: 0 0;
  will-change: transform;
}
@media (min-aspect-ratio: 1536/2752) { .stage { height: auto; width: 100vw; } }
.stage img { position: absolute; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.stage .flat, .stage .bg { inset: 0; width: 100%; height: 100%; }
.layer { will-change: transform; }
/* перламутр (§3в): силуэт раковины — маска, светлая полоса внутри; blend на маскированном контейнере, иначе смешивается с пустотой */
.glint { position: absolute; overflow: hidden; pointer-events: none; mix-blend-mode: soft-light; opacity: .55;
  -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; }
.glint i { position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; transform: translateX(-120%) skewX(-30deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95) 50%, rgba(255,255,255,0)); will-change: transform; }
.depth { position: absolute; inset: 0; will-change: transform; }

/* блики на воде: полосы света ползут вниз по течению, видны только внутри маски ручья */
.river-glint {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("/v2/fresque/assets/river-mask.png") center / 100% 100% no-repeat;
          mask: url("/v2/fresque/assets/river-mask.png") center / 100% 100% no-repeat;
  mix-blend-mode: screen; opacity: .55;
  overflow: hidden;
}
.river-glint::before {
  content: ""; position: absolute; inset: -20% -10%;
  background: repeating-linear-gradient(170deg, transparent 0 22px, rgba(255,255,255,.55) 24px 25px, transparent 27px 58px);
  animation: glint 9s linear infinite;
}
@keyframes glint { to { transform: translate3d(-6%, 12%, 0); } }

/* вход: фарфоровый лист, который проедают кляксы (канвас) */
.intro { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }

/* «Заказать» — всегда доступна */
.order {
  position: absolute; z-index: 30; display: grid; place-items: center;
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--red); color: #fff; text-decoration: none; text-align: center;
  font: italic 500 17px/1 var(--display); letter-spacing: .01em;
  box-shadow: 0 0 0 5px rgba(255,255,255,.9), 0 0 0 6.5px var(--red);
}
.order span { display: block; font: 500 9px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-top: 3px; }
.order:active { transform: scale(.95); }

/* страница раздела, в которую раскрывается переход */
.page {
  position: fixed; inset: 0; z-index: 60; background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  clip-path: circle(0 at 50% 50%); visibility: hidden;
}
.page.open { visibility: visible; }
.page h1 { margin: 0; font: italic 500 54px/1 var(--display); color: var(--navy); }
.page p { margin: 0; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.page button { margin-top: 18px; font: 500 14px var(--sans); color: var(--navy); background: #fff; border: 1px solid rgba(23,49,61,.18); border-radius: 999px; padding: 10px 18px; }

.proto-tag { position: fixed; left: 10px; top: 10px; z-index: 90; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: rgba(255,255,255,.85); border-radius: 999px; padding: 5px 9px; text-decoration: none; }

/* 02.10: «Уменьшение движения» больше не гасит слои фрески (решение пользователя: анимации всем; статика — ?static / ?rm) */