/* Фрунзенский — приём «Разбор квартала».
   Индивидуальный: у AURUS переходы между кадрами, у Палашёвского разбор фасада,
   здесь — чтение генплана. Это единственный из трёх проектов, где объект не дом,
   а квартал: 11 корпусов, парк 3,1 га и выход к набережной. На аэрофото по
   очереди высвечиваются зоны, остальное уходит в дымку. */

.fx-plan{position:relative;height:340vh}
.fx-plan .fx-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#1d1418}
.fx-plan .fx-shot{position:absolute;inset:0}
.fx-plan .fx-shot img{width:100%;height:100%;object-fit:cover;object-position:center 46%}
/* дымка поверх всего кадра — сквозь неё читается «неактивное» */
.fx-plan .fx-haze{position:absolute;inset:0;z-index:2;background:rgba(29,20,24,.62);
  transition:background 1.1s cubic-bezier(.22,.61,.36,1)}

/* световое пятно: круг, который ходит по генплану от зоны к зоне */
.fx-plan .fx-spot{position:absolute;inset:0;z-index:3;pointer-events:none;
  transition:background 1.2s cubic-bezier(.22,.61,.36,1)}

.fx-plan .fx-legend{position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding:clamp(26px,6vh,64px) clamp(20px,5vw,60px);
  background:linear-gradient(180deg,rgba(29,20,24,0),rgba(29,20,24,.72) 38%,rgba(29,20,24,.96) 76%)}
.fx-plan .fx-step{font-family:'Onest',sans-serif;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:#cfe0d5;text-shadow:0 1px 10px rgba(0,0,0,.9)}
.fx-plan .fx-title{font-family:'Forum',serif;font-size:clamp(24px,3.6vw,48px);letter-spacing:.02em;
  text-transform:uppercase;color:#f2ece2;margin-top:12px;min-height:1.2em;
  text-shadow:0 2px 26px rgba(0,0,0,.75);transition:opacity .5s ease}
.fx-plan .fx-text{font-family:'Onest',sans-serif;font-size:14.5px;line-height:1.7;
  color:rgba(242,236,226,.84);max-width:540px;margin-top:12px;
  text-shadow:0 1px 14px rgba(0,0,0,.9);transition:opacity .5s ease}

/* шкала шагов слева, как деления на плане */
.fx-plan .fx-ticks{position:absolute;left:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);
  z-index:5;display:flex;flex-direction:column;gap:0}
.fx-plan .fx-ticks i{display:block;width:22px;height:1px;background:rgba(242,236,226,.26);margin:9px 0;
  transition:background .5s ease,width .5s ease}
.fx-plan .fx-ticks i.is-on{background:#7FA98E;width:40px}

/* ── Приём «Лепесток»: кадр раскрывается лепестковой маской.
      Лепесток — фирменная форма этого сайта (feather-mask в основных стилях),
      поэтому раскрытие идёт не кругом и не шторкой, а его контуром. ── */
.fx-petal{position:relative;height:230vh}
.fx-petal .fx-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:#1d1418}
/* кадры внутри кладём в рамку с их собственной пропорцией — раньше
   вертикальный 0.68 растягивался на полный экран 1.98 и терял две трети */
.fx-petal .fx-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(88vw,520px);aspect-ratio:0.62;max-height:84vh;border-radius:18px;overflow:hidden}
.fx-petal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fx-petal .fx-bloom{will-change:clip-path;
  clip-path:ellipse(0% 0% at 50% 56%)}
.fx-petal .fx-mist{position:absolute;inset:0;z-index:2;background:rgba(29,20,24,.28)}
.fx-petal .fx-say{position:relative;z-index:3;text-align:center;padding:0 24px;max-width:760px}
.fx-petal .fx-say h2{font-family:'Forum',serif;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(24px,3.8vw,52px);color:#f2ece2;text-shadow:0 4px 40px rgba(0,0,0,.8)}
.fx-petal .fx-say p{font-family:'Onest',sans-serif;color:rgba(242,236,226,.86);margin-top:16px;
  font-size:15.5px;line-height:1.7;text-shadow:0 2px 20px rgba(0,0,0,.85)}

@media (max-width:820px){
  .fx-plan{height:290vh}
  .fx-plan .fx-shot img{object-position:center 50%}
  .fx-plan .fx-text{font-size:13.5px}
  .fx-plan .fx-ticks{left:12px}
  .fx-petal{height:185vh}
}
@media (prefers-reduced-motion:reduce),(pointer:coarse){
  .fx-plan .fx-haze{background:rgba(29,20,24,.25)}
  .fx-plan .fx-spot{display:none}
  .fx-petal .fx-bloom{clip-path:none}
}

/* узкая рамка лепестка: текст уводим под неё, иначе он ложится прямо на кадр */
.fx-petal .fx-say--low{position:absolute;left:0;right:0;bottom:clamp(20px,5vh,54px);
  z-index:4;max-width:none;padding:0 clamp(20px,5vw,48px)}
.fx-petal .fx-say--low h2{font-size:clamp(22px,3vw,40px)}
.fx-petal .fx-say--low p{max-width:640px;margin-left:auto;margin-right:auto}
.fx-petal .fx-sticky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:3;
  background:linear-gradient(180deg,rgba(29,20,24,0),rgba(29,20,24,.9) 62%);pointer-events:none}