/* ============================================================
   VibeAgent · приветственное окно
   Два состояния: спокойная заставка (.is-idle) → просмотр (.is-play)
   Переопределяет базовые .wmodal-стили из index.html
   ============================================================ */

.wmodal{
  padding:24px;
  background:rgba(10,10,14,.58);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  animation:none;
}
.wmodal.on{display:flex;animation:wm-veil .5s ease both}
@keyframes wm-veil{from{opacity:0}to{opacity:1}}

.wmodal__box{
  width:min(680px,100%);
  background:#0C0C10;
  border:1px solid rgba(255,255,255,.10);
  border-radius:26px;
  overflow:hidden;position:relative;
  box-shadow:0 30px 90px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04) inset,
             0 0 70px rgba(98,0,255,.14);
  animation:wm-in .62s cubic-bezier(.22,1,.36,1) .1s both;
}
@keyframes wm-in{
  from{opacity:0;transform:translateY(14px) scale(.975)}
  to{opacity:1;transform:none}
}

.wmodal__box video{width:100%;display:block;background:#000;aspect-ratio:16/9;object-fit:cover;border-radius:0}

/* ---------- крестик ---------- */
.wmodal__x{
  top:14px;right:14px;width:34px;height:34px;
  background:rgba(12,12,16,.45);color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);
  transition:background .2s,color .2s,transform .2s
}
.wmodal__x:hover{background:rgba(20,20,26,.8);color:#fff;transform:scale(1.06)}

/* ---------- заставка ---------- */
.wm-stage{position:relative;aspect-ratio:16/9;background:#0C0C10;overflow:hidden}
.wm-stage__ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);opacity:0;transition:opacity 1.1s ease;
  animation:wm-drift 18s ease-in-out infinite alternate}
.wm-stage__ph.ready{opacity:.55}
@keyframes wm-drift{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
.wm-stage::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,12,16,.35) 0%,rgba(12,12,16,.72) 55%,rgba(12,12,16,.94) 100%)}

.wm-intro{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:26px 30px;gap:0;
}
.wm-intro__lb{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#C9A7FF;margin-bottom:14px;
  animation:wm-rise .6s cubic-bezier(.22,1,.36,1) .30s both}
.wm-intro__t{font-family:'Jura',system-ui,sans-serif;font-size:26px;font-weight:600;letter-spacing:-.028em;
  color:#fff;line-height:1.22;margin:0 0 8px;max-width:26ch;
  animation:wm-rise .6s cubic-bezier(.22,1,.36,1) .38s both}
.wm-intro__s{font-size:15px;line-height:1.5;color:rgba(255,255,255,.62);margin:0 0 26px;max-width:38ch;
  animation:wm-rise .6s cubic-bezier(.22,1,.36,1) .46s both}
.wm-acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  animation:wm-rise .6s cubic-bezier(.22,1,.36,1) .54s both}
@keyframes wm-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* кнопка «смотреть» */
.wm-play{
  display:inline-flex;align-items:center;gap:11px;height:50px;padding:0 26px 0 22px;border:0;cursor:pointer;
  border-radius:999px;font:inherit;font-size:15.5px;font-weight:600;color:#111114;
  background:linear-gradient(154deg,#FFF 0%,#F7F9FC 18%,#E9EDF3 38%,#FFF 56%,#EDF1F6 74%,#DEE3EC 100%);
  text-shadow:0 1px 0 rgba(255,255,255,.9);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 10px 28px rgba(0,0,0,.35);
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .25s
}
.wm-play:hover{transform:translateY(-1.5px);box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 16px 38px rgba(201,167,255,.32)}
.wm-play:active{transform:translateY(0)}
.wm-play svg{flex:none}
.wm-quiet{background:none;border:0;cursor:pointer;font:inherit;font-size:14.5px;font-weight:500;
  color:rgba(255,255,255,.55);padding:12px 8px;transition:color .2s}
.wm-quiet:hover{color:#fff}

/* ---------- переключение состояний ---------- */
.wmodal__box.is-idle #wvid{display:none}
.wmodal__box.is-idle .wmodal__bar{display:none}
.wmodal__box.is-idle .wmodal__ft{display:none}
.wmodal__box.is-play .wm-stage{display:none}
.wmodal__box.is-play #wvid{display:block;animation:wm-fade .45s ease both}
.wmodal__box.is-play .wvwrap{display:block}
@keyframes wm-fade{from{opacity:0}to{opacity:1}}

/* ---------- полоса и подвал в режиме просмотра ---------- */
.wmodal__bar{height:3px;background:rgba(255,255,255,.10)}
.wmodal__bar i{background:linear-gradient(90deg,#8B3DFF,#C9A7FF,#fff)}
.wmodal__ft{padding:16px 20px;gap:14px}
.wmodal__ft b{font-size:17px;font-weight:600}
.wmodal__ft .cap{font-size:13px;color:rgba(255,255,255,.55)}
.wmodal__ft .btn{height:42px;border-radius:999px;font-size:14.5px}

/* ---------- загрузка ---------- */
.wm-load{position:absolute;inset:0;z-index:3;display:none;place-items:center;background:rgba(12,12,16,.55);backdrop-filter:blur(2px)}
.wmodal__box.is-load .wm-load{display:grid}
.wm-load i{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.16);
  border-top-color:#C9A7FF;animation:wm-spin .8s linear infinite;display:block}
@keyframes wm-spin{to{transform:rotate(360deg)}}

@media(max-width:700px){
  .wmodal{padding:14px}
  .wmodal__box{border-radius:22px}
  .wm-intro{padding:20px}
  .wm-intro__t{font-size:21px}
  .wm-intro__s{font-size:14px;margin-bottom:20px}
  .wm-play{height:46px;font-size:15px;padding:0 22px 0 18px}
  .wmodal__ft{padding:14px 16px}
  .wmodal__ft b{font-size:15.5px}
}
@media(prefers-reduced-motion:reduce){
  .wmodal__box,.wm-intro__lb,.wm-intro__t,.wm-intro__s,.wm-acts{animation:none!important}
  .wm-stage__ph{animation:none}
}

/* видео должно повторять скругление окна, а не торчать квадратом */
.wmodal__box{isolation:isolate;transform:translateZ(0)}
.wmodal__box #wvid{
  border-radius:26px 26px 0 0;
  width:100%;display:block;background:#000;
  aspect-ratio:auto;max-height:min(72vh,760px);object-fit:contain;
}
.wmodal__box.is-play #wvid{border-radius:26px 26px 0 0}
.wm-stage{border-radius:26px 26px 0 0;overflow:hidden}
@media(max-width:700px){
  .wmodal__box #wvid,.wm-stage{border-radius:22px 22px 0 0}
}