/* DIRTYWORK — виджет онбординг-видео (bubble + modal), сайт-вайд */

.mp4w-trigger{
  position:fixed;
  left:24px;
  bottom:24px;
  z-index:9500;
  cursor:pointer;
  transition:transform .2s ease, opacity .25s ease;
  opacity:0;
  transform:translateY(12px) scale(.94);
  pointer-events:none;
}
.mp4w-trigger.mp4w-show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.mp4w-trigger:hover{transform:scale(1.08)}
.mp4w-trigger.mp4w-show:hover{transform:scale(1.08)}

.mp4w-bubble{
  position:relative;
  width:84px;
  height:84px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  border:2px solid var(--card-border);
  background:var(--surface2);
}
.mp4w-bubble img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.mp4w-dismiss{
  position:absolute;
  top:-9px;
  right:-9px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--darkest);
  border:2px solid var(--card-border);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  transition:background .2s ease;
}
.mp4w-dismiss:hover{background:var(--accent);border-color:var(--accent)}
.mp4w-dismiss:hover svg{stroke:var(--darkest)}
.mp4w-dismiss svg{width:10px;height:10px;stroke:var(--text);stroke-width:2.4;transition:stroke .2s ease}

.mp4w-overlay{
  position:fixed;
  inset:0;
  background:rgba(8,9,13,.78);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9600;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  padding:20px;
}
.mp4w-overlay.mp4w-active{opacity:1;pointer-events:auto}

.mp4w-close{
  position:absolute;
  top:24px;
  right:24px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
  z-index:2;
}
.mp4w-close:hover{background:rgba(255,255,255,.16);transform:rotate(90deg)}
.mp4w-close svg{width:16px;height:16px;stroke:#fff;stroke-width:2.2}

.mp4w-card{
  position:relative;
  width:min(880px,100%);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  background:#000;
  transform:translateY(16px) scale(.97);
  opacity:0;
  transition:transform .3s ease, opacity .3s ease;
  line-height:0;
}
.mp4w-overlay.mp4w-active .mp4w-card{transform:translateY(0) scale(1);opacity:1}

.mp4w-card video{
  width:100%;
  max-height:80vh;
  display:block;
  background:#000;
}

@media(max-width:640px){
  .mp4w-trigger{left:16px;bottom:16px}
  .mp4w-bubble{width:64px;height:64px;border-radius:16px}
}