/* ================= ПЛЕЕР РОЛИКОВ =================
   Свой плеер: в покое внутри крутится немой тизер из кадров ролика, по клику — полный ролик со звуком
   (720p на телефоне, 1080p на экране). Рамка — стекло с бегущей неоновой кромкой, за плеером подсветка
   цветом текущего кадра. Полный файл не грузится, пока не нажали. */
@property --xp-a{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.xp{ position:relative; border-radius:28px; isolation:isolate; outline:none;
  --xp-r:28px; }
/* его слово 18.09 19:09: при нажатии ролик выделялся голубым (двойной клик выделял видео) — выделение в плеере выключено */
.xp, .xp *{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
.xp ::selection, .xp::selection{ background:transparent; }
.xp-v{ pointer-events:none; }
/* подсветка за плеером — цвет текущего кадра */
.xp-amb{ position:absolute; inset:6% 4%; z-index:-2; width:92%; height:88%; filter:blur(70px) saturate(1.6); opacity:.0;
  transform:scale(1.12); transition:opacity 1.2s ease; pointer-events:none; }
.xp.is-lit .xp-amb{ opacity:.62; }
/* бегущая неоновая кромка */
.xp-edge{ position:absolute; inset:-1.5px; border-radius:calc(var(--xp-r) + 1.5px); z-index:-1; pointer-events:none;
  background:conic-gradient(from var(--xp-a), rgba(0,212,255,.95), rgba(59,130,246,.15) 18%, rgba(139,92,246,.85) 36%,
    rgba(0,212,255,.10) 55%, rgba(0,212,255,.9) 74%, rgba(139,92,246,.2) 88%, rgba(0,212,255,.95));
  animation:xpSpin 9s linear infinite; }
.xp-edge::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:inherit; filter:blur(18px); opacity:.45; }
@keyframes xpSpin{ to{ --xp-a:360deg; } }
.xp-box{ position:relative; aspect-ratio:16/9; border-radius:var(--xp-r); overflow:hidden; background:#040a18;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06) inset; cursor:pointer;
  transform:translateZ(0); }
.xp-v{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#040a18; display:block; }
.xp-box::after{ /* стеклянный блик по верхней кромке */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 22%); }
/* ---------- покой: тизер + обложка ---------- */
.xp-idle{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(16px,2.6vw,30px); transition:opacity .5s ease, visibility .5s; }
.xp-idle::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(3,7,18,.55) 0%,rgba(3,7,18,.05) 30%,rgba(3,7,18,.10) 55%,rgba(3,7,18,.86) 100%),
             radial-gradient(120% 90% at 0% 100%, rgba(3,7,18,.55), transparent 60%); }
.xp-chip{ align-self:flex-start; display:inline-flex; align-items:center; gap:.55rem; padding:.42rem .8rem .42rem .65rem;
  border-radius:40px; font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(14px) saturate(1.6); backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
.xp-chip i{ width:7px; height:7px; border-radius:50%; background:#ff3b5c; box-shadow:0 0 10px #ff3b5c; animation:xpRec 1.6s ease-in-out infinite; }
@keyframes xpRec{ 50%{ opacity:.3; } }
.xp-go{ display:flex; align-items:center; gap:clamp(14px,1.8vw,22px); }
/* кнопка пуска (его слово 18.09 19:09: прежняя «хреновая») — жидкое стекло: матовый круг, светлая кромка,
   тонкое неоновое кольцо бежит по краю; треугольник белый, по оптическому центру; при наведении стекло наливается цветом */
.xp-play{ position:relative; flex:none; width:clamp(64px,6.6vw,88px); height:clamp(64px,6.6vw,88px); border-radius:50%;
  display:grid; place-items:center; border:0; padding:0; cursor:pointer; color:#fff; isolation:isolate;
  background:radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,.36), rgba(255,255,255,.10) 48%, rgba(255,255,255,.04) 100%), rgba(8,14,32,.30);
  -webkit-backdrop-filter:blur(18px) saturate(1.9); backdrop-filter:blur(18px) saturate(1.9);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.2),
    0 18px 40px rgba(0,0,0,.45), 0 0 40px rgba(0,212,255,.22);
  transition:transform .45s var(--spring,cubic-bezier(.3,1.45,.55,1)), box-shadow .45s ease; }
