/* Свой видеоплеер сайта (web/aw-player.js; окно 4, 29.10). DESIGN.md §7: движение — только transform и opacity,
   --aw-ease-out, длительности --aw-dur-*; «меньше движения» и html.lite — без вылета, просто появление.
   Кадр — по размеру экрана с запасом под подпись; пропорции — --awp-r (ширина / высота), по умолчанию 9:16. */
.awp { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
    background: transparent; color: var(--aw-text); overflow: hidden; }
.awp::backdrop { background: transparent; }
.awp-bg { position: absolute; inset: 0; background: rgba(5, 5, 7, 0.9); opacity: 0; transition: opacity var(--aw-dur-base) var(--aw-ease-out); }
.awp.on .awp-bg { opacity: 1; }
.awp.is-out .awp-bg { opacity: 0; }
.awp-stage { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }

/* кадр: высота — экран минус подпись и поля; ширина — по пропорции, но не шире экрана */
.awp-box { --awp-r: 0.5625; --awp-h: min(calc(100dvh - 104px), 900px);
    position: relative; width: min(calc(100vw - 32px), calc(var(--awp-h) * var(--awp-r)), 1200px); aspect-ratio: var(--awp-r);
    border-radius: var(--aw-radius-xl); overflow: hidden; background: #000; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.8);
    transform-origin: 50% 50%; will-change: transform; touch-action: none; }
.awp-in { position: absolute; inset: 0; transform-origin: 50% 50%; }
.awp-poster, .awp-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.awp-video { opacity: 0; transition: opacity var(--aw-dur-base) var(--aw-ease-out); background: transparent; }
.awp-box.has-video .awp-video { opacity: 1; }
/* затемнение снизу — под кнопками и временем */
.awp-in::after { content: ''; position: absolute; inset: auto 0 0; height: 34%; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(5, 5, 7, 0.72)); transition: opacity var(--aw-dur-base) var(--aw-ease-out); }

/* появление без вылета (лёгкий режим, «меньше движения», карточки не видно) */
.awp.is-fade .awp-box, .awp.is-fade .awp-meta { opacity: 0; transform: scale(0.96); transition: opacity var(--aw-dur-base) var(--aw-ease-out), transform var(--aw-dur-base) var(--aw-ease-out); }
.awp.is-fade.on .awp-box, .awp.is-fade.on .awp-meta { opacity: 1; transform: none; }
.awp.is-out .awp-box, .awp.is-out .awp-meta { opacity: 0; transform: scale(0.97); transition: opacity 0.2s ease, transform 0.2s ease; }
/* пока кадр летит — кнопки и подпись спрятаны, картинка без скругления-растяжения не важна (миг) */
.awp-box.is-flying :is(.awp-bar, .awp-big, .awp-x), .awp-box.is-flying .awp-in::after { opacity: 0; transition: none; }
.awp.is-fly .awp-meta { opacity: 0; transform: translateY(10px); }
.awp-meta { transition: opacity var(--aw-dur-base) var(--aw-ease-out) 0.08s, transform var(--aw-dur-base) var(--aw-ease-out) 0.08s; }
.awp.is-back .awp-meta { opacity: 0; transition-duration: 0.12s; transition-delay: 0s; }

/* ▶ / ❚❚ по центру: на паузе — всегда, во время игры — коротко после нажатия и пока кнопки видны */
.awp-big { position: absolute; inset: 0; margin: auto; z-index: 2; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(10, 10, 12, 0.55); color: #fff; cursor: pointer; backdrop-filter: blur(10px);
    transition: opacity var(--aw-dur-base) var(--aw-ease-out), transform var(--aw-dur-fast) var(--aw-ease-out); }
.awp-big svg { width: 30px; height: 30px; }
.awp-big:hover { transform: scale(1.05); }
.awp-big:active { transform: scale(0.95); }
.awp-box.is-playing .awp-big { opacity: 0; transform: scale(0.9); pointer-events: none; }
.awp-box.is-playing:not(.idle):hover .awp-big, .awp-box.is-playing .awp-big:focus-visible { opacity: 1; transform: none; pointer-events: auto; }

/* кнопки */
.awp svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.awp svg.fill { fill: currentColor; stroke: none; }
.awp-btn { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: transparent; color: #fff; cursor: pointer;
    transition: background var(--aw-dur-fast) ease, transform var(--aw-dur-fast) var(--aw-ease-out); }
.awp-btn svg { width: 20px; height: 20px; }
.awp-btn:hover { background: rgba(255, 255, 255, 0.12); }
.awp-btn:active { transform: scale(0.94); }
.awp :is(button, a, input):focus-visible { outline: 2px solid var(--aw-accent); outline-offset: 2px; }
.awp-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 44px; height: 44px; background: rgba(10, 10, 12, 0.55); border: 1px solid rgba(255, 255, 255, 0.2);
    transition: opacity var(--aw-dur-base) var(--aw-ease-out), background var(--aw-dur-fast) ease; }

