/* movie-player.css — diafilm lejátszó */

.mvp { --mvp-ink:#fff; --mvp-bg:#0b0b0d; --mvp-accent:#c9a24b; position:relative; margin:24px 0; }

.mvp-stage {
  position:relative; width:100%; background:var(--mvp-bg);
  overflow:hidden; border-radius:6px;
}

/* két réteg a keresztfade-hez */
.mvp-layer { position:absolute; inset:0; opacity:0; }

/* DELTA-4 crop-wrapper: statikus rá-nagyítás (transform + origin a JS-ből);
   a plate a gyereke, így plate + sprite-ok együtt nagyítódnak. A vágást a
   .mvp-stage overflow:hidden adja. */
.mvp-crop { position:absolute; inset:0; will-change:transform; }

/* a plate overscannel, hogy a Ken Burns-drift ne mutasson szélet */
.mvp-plate {
  position:absolute; inset:0;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  will-change:transform;
}
/* LQIP blur-up: a ~24-32px-es thumbnail felskálázva + elmosva fed, míg a full-res dekódol.
   A scale-t az applyCamera adja; itt csak blur, hogy ne ütközzön a kamera-transzformmal. */
.mvp-plate-lqip { filter:blur(14px); }

/* sprite: a plate-en ül, örökli annak kamera-transzformját.
   Az img px-magasságát a JS a stage-magasságból számolja; a wrap scale-je nagyítja.

   [D 22-es szál] width:max-content — enélkül az abszolút pozicionált wrap
   shrink-to-fit szélessége a (1−x)·stageW rendelkezésre álló sávra szorul, és a
   téma img{max-width:100%} szabálya vízszintesen PRÉSELI a figurát. A küszöb
   x > 1 − PCT·(CANVAS_W/CANVAS_H)·ASPECT = 0.741; x=0.84-nél a faktor 0.62.
   A scale transzform a layoutot nem érinti, ezért a küszöb a kis tanúkra is ez.

   [D 22-es szál] transform-origin:50% 100% — a scale() fixpontja a TALP-horgony,
   nem a doboz közepe. Enélkül a talpvonal PCT·(1−scale)/2 stage-hányaddal csúszik
   (scale<1 → a figura LEBEG; a 0.55-ös tanú 0.153 hányaddal a horgonya fölött).
   A slot-editor ugyanezt a konvenciót követi — a két geometria egyezzen. */
.mvp-sprite { position:absolute; width:max-content; transform-origin:50% 100%; will-change:transform,opacity; }
.mvp-sprite-img { display:block; position:relative; max-width:none; }
.mvp-sprite.is-missing { min-width:8px; }
.mvp-sprite.is-missing .mvp-sprite-img { visibility:hidden; }

/* Kontakt (talaj) árnyék — külön plate-gyerek a talp-horgonynál, flip-független.
   A geometriát (méret, transform, blur, gradiens) a JS állítja be inline. */
.mvp-sprite-cast { position:absolute; pointer-events:none; will-change:transform,opacity; }

/* Forma-árnyék — a wrapben, az img fölött; a sprite alfájára maszkolva.
   A gradienst és a maszk-url-t a JS adja; itt csak a maszk-illesztés fix. */
.mvp-sprite-form {
  position:absolute; inset:0; pointer-events:none;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

/* felirat */
.mvp-caption {
  position:absolute; left:0; right:0; bottom:0; z-index:500;
  padding:26px 22px 20px;
  color:var(--mvp-ink); font-size:clamp(14px,1.7vw,19px); line-height:1.5;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
  background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 55%, rgba(0,0,0,0) 100%);
  transition:padding-bottom .25s ease;
}
/* a vezérlés megjelenésekor a felirat feljebb csúszik, hogy ne takarják egymást */
.mvp-ui-visible .mvp-caption { padding-bottom:60px; }

/* kontrollsor — overlay a stage-en, auto-hide */
.mvp-bar {
  position:absolute; left:0; right:0; bottom:0; z-index:600;
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.mvp-ui-visible .mvp-bar { opacity:1; transform:none; pointer-events:auto; }
/* lejátszás közben, elrejtett UI-nál a kurzor is eltűnik */
.mvp-stage.mvp-playing:not(.mvp-ui-visible) { cursor:none; }

.mvp-ctrl {
  width:38px; height:38px; border:none; border-radius:50%;
  background:rgba(26,26,31,.85); color:#fff; font-size:15px; cursor:pointer; line-height:1;
}
.mvp-ctrl:hover { background:rgba(38,38,45,.95); }
.mvp-play { background:var(--mvp-accent); color:#141414; }
.mvp-play:hover { filter:brightness(1.08); }

.mvp-progress { flex:1; height:6px; background:rgba(255,255,255,.22); border-radius:3px; cursor:pointer; position:relative; }
.mvp-progress-fill { position:absolute; left:0; top:0; bottom:0; width:0; background:var(--mvp-accent); border-radius:3px; transition:width .3s ease; }
.mvp-counter { font-variant-numeric:tabular-nums; font-size:13px; color:#eee; min-width:56px; text-align:right; text-shadow:0 1px 2px rgba(0,0,0,.7); }

.mvp:focus { outline:2px solid var(--mvp-accent); outline-offset:3px; }
.mvp:focus:not(:focus-visible) { outline:none; }

@media (prefers-reduced-motion: reduce) {
  .mvp-plate { will-change:auto; }
}

/* SZ4: bed-némító állapot */
.mvp-ctrl.mvp-bed.is-muted { opacity: .45; }