/* vplayer — self-hosted video player for nauka-niemieckiego pages.
   Every selector is rooted at .vp, except .vp-watched (applied to a page CTA)
   and .vp-sr (visually-hidden live region). The custom properties on .vp are
   the whole theming surface: override them inline on the container. */

.vp {
  --vp-accent: #E26964;
  --vp-accent-strong: #CF534E;
  --vp-on-accent: #FFFFFF;
  --vp-ink: #4A4A49;
  --vp-surface: #FFFFFF;
  --vp-scrim: rgba(20, 18, 18, .55);
  --vp-radius: 14px;
  --vp-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vp-focus: #50C1E4;
  --vp-bar-h: 52px;
  --vp-seek-h: 24px;

  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: var(--vp-radius);
  background: #141212 center / cover no-repeat;
  color: #fff;
  font: 400 15px/1.35 var(--vp-font);
  letter-spacing: normal;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.vp, .vp *, .vp *::before, .vp *::after { box-sizing: border-box; }

/* Neutralise page-global button/input rules that would otherwise win. Only the
   two properties a page reset really breaks — keep this at type specificity so
   it can never outrank a .vp-* component rule below. */
.vp button, .vp input, .vp a {
  font-family: var(--vp-font) !important;
  text-transform: none !important;
}
/* Shared control reset. Class-only specificity + placed before the components,
   so each one's own background/colour wins on source order. */
.vp-play, .vp-btn, .vp-resume, .vp-unmute, .vp-replay, .vp-retry, .vp-endcta, .vp-out {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  border: 0;
  background: transparent;
  color: #fff;
  letter-spacing: normal;
  cursor: pointer;
}

/* --- media layers ------------------------------------------------------- */

.vp-poster, .vp-teaser, .vp-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  object-fit: cover;
}
.vp-poster { z-index: 0; transition: transform .4s ease; }
.vp-teaser { z-index: 1; opacity: 0; transition: opacity .32s ease; }
.vp-teaser.vp-in { opacity: 1; }
.vp-video { z-index: 2; }

/* Poster scrim: radial only behind the play button, linear over the bottom
   band. Never a flat wash — the poster's job is to show Anna's face. */
.vp::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transition: opacity .24s ease;
  background:
    radial-gradient(closest-side at 50% 46%, rgba(20, 18, 18, .42), rgba(20, 18, 18, 0) 70%),
    linear-gradient(to top, rgba(20, 18, 18, .45), rgba(20, 18, 18, 0) 38%);
}
.vp--playing::before, .vp--paused::before, .vp--ended::before { opacity: 0; }

/* --- poster furniture --------------------------------------------------- */

.vp-center {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  pointer-events: none;
}

/* Poster furniture exists in the poster and teaser states only. */
.vp:not(.vp--poster):not(.vp--teaser) .vp-center,
.vp:not(.vp--poster):not(.vp--teaser) .vp-runtime,
.vp:not(.vp--poster):not(.vp--teaser) .vp-resume { display: none; }

.vp-play {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  padding: 0;
  border-radius: 50%;
  background: var(--vp-accent);
  color: var(--vp-on-accent);
  box-shadow: 0 6px 22px rgba(20, 18, 18, .35);
  transition: transform .18s ease, background .18s ease;
}
.vp-play svg { width: 24px; height: 24px; transform: translateX(2px); }
.vp-play:hover, .vp-play:focus-visible { background: var(--vp-accent-strong); transform: scale(1.06); }

/* Persistent pills. Top-right and bottom-left only — the burned-in captions
   own the bottom ~10–26% of every frame. */
