/* Главная-фреска: кружки разделов, «Заказать» и переход «клякса» как в проде.
   Источник: origin/main src/app/styles/96-fresque.css (.fresque-arc, .fresque-med, --med-enamel, .fresque-cta,
   .fresque.is-leaving, .fresque-reveal, .fresque-pop) и src/components/pages/fresque-home.tsx; выбор владелицы —
   src/lib/fresque/production-choice.ts: дуга (телефон — улыбка снизу, ПК — дуга слева), «Кобальт» ровными кругами,
   малиновая «Заказать» #d9486a. Владелица 02.10: «эти кружочки они же другие должны быть», «так вроде кнопки были».
   Отличия от прода: переход идёт и при «Уменьшении движения» (решение пользователя 02.10), без движения — только ?rm
   (.fq-static); рост кружка при наведении — только у устройств с наведением; на телефонах уже 388 px диск меньше 66 px,
   чтобы сосед не закрывал подпись; кнопки «Разделы» справа от «Заказать» на главной v2 нет. */
@font-face { font-family: "CormorantV"; src: url("/v2/fresque/assets/CormorantGaramond-Italic-Cyrillic-Variable.woff2") format("woff2"); font-style: italic; font-weight: 300 700; font-display: swap; }

.fresque {
  --fq-white: #ffffff;        /* --brand-porcelain */
  --fq-gzhel: #2b7da4;        /* --brand-gzhel: диск «Кобальта» */
  --fq-contour: #17506b;      /* --brand-gzhel-deep: чернильный контур */
  --fq-ink: #17313d;          /* --brand-ink: подпись перехода */
  --fq-raspberry: #d9486a;    /* «Заказать» */
  /* правый верх ПК: место «Заказать» как в проде (там правее — кнопка «Разделы» 56 px) */
  --fq-sections-size: 56px;
  --fq-sections-right: max(48px, env(safe-area-inset-right));
  --fq-cta-right: calc(var(--fq-sections-right) + var(--fq-sections-size) + 14px);
}

/* ═════ кружки разделов: одна навигация, раскладка по ориентации (прод: (max-aspect-ratio: 4/5) — телефон) ═════
   ПК: дуга слева — цепочка от высоты окна (desktopArc в fresque-home.tsx), посчитана в CSS, без скрипта:
   отступы min(84, 12% H) сверху и min(104, 14% H) снизу, y равномерно, x по синусу (выпуклость влево), диск = шаг + 6. */
.fresque-nav {
  position: fixed; inset: 0; z-index: 30; pointer-events: none;
  --vh: 100vh;
  --tp: min(84px, calc(var(--vh) * .12));
  --bp: min(104px, calc(var(--vh) * .14));
  --ah: max(160px, calc(var(--vh) - var(--tp) - var(--bp)));
  --disc: max(66px, min(150px, calc(var(--ah) / 5 + 6px)));
  --sag: min(150px, 11vw);
}
@supports (height: 100dvh) { .fresque-nav { --vh: 100dvh; } }

