/* =========================================================
   Playerul de clipuri. Acelasi de pe calculator: buton mare
   in mijloc, bara proprie jos cu sarituri de 10 secunde,
   si dublu-tap pe telefon. Fara controalele browserului.

   Se agata de orice cutie .vsl-hero care are un <video> in ea.
   Culorile vin din variabilele paginii; unde pagina nu are
   variabila, e pusa o rezerva pe loc.
   ========================================================= */

.vsl-hero{position:relative;overflow:hidden}
.vsl-hero video{width:100%;height:100%;object-fit:cover;display:block;background:#070c08}

/* butonul mare din mijloc, pana da play */
.vsl-hero .play{border:0;background:none;padding:0;cursor:pointer;position:absolute;inset:0;
  display:grid;place-items:center;z-index:3}
.vsl-hero .play i{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--acc-rgb,74,229,74),.12);border:1px solid rgba(var(--acc-rgb,74,229,74),.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s}
.vsl-hero:hover .play i{transform:scale(1.07);background:rgba(var(--acc-rgb,74,229,74),.18)}
.vsl-hero .play i::after{content:"";width:0;height:0;margin-left:6px;
  border-left:22px solid var(--acc,#4ae54a);
  border-top:14px solid transparent;border-bottom:14px solid transparent}
.vsl-hero .play.ascuns{display:none}

/* ---------- bara de control ---------- */
.ctrl{position:absolute;left:10px;right:10px;bottom:10px;z-index:8;
  display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:12px;
  background:rgba(5,10,7,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 26px rgba(0,0,0,.5);
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease}
.are-ctrl.merge .ctrl{opacity:1;transform:none;pointer-events:auto}
.ctrl[hidden]{display:none}

.ctrl-b{flex:none;width:29px;height:29px;display:grid;place-items:center;position:relative;
  border:0;border-radius:9px;background:transparent;color:var(--text,#f2f4f3);cursor:pointer;
  transition:background .18s,color .18s}
.ctrl-b:hover{background:rgba(var(--acc-rgb,74,229,74),.16);color:var(--acc-sus,var(--acc,#4ae54a))}
.ctrl-b svg{width:18px;height:18px;display:block}
.ctrl-b svg text{font-family:var(--text-f,system-ui,sans-serif)}
.ctrl-play{background:rgba(var(--acc-rgb,74,229,74),.18);color:var(--acc-sus,var(--acc,#4ae54a))}
.ctrl-play:hover{background:rgba(var(--acc-rgb,74,229,74),.28)}

.ctrl-timp{flex:none;font-size:11px;font-variant-numeric:tabular-nums;
  font-weight:700;color:var(--text,#f2f4f3);letter-spacing:.01em}
.ctrl-timp.slab{color:var(--dim,#8e948f);font-weight:500}

.ctrl-prog{flex:1;min-width:40px;-webkit-appearance:none;appearance:none;
  height:4px;border-radius:100px;cursor:pointer;
  background:linear-gradient(90deg,
    var(--acc,#4ae54a) 0 var(--vazut,0%),
    rgba(255,255,255,.22) var(--vazut,0%) 100%)}
.ctrl-prog::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;
  background:#fff;box-shadow:0 0 8px rgba(var(--acc-rgb,74,229,74),.7);
  transition:transform .15s ease}
.ctrl-prog:hover::-webkit-slider-thumb,.ctrl-prog:active::-webkit-slider-thumb{transform:scale(1.25)}
.ctrl-prog::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;
  background:#fff;box-shadow:0 0 8px rgba(var(--acc-rgb,74,229,74),.7)}

.ctrl-sunet{flex:none;display:flex;align-items:center;gap:4px}
.ctrl-vol{width:0;opacity:0;transition:width .28s ease,opacity .22s ease;
  -webkit-appearance:none;appearance:none;height:4px;border-radius:100px;cursor:pointer;
  background:linear-gradient(90deg,
    var(--acc,#4ae54a) 0 var(--umplut,100%),
    rgba(255,255,255,.22) var(--umplut,100%) 100%)}
.ctrl-sunet:hover .ctrl-vol,.ctrl-vol:focus-visible{width:58px;opacity:1}
.ctrl-vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:#fff;box-shadow:0 0 8px rgba(var(--acc-rgb,74,229,74),.7);cursor:pointer}
.ctrl-vol::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;
  background:#fff;box-shadow:0 0 8px rgba(var(--acc-rgb,74,229,74),.7);cursor:pointer}

/* pe telefon sunetul se da din butoanele fizice, deci nu tin slider de volum:
   tot spatiul ramane pentru pozitia in clip */
@media(hover:none){
  .ctrl-vol{display:none}
  .ctrl{gap:6px;padding:4px 7px}
  .ctrl-b{width:28px;height:28px}
  .ctrl-timp{font-size:10px}
}
@media(max-width:600px){
  .vsl-hero .play i{width:66px;height:66px}
  .vsl-hero .play i::after{border-left-width:18px;border-top-width:11px;border-bottom-width:11px;margin-left:5px}
}

/* =========================================================
   Gesturi pe clip, doar pe ecrane tactile.
   Jumatatea stanga = dublu tap da 10s inapoi, dreapta 10s inainte.
   Un tap simplu nu pune pauza, doar scoate comenzile la vedere.
   ========================================================= */
.tap-strat{display:none}
.pauza-mare{display:none}
@media(hover:none) and (pointer:coarse){
  .are-ctrl.merge .tap-strat{position:absolute;inset:0;z-index:4;
    display:grid;grid-template-columns:1fr 1fr;touch-action:manipulation}
  .tap-jum{border:0;background:none;padding:0;margin:0;cursor:pointer;position:relative;
    display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
  .tap-bula{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
    background:rgba(5,10,7,.55);color:#fff;opacity:0;transform:scale(.82)}
  .tap-bula svg{width:30px;height:30px;display:block}
  .tap-bula svg text{font-family:var(--text-f,system-ui,sans-serif)}
  .tap-jum.puls .tap-bula{animation:tapPuls .52s ease-out}
  @keyframes tapPuls{
    0%{opacity:0;transform:scale(.82)}
    18%{opacity:1;transform:scale(1)}
    70%{opacity:1;transform:scale(1)}
    100%{opacity:0;transform:scale(1.06)}
  }

  /* bara de jos nu mai sta permanent: apare la tap, impreuna cu butonul de pauza */
  .are-ctrl.merge .ctrl{opacity:0;transform:translateY(6px);pointer-events:none}
  .are-ctrl.merge.arata-ctrl .ctrl{opacity:1;transform:none;pointer-events:auto}

  .are-ctrl.merge .play{display:none}
  .are-ctrl.merge .pauza-mare{position:absolute;top:50%;left:50%;z-index:7;
    width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;
    display:grid;place-items:center;padding:0;cursor:pointer;
    border:1.5px solid rgba(var(--acc-rgb,74,229,74),.55);background:rgba(5,10,7,.6);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    color:var(--acc-sus,var(--acc,#4ae54a));-webkit-tap-highlight-color:transparent;
    opacity:0;transform:scale(.9);pointer-events:none;
    transition:opacity .2s ease,transform .2s ease}
  .are-ctrl.merge.arata-ctrl .pauza-mare{opacity:1;transform:none;pointer-events:auto}
  .pauza-mare svg{width:26px;height:26px;display:block}
}