.vp-label, .vp-runtime, .vp-resume, .vp-unmute {
  border-radius: 999px;
  background: rgba(20, 18, 18, .62);
  color: #fff;
  font-weight: 600;
}
.vp-label {
  pointer-events: none;
  display: inline-block;
  max-width: 100%;
  padding: 8px 16px;
  background: var(--vp-scrim);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  font-size: 13px;
  letter-spacing: -.01em;
  text-align: center;
}
.vp-runtime {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  padding: 4px 10px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.vp-resume, .vp-unmute {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  font-size: 14px;
}
.vp-resume { position: absolute; left: 12px; bottom: 12px; z-index: 4; }
.vp-resume:hover, .vp-resume:focus-visible { background: rgba(20, 18, 18, .85); }
.vp-unmute { position: absolute; top: 12px; right: 12px; z-index: 7; display: none; }
.vp--muted-fallback .vp-unmute { display: inline-flex; }
.vp-unmute:hover, .vp-unmute:focus-visible { background: var(--vp-accent); }

/* Only shown after 400 ms, so a fast start never flashes it. */
.vp-spin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: none;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid rgba(255, 255, 255, .25);
  border-top-color: var(--vp-accent);
  border-radius: 50%;
  animation: vp-spin .8s linear infinite;
}
.vp--busy .vp-spin { display: block; }
@keyframes vp-spin { to { transform: rotate(360deg); } }

/* --- controls ----------------------------------------------------------- */

.vp-ctl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  transition: opacity .22s ease;
}
/* Gradient scrim behind bar + scrubber: keeps white glyphs above 4.5:1 even on
   the bright white-bookshelf frames. */
.vp-ctl::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--vp-bar-h) + 34px);
  pointer-events: none;
  background: linear-gradient(to top, rgba(20, 18, 18, .78), rgba(20, 18, 18, .45) 60%, rgba(20, 18, 18, 0));
}
.vp--poster .vp-ctl, .vp--teaser .vp-ctl, .vp--error .vp-ctl { display: none; }
.vp--controls-hidden .vp-ctl { opacity: 0; pointer-events: none; }
.vp--controls-hidden .vp-video { cursor: none; }

.vp-seek {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--vp-seek-h);
  margin: 0 10px;
  cursor: pointer;
  touch-action: none;
}
.vp-trk {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
  transition: height .15s ease;
}
.vp-buf, .vp-played {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  border-radius: 999px;
}
.vp-buf { background: rgba(255, 255, 255, .5); }
.vp-played { background: var(--vp-accent); }
.vp-thumb {
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--vp-accent);
  box-shadow: 0 0 0 2px #fff;
  transform: translateY(-50%);
  transition: transform .15s ease;
}
.vp-seek:hover .vp-trk, .vp-seek:focus-visible .vp-trk, .vp--scrub .vp-trk { height: 6px; }

.vp-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--vp-bar-h);
  padding: 0 10px;
}
.vp-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 8px;
  font: 600 13px/1 var(--vp-font);
}
.vp-btn svg { width: 22px; height: 22px; }
.vp-btn:hover, .vp-btn:focus-visible { background: rgba(255, 255, 255, .14); }
.vp-rate { width: auto; min-width: 44px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.vp-time {
  margin: 0 auto 0 4px;
  color: rgba(255, 255, 255, .92);
  font: 500 13px/1 var(--vp-font);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Native range on purpose: accent-color themes the track for ~15 bytes, and
   stripping -webkit-appearance would leave it unrendered. */
.vp-vol {
  display: none;
  flex: 0 0 auto;
  width: 68px;
  height: 20px;
  margin: 0;
  padding: 0;
  accent-color: var(--vp-accent);
  cursor: pointer;
}

/* --- end card + error --------------------------------------------------- */

/* The scrim covers the frame, the content box stops above the bar so the
   visitor can still scrub back. */
.vp-end, .vp-err {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 18, .72);
}
.vp-end {
  z-index: 6;
  pointer-events: none;
  animation: vp-fade .24s ease both;
  /* Darker + blurred than the shared scrim: both VSLs end on a frame with their own
     baked-in yellow CTA — the end card must be the only readable button (CRO F1). */
  background: rgba(20, 18, 18, .86);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.vp-end-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* Clears the whole control cluster — the scrubber row sits above the bar, so
     the bar height alone would leave the box overlapping it. */
  bottom: calc(var(--vp-bar-h) + var(--vp-seek-h) + 8px);
  padding: 0 16px;
}
.vp-end-box, .vp-err {
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
@keyframes vp-fade { from { opacity: 0; } to { opacity: 1; } }

.vp-endcta, .vp-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 28px;
  border-radius: 10px;
  background: var(--vp-accent);
  color: var(--vp-on-accent);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.vp-endcta { pointer-events: auto; }
.vp-endcta:hover, .vp-endcta:focus-visible,
.vp-retry:hover, .vp-retry:focus-visible { background: var(--vp-accent-strong); color: var(--vp-on-accent); }

.vp-replay {
  pointer-events: auto;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
}
.vp-replay:hover, .vp-replay:focus-visible { background: rgba(255, 255, 255, .16); }

.vp-err { z-index: 8; gap: 6px; padding: 16px; text-align: center; }
.vp-err-h { margin: 0; font-size: 16px; font-weight: 600; }
.vp-err-p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .8); }
.vp-err-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.vp-retry { min-height: 44px; padding: 10px 20px; font-size: 14px; }
.vp-out {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
}

