/* ============================================================
   OILER F1 Hero v1.2
   - анимируется только .f1h-img; HUD и лого статичны в углах
   - HUD: слева кто (пилот/команда), справа факт, справа снизу бренд
   - фикс клика по play (кольцо больше не перехватывает курсор)
   ============================================================ */

/* ------ страховка контейнера + глушение старого pure-CSS ------ */
.evdlx-uxblock-hero9a3f{position:relative;overflow:hidden}
.evdlx-uxblock-hero9a3f::before,
.evdlx-uxblock-hero9a3f::after{content:none!important;animation:none!important}

/* ------ заголовок из CMS-блока: поверх слайдов ------ */
.evdlx-uxblock-hero9a3f__inner{
  position:relative;z-index:2;
  width:fit-content;max-width:min(46%,640px);
  margin:0 auto;padding:10px 22px;box-sizing:border-box;text-align:center;
  background:rgba(10,12,16,.30);
  -webkit-backdrop-filter:blur(6px) saturate(1.1);
  backdrop-filter:blur(6px) saturate(1.1);
  border:1px solid rgba(255,255,255,.10);border-radius:14px;
}
.evdlx-uxblock-hero9a3f__title,
.evdlx-uxblock-hero9a3f__subtitle{
  margin:0;color:#fff;overflow-wrap:break-word;text-wrap:balance;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.evdlx-uxblock-hero9a3f__title{
  font-size:clamp(17px,1.8vw,28px);line-height:1.15;font-weight:700;letter-spacing:.2px;
}
.evdlx-uxblock-hero9a3f__subtitle{
  margin-top:5px;font-size:clamp(12px,1.05vw,16px);line-height:1.3;opacity:.92;
}
@media (max-width:1024px){
  .evdlx-uxblock-hero9a3f__inner{max-width:70%}
}
@media (max-width:767px){
  .evdlx-uxblock-hero9a3f__inner{max-width:92%;padding:7px 14px;border-radius:10px}
  .evdlx-uxblock-hero9a3f__title{font-size:15px;letter-spacing:.2px}
  .evdlx-uxblock-hero9a3f__subtitle{font-size:11px;margin-top:3px}
}

/* ==================== СЛАЙДШОУ ==================== */
.f1h-stage{position:absolute;inset:0;z-index:1;pointer-events:none}
.f1h-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.f1h-slide.act{opacity:1}

/* картинка — единственное, что двигается */
.f1h-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  will-change:transform;
}
.f1h-slide.act .f1h-img.fx-zi{animation:f1hZi 8.8s ease-in-out forwards}
.f1h-slide.act .f1h-img.fx-zo{animation:f1hZo 8.8s ease-in-out forwards}
.f1h-slide.act .f1h-img.fx-pl{animation:f1hPl 8.8s ease-in-out forwards}
@keyframes f1hZi{from{transform:scale(1)}to{transform:scale(1.05)}}
@keyframes f1hZo{from{transform:scale(1.05)}to{transform:scale(1)}}
@keyframes f1hPl{from{transform:scale(1.04) translateX(1.2%)}to{transform:scale(1.04) translateX(-1.2%)}}

.f1h-flash{
  position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
.f1h-flash.on{opacity:.8;transition:none}

/* ---------- HUD: статичные углы, мягкий вход без масштаба ---------- */
.f1h-meta{
  position:absolute;inset:0;pointer-events:none;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s ease .25s,transform .5s ease .25s;
}
.f1h-slide.act .f1h-meta{opacity:1;transform:none}

.f1h-who{
  position:absolute;top:14px;left:18px;max-width:36%;
  padding-left:10px;border-left:3px solid #e10600;
  color:#fff;font-weight:800;line-height:1.15;
  font-size:clamp(12px,1.05vw,15px);letter-spacing:2px;text-transform:uppercase;
  text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 14px rgba(0,0,0,.4);
}
.f1h-fact{
  position:absolute;top:14px;right:18px;max-width:36%;text-align:right;
  color:#fff;font-weight:600;line-height:1.25;
  font-size:clamp(11px,.95vw,14px);letter-spacing:1.6px;text-transform:uppercase;
  text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 14px rgba(0,0,0,.4);
}
.f1h-logo{
  position:absolute;right:18px;bottom:12px;height:36px;width:auto;
  opacity:.95;filter:drop-shadow(0 1px 4px rgba(0,0,0,.65));
}
@media (max-width:1200px){
  .f1h-who{letter-spacing:1.4px}
  .f1h-fact{letter-spacing:1.1px}
  .f1h-logo{height:30px}
}
@media (max-width:767px){
  .f1h-meta{display:none}
  .f1h-img{background-position:center!important}
}

/* ==================== ПЛЕЕР ==================== */
.f1h-ctrl{
  --c1:#ff8a00;--c2:#ff2d2d;               /* пауза — оранжевый градиент */
  display:flex;align-items:center;gap:9px;
  background:rgba(10,12,16,.35);
  -webkit-backdrop-filter:blur(6px) saturate(1.1);
  backdrop-filter:blur(6px) saturate(1.1);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:6px 12px 6px 6px;color:#fff;
}
.f1h-ctrl.playing{--c1:#16c784;--c2:#a8ff60} /* играет — зелёный */

/* кольцо-змейка: не перехватывает клики */
.f1h-ring{position:relative;display:inline-flex;flex:0 0 auto;border-radius:50%}
.f1h-ring::before{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  pointer-events:none;z-index:2;
  background:conic-gradient(from 0deg,transparent 0 60%,var(--c1) 78%,var(--c2) 96%,transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));
  animation:f1hSpin 1.6s linear infinite;
}
@keyframes f1hSpin{to{transform:rotate(360deg)}}

.f1h-btn{
  position:relative;z-index:1;
  width:32px;height:32px;border:0;border-radius:50%;
  cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);color:#fff;transition:background .2s ease;
}
.f1h-btn:hover{background:rgba(255,255,255,.24)}
.f1h-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.f1h-btn svg{width:15px;height:15px;fill:currentColor}

