/*
             ___
  __      __/ _ \ _ __  _ __   __ _
  \ \ /\ / / | | | '_ \| '_ \ / _` |
   \ V  V /| |_| | | | | | | | (_| |
    \_/\_/  \___/|_| |_|_| |_|\__,_|

  made by w0nna · HANC Studio
*/

/* HANC Studio 2.0: промо-плеер (см. player.js): сцена 16:9 с letterbox, центральная кнопка play в стиле дизайна changelog
   и стеклянная панель управления, которая гаснет, пока видео играет, а указатель не двигается. */
html, body.pp-body { margin: 0; height: 100%; background: #000; overflow: hidden; }
.pp { position: fixed; inset: 0; overflow: hidden; background: #000; color: #fafafa; font-family: "Onest", system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
.pp-stage { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; opacity: 0; pointer-events: none; }
.pp.is-ready .pp-stage { opacity: 1; }
.pp-stage > .hs-root { transition: none; }
.pp.is-render .pp-stage { transition: none; }

.pp-hit { position: absolute; inset: 0; cursor: pointer; }
.pp.is-playing.is-idle, .pp.is-playing.is-idle .pp-hit { cursor: none; }

/* Центральная кнопка: видна, пока не играет (poster, reduced motion, пауза, конец). */
.pp-big { position: absolute; left: 50%; top: 50%; width: clamp(48px, 14vmin, 84px); height: clamp(48px, 14vmin, 84px); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: #fff; color: #0a0a0a; cursor: pointer; box-shadow: 0 0 0 clamp(6px, 2vmin, 12px) #ffffff1f, 0 20px 50px -10px #7c3aedcc; transition: transform 300ms cubic-bezier(.2, .8, .2, 1), box-shadow 300ms, opacity 200ms; opacity: 0; pointer-events: none; }
.pp-big svg { width: 36%; height: 36%; margin-left: 6%; }
.pp.is-ended .pp-big svg { margin-left: 0; }
.pp.is-ready:not(.is-playing) .pp-big { opacity: 1; pointer-events: auto; }
.pp-big:hover { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 clamp(8px, 3vmin, 18px) #ffffff14, 0 20px 60px -10px #7c3aed; }
.pp-big:focus-visible, .pp-btn:focus-visible, .pp-track:focus-visible { outline: 2px solid #b79bff; outline-offset: 2px; }

/* Панель управления. */
.pp-bar { position: absolute; left: clamp(8px, 2.5vw, 18px); right: clamp(8px, 2.5vw, 18px); bottom: clamp(8px, 2.5vw, 16px); height: 40px; box-sizing: border-box; padding: 0 14px 0 4px; display: flex; align-items: center; gap: 4px; border-radius: 999px; background: #0c0a12b8; border: 1px solid #ffffff1f; -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); box-shadow: 0 12px 30px -12px #000; opacity: 0; transform: translateY(6px); transition: opacity 240ms ease, transform 240ms cubic-bezier(.2, .8, .2, 1); }
.pp.is-ready.is-started .pp-bar { opacity: 1; transform: none; }
.pp.is-ready:hover .pp-bar, .pp.is-ready:focus-within .pp-bar { opacity: 1; transform: none; }
.pp.is-playing.is-idle:not(:focus-within) .pp-bar { opacity: 0; transform: translateY(6px); }
.pp-btn { flex-shrink: 0; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: #fafafa; cursor: pointer; transition: background-color 160ms; }
.pp-btn:hover { background: #ffffff1f; }
.pp-btn svg { width: 16px; height: 16px; }
.pp-track { position: relative; flex-grow: 1; height: 28px; margin: 0 10px 0 6px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.pp-rail { position: relative; display: block; width: 100%; height: 4px; border-radius: 4px; background: #ffffff2e; overflow: hidden; }
.pp-fill { position: absolute; inset: 0; display: block; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #9868f8, #fff); }
.pp-knob { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; display: block; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #9868f855, 0 0 12px #9868f8; opacity: 0; transition: opacity 160ms; }
.pp-track:hover .pp-knob, .pp-track:focus-visible .pp-knob { opacity: 1; }
.pp-time { flex-shrink: 0; font-size: 12px; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: #e9e1ff; white-space: nowrap; }

@media (max-width: 420px) {
  .pp-bar { height: 34px; padding-right: 10px; }
  .pp-btn { width: 28px; height: 28px; }
  .pp-time { font-size: 11px; }
}
@media (max-width: 300px) { .pp-time { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .pp-big, .pp-bar, .pp-btn, .pp-knob { transition: none; }
}