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

   Design: a floating glass control pill, cross-fading SVG
   play/pause glyphs, an accent seek line with a soft glow, and
   compositor-only progress painting (scaleX/translateX driven by
   the --p / --b / --w custom properties set from 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.8vw, 2.2rem);
  --ievp-btn: 3.8rem;
  --ievp-ico: 1.8rem;
  --ievp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ievp-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  background: var(--base-shade, #0b0b0b);
  isolation: isolate;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ievp-stage * { box-sizing: border-box; }
.ievp-stage:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.ievp-stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ievp-stage.is-fullscreen { background: #000; }
.ievp-stage.is-fullscreen video { object-fit: contain; }

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

/* ---- cross-fading play/pause glyphs ---- */
.ievp-g {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  fill: currentColor;
  transition: opacity 0.24s ease, transform 0.34s var(--ievp-spring);
}
.ievp-g--play { opacity: 0; transform: scale(0.5) rotate(-90deg); }
.ievp-g--pause { opacity: 1; transform: scale(1) rotate(0deg); }
.is-paused .ievp-g--play { opacity: 1; transform: scale(1) rotate(0deg); }
.is-paused .ievp-g--pause { opacity: 0; transform: scale(0.5) rotate(90deg); }

/* ---- center play affordance ---- */
.ievp-big {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(5.8rem, 7vw, 8rem);
  height: clamp(5.8rem, 7vw, 8rem);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.45);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 1.6rem 4.4rem -1.2rem rgba(0, 0, 0, 0.65),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: clamp(2.2rem, 2.8vw, 3rem);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
  transition: opacity 0.4s var(--ievp-ease),
              transform 0.5s var(--ievp-spring),
              background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  z-index: 4;
}
.ievp-stage--reel .ievp-big { width: 5.6rem; height: 5.6rem; font-size: 2rem; }
.ievp-stage.is-paused .ievp-big {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.ievp-big:hover {
  background: var(--accent);
  border-color: transparent;
  color: #131313;
  transform: scale(1.07);
}
.ievp-big:active { transform: scale(0.94); transition-duration: 0.1s; }
.ievp-big .ievp-g--play { left: 6%; } /* optical centering of the triangle */

/* replay glyph after a feature film finishes */
.ievp-big__replay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.5) rotate(90deg);
  transition: opacity 0.24s ease, transform 0.34s var(--ievp-spring);
}
.is-ended .ievp-big__replay { opacity: 1; transform: scale(1) rotate(0deg); }
.is-ended .ievp-big .ievp-g--play { opacity: 0; transform: scale(0.5) rotate(-90deg); }

/* ---- transient center pulse on play/pause ---- */
.ievp-pulse {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7.2rem;
  height: 7.2rem;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 2.8rem;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.ievp-pulse.is-anim { animation: ievp-pulse 0.55s var(--ievp-ease) forwards; }
/* the pulse glyph is always fully shown — the crossfade states don't apply here */
.ievp-pulse .ievp-g--play,
.ievp-pulse .ievp-g--pause { opacity: 1; transform: none; transition: none; }
@keyframes ievp-pulse {
  0% { opacity: 0.9; transform: scale(0.65); }
  100% { opacity: 0; transform: scale(1.25); }
}
.ievp-stage--reel .ievp-pulse { width: 5.4rem; height: 5.4rem; font-size: 2.1rem; }

/* ---- double-tap skip chips (touch) ---- */
.ievp-skip {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.ievp-skip--l { left: 8%; }
.ievp-skip--r { right: 8%; }
.ievp-skip__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.4rem;
  border-radius: 10rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 10, 10, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #fff;
  font: var(--fw-medium, 500) 1.3rem/1 var(--_font-default, sans-serif);
  letter-spacing: 0.03em;
}
.ievp-skip__chip i { font-size: 1.5rem; color: var(--accent); }
.ievp-skip.is-anim { animation: ievp-skip 0.7s var(--ievp-ease) forwards; }
@keyframes ievp-skip {
  0% { opacity: 0; transform: translateY(-50%) scale(0.7); }
  25% { opacity: 1; transform: translateY(-50%) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-50%) scale(1.05); }
}

