/* Главная: диск у левого края, открытый сад и PNG у правого края.
   Стили внутренних разделов остаются в styles.css. */
.home-lantern { position:absolute; inset:0; overflow:hidden;
  /* Та же мягкая дымка, что у фонарей в garden-haze, без перекрытия мини-фото. */
  mask-image:linear-gradient(90deg,#00000057,#000000b2 48%,#000000f7),linear-gradient(0deg,#000000aa,#000 45%);
  mask-composite:intersect;
}
.home-lantern-plane { position:absolute; inset:0; }
.home-lantern img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:inherit; }
body { overflow-x: clip; }
:is(.garden > img, .home-lantern-plane) { opacity: .88; }
.garden > .home-music-props { position: absolute; inset: 0; opacity: .78; }
body.in-garden .garden > .home-music-props { display: none; }
.garden > .home-poem-leaves { position: absolute; inset: 0; opacity: .86; }
body.in-garden .home-poem-leaves { display: none; }
.garden-haze {
  background: linear-gradient(90deg, #fff9f7a8, #fff9f74d 48%, #fff9f708),
    linear-gradient(0deg, #fff9f755, transparent 45%);
}
body.in-garden :is(.garden > img, .home-lantern-plane) { opacity: .91; }
body.in-garden .garden-haze {
  background: linear-gradient(90deg, #fff9f7d9, #fff9f75e),
    linear-gradient(0deg, #fff9f7b3, transparent 55%);
}
.home {
  --wheel-size: 800px;
  --wheel-offset: 70px;
  --wheel-visible: calc(var(--wheel-size) / 2 - var(--wheel-offset));
  --label-radius: 320px;
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  min-height: max(730px, calc(100svh - 100px));
  padding: 0;
  margin: 0;
  overflow: clip;
  isolation: isolate;
}
.home-left {
  position: absolute;
  left: calc(var(--wheel-visible) + 40px);
  top: 6%;
  width: min(37vw, 530px);
  z-index: 2;
}
.home-left > .eyebrow { font-size: 9px; letter-spacing: 1.8px; margin-bottom: 20px; }
.home h1 { font-size: clamp(52px, 4.8vw, 78px); letter-spacing: -2.9px; }
.home-intro { font-size: 13px; color: #725965; margin-top: 24px; }
.mobile-menu-link { display: none; }
.home-right {
  position: absolute;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 1;
  width: min(48vw, 830px);
  max-width: none;
  padding: 0;
  margin: 0;
  pointer-events: none;
}
.hero-cutout { display: block; width: 100%; height: auto; }
.garden-caption {
  position: absolute;
  left: calc(var(--wheel-visible) + 40px);
  bottom: 37px;
  display: flex;
  align-items: center;
  gap: 11px;
  font: italic 15px var(--serif);
  color: #8f687b;
}
.garden-caption span { font-size: 25px; }

/* Центр диска находится за левой границей страницы. Три подписи — на видимой дуге. */
.wheel-wrap {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 60%;
  transform: translateY(-50%);
  width: var(--wheel-visible);
  height: var(--wheel-size);
  margin: 0;
}
.wheel {
  position: absolute;
  left: calc(-1 * var(--wheel-size) / 2 - var(--wheel-offset));
  top: 0;
  width: var(--wheel-size);
  height: var(--wheel-size);
  touch-action: none;
  cursor: grab;
}
.wheel:active { cursor: grabbing; }
.wheel-disc { width: 100%; height: 100%; overflow: visible; transition: transform .75s cubic-bezier(.2,.75,.2,1); }
.wheel-sector { fill: #f5dce5e8; stroke: #b67b9480; stroke-width: 1.3; transition: fill .35s; }
.wheel-sector:nth-child(even) { fill: #fceaf0ed; }
.wheel-sector.is-selected { fill: #e9b5c9ef; }
.wheel-item {
  width: 132px;
  min-height: 66px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  border-radius: 0;
  background: transparent;
  color: #825c70;
  box-shadow: none;
  font: 22px/1.15 var(--serif);
  transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--label-radius)) rotate(calc(-1 * var(--angle)));
}
.wheel-item::before { display: none; }
.wheel-item small { font: 9px/1.3 'Segoe UI', sans-serif; letter-spacing: 2px; color: #a5768a; }
.wheel-item[aria-pressed=true] { background: transparent; color: #67364d; font-size: 28px; font-weight: 400; box-shadow: none; }
.wheel-item:hover { background: transparent; color: #54233f; }
.wheel-item[aria-hidden=true] { visibility: hidden; pointer-events: none; }
.wheel.is-dragging .wheel-disc, .wheel.is-dragging .wheel-item { transition: none; }
.wheel-pointer {
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 34px;
  filter: drop-shadow(0 2px 3px #6f405b24);
  pointer-events: none;
}
.wheel-pointer svg { display: block; width: 100%; height: 100%; fill: #a45476; stroke: #fff6f8; stroke-width: 2; }
.wheel-selection {
  position: absolute;
  z-index: 3;
  top: 60%;
  transform: translateY(-50%);
  left: calc(var(--wheel-visible) + 52px);
  width: 300px;
}
.wheel-selection .eyebrow { font-size: 9px; letter-spacing: 2px; }
#section-counter { margin-left: 11px; color: var(--rose); }
#selected-label { font: 43px/1.15 var(--serif); margin-top: 14px; letter-spacing: -1px; }
#selected-caption { margin-top: 10px; font: italic 16px/1.5 var(--serif); color: #8b6579; }
#open-section { margin-top: 22px; font-size: 12px; border-bottom-color: #a65c7b; }
.wheel-controls { justify-content: flex-start; gap: 12px; margin-top: 30px; font-size: 9px; letter-spacing: .8px; }
.wheel-controls button { width: 34px; height: 34px; border-color: #bd8fa3; background: #fff9f799; font-size: 15px; }

@media (min-width: 1600px) {
  .home { --wheel-size: 900px; --label-radius: 365px; }
  .home-left { top: 9%; }
  .home-right { width: min(49vw, 950px); }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .home { --wheel-size: 660px; --wheel-offset: 55px; --label-radius: 265px; }
  .home-left { left: calc(var(--wheel-visible) + 27px); width: 420px; top: 5%; }
  .home h1 { font-size: 57px; }
  .home-left > .eyebrow { font-size: 8px; letter-spacing: 1.3px; }
  .wheel-selection { left: calc(var(--wheel-visible) + 38px); width: 240px; }
  #selected-label { font-size: 36px; }
  .wheel-item { font-size: 20px; width: 120px; }
  .wheel-item[aria-pressed=true] { font-size: 25px; }
  .home-right { width: 49vw; }
  .garden-caption { left: calc(var(--wheel-visible) + 38px); }
}
@media (max-width: 900px) {
  .home {
    --wheel-size: clamp(440px, 70vw, 560px);
    --wheel-offset: 45px;
    --label-radius: calc(var(--wheel-size) / 2 - 40px);
    min-height: calc(1030px + 6vw);
  }
  .home-left { position: static; display: block; width: 100%; padding: 28px 7% 0; }
  .home-left > .eyebrow { font-size: 8px; letter-spacing: 1.4px; }
  .home h1 { font-size: clamp(44px, 8.8vw, 62px); letter-spacing: -2px; }
  .home-intro { font-size: 12px; margin-top: 20px; }
  .mobile-menu-link { display: block; width: fit-content; margin-top: 13px; color: var(--rose); }
  .home-right { top: 263px; bottom: auto; width: min(76vw, 420px); right: 0; }
  .wheel-wrap, .wheel-selection { top: calc(690px + 15vw); }
  .wheel-selection { left: calc(var(--wheel-visible) + 32px); width: calc(100% - var(--wheel-visible) - 52px); }
  .wheel-selection .eyebrow { font-size: 8px; letter-spacing: 1px; }
  #section-counter { display: block; margin: 5px 0 0; }
  #selected-label { font-size: clamp(28px, 4.7vw, 40px); margin-top: 12px; }
  #selected-caption { font-size: 14px; }
  #open-section { font-size: 11px; }
  .wheel-item { width: 100px; font-size: 17px; }
  .wheel-item[aria-pressed=true] { font-size: 23px; }
  .wheel-controls { gap: 13px; flex-wrap: wrap; margin-top: 22px; }
  .wheel-controls span { display: none; }
  .wheel-pointer { width: 31px; right: -18px; }
  .garden-caption { bottom: 22px; left: 7%; font-size: 13px; }
}
@media (max-width: 360px) {
  .home { --wheel-size: 410px; --wheel-offset: 40px; --label-radius: 167px; }
  .home-left { padding-left: 6%; padding-right: 6%; }
  .home-left > .eyebrow { letter-spacing: 1px; font-size: 7px; }
  .home h1 { font-size: 43px; }
  .wheel-item { font-size: 15px; width: 86px; }
  .wheel-item[aria-pressed=true] { font-size: 21px; }
  .wheel-selection { left: calc(var(--wheel-visible) + 26px); width: calc(100% - var(--wheel-visible) - 38px); }
  #selected-label { font-size: 27px; }
  #open-section { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .wheel-disc, .wheel-item { transition: none; }
}

/* Общий масштаб сцены: карточка всегда составляет 67% диаметра колеса.
   Высота включает весь диск, поэтому его нижний обод больше не обрезается. */
#main { position: relative; z-index: 1; }
#home { scroll-margin-top: 100px; }
#home[data-layout-ready="false"] { visibility: hidden; }
.site-header .sound-toggle, .section-nav a, #selected-label { min-height: 24px; }
@media (max-width: 760px) {
  #home { scroll-margin-top: 79px; }
}
#petals-back { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
#petals-back .petal { opacity: 0; filter: blur(.7px); }
.brand { letter-spacing: -1px; }
.home {
  --wheel-size: clamp(620px, 57vw, 1050px);
  --wheel-offset: calc(var(--wheel-size) * .0875);
  --label-radius: calc(var(--wheel-size) * .4);
  --card-size: calc(var(--wheel-size) * .67);
  min-height: max(calc(var(--wheel-size) * 1.25), calc(100svh - 100px));
}
.home-left { top: 5%; }
.wheel-wrap, .wheel-selection { top: 55%; }
.wheel-wrap { z-index: 2; }
.wheel-selection { z-index: 3; }
.home-right {
  top: 20%; bottom: auto; right: 7vw;
  width: var(--card-size); z-index: 4; pointer-events: auto;
}
.home-right .portrait { width: 100%; max-width: none; margin: 0; transform: rotate(3deg); }
.wheel-counter {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  font-size: 10px; line-height: 1; color: #8b6579; margin: 0 !important;
  letter-spacing: .3px; pointer-events: none;
}
#selected-label { display: block; padding: 0; text-align: left; cursor: pointer; }
#selected-label:hover { color: var(--rose); }
.wheel-controls { flex-direction: column; align-items: flex-start; gap: 10px; flex-wrap: nowrap; }
.home .wheel-item { font-size: clamp(18px, 1.55vw, 26px); }
.home .wheel-item[aria-pressed=true] { font-size: clamp(23px, 2vw, 33px); }
@media (max-width: 1100px) {
  .home {
    --wheel-size: clamp(400px, 123vw, 850px);
    --wheel-offset: calc(var(--wheel-size) * .0875);
    --card-top: 245px;
    --wheel-center: calc(var(--card-top) + var(--card-size) + 70px);
    min-height: calc(var(--wheel-center) + var(--wheel-size) / 2 + 65px);
  }
  .home-left { position: static; display: block; width: 100%; padding: 28px 7% 0; }
  .home h1 { font-size: clamp(44px, 8.8vw, 62px); letter-spacing: -2px; }
  .home-intro { font-size: 12px; margin-top: 20px; }
  .mobile-menu-link { display: block; }
  .home-right { top: var(--card-top); right: 5vw; width: var(--card-size); }
  .home-right .portrait { padding: 10px 10px 0; }
  .home-right .portrait figcaption { height: 45px; font-size: 13px; }
  .wheel-wrap, .wheel-selection { top: var(--wheel-center); }
  .wheel-selection { top: calc(var(--wheel-center) + 20px); transform: none; left: calc(var(--wheel-visible) + 28px); width: calc(100% - var(--wheel-visible) - 44px); }
  #selected-label { font-size: clamp(27px, 4.7vw, 40px); }
  #selected-caption { font-size: 14px; }
  .home .wheel-item { font-size: clamp(16px, 2.5vw, 22px); width: 100px; }
  .home .wheel-item[aria-pressed=true] { font-size: clamp(22px, 3.2vw, 28px); }
}

/* Геометрия вычисляется из доступной ширины в layoutHome(). Одна шкала
   связывает диск, рамку, шрифты и отступы; перенос вниз происходит плавно. */
.home {
  --scene-scale: 1;
  --wheel-size: 800px;
  --wheel-offset: calc(var(--wheel-size) * .05);
  --label-radius: calc(var(--wheel-size) * .4);
  --card-size: calc(var(--wheel-size) * .67);
  --wheel-center: 650px;
  --card-center: 650px;
  --card-left: 680px;
  min-height: var(--scene-height, 1200px);
  height: var(--scene-height, 1200px);
}
.home-left {
  position: absolute; display: block;
  left: var(--intro-left, 7%); top: calc(28px * var(--scene-scale));
  width: var(--intro-width, 80%); padding: 0;
}
.home h1 { font-size: calc(74px * var(--scene-scale)); letter-spacing: calc(-2.7px * var(--scene-scale)); }
.home-intro { font-size: max(11px, calc(13px * var(--scene-scale))); margin-top: calc(23px * var(--scene-scale)); }
.mobile-menu-link { display: none; }
.home-right {
  left: var(--card-left); right: auto; top: var(--card-center); bottom: auto;
  transform: translateY(-50%); width: var(--card-size);
}
.home-right .portrait { padding: calc(13px * var(--scene-scale)) calc(13px * var(--scene-scale)) 0; }
.home-right .portrait figcaption { height: calc(59px * var(--scene-scale)); font-size: max(11px, calc(15px * var(--scene-scale))); }
.home-right .photo-tape { width: calc(98px * var(--scene-scale)); height: calc(32px * var(--scene-scale)); top: calc(-16px * var(--scene-scale)); }
.wheel-wrap { top: var(--wheel-center); }
.wheel-selection {
  top: var(--wheel-center); left: calc(var(--wheel-visible) + 32px * var(--scene-scale));
  transform: none; width: calc(max(28px, 34px * var(--scene-scale)) + 224px * var(--scene-scale)); height: 0;
}
.selection-copy { position: relative; left: calc(max(28px, 34px * var(--scene-scale)) + 14px * var(--scene-scale)); width: calc(210px * var(--scene-scale)); height: 0; }
#selected-label {
  position: absolute; top: 0; transform: translateY(-50%); margin: 0;
  font-size: calc(40px * var(--scene-scale)); line-height: 1.15; white-space: nowrap;
}
#selected-caption {
  position: absolute; top: calc(28px * var(--scene-scale)); margin: 0;
  width: 100%; font-size: max(12px, calc(16px * var(--scene-scale)));
}
.wheel-controls {
  position: absolute; left: 0; top: 0;
  transform: translateY(-50%); margin: 0; gap: calc(10px * var(--scene-scale));
}
.wheel-controls button { width: calc(34px * var(--scene-scale)); height: calc(34px * var(--scene-scale)); min-width: 28px; min-height: 28px; font-size: max(12px, calc(15px * var(--scene-scale))); }
.home .wheel-item { font-size: max(12px, calc(22px * var(--scene-scale))); width: calc(132px * var(--scene-scale)); }
.home .wheel-item[aria-pressed=true] { font-size: max(16px, calc(28px * var(--scene-scale))); }
.wheel-pointer { width: calc(38px * var(--scene-scale)); right: calc(-22px * var(--scene-scale)); }
.wheel-counter {
  left: calc((var(--wheel-size) * .1275 - var(--wheel-offset)) / 2);
  transform: translate(-50%, -50%);
  font-size: max(12px, calc(17px * var(--scene-scale)));
  white-space: nowrap;
}
.home[data-stacked=true] .mobile-menu-link { display: block; width: fit-content; margin-top: 12px; }

/* Две строки расположены по центрам верхней и нижней листалки. */
#selected-label { top: calc((max(28px, 34px * var(--scene-scale)) + 10px * var(--scene-scale)) / -2); }
#selected-caption {
  top: calc((max(28px, 34px * var(--scene-scale)) + 10px * var(--scene-scale)) / 2);
  transform: translateY(-50%);
  width: max-content; max-width: calc(260px * var(--scene-scale));
  font-size: max(11px, calc(14px * var(--scene-scale))); line-height: 1.35;
}

/* Вариант заголовка над рамкой. Базовые правила слева сохранены для отката. */
.home[data-heading-layout=card] .home-left {
  left: var(--card-left); top: var(--heading-top, 28px); width: var(--card-size);
  transform: rotate(3deg); transform-origin: center bottom;
}
.home[data-heading-layout=card] h1 {
  font-size: calc(60px * var(--scene-scale)); line-height: 1.06;
}

/* Переходы сглаживают пересчёт координат при ресайзе и смене раздела. */
.home[data-layout-ready=true] .wheel-wrap,
.home[data-layout-ready=true] .wheel-selection {
  transition: top .7s cubic-bezier(.22,.68,.25,1);
}
.home[data-layout-ready=true] .home-right,
.home[data-layout-ready=true] .home-left {
  transition: top .7s cubic-bezier(.22,.68,.25,1), left .5s cubic-bezier(.22,.68,.25,1);
}
.home[data-layout-ready=true] { transition: height .7s cubic-bezier(.22,.68,.25,1), min-height .7s cubic-bezier(.22,.68,.25,1); }
.home .wheel-disc { transition: transform 1s cubic-bezier(.2,.75,.2,1); }
.home .wheel-item { transition: transform 1s cubic-bezier(.2,.75,.2,1), color .3s; }
.home { --label-radius: calc(var(--wheel-size) * .34); }
.home .wheel-item { width: calc(var(--wheel-size) * .22); padding: 8px 0; align-items: center; font-size: max(12px, calc(22px * var(--scene-scale))); }
.home .wheel-item[aria-pressed=true] { font-size: max(13px, calc(26px * var(--scene-scale))); }
.wheel-pointer { right: calc(-33px * var(--scene-scale)); height: calc(34px * var(--scene-scale)); }
.wheel-controls button { display: grid; place-items: center; padding: 0; line-height: 1; }
.wheel-controls svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
html[data-input=pointer] :focus { outline: none; }
[tabindex="-1"]:focus { outline: none; }
.garden, #petals, #petals-back { bottom: auto; height: var(--garden-viewport-height, 100lvh); }
@media (prefers-reduced-motion: reduce) {
  .home, .home .wheel-wrap, .home .wheel-selection, .home .home-right,
  .home .home-left, .home .wheel-disc, .home .wheel-item { transition: none !important; }
}