.fresque-med {
  position: absolute; z-index: calc(20 - var(--i));   /* верхний кружок поверх нижнего, как в проде */
  display: flex; flex-direction: row; align-items: center; gap: 0;
  left: calc(16px + var(--sag) * (1 - var(--s)));      /* = центр по дуге − disc/2 */
  top: calc(var(--tp) + var(--ah) * var(--t));
  transform: translateY(-50%);
  --fq-d: var(--disc); --fq-ds: .86;                   /* «Кобальт»: видимый кружок ×0,86 — подпись соседа не накрывается */
  --fq-dd: calc(var(--fq-d) * var(--fq-ds));
  pointer-events: auto; cursor: pointer; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
/* t = i/5, s = sin(πt); телефон: x = 10 + 16i %, низ = 8 + 46·((x − 50)/47)² px (arcPoint) */
.fresque-med:nth-child(1) { --i: 0; --t: 0;  --s: 0;        --mx: 10%; --mb: 41.318px; }
.fresque-med:nth-child(2) { --i: 1; --t: .2; --s: .587785;  --mx: 26%; --mb: 19.995px; }
.fresque-med:nth-child(3) { --i: 2; --t: .4; --s: .951057;  --mx: 42%; --mb: 9.333px; }
.fresque-med:nth-child(4) { --i: 3; --t: .6; --s: .951057;  --mx: 58%; --mb: 9.333px; }
.fresque-med:nth-child(5) { --i: 4; --t: .8; --s: .587785;  --mx: 74%; --mb: 19.995px; }
.fresque-med:nth-child(6) { --i: 5; --t: 1;  --s: 0;        --mx: 90%; --mb: 41.318px; }

/* диск «Кобальт»: ровный круг (неровность читалась «кривыми»), толстый белый обод, чернильный контур, одна тень */
.fresque-med__disc {
  flex: none; width: var(--fq-dd); height: var(--fq-dd); border-radius: 50%;
  background-color: var(--fq-gzhel); border: 5px solid #fff;
  box-shadow: 0 0 0 1.5px var(--fq-contour), 0 5px 14px rgba(23, 49, 61, .28);
  transition: transform .45s cubic-bezier(.5, 0, 0, 1);
}
/* надпись внутри диска: белая рукописная, обведена контуром */
.fresque-med__tag {
  position: absolute; z-index: 1; left: calc(var(--fq-dd) / 2); top: 50%; transform: translate(-50%, -50%);
  width: calc(var(--fq-dd) * .82); margin: 0; padding: 0;
  font: italic 700 calc(var(--fq-dd) * .165) / 1.05 "CormorantV", Georgia, serif; letter-spacing: .01em;
  white-space: normal; text-wrap: balance; text-align: center; color: #fff;
  text-shadow: 1px 0 var(--fq-contour), -1px 0 var(--fq-contour), 0 1px var(--fq-contour), 0 -1px var(--fq-contour);
  -webkit-font-smoothing: antialiased;
}
/* рост кружка при наведении (канон Натальи); только там, где есть наведение: на телефоне «залипший» после тапа
   кружок остался бы увеличенным при возврате «назад» */
@media (hover: hover) {
  .fresque-med:hover { z-index: 40; }
  .fresque-med:hover .fresque-med__disc { transform: scale(1.12) rotate(-1.5deg); }
  .fresque-med:hover .fresque-med__tag { transform: translate(-50%, -50%) scale(1.12); }
}
.fresque-med:focus-visible { z-index: 40; outline: none; }
.fresque-med:focus-visible .fresque-med__disc { transform: scale(1.12) rotate(-1.5deg); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--fq-contour); }
.fresque-med:focus-visible .fresque-med__tag { transform: translate(-50%, -50%) scale(1.12); }

/* ═════ «Заказать»: гладкая малиновая капсула с белым кольцом; ПК — правый верх, как в проде ═════ */
.fresque-cta {
  position: fixed; z-index: 31;
  top: max(28px, calc(env(safe-area-inset-top) + 10px)); right: var(--fq-cta-right);
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: 999px; padding: 13px 32px 14px; border: 3px solid #fff;
  font: italic 700 22px / 1.6 "CormorantV", Georgia, serif; letter-spacing: .02em; -webkit-font-smoothing: antialiased;
  background: var(--fq-raspberry); color: #fff; text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 16px rgba(23, 49, 61, .3);
  transition: transform .35s cubic-bezier(.5, 0, 0, 1); -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .fresque-cta:hover { transform: scale(1.06) rotate(-1deg); } }
.fresque-cta:focus-visible { transform: scale(1.06) rotate(-1deg); outline: 3px solid var(--fq-contour); outline-offset: 3px; }
.fresque-cta__arrow { width: 26px; height: 14px; }

