/* Abelix · motion FX (2026-11-12, refs-motion TOP-5). Own code. Brand: night #0C0E13 · sunset #E08A4C · window #F4C27A · paper #F2EFEA */
:root{--fx-night:#0C0E13;--fx-sun:#E08A4C;--fx-win:#F4C27A;--fx-paper:#F2EFEA;--fx-sun-ink:#A9592A;--fx-ease:cubic-bezier(.22,.8,.18,1)}
.fx-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- 2 · word drum ---------- */
.fx-drum{margin:clamp(14px,2.2vh,22px) 0 0;display:inline-flex;align-items:baseline;gap:.32em;font:500 clamp(15px,1.25vw,19px)/1.15 var(--font-ui,inherit);letter-spacing:.01em;white-space:nowrap}
.fx-drum-k{opacity:.7}
.fx-drum-w{position:relative;display:inline-block;height:1.15em;overflow:hidden;vertical-align:bottom;transition:width .6s var(--fx-ease)}
.fx-drum-col{display:flex;flex-direction:column;transition:transform .7s cubic-bezier(.65,0,.2,1),filter .35s}
.fx-drum-col>span{display:block;height:1.15em;white-space:nowrap;width:max-content;font-weight:600}
.fx-drum.moving .fx-drum-col{filter:blur(1.4px)}
.hero .fx-drum{color:var(--ink,#0C0E13);opacity:0;transform:translateY(14px);transition:opacity 1.2s var(--fx-ease) .6s,transform 1.4s var(--fx-ease) .6s;
  padding:7px 14px;border-radius:999px;background:rgba(242,239,234,.6);border:1px solid rgba(169,89,42,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero .fx-drum .fx-drum-col>span{color:var(--fx-sun-ink)}
html.ready .hero .fx-drum{opacity:1;transform:none}

/* ---------- 2 · drafting intro over the logo ---------- */
.fx-draft-host{position:relative}
.fx-draft{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0}
.fx-draft *{fill:none;stroke:var(--dc);vector-effect:non-scaling-stroke;stroke-width:1}
.fx-draft .g{stroke-dasharray:1;stroke-dashoffset:1;opacity:.4}
.fx-draft .c{stroke-dasharray:1;stroke-dashoffset:1;opacity:.75}
.fx-draft .x{opacity:0}
.fx-draft .dim{opacity:0}
.fx-draft text{fill:var(--dc);stroke:none;font:600 7px/1 var(--font-ui,sans-serif);text-anchor:middle;letter-spacing:.06em}
.fx-draft text.r{text-anchor:start;font-size:6px}
.fx-draft.run{opacity:1}
.fx-draft.run .g{animation:fxDraw .5s cubic-bezier(.6,0,.2,1) var(--d) forwards}
.fx-draft.run .c{animation:fxDraw .45s ease-out var(--d) forwards}
.fx-draft.run .x,.fx-draft.run .dim{animation:fxIn .3s ease var(--d) forwards}
.fx-draft.out{opacity:0;transition:opacity .5s ease}
.fx-draft.skip{opacity:0;transition:opacity .2s ease}
@keyframes fxDraw{to{stroke-dashoffset:0}}
@keyframes fxIn{to{opacity:1}}
.logo.fx-done *{animation-duration:.01s!important;animation-delay:0s!important}

/* ---------- 1 · modules on the crane cable ---------- */
.fx-crane{position:relative;margin:clamp(8px,2vh,24px) 0 clamp(40px,7vh,80px)}
.fx-crane-rail{position:relative;overflow:visible}
.fx-crane-inner{position:relative;padding-top:2px}
.fx-crane-beam{height:38px;color:var(--fx-sun)}
.fx-crane-beam svg{display:block;overflow:visible}
.fx-crane-beam path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;opacity:.85}
.fx-crane-beam .pins rect{fill:#2A2E36;stroke:currentColor;stroke-width:1}
.fx-crane-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,26px);align-items:start}
.fx-hang{position:relative;transform-origin:50% 0;will-change:transform;display:flex;flex-direction:column;align-items:center;margin-top:-4px}
.fx-cable{display:block;width:2px;height:var(--L);background:linear-gradient(90deg,#8D8F95,#D9D7D2 50%,#7A7C82);border-radius:1px;box-shadow:0 0 0 .5px rgba(0,0,0,.2)}
.fx-hook{display:block;width:20px;height:22px;margin-top:-1px;color:#C9CBD0}
.fx-hook svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.fx-card{position:relative;width:100%;max-width:214px;margin-top:-6px;perspective:900px;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.fx-card:focus-visible .fx-face{outline:2px solid var(--fx-win);outline-offset:3px}
.fx-tilt{position:relative;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d}
.fx-flip{position:relative;display:grid;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.5,-.15,.25,1.25)}
.fx-card.is-flipped .fx-flip{transform:rotateY(180deg)}
.fx-face{grid-area:1/1;position:relative;display:flex;flex-direction:column;min-height:clamp(230px,19vw,290px);padding:26px 20px 20px;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.fx-front{background:linear-gradient(180deg,#F6F3EE,#E9E4DB);color:#0C0E13;box-shadow:0 22px 40px -18px rgba(0,0,0,.65),0 2px 0 rgba(255,255,255,.6) inset}
.fx-front::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:repeating-linear-gradient(-45deg,var(--fx-sun) 0 9px,#1A1C22 9px 18px);opacity:.9}
.fx-back{transform:rotateY(180deg);background:radial-gradient(120% 90% at 0% 0%,rgba(224,138,76,.22),transparent 60%),#15181F;color:var(--fx-paper);border:1px solid rgba(244,194,122,.22);box-shadow:0 22px 40px -18px rgba(0,0,0,.7)}
.fx-eye{position:absolute;left:50%;top:13px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#0C0E13;box-shadow:0 0 0 2px #B8BBC2,0 0 0 3px rgba(0,0,0,.25)}
.fx-back .fx-eye{background:#0C0E13;box-shadow:0 0 0 2px #6C6F77}
.fx-n{display:flex;align-items:baseline;gap:8px;margin-top:6px;font:500 11px/1 var(--font-ui,sans-serif);letter-spacing:.16em;text-transform:uppercase;opacity:.62}
.fx-n b{font-weight:700;letter-spacing:.04em}
.fx-back .fx-n{opacity:1;color:var(--fx-win);text-transform:none;letter-spacing:.02em;font-size:13px;font-weight:600}
.fx-ic{width:34px;height:34px;margin:auto 0 14px;color:var(--fx-sun-ink)}
.fx-front h3{margin:0;font:600 clamp(17px,1.35vw,21px)/1.15 var(--font-ui,sans-serif);letter-spacing:-.01em}
.fx-front p{margin:6px 0 0;font:400 13.5px/1.4 var(--font-ui,sans-serif);color:rgba(12,14,19,.68)}
.fx-turn{position:absolute;right:14px;bottom:12px;font-size:15px;opacity:.38;transition:transform .5s var(--fx-ease),opacity .3s}
.fx-card:hover .fx-turn{opacity:.8;transform:rotate(180deg)}
.fx-back p{margin:14px 0 auto;font:400 14px/1.5 var(--font-ui,sans-serif);color:rgba(242,239,234,.86)}
.fx-go{align-self:flex-start;margin-top:16px;display:inline-flex;gap:6px;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:var(--fx-sun);color:#16110C;font:600 13.5px/1 var(--font-ui,sans-serif);text-decoration:none}
.fx-go:hover{background:var(--fx-win)}
.fx-glare{position:absolute;inset:0;border-radius:16px;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.55),rgba(255,255,255,0) 55%);mix-blend-mode:soft-light;transform:translateZ(1px)}
.fx-card.hot .fx-glare{opacity:1}
.fx-card.is-flipped .fx-glare{mix-blend-mode:screen;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,30%),rgba(244,194,122,.18),transparent 60%)}
.fx-crane-hint{margin:22px 0 0;font:400 13px/1.4 var(--font-ui,sans-serif);color:rgba(242,239,234,.55);text-align:center}
.fx-crane.fx-still .fx-hang{transform:none!important}
/* card photo on the front (2026-11-12 cardimg): top ≈55 %, icon as a badge on its corner */
.fx-ph{position:relative;margin:12px -8px 14px;aspect-ratio:4/3;border-radius:11px;overflow:hidden;background:#D9D2C6;flex:none}
.fx-ph img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.fx-ph::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(12,14,19,.14),inset 0 8px 18px -8px rgba(12,14,19,.45),inset 0 -10px 16px -12px rgba(12,14,19,.35)}
.fx-ph .fx-ic{position:absolute;left:8px;bottom:8px;z-index:1;width:32px;height:32px;margin:0;padding:7px;box-sizing:border-box;border-radius:9px;background:rgba(246,243,238,.92);box-shadow:0 4px 10px -4px rgba(12,14,19,.5)}
.fx-front .fx-ph + h3{margin-top:auto}
@media (max-width:1100px) and (min-width:761px){.fx-ph{margin:10px -4px 12px}}
@media (max-width:1100px) and (min-width:761px){.fx-face{padding:24px 14px 16px}.fx-front p{font-size:12.5px}}
@media (max-width:760px){
  .fx-crane{margin-left:calc(-1 * var(--gutter,20px));margin-right:calc(-1 * var(--gutter,20px))}
  .fx-crane-rail{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:40px;overscroll-behavior-x:contain}
  .fx-crane-rail::-webkit-scrollbar{display:none}
  .fx-crane-inner{width:max-content;padding:0 var(--gutter,20px)}
  .fx-crane-list{grid-template-columns:repeat(5,64vw);gap:14px}
  .fx-hang{scroll-snap-align:center}
  .fx-face{min-height:250px}
  .fx-crane-hint{margin-top:0}
}

/* ---------- 3 · кв. 87 в статичной истории (reduced motion): та же простая стеклянная карточка, что #flat-tag (без «паспорта», 2026-11-12) ---------- */
.ss-pic{position:relative}
.ss-card{position:absolute;right:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;width:260px;padding:16px;color:var(--paper,#F2EFEA);
  border-radius:var(--r-lg,18px);border:1px solid rgba(242,239,234,.16);background:rgba(14,17,22,.66);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 24px 60px rgba(0,0,0,.4)}
.ss-card .ft-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ss-card b{font:700 22px/1 var(--font-ui,sans-serif);letter-spacing:-.02em}
.ss-card .ft-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--r-sm,10px);background:rgba(242,239,234,.05);border:1px solid rgba(242,239,234,.08)}
.ss-card .ft-plan{width:52px;height:38px;flex:none;fill:none;stroke:var(--brand-window,#F4C27A);stroke-width:1.4;stroke-linejoin:round}
.ss-card .ft-row span{font:500 13px/1.35 var(--font-ui,sans-serif);color:rgba(242,239,234,.86)}
.ss-card .ft-go{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--gold,#E08A4C);color:#16120E;
  font:600 14px/1 var(--font-ui,sans-serif);text-decoration:none;transition:filter .2s}
.ss-card .ft-go:hover{filter:brightness(1.08)}
@media (max-width:760px){
  .ss-card{position:relative;right:auto;top:auto;transform:none;width:auto;margin-top:12px}
}

/* ---------- 4 · чертёж → рендер ---------- */
.fx-d2r-host{max-width:1080px;margin:clamp(36px,6vh,64px) auto clamp(20px,3vh,32px)}
.fx-d2r{margin:0}
.fx-d2r-frame{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#1A1D23;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.fx-d2r-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;max-width:none}
.fx-d2r-a{transform:scale(calc(1.02 + var(--k,0) * .02))}
.fx-d2r-b{opacity:0;transform:scale(calc(1.04 - var(--k,0) * .02))}
.fx-d2r-dims{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;will-change:opacity,transform}
.fx-d2r-dims .dl{fill:none;stroke:#E08A4C;stroke-width:2.6;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.fx-d2r-dims .dm{fill:none;stroke:#E08A4C;stroke-width:2;opacity:0;vector-effect:non-scaling-stroke}
.fx-d2r-dims .dt{opacity:0}
.fx-d2r-dims .dt rect{fill:rgba(12,14,19,.82);stroke:rgba(224,138,76,.7);stroke-width:1.5}
.fx-d2r-dims .dt text{fill:#F4C27A;font:600 25px/1 var(--font-ui,sans-serif);letter-spacing:.04em}
.fx-d2r-chip{position:absolute;left:16px;top:16px;display:grid;padding:9px 14px;border-radius:999px;background:rgba(12,14,19,.72);border:1px solid rgba(244,194,122,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--fx-paper);font:600 12.5px/1 var(--font-ui,sans-serif);letter-spacing:.02em}
.fx-d2r-chip b{grid-area:1/1;font-weight:600;transition:opacity .4s,transform .5s var(--fx-ease)}
.fx-d2r-chip .cb{opacity:0;transform:translateY(6px)}
.fx-d2r-chip.fin .ca{opacity:0;transform:translateY(-6px)}
.fx-d2r-chip.fin .cb{opacity:1;transform:none;color:var(--fx-win)}
.fx-d2r-cap{margin:14px 2px 0;font:400 13.5px/1.5 var(--font-ui,sans-serif);color:rgba(242,239,234,.6);max-width:760px}
.light .fx-d2r-cap,.paper .fx-d2r-cap{color:rgba(12,14,19,.6)}
.fx-d2r.fx-still .fx-d2r-b{opacity:1}
.fx-d2r.fx-still .fx-d2r-dims{display:none}
.fx-d2r.fx-still .fx-d2r-chip .ca{opacity:0}.fx-d2r.fx-still .fx-d2r-chip .cb{opacity:1;transform:none}
@media (max-width:760px){
  .fx-d2r-frame{aspect-ratio:4/3;border-radius:16px}
  .fx-d2r-dims .dt text{font-size:34px}
  .fx-d2r-chip{left:10px;top:10px;font-size:11.5px;padding:7px 11px}
}

/* ---------- 5 · particles over the flight ---------- */
.fx-fluff{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
html.rm .fx-fluff{display:none}

@media (prefers-reduced-motion:reduce){
  .fx-flip{transition:none}
  .fx-drum-col,.fx-drum-w{transition:none}
}