/* ═══ XII ключей · эффекты по референсам премиальных сайтов (30.10) ═══
   1 фасад-выборщик · 2 «Один день» на циферблате · 3 время Ростова · 4 буквы за домом + золотая пыль
   5 многослойный зум · 6 финал сетки · 7 курсор · 8 наклон лент · 9 шторка-переход */

/* ── 4. «Ключ Города»: надпись проходит за домом ── */
.kh-tr{height:calc(var(--vh) * 1.8)}
@media (max-width:991px){.kh-tr{height:calc(var(--vh) * 1.6)}}
.dp_cover{--cw:max(100vw, calc(var(--vh) * 1.5228));position:absolute;width:var(--cw);height:calc(var(--cw) * .65667);
  left:calc(50% - var(--cw) / 2);top:calc(50% - var(--cw) * .328335);container-type:size;transform-origin:50% 50%}
.kh-tr_img .dp_cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.dp_word{position:absolute;left:0;top:7%;margin:0;white-space:nowrap;font:400 12cqw/1 var(--display);text-transform:uppercase;letter-spacing:-.01em;
  color:transparent;background:linear-gradient(180deg,#fff6e6 0%,#f1d2a1 55%,#d6a360 100%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 .4rem 3rem rgba(80,40,10,.35));will-change:transform;pointer-events:none}
/* передний слой: только дом, небо вырезано по силуэту кровли */
.dp_fg{clip-path:polygon(10.2% 100%,10.2% 28%,12.5% 26%,19.5% 21.3%,21% 21.3%,28% 18.6%,28.3% 15%,36% 10.4%,39% 9.8%,45% 7.8%,55% 7.8%,60% 10.4%,66% 14.4%,70% 16.4%,76% 21.8%,84% 24.4%,85% 26.8%,88% 29.4%,95.6% 32.4%,95.6% 100%)}
.dp_dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.dp_cap{position:absolute;left:var(--side,6rem);bottom:9vh;z-index:3;max-width:44rem;color:#fff;opacity:0;text-shadow:0 .2rem 2rem rgba(0,0,0,.55)}
.dp_cap .cap{color:#f1d2a1;margin-bottom:1rem}
.dp_t{font:400 3.4rem/1.1 var(--display);text-transform:uppercase}
@media (max-width:991px){.dp_cover{left:calc(50% - var(--cw) * .79)}.dp_word{top:calc(11rem + env(safe-area-inset-top,0px));font-size:9.5cqw}.dp_cap{left:2.4rem;right:2.4rem;bottom:14vh;max-width:calc(100vw - 4.8rem)}.dp_t{font-size:2.4rem}}

/* ── 3. время Ростова на первом экране ── */
.tod{position:absolute;left:var(--side,6rem);bottom:4.2rem;z-index:5;display:flex;align-items:center;gap:1rem;margin:0;
  font:500 1.1rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.tod i{width:.8rem;height:.8rem;border-radius:50%;background:#d6a360;box-shadow:0 0 0 0 rgba(214,163,96,.6);animation:todP 2.4s infinite}
@keyframes todP{0%{box-shadow:0 0 0 0 rgba(214,163,96,.6)}70%{box-shadow:0 0 0 1rem rgba(214,163,96,0)}100%{box-shadow:0 0 0 0 rgba(214,163,96,0)}}
@media (max-width:991px){.tod{display:none!important}}

/* ── 2. «Один день в особняке» ── */
.oday{position:relative;z-index:3;height:calc(var(--vh) * 3.6);background:#0d0c0b;overflow-x:clip}
.oday_stick{position:sticky;top:0;height:var(--vh);overflow:hidden;color:#fff}
.oday_imgs figure{position:absolute;inset:0;margin:0;clip-path:inset(100% 0 0 0);will-change:clip-path}
.oday_imgs figure:first-child{clip-path:inset(0 0 0 0)}
.oday_imgs img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform}
.oday_shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,8,6,.72) 0%,rgba(10,8,6,.25) 46%,rgba(10,8,6,0) 70%),linear-gradient(0deg,rgba(10,8,6,.55),rgba(10,8,6,0) 40%)}
.oday_kick{position:absolute;left:var(--side,6rem);top:11vh;color:#f1d2a1!important;z-index:2}
.oday_clock{position:absolute;right:calc(var(--side,6rem) - 2rem);top:50%;width:min(36rem,30vw);transform:translateY(-50%);z-index:2}
.oday_dial{width:100%;filter:drop-shadow(0 1rem 4rem rgba(0,0,0,.45))}
.oday_dial .dc-f{fill:rgba(12,9,7,.42)}
.oday_time{position:absolute;left:0;right:0;top:100%;margin:2rem 0 0;text-align:center;font:400 4.4rem/1 var(--display);letter-spacing:.06em;color:#fff}
.oday_list{position:absolute;left:var(--side,6rem);top:50%;transform:translateY(-50%);width:min(52rem,42vw);height:30rem;margin:0;padding:0;list-style:none;z-index:2}
.oday_list li{position:absolute;inset:0;opacity:0;visibility:hidden}
.oday_list span{display:block;font:500 1.2rem/1 var(--sans);letter-spacing:.3em;color:#d6a360;margin-bottom:1.8rem}
.oday_list h3{margin:0 0 1.6rem;font:400 6.4rem/.95 var(--display);text-transform:uppercase;letter-spacing:-.01em}
.oday_list p{margin:0;max-width:40rem;font-size:1.6rem;line-height:1.55;color:rgba(255,255,255,.86)}
.oday_bar{position:absolute;left:var(--side,6rem);right:var(--side,6rem);bottom:6vh;height:1px;background:rgba(255,255,255,.2);z-index:2}
.oday_bar i{position:absolute;left:0;top:-.5px;height:2px;width:100%;background:#d6a360;transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:991px){
  .oday{height:calc(var(--vh) * 3.2)}
  .oday_shade{background:linear-gradient(0deg,rgba(10,8,6,.85) 0%,rgba(10,8,6,.35) 50%,rgba(10,8,6,.15) 100%)}
  .oday_kick{left:2.4rem;top:8rem}
  .oday_clock{right:2.4rem;top:12rem;width:11rem;transform:none}
  .oday_time{font-size:2.2rem;margin-top:1rem}
  .oday_list{left:2.4rem;right:2.4rem;width:auto;top:auto;bottom:9vh;height:22rem;transform:none}
  .oday_list li{top:auto}
  .oday_list h3{font-size:3.6rem}.oday_list p{font-size:1.5rem}
  .oday_bar{left:2.4rem;right:2.4rem;bottom:4.5vh}
}

/* ── 5. многослойный зум «дверь → лобби → лестница → галерея» ── */
.lz{position:relative;z-index:3;height:calc(var(--vh) * 2.8);background:#0d0c0b}
.lz_stick{position:sticky;top:0;height:var(--vh);overflow:hidden}
.lz_scene{position:absolute;inset:0}
.lz_l{position:absolute;inset:0;margin:0;transform-origin:50% 50%;will-change:transform;backface-visibility:hidden}
.lz_l img{width:100%;height:100%;object-fit:cover}
.lz_l+.lz_l{box-shadow:0 0 0 1px rgba(214,163,96,.85),0 0 0 .8rem rgba(13,12,11,.55),0 0 0 calc(.8rem + 1px) rgba(214,163,96,.5),0 2rem 8rem rgba(0,0,0,.6)}
.lz_cap{position:absolute;left:var(--side,6rem);bottom:8vh;z-index:5;color:#fff;text-shadow:0 .2rem 2rem rgba(0,0,0,.6)}
.lz_cap .cap{color:#f1d2a1;margin-bottom:1.4rem}
.lz_cap ol{position:relative;width:80vw;height:6.4rem;margin:0;padding:0;list-style:none;overflow:hidden}
.lz_cap li{position:absolute;left:0;top:0;white-space:nowrap;font:400 6rem/1.05 var(--display);text-transform:uppercase;transform:translateY(110%);transition:transform .8s cubic-bezier(.25,1,.5,1)}
.lz_cap li.on{transform:none}.lz_cap li.up{transform:translateY(-110%)}
@media (max-width:991px){.lz{height:calc(var(--vh) * 2.5)}.lz_cap{left:2.4rem;bottom:10vh}.lz_cap ol{height:4.4rem}.lz_cap li{font-size:4rem}}

/* ── 6. финал сетки: кадр на весь экран ── */
.g12{height:calc(var(--vh) * 2.6)!important}
.g12_full{position:absolute;inset:0;margin:0;z-index:4;clip-path:inset(50% 50% 50% 50%);visibility:hidden;opacity:0}
.g12_full img{width:100%;height:100%;object-fit:cover}
.g12_full figcaption{position:absolute;left:var(--side,6rem);bottom:9vh;max-width:60rem;color:#fff;font:400 4.8rem/1.02 var(--display);text-transform:uppercase;text-shadow:0 .2rem 2.4rem rgba(0,0,0,.6);opacity:0}
.g12_full figcaption .cap{display:block;color:#f1d2a1;margin-bottom:1.4rem;font-family:var(--sans)}
.g12_full::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,8,6,.6),rgba(10,8,6,0) 50%);pointer-events:none}
.g12_full figcaption{z-index:1}
@media (max-width:991px){.g12_full figcaption{left:2.4rem;right:2.4rem;font-size:3rem}}

/* ── 1. фасад-выборщик ── */
.fs{position:relative;z-index:3;background:#fff;padding:14rem 0 12rem;overflow-x:clip}
.fs_w{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(36rem,1fr);grid-template-areas:"head head" "pic side";gap:4rem 6rem;padding:0 var(--side,6rem)}
.fs_head{grid-area:head;max-width:70rem}
.fs_head h2{margin:1.4rem 0 1.6rem;font:400 7.2rem/.95 var(--display);text-transform:uppercase}
.fs_head h2 em{font:italic 400 1.05em/1 var(--script);text-transform:none;color:#a8783e}
.fs_lead{margin:0;color:rgba(21,20,19,.62);font-size:1.6rem}
.fs_pic{grid-area:pic;position:relative}
.fs_img{position:relative;aspect-ratio:1500/985;border-radius:.4rem;overflow:hidden}
.fs_img img{width:100%;height:100%;object-fit:cover;transition:filter .6s}
.fs_svg{position:absolute;inset:0;width:100%;height:100%}
.fs_svg polygon{fill:rgba(214,163,96,0);stroke:rgba(255,236,200,0);stroke-width:.25;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .45s,stroke .45s}
.fs_svg polygon:hover{fill:rgba(214,163,96,.22);stroke:rgba(255,236,200,.7)}
.fs_svg polygon.on{fill:rgba(214,163,96,.42);stroke:#ffe9c4;stroke-width:2}
.fs_tags{position:absolute;right:.8%;top:0;bottom:0;margin:0;padding:0;list-style:none;pointer-events:none}
.fs_tags li{position:absolute;right:0;top:var(--y);transform:translate(0,-50%);font:400 2.6rem/1 var(--display);color:#fff;text-shadow:0 0 1.2rem rgba(0,0,0,.6);transition:color .3s}
.fs_tags li.on{color:#ffd99c}
.fs_side{grid-area:side;align-self:center}
.fs_fl{display:flex;gap:.8rem;margin-bottom:2.4rem}
.fs_fl button{flex:1;padding:1.4rem .6rem;border:1px solid rgba(21,20,19,.14);border-radius:10rem;background:none;font:500 1.15rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#151413;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.fs_fl button[aria-selected="true"]{background:#151413;color:#fff;border-color:#151413}
.fs_info h3{margin:0 0 .6rem;font:400 4rem/1 var(--display);text-transform:uppercase}
.fs_info>p{margin:0 0 2.4rem;color:rgba(21,20,19,.62);font-size:1.5rem}
.fs_lots{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:0;padding:0;list-style:none}
.fs_lots button{width:100%;display:grid;gap:.4rem;padding:1.6rem 1.6rem 1.4rem;text-align:left;border:1px solid rgba(21,20,19,.12);border-radius:.6rem;background:#fff;cursor:pointer;transition:border-color .3s,transform .3s,box-shadow .3s}
.fs_lots button:hover{border-color:#d6a360;transform:translateY(-.3rem);box-shadow:0 1.4rem 3rem rgba(21,20,19,.08)}
.fs_lots b{font:400 3rem/1 var(--display);color:#a8783e}
.fs_lots span{font-size:1.3rem;color:#151413}
.fs_plan{display:inline-flex;align-items:center;gap:1rem;margin-top:2rem;padding:1.5rem 2.6rem;border:0;border-radius:10rem;background:#d6a360;color:#151413;font:500 1.15rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .3s}
.fs_plan:hover{background:#e3b678}
.fs_lots small{font-size:1.15rem;color:rgba(21,20,19,.55)}
@media (max-width:991px){
  .fs{padding:9rem 0 7rem}
  .fs_w{grid-template-columns:1fr;grid-template-areas:"head" "pic" "side";gap:2.4rem;padding:0 2.4rem}
  .fs_head h2{font-size:4.2rem}
  .fs_pic{margin:0 -2.4rem}.fs_img{border-radius:0}
  .fs_tags{right:auto;left:1.5%}.fs_tags li{right:auto;left:0;font-size:1.8rem}
}

/* ── 7. курсор и «магнитные» кнопки (только мышь) ── */
.cur{position:fixed;left:0;top:0;z-index:9990;pointer-events:none;width:1rem;height:1rem;margin:-.5rem 0 0 -.5rem;border-radius:50%;background:#d6a360;
  display:grid;place-items:center;transition:width .35s cubic-bezier(.25,1,.5,1),height .35s cubic-bezier(.25,1,.5,1),margin .35s cubic-bezier(.25,1,.5,1),background .35s,opacity .3s;mix-blend-mode:normal;opacity:0}
.cur.on{opacity:1}
.cur span{font:500 1rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#151413;opacity:0;transition:opacity .2s;white-space:nowrap}
.cur.big{width:9rem;height:9rem;margin:-4.5rem 0 0 -4.5rem;background:rgba(214,163,96,.92)}
.cur.big span{opacity:1;transition-delay:.1s}
.cur.hide{opacity:0}
@media (pointer:coarse),(max-width:991px){.cur{display:none}}

/* ── 9. шторка-переход с ключом ── */
.curt{position:fixed;inset:0;z-index:9980;pointer-events:none;visibility:hidden;display:grid;place-items:center}
.curt_p{position:absolute;left:0;right:0;height:50.5%;background:#0d0c0b}
.curt_top{top:0}.curt_bot{bottom:0}
html.t-bordo .curt_p{background:#33060d}
.curt_k{position:relative;width:7rem;height:11rem;opacity:0}
.curt_k svg{width:100%;height:100%;fill:none;stroke:#d6a360;stroke-width:3}
.curt_k svg .kh-i{fill:#d6a360;stroke:none}
.curt_t{position:absolute;left:0;right:0;top:calc(50% + 8rem);text-align:center;font:500 1.1rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:#d6a360;opacity:0}

/* ── первый экран: дом виден целиком за гербом-скважиной, затемнён по краям под текст ── */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;--dim:1;transform-origin:50% 50%}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s}
.hero-bg .is-night{opacity:0}
body[data-time="night"] .hero-bg .is-night{opacity:1}
.hero-bg::after{content:"";position:absolute;inset:0;opacity:var(--dim);
  background:linear-gradient(90deg,rgba(51,6,13,.9) 0%,rgba(51,6,13,.62) 28%,rgba(51,6,13,.32) 50%,rgba(51,6,13,.62) 72%,rgba(51,6,13,.9) 100%)}
html:not(.t-bordo) .hero-bg::after{background:linear-gradient(90deg,rgba(13,10,8,.88) 0%,rgba(13,10,8,.58) 28%,rgba(13,10,8,.3) 50%,rgba(13,10,8,.58) 72%,rgba(13,10,8,.88) 100%)}
@media (max-width:991px){
  .hero-bg::after{background:linear-gradient(180deg,rgba(51,6,13,.88) 0%,rgba(51,6,13,.45) 30%,rgba(51,6,13,.4) 62%,rgba(51,6,13,.92) 100%)}
  html:not(.t-bordo) .hero-bg::after{background:linear-gradient(180deg,rgba(13,10,8,.85) 0%,rgba(13,10,8,.42) 30%,rgba(13,10,8,.38) 62%,rgba(13,10,8,.9) 100%)}
}

/* ── вступление: манифест + кадры особняка, слова проявляются по скроллу, цифры набегают ── */
.mf{position:relative;z-index:3;background:var(--ivory);padding:14rem calc(var(--side,6rem) - 4rem) 14rem var(--side,6rem);overflow:hidden}
.mf_bg{position:absolute;right:-4rem;top:2rem;margin:0;font:400 52rem/.8 var(--display);color:transparent;-webkit-text-stroke:1px rgba(201,150,90,.32);pointer-events:none;user-select:none;will-change:transform}
.mf_w{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"top pics" "txt pics" "facts facts";column-gap:6rem;align-items:start}
.mf_top{grid-area:top;display:flex;align-items:center;gap:2rem;margin-bottom:4.4rem}
.mf_dial{width:8.4rem;flex:none}
.mf_top .cap{color:#a8783e}
.mf_txt{grid-area:txt;margin:0;font:400 4.6rem/1.1 var(--display);text-transform:uppercase;letter-spacing:-.005em;color:var(--ink)}
.mf_txt em{font:italic 400 1.08em/1 var(--script);text-transform:none;color:#a8783e}
.mf_txt .w{opacity:.13}
.mf_pics{grid-area:pics;position:relative;height:min(68rem,78vh);margin-top:2rem}
.mf_p1{position:absolute;right:0;top:0;width:78%;height:88%;margin:0;border-radius:1.2rem;overflow:hidden;clip-path:inset(100% 0 0 0 round 1.2rem)}
.mf_p1 img,.mf_p2 img{width:100%;height:100%;object-fit:cover}
.mf_p1 .pf{inset:1.4rem}
.mf_p2{position:absolute;left:0;bottom:0;width:52%;aspect-ratio:16/10;margin:0;border-radius:1rem;overflow:hidden;box-shadow:0 3rem 6rem rgba(21,20,19,.25);border:.6rem solid var(--ivory);clip-path:inset(0 100% 0 0 round 1rem)}
.mf_badge{position:absolute;left:12%;top:-4rem;z-index:2;width:15rem;height:15rem;border-radius:50%;background:#151413;display:grid;place-items:center;box-shadow:0 2rem 4rem rgba(0,0,0,.25)}
html.t-bordo .mf_badge{background:#4f0b15}
.mf_badge svg:first-child{position:absolute;inset:0;width:100%;height:100%;animation:mfSpin 22s linear infinite}
.mf_badge text{font:500 13px var(--sans);letter-spacing:.18em;text-transform:uppercase;fill:#e6c08a}
.mf_key{font:400 3.4rem/1 var(--display);color:#d6a360}
@keyframes mfSpin{to{transform:rotate(360deg)}}
.mf_facts{grid-area:facts;display:grid;grid-template-columns:repeat(4,1fr);gap:3rem;margin:9rem 0 0}
.mf_facts div{padding-top:2.4rem;border-top:1px solid rgba(201,150,90,.55)}
.mf_facts dd{margin:0 0 1rem;font:400 7.2rem/1 var(--display);color:var(--ink);white-space:nowrap}
.mf_facts dt{font:500 1.15rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(21,20,19,.55)}
@media (max-width:991px){
  .mf{padding:9rem 2.4rem 9rem}
  .mf_bg{font-size:30rem;right:-3rem;top:auto;bottom:20rem}
  .mf_w{grid-template-columns:1fr;grid-template-areas:"top" "pics" "txt" "facts"}
  .mf_top{margin-bottom:3rem;gap:1.4rem}.mf_dial{width:6rem}
  .mf_pics{height:46rem;margin:0 0 5rem}
  .mf_p1{width:82%}
  .mf_p2{width:60%}
  .mf_badge{left:4%;top:-3rem;width:11rem;height:11rem}
  .mf_key{font-size:2.6rem}
  .mf_txt{font-size:3.2rem;line-height:1.1}
  .mf_facts{grid-template-columns:1fr 1fr;gap:3rem 2rem;margin-top:6rem}
  .mf_facts dd{font-size:5rem}
}