.awp-bar { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; display: flex; align-items: center; gap: 8px;
    transition: opacity var(--aw-dur-base) var(--aw-ease-out), transform var(--aw-dur-base) var(--aw-ease-out); }
.awp-time { flex: none; min-width: 9ch; font: 600 0.78rem/1 var(--aw-font-mono); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.86); }
/* полоса: заливка — transform scaleX; ползунок — сама полоса (input range, стрелки и перетаскивание) */
.awp-track { position: relative; flex: 1; min-width: 40px; height: 28px; display: grid; align-items: center; }
.awp-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: rgba(255, 255, 255, 0.22); }
.awp-fill { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: var(--aw-accent); transform: scaleX(0); transform-origin: left; }
.awp-seek { position: relative; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.awp-seek::-webkit-slider-runnable-track { height: 28px; background: transparent; }
.awp-seek::-moz-range-track { height: 28px; background: transparent; }
.awp-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 59, 78, 0.35);
    transform: scale(0.6); transition: transform var(--aw-dur-fast) var(--aw-ease-out); }
.awp-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; transform: scale(0.6); transition: transform var(--aw-dur-fast) var(--aw-ease-out); }
.awp-track:hover .awp-seek::-webkit-slider-thumb, .awp-seek:focus-visible::-webkit-slider-thumb { transform: none; }
.awp-track:hover .awp-seek::-moz-range-thumb, .awp-seek:focus-visible::-moz-range-thumb { transform: none; }
.awp-seek:focus-visible { outline-offset: -2px; border-radius: 8px; }

/* звук: выключен — заметная кнопка «Activar sonido» со значком; включён — круглая красная (как в рулетке Instagram) */
.awp-sound { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 11px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.14); color: #fff; font: 700 0.82rem/1 var(--aw-font-body);
    transition: background var(--aw-dur-fast) ease, transform var(--aw-dur-fast) var(--aw-ease-out); }
.awp-sound svg { width: 19px; height: 19px; }
.awp-sound:hover { background: rgba(255, 255, 255, 0.22); }
.awp-sound:active { transform: scale(0.96); }
.awp-sound[aria-pressed="true"] { width: 40px; padding: 0; justify-content: center; background: var(--aw-accent); border-color: transparent; }

/* автоскрытие: играет и 2,5 с без движения — кнопки и затемнение гаснут, курсор прячется */
.awp-box.idle { cursor: none; }
.awp-box.idle :is(.awp-bar, .awp-x) { opacity: 0; pointer-events: none; }
.awp-box.idle .awp-bar { transform: translateY(6px); }
.awp-box.idle .awp-in::after { opacity: 0; }

/* подпись под кадром: автор, звёзды, «Ver en Google» */
.awp-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; max-width: min(92vw, 560px); font-size: 0.92rem; color: var(--aw-text-muted); }
.awp-meta[hidden] { display: none; }
.awp-author { color: var(--aw-text); font-weight: 700; }
.awp-stars { color: #f5b301; letter-spacing: 2px; }
.awp-link { display: inline-flex; align-items: center; gap: 5px; color: var(--aw-text); text-decoration: underline; text-underline-offset: 3px; }
.awp-link svg { width: 13px; height: 13px; }

/* полный экран: кадр по экрану, без скругления */
.awp-box:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.awp-box:fullscreen :is(.awp-video, .awp-poster) { object-fit: contain; }

/* телефон: кадр почти во весь экран, панель плотнее */
@media (max-width: 600px) {
    .awp-stage { padding-inline: 10px; gap: 10px; }
    .awp-box { --awp-h: calc(100dvh - 88px); width: min(calc(100vw - 20px), calc(var(--awp-h) * var(--awp-r))); border-radius: var(--aw-radius-lg); }
    .awp-bar { left: 6px; right: 6px; bottom: 6px; gap: 4px; }
    .awp-time { min-width: 0; font-size: 0.72rem; }
    .awp-sound { padding: 0 11px 0 9px; font-size: 0.78rem; }
}
@media (max-width: 360px) { .awp-time { display: none; } }

.lite .awp-big, .lite .awp-x { background: rgba(14, 14, 17, 0.9); }
@media (prefers-reduced-motion: reduce) {
    .awp-bg, .awp-video, .awp-big, .awp-bar, .awp-x, .awp-meta, .awp.is-fade .awp-box, .awp-in::after, .awp-fill, .awp-seek::-webkit-slider-thumb { transition: none; }
    .awp.is-fade .awp-box, .awp.is-fade .awp-meta { transform: none; }
}