@charset "utf-8";
/* ofure.ru — лендинг безмасляных компрессоров OFURE 40 бар. Общий вид блоков — css/landing.css.
   Цвета — OFURE: красный логотипа и графит стали; тёмные блоки — «ночной цех». */

[data-site="ofure"] {
  --c-brand: #1d2836;
  --c-primary: #d42a20;
  --c-primary-hover: #e8453b;
  --c-primary-ink: #fff;
  --c-accent: #e3352a;
  --c-accent-ink: #fff;
  --c-accent-text: #c4241a;
  --c-deep: #11161e;
  --c-deep-2: #1b2430;
  --c-soft: #f2f4f6;
  --c-surface: #f2f4f6;
  --c-dark: #11161e;
  --c-deep-rgb: 17 22 30;
  --c-brand-rgb: 29 40 54;
  --c-accent-rgb: 227 53 42;
  --c-brand-2: #34465c;
}

[data-site="ofure"] .lp-hero__big { letter-spacing: .04em; background: linear-gradient(90deg, #fff 0%, #fff 45%, #ffb3ad 100%); -webkit-background-clip: text; background-clip: text; }
/* фон «Модели» — схема компрессорной с сайта ofure.ru: светлая картинка, затемняем сильнее */
[data-site="ofure"] .lp-equipment { background-image: linear-gradient(180deg, rgb(17 22 30 / 94%), rgb(17 22 30 / 97%)), var(--bg, linear-gradient(transparent, transparent)); }

/* ---------- живая схема «L-компрессор, три ступени» ---------- */
.op__top { position: relative; padding-right: 92px; }
.op__dial { position: absolute; right: 0; top: -2px; width: 78px; height: 78px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, #1b2430 78%, transparent 80% 100%),
              conic-gradient(from 225deg, var(--c-accent) calc(var(--p, 1) * 270deg), rgb(255 255 255 / 14%) 0 270deg, transparent 0);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 12%); }
.op__dial b { font: 800 1.5rem/1 var(--font); color: #fff; }
.op__dial span { font: 600 .62rem/1 var(--mono); color: rgb(255 255 255 / 65%); text-transform: uppercase; letter-spacing: .1em; }
.op__case { fill: #2a3646; stroke: rgb(255 255 255 / 18%); }
.op__wheel { fill: #3a4a5e; stroke: rgb(255 255 255 / 45%); stroke-width: 2; }
.op__spoke { stroke: var(--c-accent); stroke-width: 3; stroke-linecap: round; }
.op__crank { transform-box: fill-box; transform-origin: center; animation: opSpin .9s linear infinite; }
@keyframes opSpin { to { transform: rotate(360deg); } }
.op__fins { stroke: rgb(0 0 0 / 18%); stroke-width: 1.5; }
.op__piston rect { fill: #5b6b7e; }
.op__piston rect:first-child { fill: var(--c-accent); }
.op__piston--v { animation: opV .9s ease-in-out infinite; }
.op__piston--h { animation: opH .9s ease-in-out infinite; animation-delay: -.3s; }
.op__piston--3 { animation-name: opH3; animation-delay: -.6s; }
@keyframes opV { 50% { transform: translateY(-42px); } }
@keyframes opH { 50% { transform: translateX(42px); } }
@keyframes opH3 { 50% { transform: translateX(28px); } }
.op__tag { font: 700 12px/1 var(--mono); fill: rgb(255 255 255 / 80%); text-anchor: middle; }
.op__cooler rect { fill: #24577a; stroke: #8fd0ff; stroke-width: 1.2; }
.op__cooler path { stroke: rgb(143 208 255 / 65%); stroke-width: 1.4; }
.op__oilfree path { fill: none; stroke: #ffd36b; stroke-width: 2.5; }
.op__oilfree line { stroke: var(--c-accent); stroke-width: 3.5; stroke-linecap: round; }
.op__status { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-top: 6px;
  font: 500 .78rem/1 var(--mono); color: rgb(255 255 255 / 78%); }
.op__bar { width: 34%; height: 4px; border-radius: 2px; background: rgb(255 255 255 / 15%); overflow: hidden; }
.op__bar i { display: block; height: 100%; background: var(--c-accent); transform-origin: left; transform: scaleX(0); transition: transform .45s ease; }
/* фон первого экрана — фото колец и поршней, пёстрое: панель схемы плотнее, затемнение сильнее */
.op__screen { background: linear-gradient(160deg, rgb(27 36 48 / 86%), rgb(17 22 30 / 92%)); }
[data-site="ofure"] .lp-hero__media::after {
  background: linear-gradient(90deg, rgb(17 22 30 / 95%) 0%, rgb(17 22 30 / 82%) 45%, rgb(17 22 30 / 55%) 80%, rgb(17 22 30 / 65%) 100%),
              linear-gradient(0deg, rgb(17 22 30 / 94%) 0%, transparent 40%);
}