/* ═════ телефон: дуга-улыбка снизу в зоне пальца, «Заказать» над ней ═════ */
@media (max-aspect-ratio: 4/5) {
  .fresque-nav { inset: auto 0 calc(10px + env(safe-area-inset-bottom)) 0; height: 176px; }
  .fresque-med {
    flex-direction: column; left: var(--mx); top: auto; bottom: var(--mb); transform: translateX(-50%);
    /* потолок: шаг дуги 16% ширины. Нижний порог 54 px вместо продовых 66: на экране уже 388 px диск в 66 px так
       налезает на соседа, что тот закрывает начало подписи («коматы», «оставка» на 320 px); от 388 px — ровно как в проде */
    --fq-d: clamp(54px, 17vw, 86px); --fq-ds: 1;
  }
  .fresque-med__tag { left: 50%; top: calc(var(--fq-dd) / 2); width: calc(var(--fq-dd) * .9); font-size: calc(var(--fq-dd) * .205); }
  /* 140 px — запас над дугой: верх крайних кружков ~118 px, остаётся ~20 px воздуха (владелец 2026-09-15) */
  .fresque-cta { top: auto; right: auto; bottom: calc(140px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
    font-size: 19px; padding: 11px 28px 12px; }
  .fresque-cta:focus-visible { transform: translateX(-50%) scale(1.05); }
}
@media (max-aspect-ratio: 4/5) and (hover: hover) { .fresque-cta:hover { transform: translateX(-50%) scale(1.05); } }

/* ═════ переход «клякса» (контракт §9, концепт B) ═════
   Кнопки схлопываются поворотом в точку, белый фарфор раскрывается органической кляксой из нажатого кружка
   (форма статична, движется только transform пути clipPath), полотно контр-зумится, в центре подпись раздела. */
.fresque.is-leaving .fresque-med, .fresque.is-leaving .fresque-cta {
  animation: fresque-med-collapse .6s cubic-bezier(.5, 0, 0, 1) forwards; pointer-events: none;
}
@keyframes fresque-med-collapse { to { transform: translate(-50%, -50%) rotate(45deg) scale(0); opacity: 0; } }
/* ПК-дуга центрируется translateY(-50%) — своё схлопывание без горизонтального прыжка */
.fresque.is-leaving .fresque-med { animation-name: fresque-anchor-collapse; }
@keyframes fresque-anchor-collapse { to { transform: translateY(-50%) rotate(45deg) scale(0); opacity: 0; } }
.fresque.is-leaving .fresque-cta { animation-name: fresque-cta-collapse; }
@keyframes fresque-cta-collapse { to { transform: rotate(45deg) scale(0); opacity: 0; } }
@media (max-aspect-ratio: 4/5) {
  .fresque.is-leaving .fresque-med { animation-name: fresque-arc-collapse; }
}
@keyframes fresque-arc-collapse { to { transform: translateX(-50%) rotate(45deg) scale(0); opacity: 0; } }

.fresque-defs { position: absolute; width: 0; height: 0; pointer-events: none; }
/* слой-раскрытие: белый фарфор, обрезанный растущей кляксой; старт кляксы = радиус нажатого кружка, шва нет */
.fresque-reveal { position: fixed; inset: 0; z-index: 60; background: var(--fq-white); clip-path: url(#fq-potato); pointer-events: none; }
.fresque-pop { position: fixed; inset: 0; z-index: 61; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.fresque-pop__label {
  margin-top: 18px; font: italic 600 26px / 1.6 "CormorantV", Georgia, serif; color: var(--fq-ink); -webkit-font-smoothing: antialiased;
  opacity: 0; animation: fresque-pop-fade .4s ease .62s forwards;
}
@keyframes fresque-pop-fade { to { opacity: 1; } }

/* возврат «назад» из bfcache: кнопки встают на место сразу, без доигрывания переходов */
.fresque.fq-reset .fresque-med__disc, .fresque.fq-reset .fresque-cta { transition: none; }

/* ?rm — статичная версия (как у прода при «Уменьшении движения»): кнопки гаснут сразу, фарфор накрывает экран без кляксы */
.fresque.fq-static .fresque-med__disc, .fresque.fq-static .fresque-cta { transition: none; }
.fresque.fq-static.is-leaving .fresque-med, .fresque.fq-static.is-leaving .fresque-cta { animation: none; opacity: 0; }
.fresque.fq-static .fresque-reveal { clip-path: none; }
.fresque.fq-static .fresque-pop__label { animation: none; opacity: 1; }

/* 02.10, владелица (визитка): «может, всё-таки на белом раков, крабов по этому принципу» — вариант для сравнения, ?med=white.
   Белый фарфоровый диск с гжельской картинкой раздела (те же картинки, что в веере «Разделы»), подпись — ярлычком под диском. */
html.fq-med-white .fresque-med__disc {
  background: #fff var(--orn) center 46% / 72% auto no-repeat; border: 3px solid #fff;
  box-shadow: 0 0 0 1.5px var(--fq-gzhel), 0 5px 14px rgba(23, 49, 61, .24);
}
html.fq-med-white .fresque-med__tag {
  top: auto; bottom: calc(var(--fq-dd) * -.18); transform: translateX(-50%); width: auto; max-width: calc(var(--fq-dd) * 1.5);
  padding: 2px 7px 3px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--fq-gzhel);
  color: var(--fq-gzhel-deep, #17506b); text-shadow: none; white-space: nowrap; font-size: max(11px, calc(var(--fq-dd) * .16));
}
html.fq-med-white .fresque-med:nth-child(1) { --orn: url("../../shell/pub/ornaments/crayfish-heraldic.webp"); }
html.fq-med-white .fresque-med:nth-child(2) { --orn: url("../../shell/pub/ornaments/icon-restaurant.webp"); }
html.fq-med-white .fresque-med:nth-child(3) { --orn: url("../../shell/pub/ornaments/crab.webp"); }
html.fq-med-white .fresque-med:nth-child(4) { --orn: url("../../shell/pub/ornaments/hot-plate.webp"); }
html.fq-med-white .fresque-med:nth-child(5) { --orn: url("../../shell/pub/ornaments/icon-rakomat.webp"); }
html.fq-med-white .fresque-med:nth-child(6) { --orn: url("../../shell/pub/ornaments/oyster-pearl.webp"); }
/* ярлычки под дисками не должны уходить под нижнюю панель Safari: дуга на 14 px выше */
html.fq-med-white .fresque-nav { transform: translateY(-14px); }

/* 02.10, владелица: «кружки могут двигаться? или переливающимися, как ракушки»; «кнопку заказать точно нужно».
   Перламутр волной по дуге, лёгкое покачивание, блик по «Заказать». Только transform/opacity/translate.
   Контракт: docs/redesign/v2/fresque/MOTION-home-nacre.md */
.fresque-med { animation: fq-bob 4.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.77s); }
@keyframes fq-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.fresque-med__disc { position: relative; overflow: hidden; }
.fresque-med__disc::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 32%, rgba(255, 246, 250, .38) 43%, rgba(190, 232, 255, .42) 50%, rgba(255, 205, 232, .38) 57%, rgba(255, 255, 255, 0) 68%);   /* перламутр: розово-голубой перелив, screen — видно на кобальте */
  opacity: 0; transform: translateX(-70%);
  animation: fq-nacre 6s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: calc(var(--i) * .45s);
}
@keyframes fq-nacre { 0% { transform: translateX(-70%); opacity: 0; } 10% { opacity: .9; } 40% { transform: translateX(70%); opacity: 0; } 100% { transform: translateX(70%); opacity: 0; } }
.fresque-cta { overflow: hidden; }
.fresque-cta::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 42%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  transform: translateX(-160%) skewX(-18deg);
  animation: fq-cta-sheen 5s cubic-bezier(.45, 0, .55, 1) infinite 1.2s;
}
@keyframes fq-cta-sheen { 0% { transform: translateX(-160%) skewX(-18deg); } 22%, 100% { transform: translateX(330%) skewX(-18deg); } }
html.rm .fresque-med, html.rm .fresque-med__disc::after, html.rm .fresque-cta::after { animation: none; }