/* Демо «Промтермо»: стили слоя эффектов (см. fx.js). */
:root{--fx:#f0453e;--fx-ink:#fff;--fx-bg:#0a1321}
/* «тепловизор»: копия картинки героя в условных тепловых цветах видна только внутри круга */
@property --lr{syntax:'<length>';inherits:true;initial-value:0px}
.hero{--lx:66%;--ly:42%;--lr:0px;transition:--lr .55s cubic-bezier(.2,.7,.2,1)}
.hero.fx-lens-on{--lr:118px}
.fx-thermal{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;filter:url(#fx-thermal) contrast(1.08) saturate(1.2);-webkit-mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly),#000 calc(100% - 1px),transparent 100%);mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly),#000 calc(100% - 1px),transparent 100%)}
.fx-thermal .hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:1}
.fx-lens{position:absolute;left:var(--lx);top:var(--ly);z-index:3;width:calc(var(--lr)*2);height:calc(var(--lr)*2);margin:calc(var(--lr)*-1) 0 0 calc(var(--lr)*-1);border:1.5px solid rgba(255,255,255,.9);border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 46px rgba(255,120,60,.3);pointer-events:none;opacity:0;transition:opacity .4s}
.hero.fx-lens-on .fx-lens{opacity:1}
.fx-lens::before,.fx-lens::after{content:"";position:absolute;left:50%;top:50%;background:rgba(255,255,255,.85)}
.fx-lens::before{width:18px;height:1px;margin:0 0 0 -9px}
.fx-lens::after{width:1px;height:18px;margin:-9px 0 0}
.fx-lens b{position:absolute;left:50%;top:100%;margin-top:10px;transform:translateX(-50%);padding:5px 10px 4px;background:#0a1321;color:#fff;font:700 14px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.fx-lens span{position:absolute;left:50%;bottom:100%;margin-bottom:8px;transform:translateX(-50%);font:600 10px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:1.6px;color:#ffd9c8;white-space:nowrap;text-shadow:0 1px 2px #000}
/* тепловые потоки */
.fx-flow{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
/* температурная шкала прокрутки */
.fx-gauge{position:fixed;right:14px;top:50%;z-index:90;width:8px;height:220px;margin-top:-110px;border-radius:4px;background:#141e3526;box-shadow:inset 0 0 0 1px #141e3530;opacity:0;transition:opacity .4s;pointer-events:none;--p:0}
.fx-gauge.show{opacity:1}
.fx-gauge i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--p)*100%);border-radius:4px;background:linear-gradient(0deg,#2a5fd0,#f0b03e 55%,#f0453e)}
.fx-gauge b{position:absolute;right:16px;bottom:calc(var(--p)*100%);transform:translateY(50%);padding:3px 7px 2px;background:#141e35;color:#fff;font:700 12px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.fx-gauge span{position:absolute;left:50%;top:100%;margin-top:8px;transform:translateX(-50%);font:600 10px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:1px;color:#677184;white-space:nowrap}
.fx-num{font-variant-numeric:tabular-nums}
/* строки и карточки выезжают по очереди */
.fx-rise{opacity:0;translate:0 26px;transition:opacity .7s,translate .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--k)*90ms)}
.fx-rise.fx-in{opacity:1;translate:0 0}
/* активная вкладка услуг и задача: полоса-таймер, чтобы было видно, что листается само */
.solution-list button[aria-selected=true],.finder-options button[aria-pressed=true]{position:relative}
.solution-list button[aria-selected=true]::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--fx);transform-origin:0 50%;animation:fx-bar 3.8s linear both}
@keyframes fx-bar{from{transform:scaleX(0)}}
@media (max-width:1100px){.fx-gauge{display:none}}
@media (max-width:760px){.hero.fx-lens-on{--lr:74px}.fx-lens b{font-size:12px}.fx-lens span{display:none}}
@media (prefers-reduced-motion:reduce){.fx-rise{opacity:1;translate:none}}