.f1h-title{
  max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  transition:max-width .45s ease,opacity .45s ease;
}
.f1h-ctrl.playing .f1h-title{max-width:190px;opacity:1}
.f1h-marquee{display:inline-flex;white-space:nowrap;
  animation:f1hScroll 10s linear infinite;animation-play-state:paused}
.f1h-ctrl.playing .f1h-marquee{animation-play-state:running}
.f1h-t{display:inline-block;padding-right:28px;
  font-size:12px;line-height:1;letter-spacing:.4px;color:#fff}
@keyframes f1hScroll{to{transform:translateX(-50%)}}

.f1h-vol{width:70px;accent-color:#e10600;cursor:pointer}

.f1h-desktop{position:absolute;left:14px;bottom:12px;z-index:3}

/* ==================== МОБИЛЬНЫЙ ЭКСПАНДЕР ==================== */
.f1h-expand{
  position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
  z-index:3;width:34px;height:22px;border:0;border-radius:8px 8px 0 0;
  cursor:pointer;padding:0;display:none;align-items:center;justify-content:center;
  background:rgba(10,12,16,.45);color:#fff;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.f1h-expand svg{width:16px;height:16px;fill:currentColor;transition:transform .3s ease}
.f1h-expand.open svg{transform:rotate(180deg)}
.f1h-expand:focus-visible{outline:2px solid #fff;outline-offset:1px}

.f1h-panel{
  max-height:0;overflow:hidden;transition:max-height .4s ease;
  background:#0b0d12;color:#fff;
}
.f1h-panel.open{max-height:380px}
.f1h-facts{list-style:none;margin:0;padding:12px 16px 4px}
.f1h-facts li{
  padding:6px 0;font-size:12px;line-height:1.45;letter-spacing:.4px;color:#e8eaef;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.f1h-facts li:last-child{border-bottom:0}
.f1h-ctrl--compact{margin:8px 16px 14px;border-radius:14px;background:rgba(255,255,255,.06)}
.f1h-ctrl--compact.playing .f1h-title{max-width:150px}

@media (max-width:767px){
  .f1h-desktop{display:none}
  .f1h-expand{display:flex}
}
@media (min-width:768px){
  .f1h-expand,.f1h-panel{display:none}
}

@media (prefers-reduced-motion:reduce){
  .f1h-img,.f1h-marquee,.f1h-ring::before{animation:none!important}
  .f1h-title,.f1h-meta,.f1h-expand svg{transition:none}
}

/* ==================== BLEED-РЕЖИМ (Латвия, TecDoc) ====================
   Хиро = стеклянная панель поиска; слайдшоу встаёт фоном на 100vw
   вместо статичного ::before, блюр-слой ::after панели не трогаем. */
.f1h-host--bleed{position:relative}
.f1h-host--bleed::before{content:none!important;animation:none!important}
.f1h-stage--bleed{
  inset:auto;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);
  z-index:-2;overflow:hidden;border-radius:0;
}
.f1h-stage--bleed .f1h-desktop{pointer-events:auto;left:18px;bottom:14px}
/* экспандер обычным потоком под панелью */
.f1h-expand--flow{
  position:static;transform:none;margin:8px auto 0;border-radius:8px;
}
@media (min-width:768px){
  .f1h-expand--flow{display:none}
}