/* Палашёвский 11 — приём «Три фасада».
   Индивидуальный, не повторяет AURUS: там переходы между кадрами, здесь —
   разбор одного кадра. У дома три фасада разного характера (стекло, камень,
   балконные ленты), и это его главное отличие. Приём буквально показывает их
   по очереди на одном рендере: активная треть светится, остальные уходят в тень. */

.fx-facets{position:relative;height:300vh}
.fx-facets .fx-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0b0a0a}
.fx-facets .fx-shot{position:absolute;inset:0}
.fx-facets .fx-shot img{width:100%;height:100%;object-fit:cover;object-position:center 42%}

/* три вертикальные шторки поверх кадра */
.fx-facets .fx-zones{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);z-index:2}
.fx-facets .fx-zone{position:relative;background:rgba(11,10,10,.72);transition:background 1s cubic-bezier(.22,.61,.36,1)}
.fx-facets .fx-zone.is-on{background:rgba(11,10,10,0)}
/* волосяные линии реза — как разделители на архитектурном чертеже */
.fx-facets .fx-zone + .fx-zone::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(169,196,176,.55) 22%,rgba(169,196,176,.55) 78%,transparent)}

.fx-facets .fx-caption{position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:clamp(28px,6vh,64px) clamp(20px,5vw,64px);
  background:linear-gradient(180deg,rgba(11,10,10,0),rgba(11,10,10,.62) 34%,rgba(11,10,10,.95) 72%)}
.fx-facets .fx-num{font-family:'Commissioner',sans-serif;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:#c6dbcc;text-shadow:0 1px 10px rgba(0,0,0,.95)}
.fx-facets .fx-name{font-family:'Prata',serif;font-size:clamp(24px,3.4vw,46px);color:#ede7da;margin-top:12px;text-shadow:0 2px 24px rgba(0,0,0,.8);
  min-height:1.2em;transition:opacity .5s ease}
.fx-facets .fx-note{font-family:'Commissioner',sans-serif;font-size:14.5px;line-height:1.65;
  color:rgba(237,231,218,.82);max-width:520px;margin-top:12px;text-shadow:0 1px 14px rgba(0,0,0,.9);transition:opacity .5s ease}
.fx-facets .fx-swap{opacity:0}

/* счётчик 1—2—3 справа */
.fx-facets .fx-dots{position:absolute;right:clamp(20px,4vw,48px);top:50%;transform:translateY(-50%);
  z-index:4;display:flex;flex-direction:column;gap:14px}
.fx-facets .fx-dots i{width:7px;height:7px;border-radius:50%;background:rgba(237,231,218,.28);
  transition:background .5s ease,transform .5s ease}
.fx-facets .fx-dots i.is-on{background:var(--gold,#A9C4B0);transform:scale(1.5)}

/* ── Приём «Проявление пером»: кадр открывается росчерком, а не геометрией.
      Перо — фирменный знак этого сайта, поэтому маска повторяет мазок. ── */
.fx-quill{position:relative;height:240vh}
.fx-quill .fx-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0b0a0a;
  display:flex;align-items:center;justify-content:center}
.fx-quill img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fx-quill .fx-ink{clip-path:polygon(0 46%,0 46%,0 54%,0 54%);will-change:clip-path}
.fx-quill .fx-line{position:absolute;left:0;top:0;bottom:0;width:2px;z-index:3;
  background:linear-gradient(180deg,transparent,#A9C4B0 30%,#A9C4B0 70%,transparent);
  box-shadow:0 0 30px 4px rgba(169,196,176,.6);opacity:0}
.fx-quill .fx-words{position:relative;z-index:4;text-align:center;padding:0 24px;max-width:760px}
.fx-quill .fx-words h2{font-family:'Prata',serif;font-size:clamp(24px,3.8vw,52px);color:#ede7da;
  text-shadow:0 4px 40px rgba(0,0,0,.8)}
.fx-quill .fx-words p{font-family:'Commissioner',sans-serif;color:rgba(237,231,218,.84);
  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-facets{height:250vh}
  .fx-facets .fx-note{font-size:13.5px}
  .fx-quill{height:190vh}
}
@media (prefers-reduced-motion:reduce),(pointer:coarse){
  .fx-facets .fx-zone{background:rgba(11,10,10,0)}
  .fx-quill .fx-ink{clip-path:none}
}