/* Hero video player (assets/player.js builds the controls). */
.jm-player{
  position:relative;aspect-ratio:16/9;background:#000;
  -webkit-user-select:none;user-select:none;
}
.jm-player video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.jm-player.is-enhanced video{cursor:pointer}

/* Soft shade behind the controls. Stronger while paused so the play button
   and counter read on any frame; nearly gone while playing. */
.jm-player.is-enhanced::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,rgba(0,0,0,.22),rgba(0,0,0,0) 38%),
    linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0) 22%);
  opacity:1;transition:opacity .35s ease;
}
.jm-player.is-playing::after{opacity:.55}

/* Centre play button */
.jm-play{
  position:absolute;top:50%;left:50%;z-index:2;
  width:78px;height:78px;margin:-39px 0 0 -39px;padding:0;
  display:grid;place-items:center;
  border:1.5px solid rgba(255,255,255,.55);border-radius:50%;
  background:rgba(20,16,12,.38);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;cursor:pointer;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.55);
  transition:opacity .3s ease,transform .3s ease,background .2s ease,border-color .2s ease;
}
.jm-play svg{width:30px;height:30px;margin-left:4px;fill:currentColor}
@media (hover:hover){.jm-play:hover{background:var(--red);border-color:var(--red)}}
.jm-play:focus-visible{outline:2px solid #fff;outline-offset:4px}
.jm-player.is-playing .jm-play,
.jm-player.is-loading .jm-play{
  opacity:0;transform:scale(.88);pointer-events:none;
}

/* Loading ring, only while playback is stalled */
.jm-spinner{
  position:absolute;top:50%;left:50%;z-index:2;
  width:44px;height:44px;margin:-22px 0 0 -22px;
  border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
  animation:jm-spin .8s linear infinite;
}
.jm-player.is-loading .jm-spinner{opacity:1;transition-delay:.25s}
@keyframes jm-spin{to{transform:rotate(360deg)}}

/* Time remaining, bottom right */
.jm-time{
  position:absolute;right:14px;bottom:16px;z-index:2;pointer-events:none;
  font-family:var(--display);font-weight:600;font-size:.78rem;line-height:1;
  letter-spacing:.04em;font-variant-numeric:tabular-nums;color:#fff;
  padding:5px 8px;border-radius:4px;background:rgba(0,0,0,.42);
}

/* Fullscreen button, bottom right; the counter sits to its left */
.jm-time{right:56px}
.jm-fs{
  position:absolute;right:10px;bottom:11px;z-index:3;
  width:36px;height:36px;padding:0;display:grid;place-items:center;
  border:0;border-radius:4px;background:rgba(0,0,0,.42);color:#fff;cursor:pointer;
  transition:background .2s ease;
}
.jm-fs svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.jm-fs:hover{background:var(--red)}}
.jm-fs:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* In fullscreen the frame fills the screen and the video letterboxes */
.jm-player.is-fullscreen,.jm-player:fullscreen{aspect-ratio:auto;width:100%;height:100%;background:#000}
.jm-player:fullscreen video{object-fit:contain}
.jm-player:-webkit-full-screen{aspect-ratio:auto;width:100%;height:100%}
.jm-player:-webkit-full-screen video{object-fit:contain}

/* Red progress bar along the bottom edge. The bar element is a taller,
   invisible hit area; the visible track sits at its bottom. */
.jm-bar{
  position:absolute;left:0;right:0;bottom:0;z-index:3;height:18px;
  cursor:pointer;touch-action:none;
}
.jm-track{
  position:absolute;left:0;right:0;bottom:0;height:4px;overflow:hidden;
  background:rgba(255,255,255,.22);transition:height .15s ease;
}
.jm-buffered,.jm-fill{
  position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);
}
.jm-buffered{background:rgba(255,255,255,.28)}
.jm-fill{background:var(--red)}
@media (hover:hover){.jm-bar:hover .jm-track{height:7px}}
.jm-player.is-scrubbing .jm-track,
.jm-bar:focus-visible .jm-track{height:7px}
.jm-bar:focus-visible{outline:none}
.jm-bar:focus-visible .jm-track{box-shadow:0 0 0 2px #fff}

/* Error state */
.jm-error{
  display:none;position:absolute;left:50%;bottom:44px;z-index:2;transform:translateX(-50%);
  width:max-content;max-width:calc(100% - 32px);margin:0;padding:8px 12px;border-radius:4px;
  background:rgba(0,0,0,.7);color:#fff;font-family:var(--display);font-size:.8rem;text-align:center;
}
.jm-player.has-error .jm-error{display:block}

@media (max-width:640px){
  .jm-play{width:62px;height:62px;margin:-31px 0 0 -31px}
  .jm-play svg{width:24px;height:24px;margin-left:3px}
  .jm-time{right:50px;bottom:14px;font-size:.72rem;padding:4px 7px}
  .jm-fs{right:8px;bottom:10px;width:34px;height:34px}
}

@media (prefers-reduced-motion: reduce){
  .jm-play,.jm-track,.jm-player.is-enhanced::after{transition:none}
  .jm-spinner{animation-duration:1.6s}
}