/* Abelix Home · motion FX (shared with the main site's experience/css/fx.css; crane + fluff parts removed) (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)}

/* ---------- 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}

/* ---------- 3 · holographic «паспорт квартиры 87» ---------- */
@property --fxp{syntax:'<number>';inherits:true;initial-value:0}
.fx-pass{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;--fx:0;--fy:0;--hot:0;position:relative;width:min(340px,100%);aspect-ratio:5/7;perspective:1000px;touch-action:pan-y;user-select:none;-webkit-user-select:none;flex:none}
.fx-pass-tilt{position:absolute;inset:0;border-radius:22px;overflow:hidden;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;
  background:radial-gradient(120% 80% at 100% 0%,rgba(224,138,76,.28),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(244,194,122,.14),transparent 60%),linear-gradient(160deg,#1B1F27,#0C0E13 70%);
  box-shadow:0 30px 60px -24px rgba(12,14,19,.75),0 0 0 1px rgba(244,194,122,.28) inset;color:var(--fx-paper)}
.fx-pass-foil,.fx-pass-spark,.fx-pass-glare{position:absolute;inset:0;pointer-events:none}
/* foil: sunset→window bands that slide with the tilt; color-dodge keeps it a sheen, not a paint layer */
.fx-pass-foil{opacity:calc(.22 + var(--hot) * .26);mix-blend-mode:color-dodge;
  background:repeating-linear-gradient(115deg,rgba(224,138,76,0) 0%,rgba(224,138,76,.9) 7%,rgba(244,194,122,.95) 12%,rgba(242,239,234,.7) 15%,rgba(244,194,122,.85) 19%,rgba(224,138,76,0) 27%);
  background-size:260% 260%;background-position:calc(50% + var(--fx) * 40% + var(--fxp) * 60%) calc(50% + var(--fy) * 30%)}
/* sparkle: tiny dots, masked to a moving diagonal band */
.fx-pass-spark{opacity:calc(.35 + var(--hot) * .5);mix-blend-mode:screen;
  background-image:radial-gradient(circle at 20% 30%,#FFF6E4 0 .9px,transparent 1.4px),radial-gradient(circle at 70% 80%,#F4C27A 0 .8px,transparent 1.3px),radial-gradient(circle at 45% 60%,#FFE9C6 0 .7px,transparent 1.2px);
  background-size:23px 19px,31px 29px,17px 23px;
  -webkit-mask-image:linear-gradient(115deg,transparent 30%,#000 45%,#000 52%,transparent 66%);mask-image:linear-gradient(115deg,transparent 30%,#000 45%,#000 52%,transparent 66%);
  -webkit-mask-size:240% 240%;mask-size:240% 240%;-webkit-mask-position:calc(50% - var(--fx) * 60% - var(--fxp) * 80%) 50%;mask-position:calc(50% - var(--fx) * 60% - var(--fxp) * 80%) 50%}
.fx-pass-glare{opacity:calc(var(--hot) * .9);background:radial-gradient(70% 55% at var(--mx) var(--my),rgba(255,248,236,.35),rgba(255,248,236,0) 60%);mix-blend-mode:overlay}
.fx-pass.fx-idle:not(.fx-hot){animation:fxShimmer 7s ease-in-out infinite alternate}
@keyframes fxShimmer{from{--fxp:-.5}to{--fxp:.5}}
.fx-pass-in{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding:22px 22px 20px;transform:translateZ(24px)}
.fx-pass-in,.fx-pass-in *{text-shadow:0 1px 2px rgba(12,14,19,.55)}
.fx-pass-top{display:flex;justify-content:space-between;align-items:center;font:600 11px/1 var(--font-ui,sans-serif);letter-spacing:.18em;text-transform:uppercase;color:var(--fx-win)}
.fx-pass-top em{font-style:normal;letter-spacing:.08em;padding:5px 9px;border-radius:999px;border:1px solid rgba(244,194,122,.45);color:var(--fx-paper);text-shadow:none;background:rgba(12,14,19,.4)}
.fx-pass-no{margin-top:auto;font:300 clamp(64px,7vw,92px)/.9 var(--font-display,var(--font-ui,serif));letter-spacing:-.03em;color:var(--fx-paper)}
.fx-pass-no small{font:500 15px/1 var(--font-ui,sans-serif);letter-spacing:.06em;margin-right:8px;color:var(--fx-win);vertical-align:.9em}
.fx-pass-plan{width:70px;height:48px;margin:14px 0 6px;fill:none;stroke:rgba(244,194,122,.75);stroke-width:1.3}
.fx-pass-specs{margin:10px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;border-top:1px solid rgba(242,239,234,.18);padding-top:14px}
.fx-pass-specs div{min-width:0}
.fx-pass-specs dt{font:500 10.5px/1 var(--font-ui,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:rgba(242,239,234,.6)}
.fx-pass-specs dd{margin:6px 0 0;font:600 18px/1.1 var(--font-ui,sans-serif);color:var(--fx-paper)}
.fx-free{display:flex;align-items:center;gap:7px;color:#CFE3A0!important}
.fx-free i{width:8px;height:8px;border-radius:50%;background:#B9D37A;box-shadow:0 0 8px rgba(185,211,122,.8)}
.fx-pass-foot{margin-top:14px;font:400 11.5px/1.3 var(--font-ui,sans-serif);color:rgba(242,239,234,.58)}
.fx-pass.fx-still .fx-pass-tilt{transform:none}
.fx-pass-row{display:flex;align-items:center;gap:clamp(28px,5vw,80px);margin-top:clamp(40px,7vh,72px);padding:clamp(24px,3vw,40px);border-radius:28px;background:linear-gradient(120deg,rgba(12,14,19,.04),rgba(224,138,76,.07));border:1px solid rgba(12,14,19,.08)}
.fx-pass-txt{max-width:520px}
.fx-pass-txt h3{margin:0 0 12px;font:300 clamp(32px,3.4vw,52px)/1 var(--font-display,serif);letter-spacing:-.015em}
.fx-pass-txt p{margin:0;font:400 16px/1.55 var(--font-ui,sans-serif);color:rgba(12,14,19,.72)}
.fx-pass-txt .fx-pass-k{margin-bottom:12px;font:600 11px/1 var(--font-ui,sans-serif);letter-spacing:.2em;text-transform:uppercase;color:var(--fx-sun-ink)}
.fx-pass-txt .fx-pass-hint{margin-top:14px;font-size:13.5px;color:rgba(12,14,19,.55)}
@media (max-width:760px){
  .fx-pass-row{flex-direction:column;align-items:stretch;padding:20px}
  .fx-pass{width:min(300px,100%);margin:0 auto}
}

/* ---------- 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}
}

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

/* ---------- Abelix Home specifics ---------- */
.fx-drum,.fx-pass,.fx-d2r,.fx-hb,.fx-draft{--font-ui:Onest,system-ui,-apple-system,"Segoe UI",sans-serif;--font-display:Onest,system-ui,-apple-system,"Segoe UI",sans-serif}
.fx-drum-home{display:flex;width:max-content;max-width:100%;margin:0 0 22px;font:500 clamp(18px,1.7vw,26px)/1.15 var(--body);letter-spacing:-.01em;color:var(--paper);
  opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease) .35s,transform .9s var(--ease) .35s}
.hero.go .fx-drum-home{opacity:1;transform:none}
.fx-drum-home .fx-drum-k{opacity:.82}
.fx-drum-home .fx-drum-col>span{color:var(--win);font-weight:600}
.fx-dust{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.fx-hb{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(56px,8vw,112px)}
.fx-hb-k{grid-column:1/-1;margin:0 0 -8px}
.fx-hb .fx-d2r-host{max-width:none;margin:0}
.fx-hb .fx-pass{justify-self:center}
.fx-hb .fx-d2r-cap{color:var(--muted-l)}
.fx-hb-side{display:flex;flex-direction:column;align-items:center;gap:16px}
.fx-hb-note{margin:0;max-width:340px;text-align:center;font-size:13.5px;line-height:1.5;color:var(--muted-l)}
@media (max-width:900px){.fx-hb{grid-template-columns:1fr}}