/* Absolute layers preserve original image geometry. Controls remain in the film. */
.hv-host { position: relative; }
.hv-host > :is(.hv-video, .hv-matte) {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; z-index: 0; transition: opacity 320ms ease;
}
.hv-host > .hv-matte { background: var(--bg-page, #faf7f0); }
.hv-host > .hv-video { right: auto; bottom: auto; object-fit: contain; background: transparent; }
.hv-host[data-hv-fit="cover"] > .hv-video { object-fit: cover; }
.hv-host[data-hv-fit="soft-contain"] > .hv-video {
  mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent), linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent), linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  -webkit-mask-composite: source-in;
}
.hv-host.hv-visible > :is(.hv-video, .hv-matte) { opacity: 1; }
.hv-host.hv-immediate > :is(.hv-video, .hv-matte) { transition: none; }
.hv-host[data-hv-kind="card"] > .hv-matte { z-index: 1; background: var(--bg-surface, #fffdf8); }
.hv-host[data-hv-kind="card"] > .hv-video { z-index: 2; }
.hv-host .hv-controls {
  position: absolute; inset: var(--hv-controls-top, 16px) var(--hv-controls-right, 12px) auto auto;
  display: flex; justify-content: flex-end; gap: 8px; width: 240px;
  max-width: calc(100% - 24px); height: 44px; z-index: 4; margin: 0;
}
.hv-host .hv-button {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 44px; padding: 9px 10px;
  border: 1px solid var(--line, #ddd8cd); border-radius: 999px;
  background: var(--bg-page, #faf7f0); color: var(--text, #292c27);
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.4; cursor: pointer;
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
}
.hv-host .hv-button:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.hv-host .hv-pause { min-width: 128px; }
.hv-host .hv-controls[hidden], .hv-host .hv-button[hidden] { display: none !important; }
.hv-host[data-hv-kind="card"] .hv-start {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 18px;
  border: 0; border-radius: 0; align-items: flex-end; justify-content: flex-start;
  background: transparent; box-shadow: none; color: white; z-index: 3;
}
.hv-host .hv-play-label {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px;
  border-radius: 999px; color: white; background: rgb(25 30 25 / 78%);
}
.hv-host .hv-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .hv-host > :is(.hv-video, .hv-matte) { transition: none; } }

/* Local SVG controls, shared across both heroes and both cards. */
.hv-host .hv-icon { width: 18px; height: 18px; flex: 0 0 18px; fill: currentColor; }
.hv-host .hv-play-label { min-height: 44px; box-sizing: border-box; }
.hv-host[data-hv-kind="hero"] .hv-start { padding: 0; border: 0; background: transparent; box-shadow: none; }
.hv-host > .hv-hero-content {
  opacity: 1; visibility: visible; transition: opacity 300ms ease, visibility 0s;
}
.hv-host.hv-content-hidden > .hv-hero-content {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 300ms ease, visibility 0s 300ms;
}
@media (prefers-reduced-motion: reduce) {
  .hv-host > .hv-hero-content, .hv-host.hv-content-hidden > .hv-hero-content { transition: none; }
}

.hv-host .hv-stop { min-width: 104px; }