/* Clip mask */
@keyframes clip {
  0% {
    clip-path: circle(0% at 50% 50%);
  }

  100% {
    clip-path: circle(150% at 50% 50%);
  }
}

.clip-animation {
  clip-path: circle(0% at 50% 50%);
}

.clip-animation {
  animation: clip 3s ease;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}


/* Hero */
.hero {
  /* background-color: blueviolet; */
  min-height:530px;
  max-width: 1920px;
  width: 100%;
  margin: 0px auto;
  position: relative;
  display: flex;

}
.hero .wrapper {
  /* background-color: rgba(127, 255, 212,0.5); */
  position: relative;
  z-index: 10;

}
.hero .wrapper-inner {
  /* background-color: rgba(255, 99, 71,0.5); */
  height: 100%;
  padding: 60px 0;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero.hero--video {
  height: calc(100vh - 60px);
  min-height: auto;
}

.hero-image, .hero video {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.hero--video video {
  display: none;
  visibility: hidden;
}

/* Title */
h1.home-hero {
  font-family: "National 2 Condensed Web Black";
  font-size: 3rem;
  line-height: 0.7;
  text-transform: uppercase;
}
h1.home-hero .block {
  overflow: hidden;
}
.hero h1 {
  margin-bottom: 0.5rem;
}
.hero h2:has(+ .button) {
  margin-bottom: 3.5rem;
}
.hero h1 .sub-title {
  margin-bottom: 30px;
}
.in-view.hero h1  {
  animation-name: slideInLeft;
  animation-duration: 0.75s;
  animation-timing-function: cubic-bezier(0.35, 1, 0.45, 1);
  animation-fill-mode: both;
  animation-delay: 0.5s;
}
.hero h1.sub-title {
  line-height: 1;
}

[lang="de-de"] .hero.our-leadership-team h2 span.mask,
[lang="de-de"] .hero.channels h2 span.mask {
  line-height: 0.9;
}

[lang="de-de"] .hero.our-leadership-team h2 {
  font-size: 3.5rem;
}

/* Audio button */
.audio-button {
  position: absolute;
  right: 50px;
  bottom: 30px;
  height: 46px;
  width: 46px;
  border: none;
  border-radius: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.audio-button.muted {
  opacity: 0.5;
}

@supports (-webkit-touch-callout: none) {
  .hero--video {
    height: -webkit-fill-available; 
  }
}

@media (min-width: 768px) {

  .hero {
    /* background-color: rgba(0, 128, 0,0.5); */
    min-height: 35.5vw;
  }
  .hero.hero__short {
    min-height: 22vw;
  }
  .hero .wrapper-inner {
    padding: 30px 0;
    justify-content: flex-start;
  }

  .audio-button {
    display: flex;
  }
  .hero h1,
  .hero h2 {
    max-width: 510px;
    position: static;
    transform: none;
    word-break: keep-all;
  }

  [lang="en-gb"] .hero.channels h1,
  [lang="en-gb"] .hero.channels h2,
  [lang="en-gb"] .hero.news-views h1,
  [lang="en-gb"] .hero.news-views h2,
  
  [lang="de-de"] .hero.terms h1,
  [lang="de-de"] .hero.terms h2{
    max-width: 100%;
  }


  [lang="de-de"] .hero.privacy h1,
  [lang="de-de"] .hero.privacy h2, 
  
  [lang="de-de"] .hero.our-leadership-team h1,
  [lang="de-de"] .hero.our-leadership-team h2
  {
    max-width: 610px;
  }
  [lang="de-de"] .hero.our-leadership-team h2 {
    font-size: 6.5rem;
  }
  .hero h1 {
    margin-bottom: 1rem;
  }

  .hero--video video {
    display: block;
    visibility: visible;
  }
  .hero-image.mobile {
    display: none;
    visibility: hidden;
  }


}

@media (min-width: 1920px) {

  .hero {
    height: auto;
    min-height: 690px;
    /* background-color:rgba(138, 43, 226); */
  }
  .hero.hero__short {
    min-height: 425px;
  }
}