/* VIDEO.CSS — ciairdabar.lt atsiliepimų grotuvas · 2026-09-20
   Bunny Stream (HLS su MP4 atsarginiu variantu) savame rėme, puslapio spalvomis.
   Be JavaScript veikia įprastas naršyklės grotuvas. */

.vp {
  --vp-violet: var(--violet-deep, #7b5ea7);
  --vp-violet-2: var(--violet-medium, #9b7bc7);
  --vp-gold: var(--gold, #c9a227);
  --vp-gold-light: var(--gold-light, #e8d48a);
  --vp-cream: var(--cream, #fffbf5);
  --vp-lenkis: cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 20px;
  background: #241c2e;
  box-shadow: 0 12px 40px rgba(123, 94, 167, 0.2);
  transition: transform 0.4s var(--vp-lenkis), box-shadow 0.4s var(--vp-lenkis);
}

.vp:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(123, 94, 167, 0.25);
}

.vp.vp-groja:hover { transform: none; }

.vp-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #241c2e;
}

/* ---- Plakatas ---- */
.vp-plakatas {
  position: absolute;
  inset: 0;
  z-index: 2;
  transition: opacity 0.5s var(--vp-lenkis), visibility 0s 0.5s;
}

.vp-plakatas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Patamsinam tik apačią – veidas lieka švarus, mygtukas ir užrašas skaitomi */
.vp-plakatas::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(36, 28, 46, 0.78) 0%,
    rgba(36, 28, 46, 0.52) 18%,
    rgba(36, 28, 46, 0.12) 38%,
    transparent 52%);
}

.vp-pradeta .vp-plakatas {
  opacity: 0;
  visibility: hidden;
}

/* ---- Didysis paleidimo mygtukas ---- */
.vp-paleisti {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  width: 100%;
  /* apatiniame trečdalyje – kad nedengtų veido */
  padding: 0 18px 12%;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  cursor: pointer;
  transition: opacity 0.4s var(--vp-lenkis), visibility 0s 0.4s;
}

.vp-pradeta .vp-paleisti {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.vp-paleisti-ratas {
  position: relative;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vp-violet) 0%, var(--vp-violet-2) 100%);
  box-shadow: 0 12px 34px rgba(36, 28, 46, 0.45);
  transition: transform 0.35s var(--vp-lenkis), box-shadow 0.35s var(--vp-lenkis);
}

/* auksinis žiedas aplink – kaip hero nuotraukos rėmas */
.vp-paleisti-ratas::before {
  content: '';
  position: absolute;
  inset: -9px;
  border: 1.5px solid var(--vp-gold);
  border-radius: 50%;
  opacity: 0.75;
  transition: inset 0.35s var(--vp-lenkis), opacity 0.35s;
}

.vp-paleisti-ratas svg {
  width: 30px;
  height: 30px;
  margin-left: 5px; /* optinis centras trikampiui */
  fill: #fff;
}

.vp-paleisti:hover .vp-paleisti-ratas,
.vp-paleisti:focus-visible .vp-paleisti-ratas {
  transform: scale(1.07);
  box-shadow: 0 16px 42px rgba(36, 28, 46, 0.55);
}

.vp-paleisti:hover .vp-paleisti-ratas::before { inset: -14px; opacity: 1; }

.vp-paleisti-tekstas {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-style: italic;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 14px rgba(36, 28, 46, 0.6);
}

/* ---- Apatinė valdymo juosta ---- */
.vp-ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 34px 14px 12px;
  background: linear-gradient(to top, rgba(36, 28, 46, 0.82) 0%, rgba(36, 28, 46, 0.45) 45%, transparent 100%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--vp-lenkis), transform 0.3s var(--vp-lenkis);
  pointer-events: none;
}

.vp-pradeta .vp-ui { pointer-events: auto; }

.vp-pradeta:hover .vp-ui,
.vp-pradeta.vp-stovi .vp-ui,
.vp-pradeta.vp-rodyti-ui .vp-ui,
.vp-pradeta:focus-within .vp-ui {
  opacity: 1;
  transform: none;
}

.vp-mygtukas {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}

.vp-mygtukas:hover { background: rgba(255, 255, 255, 0.24); transform: scale(1.06); }
.vp-mygtukas svg { width: 15px; height: 15px; fill: currentColor; }
.vp-mygtukas .vp-ikona-antra { display: none; }
.vp-groja .vp-perjungti .vp-ikona-pirma { display: none; }
.vp-groja .vp-perjungti .vp-ikona-antra { display: block; }
.vp-tylus .vp-garsas .vp-ikona-pirma { display: none; }
.vp-tylus .vp-garsas .vp-ikona-antra { display: block; }

/* juostelė */
.vp-juosta {
  position: relative;
  flex: 1;
  height: 26px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}

.vp-juosta::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
}

.vp-buferis,
.vp-eiga {
  position: absolute;
  left: 0;
  height: 3px;
  border-radius: 3px;
  transform-origin: left center;
  transform: scaleX(0);
}

.vp-buferis { right: 0; background: rgba(255, 255, 255, 0.35); }

.vp-eiga {
  right: 0;
  background: linear-gradient(90deg, var(--vp-gold-light), var(--vp-gold));
}

.vp-rankenele {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  transform: translateY(-50%) scale(0);
  transition: transform 0.2s var(--vp-lenkis);
}

.vp-juosta:hover .vp-rankenele,
.vp-juosta:focus-visible .vp-rankenele { transform: translateY(-50%) scale(1); }

.vp-laikas {
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.02em;
}

/* ---- Sukimosi žyma ---- */
.vp-kraunasi {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 2.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--vp-gold);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  animation: vpSukasi 0.9s linear infinite;
}

.vp-laukia .vp-kraunasi { opacity: 1; visibility: visible; }

@keyframes vpSukasi { to { transform: rotate(360deg); } }

/* ---- Fokusas klaviatūra ---- */
.vp button:focus-visible,
.vp [tabindex]:focus-visible {
  outline: 2px solid var(--vp-gold);
  outline-offset: 3px;
}

/* ---- Be JavaScript: įprastas naršyklės grotuvas ---- */
html:not(.js) .vp-paleisti,
html:not(.js) .vp-ui,
html:not(.js) .vp-kraunasi { display: none; }

html:not(.js) .vp-plakatas { opacity: 0; visibility: hidden; }

@media (max-width: 768px) {
  .vp-paleisti-ratas { width: 72px; height: 72px; }
  .vp-paleisti-ratas svg { width: 25px; height: 25px; }
  .vp-paleisti-tekstas { font-size: 1.05rem; }
  .vp:hover { transform: none; }
  /* telefone valdymas matomas, kol nepaslėptas po grojimo */
  .vp-pradeta .vp-ui { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vp, .vp *, .vp *::before, .vp *::after {
    transition: none !important;
    animation: none !important;
  }
  .vp-kraunasi { animation: none !important; }
}