/*
 * Видео-визитка: кружок с немой записью в левом нижнем углу + модалка
 * с полной версией. Кружок появляется на подходе к блоку principles и
 * прячется, если пользователь ушёл выше — на первом экране интерфейс
 * остаётся чистым.
 */

.uxp-vbadge{
  position:fixed;z-index:900;
  left:32px;bottom:32px;
  /* 170 в покое, 200 при наведении — рост даёт scale на внутреннем слое,
     сама кнопка размер не меняет, чтобы курсор не «убегал» от края */
  width:170px;height:170px;
  padding:0;border:0;border-radius:50%;
  background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  opacity:0;visibility:hidden;
  transform:translateY(16px) scale(.86);
  transition:opacity .5s ease,transform .62s cubic-bezier(.16,1,.3,1),visibility .5s;
}
.uxp-vbadge.is-visible{opacity:1;visibility:visible;transform:none}

.uxp-vbadge__media{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:#0b0b0f;
  box-shadow:0 18px 44px rgba(4,8,32,.45);
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease;
}
.uxp-vbadge__media video{width:100%;height:100%;object-fit:cover;display:block}

@media (hover:hover) and (pointer:fine){
  /* 170 → 200 px: 200/170 = 1.176 */
  .uxp-vbadge:hover .uxp-vbadge__media,
  .uxp-vbadge:focus-visible .uxp-vbadge__media{
    transform:scale(1.176);
    box-shadow:0 26px 62px rgba(4,8,32,.55);
  }
}
.uxp-vbadge:focus{outline:none}
.uxp-keyboard-nav .uxp-vbadge:focus-visible .uxp-vbadge__media{outline:2px solid #fff;outline-offset:3px}

/* ——— модалка ——— */
.uxp-vmodal{
  position:fixed;inset:0;z-index:2147483001;
  display:flex;align-items:center;justify-content:center;
  padding:28px;
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
}
.uxp-vmodal.is-open{opacity:1;visibility:visible}
.uxp-vmodal__scrim{
  position:absolute;inset:0;
  background:rgba(5,8,26,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.uxp-vmodal__frame{
  position:relative;
  width:min(1080px,100%);
  border-radius:24px;overflow:hidden;
  background:#05060e;
  box-shadow:0 40px 120px rgba(2,4,20,.6);
  transform:translateY(18px) scale(.985);
  transition:transform .42s cubic-bezier(.16,1,.3,1);
}
.uxp-vmodal.is-open .uxp-vmodal__frame{transform:none}
.uxp-vmodal__frame video{
  display:block;width:100%;height:auto;
  max-height:calc(100vh - 56px);
  background:#05060e;
  cursor:pointer;
}
.uxp-vmodal__close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:rgba(12,14,28,.55);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,transform .3s cubic-bezier(.16,1,.3,1);
}
.uxp-vmodal__close svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}
.uxp-vmodal__close:hover{background:rgba(255,255,255,.2);transform:scale(1.06)}
.uxp-vmodal__close:focus{outline:none}
.uxp-keyboard-nav .uxp-vmodal__close:focus-visible{outline:2px solid #fff;outline-offset:2px}

.uxp-vmodal__start{
  position:absolute;left:50%;top:50%;z-index:4;
  display:none;align-items:center;justify-content:center;
  min-height:52px;padding:0 24px;border:0;border-radius:16px;
  color:#fff;background:rgba(17,17,17,.72);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-family:ui-sans-serif,system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
  font-size:14px;font-weight:500;line-height:20px;
  cursor:pointer;transform:translate(-50%,-50%);
}
.uxp-vmodal__frame.is-autoplay-blocked .uxp-vmodal__start{display:flex}
.uxp-vmodal__start:hover{transform:translate(-50%,-50%) scale(1.06)}
.uxp-vmodal__start:active{transform:translate(-50%,-50%) scale(.94)}
.uxp-vmodal__start:focus-visible{outline:2px solid #fff;outline-offset:3px}

.uxp-vplayer{
  position:absolute;left:50%;bottom:8px;z-index:3;
  width:min(576px,calc(100% - 16px));box-sizing:border-box;
  padding:16px;border-radius:16px;
  font-family:ui-sans-serif,system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
  font-size:14px;font-weight:400;line-height:20px;
  color:#fff;background:rgba(17,17,17,.596);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:0;pointer-events:none;
  transform:translate(-50%,18px);
  filter:blur(8px);
  transition:opacity .6s cubic-bezier(.85,0,.15,1),transform .6s cubic-bezier(.85,0,.15,1),filter .6s cubic-bezier(.85,0,.15,1);
}
.uxp-vmodal__frame.is-controls-visible .uxp-vplayer,
.uxp-vplayer:focus-within{opacity:1;pointer-events:auto;transform:translate(-50%,0);filter:none}
.uxp-vplayer__timeline{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-bottom:8px}
.uxp-vplayer time{font:inherit;font-weight:500;line-height:20px;font-variant-numeric:tabular-nums;color:#fff}
.uxp-vplayer time:last-child{text-align:right}
.uxp-vplayer input[type="range"]{
  --value:0%;
  width:100%;height:18px;margin:0;padding:0;
  appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;
}
.uxp-vplayer input[type="range"]::-webkit-slider-runnable-track{
  height:4px;border-radius:999px;background:linear-gradient(90deg,#fff var(--value),rgba(255,255,255,.2) var(--value));
}
.uxp-vplayer input[type="range"]::-moz-range-track{height:4px;border:0;border-radius:999px;background:rgba(255,255,255,.2)}
.uxp-vplayer input[type="range"]::-moz-range-progress{height:4px;border-radius:999px;background:#fff}
.uxp-vplayer input[type="range"]::-webkit-slider-thumb{
  width:12px;height:12px;margin-top:-4px;border:0;border-radius:50%;
  appearance:none;-webkit-appearance:none;background:#fff;opacity:0;
}
.uxp-vplayer [data-seek]{touch-action:none}
.uxp-vplayer input[type="range"]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff;opacity:0}
.uxp-vplayer__actions,.uxp-vplayer__primary,.uxp-vplayer__volume,.uxp-vplayer__speeds{display:flex;align-items:center}
.uxp-vplayer__actions{justify-content:space-between;gap:16px}
.uxp-vplayer__primary{gap:16px}
.uxp-vplayer__volume{gap:4px}
.uxp-vplayer__volume input{width:96px!important}
.uxp-vplayer button{
  display:grid;place-items:center;width:40px;min-width:40px;height:40px;padding:0;border:0;border-radius:6px;
  color:#fff;background:transparent;font:inherit;font-weight:500;line-height:20px;
  cursor:pointer;transition:background .2s ease,transform .2s ease,color .2s ease;
}
.uxp-vplayer button:hover,.uxp-vplayer button.is-active{background:rgba(17,17,17,.82)}
.uxp-vplayer button:hover{transform:scale(1.1)}
.uxp-vplayer button:active{transform:scale(.9)}
.uxp-vplayer button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.uxp-vplayer button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.uxp-vplayer__speeds{gap:8px}

html.uxp-vmodal-open,
body.uxp-vmodal-open{overflow:hidden}

@media (max-width:768px){
  /* мобильная навигация закреплена внизу (высота 80 + отступ 16) —
     кружок встаёт над ней, иначе перекрывает пилюлю */
  /* на узком экране текст идёт во всю ширину, поэтому кружок мельче —
     перекрывает меньше строки */
  .uxp-vbadge{left:16px;bottom:110px;width:86px;height:86px}
  .uxp-vmodal{padding:14px}
  .uxp-vmodal__frame{border-radius:18px;overflow:visible}
  .uxp-vmodal__frame video{border-radius:18px}
  .uxp-vmodal__close{top:-58px;right:0;background:rgba(255,255,255,.16)}
}

@media (prefers-reduced-motion:reduce){
  .uxp-vbadge,.uxp-vbadge__media,
  .uxp-vmodal,.uxp-vmodal__frame,.uxp-vmodal__close{
    animation:none!important;transition-duration:.01ms!important;
  }
}