.xp-play::before{ /* неоновое кольцо */
  content:""; position:absolute; inset:-3px; border-radius:50%; padding:1.6px; pointer-events:none; z-index:-1;
  background:conic-gradient(from var(--xp-a), #00d4ff, rgba(59,130,246,.25) 30%, #8b5cf6 55%, rgba(0,212,255,.2) 78%, #00d4ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:xpSpin 4s linear infinite; filter:drop-shadow(0 0 6px rgba(0,212,255,.7)); }
.xp-play::after{ /* налив цветом */
  content:""; position:absolute; inset:0; border-radius:50%; z-index:-1; opacity:0; transition:opacity .45s ease;
  background:radial-gradient(circle at 34% 26%, rgba(255,255,255,.4), rgba(255,255,255,0) 55%), linear-gradient(135deg,#00d4ff,#3b82f6 58%,#8b5cf6); }
.xp-play svg{ width:30%; height:30%; margin-left:4%; filter:drop-shadow(0 1px 4px rgba(0,0,0,.3)); }
.xp-box:hover .xp-play{ transform:scale(1.07); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.25),
  0 18px 44px rgba(0,0,0,.5), 0 0 56px rgba(0,212,255,.5); }
.xp-box:hover .xp-play::after{ opacity:1; }
.xp-t b{ display:block; font-family:'Space Grotesk',sans-serif; font-weight:700; color:#fff; letter-spacing:-.015em;
  font-size:clamp(1.05rem,2.1vw,1.75rem); line-height:1.12; text-shadow:0 2px 18px rgba(0,0,0,.5); }
.xp-t small{ display:flex; align-items:center; gap:.55rem; margin-top:.4rem; font-size:clamp(.74rem,1vw,.88rem); color:rgba(255,255,255,.78); }
.xp-t small em{ font-style:normal; font-variant-numeric:tabular-nums; padding:.1rem .45rem; border-radius:6px; background:rgba(255,255,255,.12); color:#fff; }
.xp-t small svg{ width:14px; height:14px; opacity:.8; }
/* ---------- ролик идёт ---------- */
.xp.is-on .xp-idle{ opacity:0; visibility:hidden; }
.xp-ctl{ position:absolute; left:clamp(10px,1.4vw,16px); right:clamp(10px,1.4vw,16px); bottom:clamp(10px,1.4vw,16px); z-index:3;
  display:flex; align-items:center; gap:.35rem; padding:.45rem .6rem; border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04)), rgba(6,11,26,.42);
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(20px) saturate(1.8); backdrop-filter:blur(20px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 12px 32px rgba(0,0,0,.4);
  opacity:0; transform:translateY(10px); visibility:hidden; transition:opacity .35s ease, transform .45s var(--spring,ease), visibility .35s; }
.xp.is-on .xp-ctl{ opacity:1; transform:none; visibility:visible; }
.xp.is-on.is-idle-ui .xp-ctl{ opacity:0; transform:translateY(10px); visibility:hidden; }
.xp.is-on.is-idle-ui .xp-box{ cursor:none; }
.xp-b{ flex:none; width:38px; height:38px; border-radius:12px; border:0; padding:0; display:grid; place-items:center; cursor:pointer;
  background:transparent; color:#fff; transition:background .25s ease, transform .25s ease; }
.xp-b:hover{ background:rgba(255,255,255,.12); }
.xp-b:active{ transform:scale(.92); }
.xp-b > span{ display:grid; place-items:center; }
.xp-b svg{ width:20px; height:20px; }
.xp-b .i2, .xp.is-playing .xp-pp .i1, .xp.is-muted .xp-mu .i1, .xp.is-fs .xp-fs .i1{ display:none; }
.xp.is-playing .xp-pp .i2, .xp.is-muted .xp-mu .i2, .xp.is-fs .xp-fs .i2{ display:grid; }
.xp-time{ flex:none; font-size:.8rem; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.85); padding:0 .35rem; letter-spacing:.02em; }
.xp-time span{ color:rgba(255,255,255,.5); }
.xp-bar{ position:relative; flex:1; height:26px; cursor:pointer; touch-action:none; display:flex; align-items:center; margin:0 .4rem; }
.xp-track{ position:relative; width:100%; height:4px; border-radius:4px; background:rgba(255,255,255,.16); overflow:visible;
  transition:height .2s ease; }
.xp-bar:hover .xp-track, .xp.is-drag .xp-track{ height:6px; }
.xp-buf, .xp-fill{ position:absolute; left:0; top:0; bottom:0; border-radius:inherit; width:0; }
.xp-buf{ background:rgba(255,255,255,.22); }
.xp-fill{ background:linear-gradient(90deg,var(--cyan,#00d4ff),var(--blue,#3b82f6) 60%,var(--purple,#8b5cf6)); box-shadow:0 0 12px rgba(0,212,255,.6); }
.xp-knob{ position:absolute; top:50%; left:0; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 4px rgba(0,212,255,.25), 0 0 14px rgba(0,212,255,.9); transform:scale(0); transition:transform .2s ease; }
.xp-bar:hover .xp-knob, .xp.is-drag .xp-knob{ transform:scale(1); }
.xp-tip{ position:absolute; bottom:calc(100% + 6px); left:0; transform:translateX(-50%); padding:.22rem .5rem; border-radius:8px;
  font-size:.74rem; font-variant-numeric:tabular-nums; color:#fff; background:rgba(6,11,26,.8); border:1px solid rgba(255,255,255,.14);
  opacity:0; pointer-events:none; transition:opacity .15s ease; white-space:nowrap; }
.xp-bar:hover .xp-tip{ opacity:1; }
.xp-vol{ flex:none; display:flex; align-items:center; }
.xp-vr{ width:0; opacity:0; transition:width .3s ease, opacity .3s ease; -webkit-appearance:none; appearance:none; height:4px; border-radius:4px;
  background:linear-gradient(90deg,#fff var(--v,100%),rgba(255,255,255,.2) var(--v,100%)); cursor:pointer; margin:0; }
.xp-vol:hover .xp-vr, .xp-vr:focus{ width:74px; opacity:1; margin:0 .5rem 0 .15rem; }
.xp-vr::-webkit-slider-thumb{ -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 0 10px rgba(0,212,255,.8); }
.xp-vr::-moz-range-thumb{ width:12px; height:12px; border:0; border-radius:50%; background:#fff; }
/* вспышка значка по центру при паузе/пуске */
.xp-flash{ position:absolute; left:50%; top:50%; z-index:3; width:78px; height:78px; margin:-39px 0 0 -39px; border-radius:50%;
  display:grid; place-items:center; color:#fff; pointer-events:none; opacity:0;
  background:rgba(6,11,26,.45); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.18); }
.xp-flash svg{ width:30px; height:30px; }
.xp-flash.go{ animation:xpFlash .6s ease-out; }
@keyframes xpFlash{ 0%{ opacity:1; transform:scale(.8); } 100%{ opacity:0; transform:scale(1.35); } }
/* загрузка */
.xp-spin{ position:absolute; left:50%; top:50%; z-index:3; width:54px; height:54px; margin:-27px 0 0 -27px; border-radius:50%;
  border:3px solid rgba(255,255,255,.12); border-top-color:var(--cyan,#00d4ff); animation:xpRot .8s linear infinite; opacity:0; pointer-events:none;
  transition:opacity .2s ease; filter:drop-shadow(0 0 8px rgba(0,212,255,.6)); }
.xp.is-wait .xp-spin{ opacity:1; }
@keyframes xpRot{ to{ transform:rotate(360deg); } }
/* конец ролика */
.xp-end{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem;
  text-align:center; padding:1.5rem; background:radial-gradient(80% 80% at 50% 50%, rgba(3,7,18,.55), rgba(3,7,18,.88));
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s; }
.xp.is-end .xp-end{ opacity:1; visibility:visible; }
.xp.is-end .xp-ctl{ opacity:0; visibility:hidden; }
.xp-end b{ font-family:'Space Grotesk',sans-serif; font-size:clamp(1.1rem,2.4vw,1.9rem); color:#fff; letter-spacing:-.015em; max-width:26ch; line-height:1.15; text-wrap:balance; }
.xp-end-btns{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
.xp-end .x-btn{ cursor:pointer; }
/* во весь экран */
.xp.is-fs, .xp:fullscreen{ border-radius:0; background:#000; display:flex; align-items:center; }
.xp:fullscreen .xp-box{ border-radius:0; width:100%; height:100%; aspect-ratio:auto; }
.xp:fullscreen .xp-v{ object-fit:contain; background:#000; }
.xp:fullscreen .xp-edge, .xp:fullscreen .xp-amb{ display:none; }
body.light .xp-box{ box-shadow:0 40px 80px -34px rgba(15,23,42,.55), 0 0 0 1px rgba(15,23,42,.08); }
@media (max-width:768px){
  .x-film{ margin-top:-2.5rem; padding-bottom:0; }
  .x-film .x-wrap{ padding:0 1rem; }
  .xp{ --xp-r:18px; }
  .x-film-cap{ letter-spacing:.2em; font-size:.66rem; }
  .xp-idle{ padding:12px; }
  .xp-idle::before{ background:linear-gradient(180deg,rgba(3,7,18,.45) 0%,rgba(3,7,18,0) 28%,rgba(3,7,18,.25) 58%,rgba(3,7,18,.92) 100%); }
  .xp-chip{ font-size:.58rem; padding:.26rem .55rem .26rem .45rem; letter-spacing:.12em; }
  .xp-play{ width:52px; height:52px; }
  .xp-go{ gap:12px; }
  .xp-t b{ font-size:.98rem; }
  .xp-t small{ margin-top:.2rem; font-size:.7rem; }
  .xp-t small em{ display:none; }
  .xp-ctl{ gap:.1rem; padding:.3rem .35rem; border-radius:14px; }
  .xp-b{ width:34px; height:34px; }
  .xp-time{ font-size:.7rem; padding:0 .15rem; }
  .xp-time span{ display:none; }
  .xp-vr{ display:none; }
  .xp-bar{ margin:0 .25rem; }
  .xp-end .x-btn{ padding:.7rem 1.1rem; font-size:.85rem; }
}
/* 07.10, его слово: ролик не больше 100 % высоты экрана и не больше 80 % ширины (с планшета вертикально был слишком
   большой); на телефоне свечение пропадало и оставалась тонкая обводка — свечение крупнее и мягче, кромка тише. */
.xp{ width:100%; max-width:min(100%, 80vw, 177.78vh); margin-left:auto; margin-right:auto; }
@supports (height:100svh){ .xp{ max-width:min(100%, 80vw, 177.78svh); } }
@media (max-width:768px){
  .xp-amb{ inset:-7% -6%; width:112%; height:114%; filter:blur(24px) saturate(1.8); transform:none; }
  .xp.is-lit .xp-amb{ opacity:.9; }
  .xp-edge{ opacity:.35; }
  .xp-edge::after{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .xp-edge, .xp-play::before, .xp-chip i{ animation:none; }
}