/* Horizon Navy — video player (assets/js/player.js). Glass controls over the picture. */
.vp{
  --vp-glass:rgba(28,30,38,.46);
  position:absolute;inset:0;overflow:hidden;isolation:isolate;
  container-type:inline-size;
  background:#0B1022;color:#FFFFFF;border-radius:inherit;outline:none;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
}
.vp video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0B1022}
.vp.is-fs video{object-fit:contain;background:#000}
.vp:focus-visible{box-shadow:inset 0 0 0 2px rgba(63,167,208,.9)}

/* Shade so the controls read on bright footage */
.vp::after{
  content:"";position:absolute;inset:auto 0 0 0;height:46%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0));
  transition:opacity .35s ease;
}
.vp.is-idle.is-playing::after{opacity:0}

/* Big play button before the first play and whenever paused */
.vp__big{
  position:absolute;left:50%;top:50%;z-index:3;
  width:72px;height:72px;margin:-36px 0 0 -36px;padding:0 0 0 4px;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:#FFFFFF;
  background:var(--vp-glass);
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 16px 40px -12px rgba(0,0,0,.55);
  transition:transform .3s cubic-bezier(.2,.8,.25,1),opacity .25s ease,background-color .2s ease;
}
.vp__big:hover{transform:scale(1.07);background:rgba(28,30,38,.62)}
.vp.is-playing .vp__big{opacity:0;transform:scale(.85);pointer-events:none}

/* Loading */
.vp__spin{
  position:absolute;left:50%;top:50%;z-index:2;width:38px;height:38px;margin:-19px 0 0 -19px;
  border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#FFFFFF;
  opacity:0;animation:vp-spin .8s linear infinite;transition:opacity .2s;pointer-events:none;
}
.vp.is-waiting.is-playing .vp__spin{opacity:1}
@keyframes vp-spin{to{transform:rotate(360deg)}}

/* Control bar */
.vp__bar{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:4;
  display:flex;align-items:center;gap:2px;
  height:48px;padding:0 8px;border-radius:16px;
  background:var(--vp-glass);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 12px 30px -14px rgba(0,0,0,.6);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.25,1);
}
.vp.has-played .vp__bar,.vp:hover .vp__bar,.vp:focus-within .vp__bar{opacity:1;transform:none;pointer-events:auto}
.vp.is-idle.is-playing .vp__bar{opacity:0;transform:translateY(8px);pointer-events:none}
.vp.is-idle.is-playing{cursor:none}
.vp:not(.has-played):not(:hover):not(:focus-within) .vp__bar{opacity:0}

.vp__btn{
  flex-shrink:0;display:grid;place-items:center;
  width:36px;height:36px;padding:0;border:0;border-radius:10px;cursor:pointer;
  background:transparent;color:rgba(255,255,255,.92);
  transition:background-color .15s ease,color .15s ease,transform .15s ease;
}
.vp__btn:hover{background:rgba(255,255,255,.14);color:#FFFFFF}
.vp__btn:active{transform:scale(.92)}
.vp__btn:focus-visible{outline:2px solid rgba(63,167,208,.9);outline-offset:1px}
.vp__btn[hidden]{display:none}

.vp__time{flex-shrink:0;min-width:40px;font:500 12px/1 var(--font,system-ui);font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85);text-align:center}

/* Scrubber */
.vp__scrub{position:relative;flex:1;min-width:40px;height:30px;margin:0 6px;cursor:pointer;touch-action:none}
.vp__track{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.22);transition:height .15s ease,margin .15s ease}
.vp__scrub:hover .vp__track,.vp.is-seeking .vp__track{height:7px;margin-top:-3.5px}
.vp__buf{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.28)}
.vp__fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#FFFFFF}
.vp__knob{
  position:absolute;top:50%;left:0;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;
  background:#FFFFFF;box-shadow:0 1px 5px rgba(0,0,0,.4);
  transform:scale(0);transition:transform .15s ease;
}
.vp__scrub:hover .vp__knob,.vp.is-seeking .vp__knob,.vp__scrub:focus-visible .vp__knob{transform:scale(1)}
.vp__tip{
  position:absolute;bottom:30px;left:0;transform:translateX(-50%);
  padding:5px 8px;border-radius:8px;background:rgba(20,22,30,.85);
  font:600 11px/1 var(--font,system-ui);font-variant-numeric:tabular-nums;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s;
}
.vp__scrub:hover .vp__tip{opacity:1}