/* --- focus, a11y, noscript ---------------------------------------------- */

/* Sky ring on the dark scrim; the 1px dark halo underneath keeps it visible
   when a control sits over a bright frame. */
.vp :focus-visible, .vp:focus-visible {
  outline: 3px solid var(--vp-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(20, 18, 18, .6);
}
.vp-play:focus-visible { box-shadow: 0 6px 22px rgba(20, 18, 18, .35), 0 0 0 1px rgba(20, 18, 18, .6); }

.vp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
.vp > noscript video, .vp .vp-fallback {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* CTA emphasis once 60% is watched — styling only, never layout. */
.vp-watched {
  box-shadow: 0 0 0 3px rgba(226, 105, 100, .35);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vp-accent, #E26964) 35%, transparent);
}
@keyframes vp-nudge { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.03); } }
@media (prefers-reduced-motion: no-preference) {
  .vp-watched { animation: vp-nudge .6s ease 1; }
}

/* --- fullscreen (width+height 100% make the inline aspect-ratio inert) --- */

.vp:fullscreen { width: 100%; height: 100%; max-width: none; border-radius: 0; background: #000; }
.vp:fullscreen .vp-video { object-fit: contain; }
.vp:-webkit-full-screen { width: 100%; height: 100%; max-width: none; border-radius: 0; background: #000; }
.vp:-webkit-full-screen .vp-video { object-fit: contain; }

/* --- breakpoints -------------------------------------------------------- */

@media (min-width: 600px) {
  .vp-play { width: 88px; height: 88px; }
  .vp-label { font-size: 15px; white-space: nowrap; }
}
@media (max-width: 599px) { .vp { --vp-bar-h: 48px; } }
@media (max-width: 419px) { .vp-endcta { align-self: stretch; } }
/* Keep "current / total" visible on phones — "how much longer?" is the abandonment
   question on the 5:36 VSL (CRO F6). Collapse only on the narrowest devices. */
@media (max-width: 339px) { .vp-tot { display: none; } }

/* Compact hit areas only where the pointer is fine AND there is room: a narrow
   window keeps the ≥44px touch targets. */
@media (hover: hover) and (pointer: fine) and (min-width: 600px) {
  .vp-btn { width: 40px; height: 40px; }
  .vp { --vp-seek-h: 20px; }
}

@media (hover: hover) and (pointer: fine) {
  .vp-thumb { transform: translateY(-50%) scale(0); }
  .vp-seek:hover .vp-thumb, .vp-seek:focus-visible .vp-thumb, .vp--scrub .vp-thumb { transform: translateY(-50%) scale(1); }
  .vp-vol { display: block; }
  .vp--poster:hover .vp-poster, .vp--teaser:hover .vp-poster { transform: scale(1.02); }
  .vp--poster:hover::before, .vp--teaser:hover::before { opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
  .vp-poster, .vp-teaser, .vp-play, .vp-thumb, .vp-trk, .vp-ctl, .vp::before { transition: none; }
  .vp-play:hover, .vp-play:focus-visible,
  .vp--poster:hover .vp-poster, .vp--teaser:hover .vp-poster { transform: none; }
  .vp-end { animation: none; }
  .vp-spin { animation-duration: 1.6s; }
}

@media (prefers-contrast: more) {
  .vp::before { background: rgba(20, 18, 18, .62); }
  .vp-ctl::before { background: rgba(20, 18, 18, .9); }
  .vp-label, .vp-runtime, .vp-resume, .vp-unmute { background: rgba(20, 18, 18, .9); }
  .vp-trk { background: rgba(255, 255, 255, .5); }
  .vp :focus-visible, .vp:focus-visible { outline-width: 4px; }
}