/* =====================================================================
   HONEY JAR — a Video.js v10 skin by Dark Honey Studio
   Progress is honey flowing along the timeline (thick meniscus, gentle
   drips that stop on pause), the playhead is a honey dipper, volume is
   the honey level in a hexagonal jar, previews sit in a hexagon frame.
   Public properties: --media-accent-color (honey), --media-border-radius,
   --media-font-family.
   ===================================================================== */

.hj-player { display: block; container: honeyjar / inline-size; }

.hj {
  --hj-honey: var(--media-accent-color, #eaa83c);
  --hj-honey-light: #ffd98a;
  --hj-honey-deep: #b5680f;
  --hj-amber-dark: #7a3f07;
  --hj-ivory: #f6efe2;
  --hj-wax: #1d140c;
  --hj-wax-2: #2b1d10;
  --hj-night: #0f0a06;
  --hj-ui: var(--media-font-family, "Inter", ui-sans-serif, system-ui, sans-serif);
  --hj-display: "Fraunces", Georgia, serif;
  --hj-radius: var(--media-border-radius, 20px);
  --hj-ease: cubic-bezier(0.25, 0.8, 0.25, 1);
  --hj-btn: 44px;
  --hj-comb: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='41.57' viewBox='0 0 24 41.57'><path d='M12 0l12 6.93v13.86L12 27.71 0 20.79V6.93zM0 34.64l12 6.93 12-6.93' fill='none' stroke='%23eaa83c' stroke-opacity='.045' stroke-width='.8'/></svg>");

  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--hj-night);
  color: var(--hj-ivory);
  font-family: var(--hj-ui);
  border-radius: var(--hj-radius);
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.hj:fullscreen { border-radius: 0; aspect-ratio: auto; }
.hj mux-video, .hj video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.hj-poster { position: absolute; inset: 0; z-index: 1; transition: opacity 600ms var(--hj-ease); }
.hj-poster img, .hj-poster::part(image) { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.18) saturate(0.95); }
.hj-poster:not([data-visible]) { opacity: 0; pointer-events: none; }

/* paused-state helper */
.hj { --hj-run: running; }
.hj:has(.hj-btn--play[data-paused]) { --hj-run: paused; }

