/* ═══════════════════════════════════════════════════════════
   MOTION PLAYER (.pf-video) — motion.html
   One component, two behaviours (data-mode on .pf-video):
     ambient  muted loop that plays only while on screen (short loops,
              silent UX walkthroughs, hero B-roll). Optional sound toggle.
     player   poster + play button; plays with sound and native controls
              on click (content with audio, longer pieces).
   Sources load lazily (data-src) as the video nears the viewport.
   Reduced motion: nothing autoplays — ambient videos show a play button.

   Shape: .pf-video--16-9 | --9-16 | --1-1   Frame: .pf-video--phone | --story
   ═══════════════════════════════════════════════════════════ */

.pf-video {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  background: #000;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  aspect-ratio: 16 / 9;
}
.pf-video--9-16 { aspect-ratio: 9 / 16; }
.pf-video--1-1  { aspect-ratio: 1 / 1; }
.pf-video video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; background: #000;
}

/* ─── Device frames ─── */
.pf-video--phone {
  border-radius: 36px; border: 8px solid #1a1320;
  box-shadow: 0 0 0 1px var(--border), 0 24px 60px rgba(0,0,0,0.55);
}
.pf-video--story { border-radius: 22px; }

/* ─── Badges (shape · length · audio) ─── */
.pf-video__badges {
  position: absolute; left: 12px; top: 12px; z-index: 3;
  display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none;
}
.pf-video--story .pf-video__badges { top: 20px; }
.pf-video__badge {
  font-size: 11px; font-weight: 590; letter-spacing: 0.04em;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(11,1,13,0.62); color: rgba(240,244,255,0.9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* ─── Controls: big play (player / reduced motion), small round buttons ─── */
.pf-video__play {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0.05) 55%);
  border: 0; cursor: pointer; color: #fff;
  transition: background 0.2s;
}
.pf-video__play-icon {
  width: 68px; height: 68px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--purple-primary);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45), var(--glow-purple);
  transition: transform 0.2s, background 0.2s;
}
.pf-video__play:hover .pf-video__play-icon { transform: scale(1.06); background: var(--purple-hover); }
.pf-video__play:focus-visible { outline: 3px solid var(--violet); outline-offset: -3px; }
.pf-video.is-playing .pf-video__play { display: none; }

.pf-video__btn {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(11,1,13,0.62); color: #fff;
  border: 1px solid rgba(255,255,255,0.18); cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s, border-color 0.2s;
}
.pf-video__btn:hover { background: rgba(123,0,255,0.55); border-color: var(--purple-hover); }
.pf-video__btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.pf-video__btn + .pf-video__btn { right: 58px; }
.pf-video__btn .when-on, .pf-video__btn[aria-pressed="true"] .when-off { display: none; }
.pf-video__btn[aria-pressed="true"] .when-on { display: inline; }

/* ─── Story progress bar (Instagram-style) ─── */
.pf-video__progress {
  position: absolute; left: 12px; right: 12px; top: 10px; z-index: 3;
  height: 3px; border-radius: 3px; background: rgba(255,255,255,0.28);
  overflow: hidden; pointer-events: none;
}
.pf-video__progress span {
  display: block; height: 100%; width: 0%;
  background: #fff; border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .pf-video__play-icon, .pf-video__play:hover .pf-video__play-icon { transition: none; transform: none; }
}