/* KALTERA hero motion: the hexagon figure (assets/js/hero-motion.js) in the hero.
   Loaded after kaltera.css and palette.css. Only the hero animation box is changed;
   site.js still moves [data-hero-holo] into the inset card on scroll. */

.hero__holo.km-video {
  /* As tall as the hero allows, but never wider than the space beside the copy */
  --km-height: min(
    clamp(380px, calc(100svh - var(--utility-h, 36px) - var(--header-h, 100px) - 36px), 760px),
    calc((100vw - 2 * var(--gutter, 48px) - var(--km-copy-end) - 40px) * 4 / 3)
  );
  --km-width: calc(var(--km-height) * 0.75);
  /* Where the copy ends: the gutter plus the wider of the lede (35em) and the headline line */
  --km-copy-end: calc(var(--gutter, 48px) + max(35 * clamp(17px, 0.25vw + 16px, 19px), 13 * clamp(38px, 2.2vw + 22px, 52px)));
  top: calc(var(--utility-h, 36px) + var(--header-h, 100px) + 10px);
  /* Centred in the space between the copy and the right gutter, at least 40px from the copy;
     where that space is too narrow it keeps clear of the right edge instead */
  left: min(
    calc(var(--km-copy-end) + max(40px, (100% - var(--gutter, 48px) - var(--km-copy-end) - var(--km-width)) / 2)),
    calc(100% - var(--gutter, 48px) - var(--km-width))
  );
  right: auto;
  width: var(--km-width);
  height: var(--km-height);
  isolation: isolate;
}
.hero__holo.km-video::before {
  content: none;
}
/* Until the script runs (no JS, or the block editor) the cipher stand-in shows instead */
.hero__media:not(.has-holo) .km-video {
  display: none;
}
.hero__frame:has(.km-video) {
  background: #EAF0EE !important;
}
.hero:has(.km-video) .hero__veil {
  background: none;
}

/* The stage: two canvases, the hexagon body (WebGL) under the callouts and certificate (2D) */
.km-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* A soft light behind the figure that fades out before the edges, so the box has no visible border */
  background: radial-gradient(ellipse 58% 50% at 50% 42%, rgb(247 250 246 / 0.95) 0%, rgb(225 236 232 / 0.55) 55%, rgb(234 240 238 / 0) 100%);
  isolation: isolate;
}
.km-stage canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.km-body {
  z-index: 1;
}
.km-overlay {
  z-index: 2;
}

@media (min-width: 980px) and (max-width: 1199px) {
  .hero__holo.km-video {
    --km-height: min(620px, 54vw, calc(max(100svh, 640px) - var(--utility-h, 36px) - var(--header-h, 100px) - 70px));
    left: auto;
    right: 40px;
  }
  .hero:has(.km-video) .hero__copy {
    max-width: 52%;
  }
}

/* Below 980px the figure stands at the top and the copy flows beneath it */
@media (max-width: 979px) {
  .hero:has(.km-video) {
    --holo-m: min(128vw, 620px);
  }
  .hero__holo.km-video {
    top: calc(var(--utility-h, 36px) + 64px + 12px);
    left: 50%;
    right: auto;
    width: min(96%, 465px);
    height: auto;
    aspect-ratio: 3 / 4;
    transform: translateX(-50%);
  }
  .hero:has(.km-video) .hero__content {
    padding-top: calc(var(--utility-h, 36px) + 64px + 28px + var(--holo-m));
  }
  /* The script moves the figure under the hero copy: it flows with the text instead of standing above it */
  .hero:has(.hero__holo-slot .km-video) .hero__content {
    padding-top: calc(var(--utility-h, 36px) + 64px + 24px);
  }
  .hero__holo-slot .hero__holo.km-video {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: min(100%, 465px);
    height: auto;
    aspect-ratio: 3 / 4;
    margin: 24px auto 0;
  }
}
.hero__holo-slot:empty {
  display: none;
}