/* ============================================================
   IE Video Player  (vanilla, no deps)  — namespace: .ievp-*
   A single reusable, luxurious control surface shared by the
   case-study hero videos (.ie-case-hero-video) and the language
   reel cards (.ie-case-reel-card). Built by js/video-player.js.

   NOTE: template uses html { font-size: 62.5% } so 1rem = 10px.
   Colour + radius tokens come from css/main.css.
   ============================================================ */

.ievp-stage {
  --ievp-pad: clamp(1.2rem, 1.6vw, 2rem);
  --ievp-btn: 4rem;
  --ievp-ico: 1.8rem;
  position: relative;
  overflow: hidden;
  background: var(--base-shade, #0b0b0b);
  isolation: isolate;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.ievp-stage * { box-sizing: border-box; }

.ievp-stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* reel cards are smaller — tighten the control footprint */
.ie-case-reel-card .ievp-stage {
  --ievp-btn: 3.4rem;
  --ievp-ico: 1.6rem;
  border-top-left-radius: var(--_radius-m, 18px);
  border-top-right-radius: var(--_radius-m, 18px);
}
.ie-case-reel-card .ievp-stage video {
  aspect-ratio: 16 / 9;
}

/* ---- center play / pause affordance ---- */
.ievp-big {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(5.6rem, 7vw, 8rem);
  height: clamp(5.6rem, 7vw, 8rem);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 12, 12, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1.2rem 4rem -1rem rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: clamp(2.2rem, 3vw, 3.2rem);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.82);
  pointer-events: none;
  transition: opacity 0.45s var(--_animbezier, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 0.45s var(--_animbezier, cubic-bezier(0.22, 1, 0.36, 1)),
              background 0.3s, color 0.3s;
  z-index: 4;
}
.ie-case-reel-card .ievp-big { width: 6.4rem; height: 6.4rem; font-size: 2.4rem; }
.ievp-stage.is-paused .ievp-big {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.ievp-big:hover { background: var(--accent); color: #161616; transform: scale(1.06); }
.ievp-big:active { transform: scale(0.96); }

/* ---- buffering spinner ---- */
.ievp-spin {
  position: absolute;
  top: 50%; left: 50%;
  width: 4.4rem; height: 4.4rem;
  margin: -2.2rem 0 0 -2.2rem;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  animation: ievp-spin 0.8s linear infinite;
  z-index: 5;
}
.ievp-stage.is-loading .ievp-spin { opacity: 1; }
.ievp-stage.is-loading.is-paused .ievp-spin { opacity: 0; }
@keyframes ievp-spin { to { transform: rotate(360deg); } }

/* ---- control bar ---- */
.ievp-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1vw, 1.4rem);
  padding: calc(var(--ievp-pad) + 0.6rem) var(--ievp-pad) var(--ievp-pad);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.18) 55%, transparent);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s var(--_animbezier, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 0.4s var(--_animbezier, cubic-bezier(0.22, 1, 0.36, 1));
}
.ievp-stage:hover .ievp-bar,
.ievp-stage.is-paused .ievp-bar,
.ievp-stage.is-seeking .ievp-bar,
.ievp-stage.is-hud .ievp-bar,
.ievp-stage:focus-within .ievp-bar {
  opacity: 1;
  transform: none;
}
/* hide cursor + chrome when idle during playback */
.ievp-stage.is-idle { cursor: none; }

.ievp-btn {
  flex: 0 0 auto;
  width: var(--ievp-btn);
  height: var(--ievp-btn);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: var(--ievp-ico);
  line-height: 1;
  cursor: pointer;
  transition: background 0.28s, color 0.28s, transform 0.28s;
}
.ievp-btn:hover { background: #fff; color: #161616; transform: translateY(-1px); }
.ievp-btn:active { transform: translateY(0) scale(0.95); }
.ievp-btn.is-on { background: var(--accent); color: #161616; }
.ievp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- time readout ---- */
.ievp-time {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 8.6rem;
  font: var(--fw-medium, 500) 1.3rem/1 var(--_font-default, sans-serif);
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  -webkit-user-select: none;
  user-select: none;
}
.ievp-time__sep { opacity: 0.55; }
.ievp-time__dur { opacity: 0.7; }
.ie-case-reel-card .ievp-time { min-width: 0; font-size: 1.15rem; }
.ie-case-reel-card .ievp-time__sep,
.ie-case-reel-card .ievp-time__dur { display: none; }

/* ---- seek bar ---- */
.ievp-seek {
  position: relative;
  flex: 1 1 auto;
  height: 2rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.ievp-seek__rail {
  position: relative;
  width: 100%;
  height: 0.4rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.26);
  overflow: visible;
  transition: height 0.18s ease;
}
.ievp-seek:hover .ievp-seek__rail,
.ievp-stage.is-seeking .ievp-seek__rail { height: 0.6rem; }
.ievp-seek__buf {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.32);
}
.ievp-seek__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  border-radius: 100px;
  background: var(--accent);
}
.ievp-seek__thumb {
  position: absolute;
  top: 50%; left: 0;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%) scale(0.4);
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.18s, transform 0.18s;
}
.ievp-seek:hover .ievp-seek__thumb,
.ievp-stage.is-seeking .ievp-seek__thumb {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
/* hover/scrub time bubble */
.ievp-seek__bubble {
  position: absolute;
  bottom: calc(100% + 1rem);
  left: 0;
  transform: translateX(-50%);
  padding: 0.5rem 0.8rem;
  border-radius: 0.8rem;
  background: rgba(12, 12, 12, 0.92);
  color: #fff;
  font: var(--fw-medium, 500) 1.15rem/1 var(--_font-default, sans-serif);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}
.ievp-seek:hover .ievp-seek__bubble,
.ievp-stage.is-seeking .ievp-seek__bubble { opacity: 1; }
.ie-case-reel-card .ievp-seek__bubble { display: none; }

/* ---- volume ---- */
.ievp-vol {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.ievp-vol__slider {
  position: relative;
  width: 0;
  height: 2rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  overflow: hidden;
  touch-action: none;
  transition: width 0.32s var(--_animbezier, cubic-bezier(0.22, 1, 0.36, 1)), opacity 0.28s;
}
.ievp-vol:hover .ievp-vol__slider,
.ievp-vol:focus-within .ievp-vol__slider,
.ievp-vol__slider.is-open {
  width: 7.2rem;
  opacity: 1;
}
.ievp-vol__rail {
  position: relative;
  width: 100%;
  height: 0.4rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.26);
}
.ievp-vol__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 100%;
  border-radius: 100px;
  background: #fff;
}
.ievp-vol__thumb {
  position: absolute;
  top: 50%; left: 100%;
  width: 1.2rem; height: 1.2rem;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.5);
}
/* on small reel cards the slider would crowd the bar — tap-to-mute only */
.ie-case-reel-card .ievp-vol__slider { display: none; }

.ievp-spacer { flex: 1 1 auto; }
.ie-case-reel-card .ievp-spacer { display: none; }

/* ---- error fallback ---- */
.ievp-stage.is-error .ievp-big,
.ievp-stage.is-error .ievp-spin { display: none; }

@media (hover: none) {
  /* no hover on touch — keep the bar discoverable */
  .ievp-bar { opacity: 1; transform: none; }
  .ievp-stage.is-idle { cursor: pointer; }
}

@media (prefers-reduced-motion: reduce) {
  .ievp-spin { animation: none; }
  .ievp-big, .ievp-bar, .ievp-seek__rail, .ievp-seek__thumb,
  .ievp-vol__slider, .ievp-btn { transition: none; }
}