/* ---- buffering spinner (delayed so short stalls never flash it) ---- */
.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.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  animation: ievp-spin 0.8s linear infinite;
  z-index: 5;
}
.ievp-stage.is-loading .ievp-spin { opacity: 1; transition-delay: 0.3s; }
.ievp-stage.is-loading.is-paused .ievp-spin { opacity: 0; transition-delay: 0s; }
@keyframes ievp-spin { to { transform: rotate(360deg); } }

/* ---- floating glass control pill ---- */
.ievp-bar {
  position: absolute;
  left: var(--ievp-pad);
  right: var(--ievp-pad);
  bottom: var(--ievp-pad);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 0.8vw, 1rem);
  max-width: 88rem;
  margin-inline: auto;
  padding: 0.7rem 1rem 0.7rem 0.7rem;
  border-radius: 10rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 10, 10, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 1.2rem 3.6rem -1rem rgba(0, 0, 0, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateY(1rem) scale(0.97);
  transform-origin: bottom center;
  pointer-events: none;
  transition: opacity 0.35s var(--ievp-ease), transform 0.45s var(--ievp-ease);
  will-change: opacity, transform;
}
.ievp-stage--reel .ievp-bar { padding: 0.5rem 0.8rem 0.5rem 0.5rem; }

.ievp-stage.is-paused .ievp-bar,
.ievp-stage.is-seeking .ievp-bar,
.ievp-stage.is-hud .ievp-bar,
.ievp-stage:focus-visible .ievp-bar {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* keyboard focus inside the controls pins the bar; pointer/touch focus must
   not (a tapped button keeps DOM focus and would pin the chrome forever) */
.ievp-stage:has(:focus-visible) .ievp-bar {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (hover: hover) {
  .ievp-stage:hover .ievp-bar {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}
/* hide cursor + chrome when idle during playback */
.ievp-stage.is-idle { cursor: none; }

/* ---- pill buttons ---- */
.ievp-btn {
  position: relative;
  flex: 0 0 auto;
  width: var(--ievp-btn);
  height: var(--ievp-btn);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: var(--ievp-ico);
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--ievp-spring);
}
.ievp-btn:hover { background: rgba(255, 255, 255, 0.14); }
.ievp-btn:active { transform: scale(0.9); transition-duration: 0.1s; }
.ievp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.ievp-play { background: rgba(255, 255, 255, 0.1); }
.ievp-play:hover { background: var(--accent); color: #131313; }
.ievp-play .ievp-g--play { left: 5%; }

/* ---- time readout ---- */
.ievp-time {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 8.2rem;
  font: var(--fw-medium, 500) 1.25rem/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.45; font-size: 1.05rem; }
.ievp-time__dur { opacity: 0.6; }
.ievp-stage--reel .ievp-time { min-width: 0; font-size: 1.1rem; }
.ievp-stage--reel .ievp-time__sep,
.ievp-stage--reel .ievp-time__dur { display: none; }

/* ---- seek line ----
   --p  played fraction   (JS, every frame via rAF)
   --b  buffered fraction (JS, on progress)
   --w  rail width in px  (JS, via ResizeObserver — keeps the thumb
                           on the compositor: translateX instead of left) */
.ievp-seek {
  --p: 0;
  --b: 0;
  --w: 0px;
  --hp: 0;
  position: relative;
  flex: 1 1 auto;
  height: 2.4rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.ievp-seek__rail {
  position: relative;
  width: 100%;
  height: 0.4rem;
  border-radius: 10rem;
  background: rgba(255, 255, 255, 0.18);
  transition: height 0.2s var(--ievp-ease);
}
.ievp-seek:hover .ievp-seek__rail,
.ievp-stage.is-seeking .ievp-seek__rail { height: 0.65rem; }
.ievp-seek__buf,
.ievp-seek__fill {
  position: absolute;
  inset: 0;
  border-radius: 10rem;
  transform-origin: left center;
  will-change: transform;
}
.ievp-seek__buf {
  background: rgba(255, 255, 255, 0.22);
  transform: scaleX(var(--b));
  transition: transform 0.4s ease;
}
.ievp-seek__fill {
  background: var(--accent);
  box-shadow: 0 0 1.2rem rgba(var(--accent-rgb), 0.45);
  transform: scaleX(var(--p));
}
.ievp-seek__thumb {
  position: absolute;
  top: 50%; left: 0;
  width: 0;
  height: 0;
  transform: translateX(calc(var(--p) * var(--w)));
  will-change: transform;
}
.ievp-seek__dot {
  position: absolute;
  top: 0; left: 0;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.5),
              0 0 0 0.4rem rgba(var(--accent-rgb), 0.25);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.25s var(--ievp-spring);
}
.ievp-seek:hover .ievp-seek__dot,
.ievp-stage.is-seeking .ievp-seek__dot { transform: translate(-50%, -50%) scale(1); }
.ievp-stage.is-seeking .ievp-seek__dot { transform: translate(-50%, -50%) scale(1.25); }

/* hover/scrub time bubble */
.ievp-seek__bubble {
  position: absolute;
  bottom: calc(100% + 1.2rem);
  left: clamp(2.2rem, calc(var(--hp) * 100%), calc(100% - 2.2rem));
  transform: translateX(-50%) translateY(0.4rem);
  padding: 0.6rem 1rem;
  border-radius: 10rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 10, 10, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  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.18s ease, transform 0.25s var(--ievp-ease);
  z-index: 2;
}
.ievp-seek:hover .ievp-seek__bubble,
.ievp-stage.is-seeking .ievp-seek__bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ievp-stage--reel .ievp-seek__bubble { display: none; }

/* ---- volume ---- */
.ievp-vol {
  --p: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.ievp-vol__slider {
  position: relative;
  width: 0;
  height: 2.4rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  touch-action: none;
  transition: width 0.35s var(--ievp-ease), opacity 0.25s ease;
}
.ievp-vol:hover .ievp-vol__slider,
.ievp-vol:focus-within .ievp-vol__slider {
  width: 7.4rem;
  opacity: 1;
  margin-right: 0.5rem;
}
.ievp-vol__rail {
  position: relative;
  width: 100%;
  height: 0.4rem;
  border-radius: 10rem;
  background: rgba(255, 255, 255, 0.18);
}
.ievp-vol__fill {
  position: absolute;
  inset: 0;
  border-radius: 10rem;
  background: #fff;
  transform-origin: left center;
  transform: scaleX(var(--p));
}
.ievp-vol__thumb {
  position: absolute;
  top: 50%;
  left: calc(var(--p) * 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);
}
/* reel cards keep the hover-reveal slider on desktop; the seek bar shrinks
   to make room. On touch it's hidden by the (hover: none) block below. */
.ievp-stage--reel .ievp-vol:hover .ievp-vol__slider,
.ievp-stage--reel .ievp-vol:focus-within .ievp-vol__slider {
  width: 6.4rem;
}

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

/* ---- touch ----
   No hover: the pill appears on tap (JS adds .is-hud), stays while
   paused, and auto-hides during playback so the frame stays clean. */
@media (hover: none) {
  .ievp-stage { --ievp-btn: 4rem; }
  .ievp-stage--reel { --ievp-btn: 3.4rem; }
  .ievp-stage.is-idle { cursor: pointer; }
  .ievp-vol__slider { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ievp-spin { animation: none; }
  .ievp-pulse.is-anim, .ievp-skip.is-anim { animation: none; opacity: 0; }
  .ievp-big, .ievp-bar, .ievp-btn, .ievp-g, .ievp-big__replay,
  .ievp-seek__rail, .ievp-seek__buf, .ievp-seek__dot, .ievp-seek__bubble,
  .ievp-vol__slider { transition: none; }
}