/* ============================================================
   Akdeniz — записи экрана в рамках устройств.
   Горизонтальные кладём в окно браузера, вертикальные – в телефон.
   ============================================================ */

.demo{
  position:relative; display:block;
  border-bottom:1px solid var(--hair);
  background:
    radial-gradient(80% 70% at 25% 20%, rgba(23,80,110,.5) 0%, transparent 60%),
    #061c2e;
}
.demo video{
  display:block; width:100%; height:100%;
  object-fit:cover; background:#04121e;
}

/* ---------- монитор ---------- */
/* своей панели браузера не рисуем: она уже внутри записи экрана */
.demo--desk{ padding:16px 16px 26px; }
.demo--desk .demo__body{
  position:relative;
  padding:7px; border-radius:12px;
  background:linear-gradient(180deg,#1b3d57,#0a2135);
  box-shadow:0 18px 38px rgba(2,10,18,.5), inset 0 0 0 1px rgba(143,178,198,.2);
}
/* подставка – чтобы читалось как монитор, а не как картинка в рамке */
.demo--desk .demo__body::after{
  content:""; position:absolute; left:50%; top:100%;
  width:92px; height:10px; margin-left:-46px;
  border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,#24506f,#12314a);
  box-shadow:0 6px 14px rgba(2,10,18,.45);
}
.demo--desk .demo__screen{ display:block; overflow:hidden; border-radius:6px; aspect-ratio:1280/696; }

/* ---------- телефон ---------- */
.demo--phone{
  display:flex; justify-content:center; align-items:flex-end;
  padding:18px 14px 0;
}
.demo--phone .demo__body{
  position:relative; width:190px; padding:8px 8px 0;
  border-radius:26px 26px 0 0;
  background:linear-gradient(180deg,#1b3d57,#0b2136);
  box-shadow:0 14px 34px rgba(2,10,18,.55), inset 0 0 0 1px rgba(143,178,198,.22);
}
.demo--phone .demo__screen{
  display:block; overflow:hidden;
  border-radius:20px 20px 0 0; aspect-ratio:540/1152;
}

/* ---------- подсказка ---------- */
.demo__hint{
  position:absolute; z-index:3; left:14px; bottom:14px;
  padding:5px 10px; border-radius:100px;
  background:rgba(4,18,30,.82); color:var(--foam-dim);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.02em;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:opacity .3s var(--ease-out);
}
.demo.is-playing .demo__hint{ opacity:0; }

@media (max-width:820px){
  .demo--desk{ padding:10px 10px 12px; }
  .demo--phone .demo__body{ width:158px; }
}

/* ============================================================
   Панель управления записью
   ============================================================ */
/* контейнеры — span, без display:block панель считает ширину по строке */
.demo__body{ display:block; position:relative; }

.vctl{
  position:absolute; z-index:4; left:8px; right:8px; bottom:8px;
  display:flex; align-items:center; gap:9px;
  padding:6px 9px; border-radius:100px;
  background:rgba(4,18,30,.86);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(143,178,198,.18);
  opacity:0; transform:translateY(7px); pointer-events:none;
  transition:opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.demo:hover .vctl,
.demo:focus-within .vctl{ opacity:1; transform:none; pointer-events:auto; }

.vctl__btn{
  flex:none; width:24px; height:24px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(53,224,200,.14); color:var(--accent);
  transition:background .2s, color .2s;
}
.vctl__btn:hover{ background:var(--accent); color:#03202b; }
.vctl__btn svg{ width:14px; height:14px; fill:currentColor; }
.vctl__btn svg.stroke{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

.vctl__time{
  flex:none; font-family:var(--mono); font-size:10.5px; color:var(--foam-dim);
  white-space:nowrap; letter-spacing:.01em;
}

/* ---------- ползунок перемотки ---------- */
.vctl__seek{
  flex:1; min-width:40px; height:16px; margin:0; padding:0;
  -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer;
  /* --p ставит скрипт: это пройденная часть */
  --p:0%;
}
.vctl__seek::-webkit-slider-runnable-track{
  height:4px; border-radius:100px;
  background:linear-gradient(90deg, var(--accent) var(--p), rgba(143,178,198,.25) var(--p));
}
.vctl__seek::-moz-range-track{
  height:4px; border-radius:100px;
  background:linear-gradient(90deg, var(--accent) var(--p), rgba(143,178,198,.25) var(--p));
}
.vctl__seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:11px; height:11px; margin-top:-3.5px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 3px rgba(53,224,200,.2);
}
.vctl__seek::-moz-range-thumb{
  width:11px; height:11px; border:0; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 3px rgba(53,224,200,.2);
}
.vctl__seek:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:100px; }

/* подсказка уступает место панели */
.demo:hover .demo__hint{ opacity:0; }

/* на узком экране кнопки панели крупнее: hover:none ловится не везде,
   ширина экрана – надёжнее */
@media (max-width:900px){
  .vctl__btn{ width:34px; height:34px; }
  .vctl__btn svg{ width:16px; height:16px; }
  .vctl{ gap:11px; padding:7px 10px; }
}

/* в телефонной рамке места мало — прячем время */
.demo--phone .vctl{ left:6px; right:6px; bottom:6px; gap:7px; padding:5px 7px; }
.demo--phone .vctl__time{ display:none; }

/* на тач-экранах панель видна всегда: наводить там нечем */
@media (hover:none){
  .vctl{ opacity:1; transform:none; pointer-events:auto; }
  /* «наведите» на телефоне звучит издевательски – подменяем текст целиком */
  .vctl__btn{ width:34px; height:34px; }
  .vctl__btn svg{ width:16px; height:16px; }
  .demo__hint{ font-size:0; }
  .demo__hint::after{ content:"нажмите – оживёт"; font-size:11px; letter-spacing:.02em; }
}

/* ---------- во весь экран ---------- */
.demo__body:fullscreen{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; padding:0; border-radius:0;
  background:#04121e; box-shadow:none;
}
.demo__body:fullscreen .demo__screen{
  width:100%; height:100%; aspect-ratio:auto; border-radius:0;
}
.demo__body:fullscreen video{ object-fit:contain; }
.demo__body:fullscreen .vctl{
  left:6%; right:6%; bottom:26px; padding:9px 13px; gap:12px; opacity:1; transform:none; pointer-events:auto;
}
.demo__body:fullscreen::after{ display:none; }