/* Speed */
.vp__speedwrap{position:relative;flex-shrink:0}
.vp__speed{width:auto;min-width:40px;padding:0 8px;font:600 12.5px/1 var(--font,system-ui);font-variant-numeric:tabular-nums}
.vp__menu{
  position:absolute;right:0;bottom:46px;z-index:5;
  display:grid;min-width:88px;padding:6px;border-radius:12px;
  background:rgba(28,30,38,.82);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 16px 34px -14px rgba(0,0,0,.7);
}
.vp__menu[hidden]{display:none}
.vp__menu button{padding:8px 12px;border:0;border-radius:8px;background:transparent;color:rgba(255,255,255,.88);font:500 13px/1 var(--font,system-ui);text-align:left;cursor:pointer}
.vp__menu button:hover{background:rgba(255,255,255,.14)}
.vp__menu button.is-on{color:#FFFFFF;font-weight:700}
.vp__menu button.is-on::after{content:"  ✓"}

/* Volume */
.vp__vol{display:flex;align-items:center;flex-shrink:0}
.vp__volbar{position:relative;width:0;height:30px;overflow:hidden;cursor:pointer;touch-action:none;transition:width .25s ease,margin .25s ease}
.vp__vol:hover .vp__volbar,.vp__volbar:focus-visible,.vp__volbar:active{width:72px;margin:0 6px 0 2px}
.vp__volbar .vp__track{height:4px;margin-top:-2px}

/* Filling the window when the browser won't do real full screen (is-zoom: the moment it shrinks back
   after real full screen). */
.vp.is-theater,.vp.is-zoom{position:fixed;inset:0;z-index:2147483000;border-radius:0}
.vp.is-theater video,.vp.is-zoom video{object-fit:contain;background:#000}
html.vp-theater,html.vp-theater body{overflow:hidden}

/* Growing into full screen and shrinking back (player.js zoom): only the picture moves, over a
   darkening veil; the controls wait until it lands. */
.vp.is-zooming{background:transparent}
.vp.is-zooming::after,.vp.is-zooming .vp__bar,.vp.is-zooming .vp__big,.vp.is-zooming .vp__spin{opacity:0;transition:none}
.vp-veil{position:fixed;inset:0;z-index:2147482999;background:#000;pointer-events:none}
.vp:fullscreen::backdrop{background:#000}
.vp.is-zooming:fullscreen::backdrop{animation:vp-veil .38s cubic-bezier(.2,.85,.25,1) both}
@keyframes vp-veil{from{opacity:0}}

/* Small players: keep the essentials */
@container (max-width:520px){
  .vp__skip,.vp__left{display:none}
  .vp__bar{left:8px;right:8px;bottom:8px;height:42px;padding:0 4px;border-radius:13px}
  .vp__btn{width:32px;height:32px}
  .vp__vol .vp__volbar{display:none}
}
@container (max-width:330px){
  .vp__cur,.vp__speedwrap,.vp__pip{display:none}
  .vp__big{width:58px;height:58px;margin:-29px 0 0 -29px}
  .vp__big svg{width:24px;height:24px}
}

/* Fingers: bigger buttons and a taller scrubber to grab. Phones have their own mini player, so that
   button makes room on small screens. */
@container (min-width:220px){
  @media (pointer:coarse){
    .vp__bar{left:10px;right:10px;bottom:10px;height:50px;padding:0 5px}
    .vp__btn{width:40px;height:40px}
    .vp__scrub{height:44px}
  }
}
@container (max-width:520px){
  @media (pointer:coarse){ .vp__pip{display:none} }
}

@media (prefers-reduced-motion:reduce){
  .vp__bar,.vp__big,.vp::after{transition:none}
  .vp__spin{animation-duration:2s}
}