/* K13 Hero: sticky frame with the headline on top and a rounded video below.
   On scroll the video grows from 70vh to full screen (see js/widgets/hero.js). */
.k13-hero {
  position: relative;
  height: calc(var(--svh, 1vh) * 150);
}
.k13-hero__pin {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: calc(var(--svh, 1vh) * 100);
  overflow: hidden;
}
.k13-hero__title-wrap {
  display: flex;
  align-items: flex-end;
  flex: 0 0 auto;
  height: calc(var(--svh, 1vh) * 30);
  padding: 0 var(--container-padding-s, 1em) 1.5em;
  box-sizing: border-box;
}
.k13-h1.is--k13-hero {
  margin: 0;
  font-size: 4em;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-align: left;
  text-transform: none;
  color: var(--color-dark);
}
.k13-hero__media {
  position: relative;
  flex: 0 0 auto;
  width: 98%;
  height: calc(var(--svh, 1vh) * 70);
  margin-inline: auto;
  border-radius: var(--border-radius-m, 0.5rem);
  overflow: hidden;
  background-color: var(--color-black);
  will-change: width, height, transform;
}
.k13-video.is--k13-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.k13-video.is--k13-hero .k13-video__before {
  padding-top: 0;
}
.k13-video.is--k13-hero .k13-video__html,
.k13-video.is--k13-hero .k13-video__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.k13-video.is--k13-hero .k13-video__loading {
  display: none;
}
@media screen and (max-width: 991px) {
  .k13-hero__media {
    width: 96%;
  }
  .k13-hero__pin {
    justify-content: flex-start;
  }
  .k13-hero__title-wrap {
    height: auto;
    padding-top: 5.2em;
    padding-bottom: 0.5em;
  }
  .k13-h1.is--k13-hero {
    font-size: 2em;
  }
}
@media screen and (max-width: 479px) {
  .k13-hero {
    height: auto;
  }
  .k13-hero__pin {
    position: relative;
    height: auto;
    row-gap: 1em;
    overflow: visible;
  }
  .k13-hero__title-wrap {
    padding-top: 4.6em;
    padding-bottom: 0;
  }
  .k13-h1.is--k13-hero {
    line-height: 1.05;
  }
  .k13-hero__media {
    width: calc(100% - 20px);
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

/* Headline word decorations */
.k13-hero__title-line-svg {
  width: 105%;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: visible;
  transform: translate(-50%, -50%);
}
.k13-hero__smiley-svg,
.k13-hero__star-svg {
  width: 100%;
  position: relative;
}
.k13-hero__smiley {
  width: .925em;
  position: absolute;
  top: 0%;
  left: 0;
  transform: translate(45%, -45%) rotate(-15deg);
}
.k13-hero__star {
  width: .925em;
  position: absolute;
  top: 0%;
  left: 100%;
  transform: translate(-5%, -30%) rotate(12deg);
}
.k13-hero__star-inner {
  position: relative;
}
.k13-hero__touch-play {
  z-index: 2;
  justify-content: center;
  align-items: center;
  width: 1.0375em;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity var(--animation-ease);
}
.k13-mute.is--k13-hero-touch {
  width: 32.5%;
}
.k13-hero:has(.k13-video[data-k13-video-loaded="true"]) .k13-hero__touch-play {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .k13-hero__touch-play {
    display: none;
  }
}
@media screen and (max-width: 991px) {
  .k13-hero__smiley {
    width: 1em;
    transform: translate(-55%, -45%) rotate(-15deg);
  }
  .k13-hero__star {
    width: 1em;
    transform: translate(-65%, -95%) rotate(0);
  }
  .k13-hero__star-svg {
    opacity: 0;
  }
  .k13-hero__touch-play {
    width: 1.125em;
  }
}
@media screen and (max-width: 767px) {
  .k13-hero__smiley {
    width: 1.5em;
    transform: translate(-60%, -70%) rotate(-15deg);
  }
  .k13-hero__star {
    width: 1.5em;
    transform: translate(-25%, -82.5%) rotate(0);
  }
  .k13-hero__touch-play {
    width: 1.5em;
  }
  .k13-hero__title-line-svg path {
    stroke-width: 3.75;
  }
}

/* Clear the pill nav so it never sits on the headline (Markup #122). */
@media screen and (max-width: 991px) {
  .k13-hero__title-wrap {
    padding-top: 7.25em;
  }
}
@media screen and (max-width: 767px) {
  .k13-hero__title-wrap {
    padding-top: 5.75em;
  }
}
@media screen and (max-width: 479px) {
  /* Paul's showreel is 4:3; show all of it on phones. */
  .k13-hero__media {
    aspect-ratio: 4 / 3;
  }
}