/**
 * @file
 * Hero-homepage paragraph
 * Use in paragraph--hero-homepage.html.twig
 */

.hero-homepage {
  padding-top: 200px;
}
.hero-homepage::before {
  content: "";
  display: block;
  width: 980px;
  height: 530px;
  position: absolute;
  top: 90px;
  left: 670px;
  background-color: var(--color-primary--4);
  animation: 1s ease-in-out appearingBackground,
             10s linear 1s reverse both infinite backgroundColor;
  border-radius: 20px;
}
@keyframes appearingBackground {
  from {
    width: 0;
    height: 20px;
    top: 355px;
    left: 1160px
  }
  50%  {
    width: 980px;
    height: 20px;
    top: 355px;
    left: 670px;
  }
  to   {
    top: 90px;
    height: 530px;
  }
}
@keyframes backgroundColor {
  from { background-color: var(--color-primary--4); }
  33%  { background-color: var(--color-secondary--4); }
  66%  { background-color: var(--color-highlight--4); }
  to   { background-color: var(--color-primary--4); }
}
.hero-homepage__wrapper {
  max-width: 1399px;
  width: 90%;
  margin: 0 auto;
}
.hero-homepage h1 {
  font-size: var(--stylized-title-l);
}

.hero-homepage__k {
  position: absolute;
  top: 30px;
  right: 300px;
  width: 530px;
  height: 620px;
  background-color: transparent;
  overflow: hidden;
  animation: 1s ease-in appearingVideo;
}
@keyframes appearingVideo {
  from {
    transform: translateY(300px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.hero-homepage__video {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: url(#kShape);
}

@keyframes appearingText {
  from {
    padding-top: 67px;
    opacity: 0;
  }
  to {
    padding-top: 0;
    opacity: 1;
  }
}
.line-1,
.line-2,
.line-3 {
  display: block;
  height: 67px;
  overflow: hidden;
  animation: .5s ease-in appearingText;
}

@media all and (max-width: 1700px){
  .hero-homepage::before {
    width: 55%;
    left: 40%;
  }
  .hero-homepage__k {
    right: 15%;
  }
}

@media all and (max-width: 1500px){
  .hero-homepage__k {
    right: 8%;
  }
}

@media all and (max-width: 1350px){
  .hero-homepage__k {
    right: 0;
  }
}

@media all and (max-width: 1200px){
  .hero-homepage {
    padding-top: 150px;
  }
  .hero-homepage::before {
    height: 420px;
  }
  .hero-homepage__k {
    right: -5%;
    transform: scale(0.7);
  }
}

@media all and (max-width: 1050px){
  .hero-homepage h1 {
    font-size: var(--stylized-title-m);
  }
  .line-1, .line-2, .line-3 {
    height: 46px;
  }
  .hero-homepage__k {
    top: -40px;
  }
  .hero-homepage::before {
    height: 370px;
    left: 37%;
  }
}

@media all and (max-width: 900px){
  .hero-homepage__k {
    transform: scale(0.6);
    right: -15%;
  }
  .hero-homepage::before {
    height: 320px;
  }
}

@media all and (max-width: 750px){
  .hero-homepage__k {
    display: none;
  }
  .hero-homepage {
    padding-top: 0;
  }
  .hero-homepage h1 {
    font-size: var(--stylized-title-l);
  }
  .line-1, .line-2, .line-3 {
    height: 32px;
  }
  .hero-homepage::before {
    height: 140px;
    top: -10px;
  }
}