/* ---------- label (title) ---------------------------------------------- */
.hj-label {
  position: absolute; z-index: 6;
  top: clamp(12px, 3cqi, 24px); left: clamp(12px, 3cqi, 24px);
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 8px;
  border-radius: 99px;
  background: rgb(15 10 6 / 0.62);
  box-shadow: 0 0 0 1px rgb(234 168 60 / 0.22) inset, 0 8px 20px -8px rgb(0 0 0 / 0.6);
  pointer-events: none;
  transition: opacity 400ms var(--hj-ease), translate 400ms var(--hj-ease);
}
.hj-label__hex { width: 26px; height: 26px; }
.hj-label__hex path:first-child { fill: none; stroke: var(--hj-honey); stroke-width: 1.4; stroke-linejoin: round; }
.hj-label__hex .drip { fill: var(--hj-honey); }
.hj-label__text { display: grid; gap: 1px; }
.hj-label__brand { font: italic 500 17px/1 var(--hj-display); letter-spacing: 0.005em; }
.hj-label__sub { font: 600 8.5px/1.2 var(--hj-ui); letter-spacing: 0.26em; text-transform: uppercase; color: #d9b67a; }
.hj:has(.hj-bigplay[data-started]):has(.hj-chrome:not([data-visible])) .hj-label { opacity: 0; translate: 0 -6px; }

/* ---------- big play: one drop of honey -------------------------------- */
.hj-bigplay {
  position: absolute; top: 50%; left: 50%; z-index: 5;
  display: grid; place-items: center;
  width: clamp(84px, 13cqi, 124px); aspect-ratio: 100 / 120;
  translate: -50% -50%;
  cursor: pointer;
  border-radius: 50% 50% 46% 46% / 40% 40% 60% 60%;
  transition: opacity 400ms var(--hj-ease), scale 400ms var(--hj-ease), visibility 0s;
}
.hj-bigplay__drop { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 16px 18px rgb(0 0 0 / 0.55)) drop-shadow(0 0 22px rgb(234 168 60 / 0.25)); transform-origin: 50% 90%; animation: hj-wobble 5s ease-in-out infinite; }
.hj-bigplay__drop .body { fill: url(#hj-drop); stroke: rgb(255 230 170 / 0.35); stroke-width: 1; }
.hj-bigplay__drop .shine { fill: none; stroke: rgb(255 248 225 / 0.75); stroke-width: 4; stroke-linecap: round; }
.hj-bigplay__drop .glint { fill: rgb(255 250 235 / 0.9); }
.hj-bigplay__icon { position: relative; width: 36%; height: 36%; margin-top: 26%; fill: #3b1f06; filter: drop-shadow(0 1px 0 rgb(255 230 170 / 0.5)); }
.hj-bigplay .hj-i-play { translate: 4% 0; }
.hj-bigplay .hj-i-replay { display: none; }
.hj-bigplay[data-ended] .hj-i-replay { display: block; }
.hj-bigplay[data-ended] .hj-i-play { display: none; }
.hj-bigplay:hover .hj-bigplay__drop { scale: 1.05; }
.hj-bigplay:focus-visible { outline: 2px solid var(--hj-honey-light); outline-offset: 8px; }
.hj-bigplay[data-started]:not([data-ended]) { opacity: 0; scale: 0.9; pointer-events: none; visibility: hidden; transition: opacity 400ms var(--hj-ease), scale 400ms var(--hj-ease), visibility 0s linear 400ms; }
@keyframes hj-wobble { 0%, 100% { scale: 1 1; } 50% { scale: 1.025 0.975; } }

/* ---------- buffering -------------------------------------------------- */
.hj-buffering { position: absolute; top: 50%; left: 50%; z-index: 5; width: 54px; height: 54px; translate: -50% -50%; pointer-events: none; }
.hj-buffering:not([data-visible]) { display: none; }
.hj-buffering span { position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: conic-gradient(from 0deg, transparent 0 60%, var(--hj-honey)); animation: hj-spin 1.4s linear infinite; -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%); mask: radial-gradient(circle, transparent 54%, #000 56%); }
@keyframes hj-spin { to { rotate: 360deg; } }

/* ---------- controls visibility ---------------------------------------- */
.hj-controls { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.hj-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgb(15 10 6 / 0.7), transparent 42%), linear-gradient(to bottom, rgb(15 10 6 / 0.4), transparent 24%); transition: opacity 450ms var(--hj-ease); }
.hj-chrome { position: absolute; inset: 0; pointer-events: none; transition: opacity 450ms var(--hj-ease); }
.hj-scrim:not([data-visible]),
.hj-chrome:not([data-visible]):not(:has(:focus-visible)) { opacity: 0; }
.hj-chrome:not([data-visible]):not(:has(:focus-visible)) .hj-panel { translate: 0 12px; }
.hj-chrome:not([data-visible]):not(:has(:focus-visible)) * { pointer-events: none !important; }
.hj:has(.hj-bigplay:not([data-started])) .hj-panel { opacity: 0; translate: 0 12px; }
.hj:has(.hj-bigplay:not([data-started])) .hj-panel * { pointer-events: none; }

/* ---------- the panel: dark beeswax ------------------------------------ */
.hj-panel {
  position: absolute;
  left: clamp(8px, 2.2cqi, 18px); right: clamp(8px, 2.2cqi, 18px); bottom: clamp(8px, 2.2cqi, 18px);
  display: grid; gap: 0;
  padding: 10px 14px 6px;
  border-radius: 16px;
  pointer-events: auto;
  background-color: rgb(24 16 9 / 0.9);
  background-image: var(--hj-comb), radial-gradient(120% 140% at 50% -40%, rgb(234 168 60 / 0.10), transparent 60%);
  background-size: 24px 41.57px, 100% 100%;
  box-shadow: 0 1px 0 rgb(255 210 130 / 0.14) inset, 0 0 0 1px rgb(234 168 60 / 0.14) inset, 0 20px 36px -16px rgb(0 0 0 / 0.8);
  transition: translate 450ms var(--hj-ease), opacity 450ms var(--hj-ease);
}

/* ---------- honey flow = time slider ----------------------------------- */
.hj-flow {
  position: relative; display: flex; align-items: center;
  height: 46px; margin: 0 6px;
  cursor: pointer; touch-action: none; outline: none;
}
.hj-groove {
  position: relative; display: block; width: 100%; height: 12px;
  border-radius: 99px;
  background: linear-gradient(180deg, #070403, #1a110a);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.8) inset, 0 -1px 0 rgb(255 200 120 / 0.06) inset, 0 1px 0 rgb(255 210 140 / 0.10);
}
.hj-buffer { position: absolute; inset: 2px auto 2px 2px; width: calc(var(--media-slider-buffer) - 4px); border-radius: 99px; background: rgb(234 168 60 / 0.16); }
.hj-honey {
  position: absolute; inset-block: 0; left: 0;
  width: var(--media-slider-fill);
  border-radius: 99px;
  background:
    linear-gradient(180deg, rgb(255 246 214 / 0.0) 0, rgb(255 246 214 / 0.0) 100%),
    linear-gradient(180deg, var(--hj-honey-light) 0%, var(--hj-honey) 32%, var(--hj-honey-deep) 78%, var(--hj-amber-dark) 100%);
  box-shadow: 0 0 14px rgb(234 168 60 / 0.35), 0 2px 3px rgb(0 0 0 / 0.4);
  transition: width 260ms linear;
  overflow: hidden;
}
/* specular highlight along the top of the honey */
.hj-honey::before { content: ""; position: absolute; left: 5px; right: 8px; top: 1.5px; height: 2px; border-radius: 99px; background: linear-gradient(90deg, rgb(255 250 230 / 0.15), rgb(255 250 230 / 0.75) 60%, rgb(255 250 230 / 0.2)); }
/* slow flow: light travelling through the honey */
.hj-honey::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0, rgb(255 236 180 / 0.0) 30%, rgb(255 236 180 / 0.38) 50%, rgb(255 236 180 / 0) 70%, transparent 100%) 0 0 / 160px 100% repeat-x;
  animation: hj-flowlight 3.6s linear infinite;
  animation-play-state: var(--hj-run);
  mix-blend-mode: screen;
}
@keyframes hj-flowlight { to { background-position: 160px 0; } }
.hj-flow[data-dragging] .hj-honey { width: var(--media-slider-pointer); transition: none; }

/* dipper = thumb */
.hj-dipper {
  position: absolute;
  top: 50%;
  left: var(--media-slider-fill);
  width: 36px; height: 72px;
  margin-top: -57px;
  translate: -50% 0;
  display: block;
  transition: left 260ms linear;
}
.hj-flow[data-dragging] .hj-dipper { left: var(--media-slider-pointer); transition: none; }
.hj-dipper__tool { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(2px 3px 2px rgb(0 0 0 / 0.55)); transform-origin: 50% 82%; rotate: 32deg; transition: rotate 300ms var(--hj-ease), translate 300ms var(--hj-ease); }
.hj-flow[data-interactive] .hj-dipper__tool { translate: 0 -2px; }
.hj-flow[data-dragging] .hj-dipper__tool { rotate: 18deg; translate: 0 -4px; }
.hj-dipper:focus-visible { outline: 2px solid var(--hj-honey-light); outline-offset: 3px; border-radius: 12px; }

/* meniscus + drips, merged by the gooey filter (tiny area = cheap) */
.hj-goo { position: absolute; z-index: 0; left: 50%; top: 49px; width: 40px; height: 40px; translate: -50% 0; filter: url(#hj-goo); pointer-events: none; }
.hj-goo i { position: absolute; display: block; border-radius: 50%; background: radial-gradient(circle at 40% 30%, var(--hj-honey-light), var(--hj-honey) 45%, var(--hj-honey-deep)); }
.hj-meniscus { left: 7px; top: 3px; width: 24px; height: 14px; border-radius: 45% 55% 50% 50% / 50% 50% 55% 55% !important; }
.hj-drip { left: 18px; top: 9px; width: 6px; height: 7px; opacity: 1; animation: hj-drip 3.4s cubic-bezier(.55,0,.75,.4) infinite; animation-play-state: var(--hj-run); transition: opacity 700ms; }
.hj-drip--b { left: 13px; width: 5px; height: 6px; animation-duration: 4.6s; animation-delay: -2.1s; }
@keyframes hj-drip {
  0%   { translate: 0 0; scale: 0.5 0.5; }
  45%  { translate: 0 4px; scale: 0.95 1.25; }
  70%  { translate: 0 9px; scale: 0.8 1.5; }
  88%  { translate: 0 19px; scale: 0.75 1; opacity: 1; }
  100% { translate: 0 25px; scale: 0.6 0.9; opacity: 0; }
}
/* on pause: the honey settles, no drips */
.hj:has(.hj-btn--play[data-paused]) .hj-drip { opacity: 0; }

/* hexagon preview */
.hj-preview {
  position: absolute;
  bottom: calc(100% + 18px);
  left: clamp(78px, var(--media-slider-pointer), calc(100% - 78px)) !important;
  display: grid; justify-items: center; gap: 8px;
  translate: -50% 8px;
  pointer-events: none; opacity: 0;
  filter: drop-shadow(0 14px 18px rgb(0 0 0 / 0.6));
  transition: opacity 220ms var(--hj-ease), translate 220ms var(--hj-ease);
}
.hj-flow:is([data-pointing], [data-dragging]) .hj-preview { opacity: 1; translate: -50% 0; }
.hj-preview__hex {
  display: grid; place-items: center;
  width: 156px; height: 136px;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: linear-gradient(160deg, var(--hj-honey-light), var(--hj-honey) 40%, var(--hj-honey-deep));
}
.hj-preview__frame {
  display: block; width: 150px; min-width: 150px; max-width: 150px; height: 130px;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: var(--hj-wax);
}
.hj-preview__frame::part(image), .hj-preview__frame img { object-fit: cover; }
.hj-preview__time { padding: 5px 11px 4px; border-radius: 99px; background: var(--hj-honey); color: #2d1704; font: 700 12px/1 var(--hj-ui); font-variant-numeric: tabular-nums; letter-spacing: 0.03em; box-shadow: 0 1px 0 rgb(255 240 200 / 0.6) inset; }

/* ---------- control row ----------------------------------------------- */
.hj-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; }
.hj-cluster { display: flex; align-items: center; gap: 2px; min-width: 0; }
.hj-cluster--end { justify-content: flex-end; }

.hj-btn {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--hj-btn); height: var(--hj-btn);
  padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--hj-ivory); cursor: pointer;
}
.hj-btn::before {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #4a3420, #2a1c0f 55%, #1a110a);
  box-shadow: 0 1px 0 rgb(255 210 140 / 0.12) inset, 0 -2px 3px rgb(0 0 0 / 0.45) inset, 0 2px 4px rgb(0 0 0 / 0.5);
  transition: box-shadow 220ms, scale 160ms var(--hj-ease);
}
.hj-btn:hover::before { box-shadow: 0 1px 0 rgb(255 210 140 / 0.18) inset, 0 0 0 1px rgb(234 168 60 / 0.55), 0 0 14px rgb(234 168 60 / 0.35); }
.hj-btn:active::before { scale: 0.93; }
.hj-btn:focus-visible { outline: 2px solid var(--hj-honey-light); outline-offset: 1px; }
.hj-btn[data-hidden] { display: none; }
.hj-btn[data-disabled] { opacity: 0.45; cursor: default; }
.hj-ico { position: relative; z-index: 1; width: 22px; height: 22px; fill: currentColor; }
.hj-ico--line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hj-ico--line .spk, .hj-ico--line .fill { fill: currentColor; }
.hj-ico text { stroke: none; fill: currentColor; font: 700 5.4px var(--hj-ui); }

/* primary: a glossy honey button */
.hj-btn--play { margin-right: 4px; color: #3b1f06; }
.hj-btn--play::before {
  background: radial-gradient(circle at 36% 28%, #fff1c4 0, var(--hj-honey-light) 18%, var(--hj-honey) 52%, var(--hj-honey-deep) 88%, var(--hj-amber-dark));
  box-shadow: 0 1px 0 rgb(255 245 210 / 0.8) inset, 0 -2px 4px rgb(122 63 7 / 0.6) inset, 0 3px 6px rgb(0 0 0 / 0.5), 0 0 16px rgb(234 168 60 / 0.3);
}
.hj-btn--play .hj-i-play { translate: 1px 0; }
.hj-btn--play .hj-i-pause, .hj-btn--play .hj-i-replay { display: none; }
.hj-btn--play:not([data-paused]) .hj-i-play { display: none; }
.hj-btn--play:not([data-paused]) .hj-i-pause { display: block; }
.hj-btn--play[data-ended] .hj-i-play, .hj-btn--play[data-ended] .hj-i-pause { display: none; }
.hj-btn--play[data-ended] .hj-i-replay { display: block; }

.hj-btn--mute .hj-i-muted { display: none; }
.hj-btn--mute:is([data-muted], [data-volume-level="off"]) .hj-i-vol { display: none; }
.hj-btn--mute:is([data-muted], [data-volume-level="off"]) .hj-i-muted { display: block; }
.hj-btn--mute[data-volume-level="low"] .w3 { opacity: 0.25; }
.hj-btn--fs .hj-i-exit { display: none; }
.hj-btn--fs[data-fullscreen] .hj-i-exit { display: block; }
.hj-btn--fs[data-fullscreen] .hj-i-enter { display: none; }
.hj-btn--rate::after { content: attr(data-rate) "\00D7"; position: relative; z-index: 1; font: 700 12px/1 var(--hj-ui); font-variant-numeric: tabular-nums; }

.hj-time { display: inline-flex; align-items: baseline; gap: 6px; margin-left: 10px; font: 600 13px/1 var(--hj-ui); font-variant-numeric: tabular-nums; letter-spacing: 0.03em; white-space: nowrap; text-shadow: 0 1px 3px rgb(0 0 0 / 0.6); }
.hj-time__sep { font: italic 400 16px/1 var(--hj-display); color: var(--hj-honey); }
.hj-time__total { color: #d6bf98; }

/* ---------- hexagonal jar = volume slider ------------------------------ */
.hj-volume { display: flex; align-items: center; }
.hj-jar {
  position: relative; display: block; flex: none;
  width: 38px; height: var(--hj-btn);
  margin: 0 8px 0 2px;
  cursor: pointer; touch-action: none; outline: none;
}
.hj-jar[data-hidden] { display: none; }
.hj-jar__lid {
  position: absolute; left: 50%; top: 1px; width: 24px; height: 6px; translate: -50% 0;
  border-radius: 2px 2px 1px 1px;
  background: linear-gradient(180deg, #e7c27b, #a87a33 55%, #6e4a17);
  box-shadow: 0 1px 0 rgb(255 240 200 / 0.6) inset, 0 1px 2px rgb(0 0 0 / 0.5);
  background-image: repeating-linear-gradient(90deg, rgb(0 0 0 / 0.15) 0 1px, transparent 1px 3px), linear-gradient(180deg, #e7c27b, #a87a33 55%, #6e4a17);
}
.hj-jar__glass {
  position: absolute; left: 5px; right: 5px; top: 8px; bottom: 0; display: block;
  clip-path: polygon(20% 0, 80% 0, 100% 16%, 100% 88%, 86% 100%, 14% 100%, 0 88%, 0 16%);
  background:
    linear-gradient(90deg, rgb(255 240 210 / 0.10), rgb(255 240 210 / 0.03) 30%, rgb(255 240 210 / 0.12) 31%, rgb(255 240 210 / 0.03) 32%, rgb(255 240 210 / 0.03) 68%, rgb(255 240 210 / 0.12) 69%, rgb(255 240 210 / 0.03) 70%, rgb(255 240 210 / 0.10)),
    rgb(30 20 12 / 0.9);
  box-shadow: 0 0 0 1px rgb(255 220 160 / 0.3) inset;
}
.hj-jar__glass::after { content: ""; position: absolute; inset: 0; clip-path: inherit; box-shadow: 0 0 0 1.2px rgb(255 226 170 / 0.45) inset; pointer-events: none; }
.hj-jar__honey {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--media-slider-fill);
  background:
    radial-gradient(60% 3px at 50% 1.5px, rgb(255 244 205 / 0.9), transparent 100%),
    linear-gradient(90deg, rgb(122 63 7 / 0.6), transparent 25%, transparent 75%, rgb(122 63 7 / 0.6)),
    linear-gradient(180deg, var(--hj-honey-light), var(--hj-honey) 35%, var(--hj-honey-deep));
  transition: height 160ms var(--hj-ease);
}
.hj-jar__shine { position: absolute; left: 22%; top: 12%; bottom: 14%; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.1)); pointer-events: none; }
.hj-jar__level { position: absolute; left: 5px; right: 5px; bottom: calc(2px + (100% - 11px) * var(--media-slider-fill-ratio, 0)); height: 0; display: block; }
.hj-jar:has(:focus-visible) .hj-jar__glass, .hj-jar:focus-visible .hj-jar__glass { outline: none; }
.hj-jar:has(:focus-visible)::after { content: ""; position: absolute; inset: -2px -4px; border-radius: 10px; outline: 2px solid var(--hj-honey-light); pointer-events: none; }
.hj-jar__value {
  position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 4px;
  padding: 4px 8px 3px; border-radius: 99px;
  background: var(--hj-honey); color: #2d1704; font: 700 11px/1 var(--hj-ui); font-variant-numeric: tabular-nums;
  opacity: 0; pointer-events: none; transition: opacity 180ms, translate 180ms var(--hj-ease); white-space: nowrap;
}
.hj-jar:is([data-interactive], [data-dragging]) .hj-jar__value { opacity: 1; translate: -50% 0; }
.hj-jar[data-interactive] .hj-jar__lid { translate: -50% -1.5px; }

/* ---------- action flash ---------------------------------------------- */
.hj-flash {
  position: absolute; top: 50%; left: 50%; z-index: 8; translate: -50% -50%;
  display: grid; place-items: center;
  width: 84px; height: 74px;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: linear-gradient(160deg, var(--hj-honey-light), var(--hj-honey) 45%, var(--hj-honey-deep));
  color: #2d1704; font: 700 14px/1 var(--hj-ui); font-variant-numeric: tabular-nums;
  pointer-events: none; opacity: 0; transition: opacity 200ms var(--hj-ease), scale 200ms var(--hj-ease);
}
.hj-flash[data-open] { opacity: 1; }
.hj-flash[data-starting-style] { opacity: 0; scale: 0.9; }
.hj-flash[data-direction="backward"] { left: 22%; }
.hj-flash[data-direction="forward"] { left: 78%; }
.hj-flash--status { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- error ------------------------------------------------------ */
.hj-error { position: absolute; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; background: rgb(15 10 6 / 0.94); }
.hj-error:not([data-open]) { display: none; }
.hj-error__title { font: italic 500 28px/1.1 var(--hj-display); color: var(--hj-honey-light); }
.hj-error__desc { font-size: 13px; line-height: 1.5; max-width: 44ch; color: rgb(246 239 226 / 0.75); }
.hj-error__close { min-height: 44px; padding: 0 22px; border: 0; border-radius: 99px; background: var(--hj-honey); color: #2d1704; font: 700 11px var(--hj-ui); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }
.hj-error__close:focus-visible { outline: 2px solid var(--hj-ivory); outline-offset: 3px; }
.hj :focus-visible { outline-color: var(--hj-honey-light); }

/* ---------- responsive ------------------------------------------------- */
@container honeyjar (max-width: 720px) {
  .hj-btn--pip { display: none; }
}
@container honeyjar (max-width: 560px) {
  .hj-dipper { width: 30px; height: 60px; margin-top: -48px; }
  .hj-goo { top: 40px; }
  .hj-flow { margin: 0 14px; }
}
@container honeyjar (max-width: 560px) {
  .hj { --hj-bench: 100px; aspect-ratio: auto; padding-bottom: var(--hj-bench); background: var(--hj-wax); }
  .hj:fullscreen { padding-bottom: 0; }
  .hj mux-video, .hj video { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 9; }
  .hj:fullscreen mux-video { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .hj-poster { bottom: var(--hj-bench); }
  .hj-bigplay { top: calc(50% - var(--hj-bench) / 2); }
  .hj-scrim { display: none; }
  .hj:not(:fullscreen) .hj-panel { left: 0; right: 0; bottom: 0; height: var(--hj-bench); border-radius: 0; padding: 8px 18px 4px; align-content: center; opacity: 1 !important; translate: none !important; box-shadow: 0 1px 0 rgb(255 210 130 / 0.14) inset; }
  .hj:not(:fullscreen) .hj-chrome { opacity: 1 !important; }
  .hj:not(:fullscreen) .hj-chrome * { pointer-events: auto !important; }
  .hj:has(.hj-bigplay:not([data-started])) .hj-panel * { pointer-events: auto; }
  .hj-btn--seek { display: none; }
  .hj-jar { margin: 0 2px; }
  .hj-time { margin-left: 4px; font-size: 12px; gap: 4px; }
  .hj-label { padding: 5px 12px 5px 6px; gap: 7px; }
  .hj-label__hex { width: 20px; height: 20px; }
  .hj-label__brand { font-size: 14px; }
  .hj-label__sub { font-size: 7.5px; }
  .hj-preview__hex { width: 112px; height: 98px; }
  .hj-preview__frame { width: 107px; min-width: 107px; max-width: 107px; height: 93px; }
  .hj-preview { left: clamp(58px, var(--media-slider-pointer), calc(100% - 58px)) !important; }
}
@container honeyjar (max-width: 330px) {
  .hj-time__sep, .hj-time__total { display: none; }
}


/* =====================================================================
   POLISH PASS v2 — a thick river of honey and a proper jar.
   ===================================================================== */
.hj::after {
  content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px rgb(234 168 60 / 0.32), inset 0 0 60px rgb(234 168 60 / 0.10);
}
.hj-panel { padding: 14px 18px 8px; border-radius: 20px; gap: 4px; }
.hj-flow { height: 70px; margin: 0 10px; }
.hj-groove {
  height: 26px;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0) 40%),
    linear-gradient(180deg, #0a0604, #21160c);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.85) inset, 0 -1px 0 rgb(255 200 120 / 0.08) inset, 0 1px 0 rgb(255 210 140 / 0.14);
}
.hj-buffer { inset: 4px auto 4px 4px; width: calc(var(--media-slider-buffer) - 8px); background: rgb(234 168 60 / 0.14); }
.hj-honey {
  overflow: visible;
  background:
    radial-gradient(120% 60% at 50% 120%, rgb(122 63 7 / 0.55), transparent 70%),
    linear-gradient(180deg, var(--hj-honey-light) 0%, var(--hj-honey) 34%, var(--hj-honey-deep) 80%, var(--hj-amber-dark) 100%);
  box-shadow: 0 0 22px rgb(234 168 60 / 0.40), 0 3px 5px rgb(0 0 0 / 0.45), inset 0 -3px 6px rgb(90 40 0 / 0.35);
}
.hj-honey::before { left: 10px; right: 18px; top: 3px; height: 4px; background: linear-gradient(90deg, rgb(255 250 230 / 0.1), rgb(255 250 230 / 0.8) 65%, rgb(255 250 230 / 0.15)); }
.hj-honey::after { border-radius: inherit; background-size: 220px 100%; animation-duration: 4.2s; }
/* small bubbles suspended in the honey */
.hj-groove::after {
  content: ""; position: absolute; inset: 6px 0 6px 0; pointer-events: none; border-radius: 99px;
  width: calc(var(--media-slider-fill) - 18px);
  background:
    radial-gradient(circle at 12% 60%, rgb(255 240 200 / 0.55) 0 1.4px, transparent 2px),
    radial-gradient(circle at 37% 30%, rgb(255 240 200 / 0.45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 63% 70%, rgb(255 240 200 / 0.5) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 86% 40%, rgb(255 240 200 / 0.4) 0 0.9px, transparent 1.5px);
  background-size: 140px 100%;
  animation: hj-bubbles 9s linear infinite; animation-play-state: var(--hj-run);
}
@keyframes hj-bubbles { to { background-position: 140px 0; } }

/* bigger dipper, head sits in the honey */
.hj-dipper { width: 46px; height: 92px; margin-top: -73px; }
.hj-goo { top: 58px; width: 64px; height: 64px; }
.hj-meniscus { left: 10px; top: 2px; width: 38px; height: 30px; }
.hj-drip { left: 28px; top: 18px; width: 10px; height: 11px; }
.hj-drip--b { left: 20px; top: 18px; width: 8px; height: 9px; }
@keyframes hj-drip {
  0%   { translate: 0 0; scale: 0.5 0.5; }
  45%  { translate: 0 6px; scale: 0.95 1.3; }
  70%  { translate: 0 13px; scale: 0.8 1.6; }
  88%  { translate: 0 26px; scale: 0.75 1; opacity: 1; }
  100% { translate: 0 34px; scale: 0.6 0.9; opacity: 0; }
}
.hj-preview { bottom: calc(100% + 10px); }

/* row + prominent jar */
.hj-row { margin-top: 0; }
.hj-btn { --hj-btn: 48px; }
.hj-btn--play { --hj-btn: 56px; }
.hj-btn--play .hj-ico { width: 26px; height: 26px; }
.hj-time { font-size: 15px; }
.hj-time__sep { font-size: 18px; }
.hj-jar { width: 52px; height: 64px; margin: -8px 10px -4px 4px; }
.hj-jar__lid { width: 36px; height: 9px; top: 0; border-radius: 3px 3px 2px 2px; }
.hj-jar__glass { left: 5px; right: 5px; top: 11px; bottom: 0; }
.hj-jar__glass::before {
  content: ""; position: absolute; left: 50%; top: 34%; z-index: 2; width: 22px; height: 16px; translate: -50% 0;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: rgb(246 239 226 / 0.88);
  box-shadow: inset 0 0 0 1px rgb(120 70 10 / 0.4);
}
.hj-jar__glass::after { box-shadow: 0 0 0 1.5px rgb(255 226 170 / 0.55) inset; }
.hj-jar__value { bottom: calc(100% + 4px); }
.hj-jar__shine { width: 3px; left: 18%; }

@container honeyjar (max-width: 560px) {
  .hj { --hj-bench: 128px; }
  .hj-panel { padding: 8px 18px 4px; gap: 0; }
  .hj-flow { height: 58px; margin: 0 14px; }
  .hj-groove { height: 20px; }
  .hj-dipper { width: 38px; height: 76px; margin-top: -60px; }
  .hj-goo { top: 47px; }
  .hj-btn { --hj-btn: 44px; }
  .hj-btn--play { --hj-btn: 48px; }
  .hj-btn--rate { display: none; }
  .hj-time { font-size: 13px; }
  .hj-jar { width: 44px; height: 56px; margin: -6px 6px -2px 2px; }
  .hj-jar__lid { width: 30px; height: 8px; }
  .hj-jar__glass::before { width: 18px; height: 13px; }
}


/* =====================================================================
   DESIGN PASS v3 — the whole player is the jar.
   A screw-top lid is the top bar, the picture sits behind glass walls,
   and dark honey pools in the bottom of the jar: that pool is the
   timeline and the controls live in it.
   ===================================================================== */
.hj-player .hj {
  --hj-lid: 60px; --hj-wall: 14px; --hj-pool: 150px;
  aspect-ratio: auto;
  padding: var(--hj-lid) var(--hj-wall) var(--hj-pool);
  border-radius: 30px 30px 56px 56px / 30px 30px 48px 48px;
  background:
    linear-gradient(90deg, rgb(255 226 170 / 0.16), rgb(255 226 170 / 0.03) 2.2%, transparent 6%, transparent 94%, rgb(255 226 170 / 0.04) 97.8%, rgb(255 226 170 / 0.18)),
    radial-gradient(140% 70% at 50% 100%, #3a1e07, transparent 70%),
    #140c06;
  box-shadow:
    inset 0 0 0 1.5px rgb(255 220 160 / 0.42),
    inset 0 0 0 7px rgb(234 168 60 / 0.06),
    inset 0 0 40px rgb(234 168 60 / 0.10),
    0 40px 70px -28px rgb(0 0 0 / 0.9),
    0 0 60px -10px rgb(234 168 60 / 0.16);
}
.hj-player .hj:fullscreen { border-radius: 0; padding: var(--hj-lid) var(--hj-wall) var(--hj-pool); }
.hj-player .hj mux-video, .hj-player .hj video {
  position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 10px 10px 6px 6px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.7), 0 0 0 4px rgb(255 220 160 / 0.05);
}
.hj-player .hj:fullscreen mux-video { position: relative; aspect-ratio: auto; height: 100%; }
.hj-player .hj-poster { inset: var(--hj-lid) var(--hj-wall) var(--hj-pool); border-radius: 10px 10px 6px 6px; overflow: hidden; }
.hj-player .hj-bigplay, .hj-player .hj-buffering, .hj-player .hj-flash { top: calc((var(--hj-lid) + 100% - var(--hj-pool)) / 2); }
.hj-player .hj-scrim { display: none; }
.hj::after { display: none; }

/* glass: highlights running down the walls and a soft reflection on the front */
.hj-glass {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 4px, rgb(255 246 225 / 0.38) 5px, rgb(255 246 225 / 0.08) 9px, transparent 12px),
    linear-gradient(270deg, transparent 5px, rgb(255 246 225 / 0.18) 6px, transparent 10px),
    radial-gradient(38% 60% at 14% 34%, rgb(255 240 215 / 0.075), transparent 70%),
    linear-gradient(115deg, transparent 62%, rgb(255 240 215 / 0.05) 66%, transparent 71%);
}

/* the lid: knurled brass screw-top, full width */
.hj-lid {
  position: absolute; z-index: 8; top: 0; left: 0; right: 0; height: calc(var(--hj-lid) - 8px);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 14px 0 16px;
  border-radius: 30px 30px 6px 6px / 30px 30px 6px 6px;
  background:
    repeating-linear-gradient(90deg, rgb(255 236 190 / 0.10) 0 1px, rgb(0 0 0 / 0.16) 1px 3px, transparent 3px 6px),
    linear-gradient(180deg, #f3cf7c 0%, #d9a043 24%, #ad7222 58%, #7d4c13 88%, #5a340b 100%);
  box-shadow: 0 1px 0 rgb(255 236 190 / 0.6) inset, 0 -2px 0 rgb(0 0 0 / 0.35) inset, 0 4px 6px -2px rgb(0 0 0 / 0.7);
}
/* the glass thread of the neck under the lid */
.hj-lid::after {
  content: ""; position: absolute; left: 10px; right: 10px; top: 100%; height: 8px; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgb(255 226 170 / 0.22) 0 1px, transparent 1px 4px);
  border-radius: 0 0 4px 4px;
}
.hj-player .hj-label {
  position: relative; top: auto; left: auto; z-index: 1; opacity: 1 !important; translate: none !important;
  padding: 6px 16px 6px 8px;
  background: rgb(246 239 226 / 0.92);
  box-shadow: 0 0 0 1px rgb(90 50 10 / 0.35), 0 2px 4px rgb(0 0 0 / 0.35);
  border-radius: 6px;
}
.hj-player .hj-label__brand { color: #2d1704; }
.hj-player .hj-label__sub { color: #8a5415; }
.hj-player .hj-label__hex path:first-child { stroke: #b5680f; }
.hj-player .hj-label__hex .drip { fill: #b5680f; }
.hj-lid__tools { display: flex; align-items: center; gap: 2px; }
.hj-lid .hj-btn { --hj-btn: 44px; color: #2d1704; }
.hj-lid .hj-btn::before {
  inset: 5px;
  background: radial-gradient(circle at 40% 30%, rgb(255 236 190 / 0.45), rgb(255 220 150 / 0.12) 60%, rgb(0 0 0 / 0.08));
  box-shadow: 0 0 0 1px rgb(60 30 5 / 0.35) inset, 0 1px 0 rgb(255 240 200 / 0.4);
}
.hj-lid .hj-btn:hover::before { box-shadow: 0 0 0 1.5px rgb(45 23 4 / 0.7) inset; }
.hj-lid .hj-btn:focus-visible { outline: 2px solid #2d1704; outline-offset: 0; }
.hj-lid .hj-ico { stroke: #2d1704; }
.hj-lid .hj-btn--rate { color: #2d1704; }

/* controls always shown: they are part of the jar */
.hj-player .hj-chrome, .hj-player .hj-chrome:not([data-visible]):not(:has(:focus-visible)) { opacity: 1 !important; }
.hj-player .hj-chrome * { pointer-events: auto !important; }
.hj-player .hj-chrome .hj-panel ~ *, .hj-player .hj-chrome { pointer-events: none; }

/* the honey pool */
.hj-player .hj .hj-panel {
  left: 0; right: 0; bottom: 0; height: var(--hj-pool);
  align-content: center; gap: 2px;
  padding: 6px 40px 20px;
  border-radius: 0 0 56px 56px / 0 0 48px 48px;
  opacity: 1 !important; translate: none !important;
  background-color: transparent;
  background-image:
    radial-gradient(70% 22px at 50% 0, rgb(255 205 120 / 0.28), transparent 100%),
    var(--hj-comb),
    linear-gradient(180deg, rgb(222 146 34 / 0.92) 0, rgb(168 92 14 / 0.95) 16%, #6e3808 52%, #3c1d05 100%);
  background-size: 100% 100%, 24px 41.57px, 100% 100%;
  box-shadow:
    inset 0 2px 0 rgb(255 214 140 / 0.40),
    inset 0 14px 22px -14px rgb(255 190 90 / 0.40),
    inset 0 -10px 24px -8px rgb(0 0 0 / 0.55);
}
/* honey groove becomes a glass channel inside the pool */
.hj-player .hj-groove {
  height: 28px;
  background: linear-gradient(180deg, rgb(10 5 2 / 0.85), rgb(40 20 6 / 0.85));
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.8) inset, 0 0 0 1px rgb(255 214 150 / 0.18), 0 1px 0 rgb(255 214 150 / 0.22);
}
.hj-player .hj-flow { height: 72px; margin: 0 8px; }

/* a dipper as thick as the honey */
.hj-player .hj-dipper { width: 56px; height: 108px; margin-top: -84px; }
.hj-player .hj-goo { top: 66px; width: 70px; height: 70px; }
.hj-player .hj-meniscus { left: 12px; top: 2px; width: 42px; height: 34px; }
.hj-player .hj-drip { left: 31px; top: 20px; width: 11px; height: 12px; }
.hj-player .hj-drip--b { left: 22px; width: 9px; height: 10px; }

.hj-player .hj-row { margin-top: 0; }
.hj-player .hj-jar { margin: -4px 4px 0 8px; }
.hj-player .hj-preview { bottom: calc(100% + 14px); }

/* ---------- small jars (phones) ---------- */
@container honeyjar (max-width: 720px) {
  .hj-player .hj { --hj-wall: 10px; }
  .hj-lid .hj-btn--pip { display: none; }
}
@container honeyjar (max-width: 560px) {
  .hj-player .hj { --hj-lid: 52px; --hj-wall: 8px; --hj-pool: 140px; border-radius: 24px 24px 40px 40px / 24px 24px 34px 34px; }
  .hj-lid { padding: 0 6px 0 10px; border-radius: 24px 24px 5px 5px; }
  .hj-lid .hj-btn--rate { display: none; }
  .hj-player .hj-label { padding: 4px 10px 4px 5px; }
  .hj-player .hj .hj-panel { padding: 4px 22px 16px; border-radius: 0 0 40px 40px / 0 0 34px 34px; }
  .hj-player .hj-flow { height: 60px; margin: 0 14px; }
  .hj-player .hj-groove { height: 22px; }
  .hj-player .hj-dipper { width: 46px; height: 88px; margin-top: -69px; }
  .hj-player .hj-goo { top: 54px; width: 58px; height: 58px; }
  .hj-player .hj-meniscus { left: 10px; width: 36px; height: 28px; }
  .hj-player .hj-drip { left: 26px; top: 17px; }
  .hj-player .hj-drip--b { left: 18px; }
  .hj-player .hj-jar { margin: -2px 2px 0 4px; }
}
@container honeyjar (max-width: 360px) {
  .hj-player .hj-label__sub { display: none; }
}

/* ---------- reduced motion + forced colours ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hj *, .hj *::before, .hj *::after { animation: none !important; transition-duration: 1ms !important; }
  .hj-drip { display: none; }
  .hj-groove::after { animation: none !important; }
  .hj-panel, .hj-label { translate: none !important; }
}
@media (forced-colors: active) {
  .hj-honey, .hj-jar__honey { forced-color-adjust: none; background: Highlight; }
  .hj-groove { border: 1px solid CanvasText; }
  .hj-btn:focus-visible { outline: 2px solid Highlight; }
  .hj-scrim { display: none; }
}

/* the live-region announcer stays for screen readers only */
media-status-announcer {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}