/* //////////////////////////////////////////////////////////////////////////////////////////

Homepage:
Hero Section

////////////////////////////////////////////////////////////////////////////////////////// */


/* Hero */

.hero {
  box-sizing: border-box;
  background-color: #e30613;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  contain: paint; /* nodig omdat anders een scrollbar verschijnt tijdens entrance animation van video */
  padding-top: 13svh; /* voor header */
  /* PREVENTS SELECTING + DRAGGING */
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
  @media screen and (max-width: 500px) {
    .hero {
      height: 120svh;
      height: fit-content;
    }
  }
  @media screen and (max-width: 700px) and (max-height: 600px) {
    .hero {
      padding-top: 82px; /* voor header */
    }
  }
    @media screen and (min-width: 700px) and (max-height: 600px) {
    .hero {
      padding-top: 112px; /* voor header */
    }
  }


/* ////////////////////////////// */


.hero-wrap {
  height: 50svh;
  min-height: 250px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
  @media screen and (max-width: 700px) {
    .hero-wrap {
      min-height: 270px;
      height: 56svh;
      box-sizing: border-box;
    }
  }

.hero-container {
  width: 100%;
  transform: translateY(22svh) scale(1.15) translateZ(0);
  animation: hero-container-animation 1.25s cubic-bezier(0.75, 0, 0.2, 1) 1.776s forwards;
}

@keyframes hero-container-animation {
  from {
    transform: translateY(22svh) scale(1.15);
  }
  to {
    transform: translateY(0) scale(1);
  }
}


/* ////////// */


/* Hero - Title */

.hero-title {
  color: #fff;
  font-family: 'Proxima Intervlag Extrabold', Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  line-height: 0.85;
  font-size: max(6.35svh, 32px);
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
  @media screen and (max-width: 1200px) {
    .hero-title {
      font-size: min(calc(6px + 5dvw), 6.35svh);
      box-sizing: border-box;
    }
  }
  @media screen and (max-width: 700px) {
    .hero-title {
      font-size: min(calc(5px + 6.65dvw), 35px);
      padding: 0 20px;
    }
  }
  @media screen and (max-width: 550px) {
    .hero-title {
      display: block;
      padding: 0;
    }
  }
  @media screen and (max-width: 320px) {
    .hero-title {
      font-size: min(calc(6px + 5dvw), 26px);
    }
  }


/* ///// */


/* All Rules */
.hero-title span[class^="rule-"] {
  display: block;
}

/* Rule 1 */
.hero-title .rule-1 {
  width: 100%;
  animation: hero-title-animation-rules 0.7s ease 0.67s both;
}
  @media screen and (max-width: 550px) {
    .hero-title .rule-1 {
      width: auto;
    }
  }

/* Rule 2 */
.hero-title .rule-2 {
  animation: hero-title-animation-rules 0.7s ease 0.8s both;
}
  /* Space (Between "Rule-2" and "Rule-3") */
  .hero-title .rule-2::after {
    content: "\00A0";  /* Space */
  }
    @media screen and (max-width: 550px) {
      .hero-title .rule-2::after {
        display: none;
      }
    }

/* Rule 3 */
.hero-title .rule-3 {
  animation: hero-title-animation-rules 0.7s ease 0.8s both;
}
  @media screen and (max-width: 550px) {
    .hero-title .rule-3 {
      animation: hero-title-animation-rules 0.7s ease 0.93s both;
    }
  }


/* Keyframes - Entrance Animation: Rule 1, 2, 3 */

@keyframes hero-title-animation-rules {
  from {
    opacity: 0;
    transform: translateY(1.15lvh);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ////////////////////////////// */


/* Hero - Subtitle */

.hero-subtitle-container {
  width: 100%;
}

.hero-subtitle {
  height: max(11.704svh, 60px);
  display: flex;
  align-items: center;
  width: fit-content;
  margin: auto;
  box-sizing: border-box;
  padding-bottom: 0.5svh;
  color: #fff;
  font-family: 'Proxima Intervlag Extrabold', Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  text-align: center;
  line-height: 0.85;
  font-size: clamp(12px, calc(1px + 2.3vw), 1.5svh);
  letter-spacing: 0.25px;
  animation: hero-subtitle-animation 0.7s ease 1.03s both;
}
  @media screen and (max-width: 550px) {
    .hero-subtitle {
      animation: hero-subtitle-animation 0.7s ease 1.13s both;
    }
  }

  @keyframes hero-subtitle-animation {
    from {
      transform: translateY(1svh) translateZ(0);
      opacity: 0;
    }
    to {
      transform: translateY(0) translateZ(0);
      opacity: 1;
    }
  }

  /* Vertical Tablet Screen (Prevents Subtitle From Getting Too Big */
  @media screen and (max-width: 1200px) and (min-height: 1200px) {
    .hero-subtitle {
      font-size: max(calc(6px + 0.2svh), 16px);
    }
  }


/* Button */

.hero-btn-container {
  margin-bottom: max(5.4svh, 50px);
  width: 100%;

  /* Entrance Animation */
  animation: 
      btn-animation 0.75s  ease 2.2s both;
}
  @keyframes btn-animation {
    0% {
      transform: translateY(1.5svh) scale(1.03) translateZ(0);
      opacity: 0;
      pointer-events: none;
    }
    100% {
      transform: translateY(0) scale(1) translateZ(0);
      opacity: 1;
      pointer-events: auto;
    }
  }

.hero-btn {
  margin: auto;
  background-color: #fff;
  width: fit-content;
  padding: max(20px, 3.02svh) max(35px, 5.75svh);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5em;
  color: #e30613;
  font-family: 'Proxima Nova Bold', Helvetica, Arial, sans-serif;
  text-align: center;
  line-height: 1;
  font-size: max(calc(12px + 0.42svh), 1.69svh);
  cursor: pointer;
  border: 0;
  outline: 0;
  text-decoration: none;
  gap: 0;
  transition: background-color 0.45s ease 0.05s, color 0.45s ease 0.05s, gap 0.12s ease 0.05s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}
  .hero-btn:hover {
    background-color: #00000025;
    color: #fff;
    transition: 0.12s ease 0.02s;
    gap: 2.2svh;
    padding-right: max(30px, 4.8svh);
  }
  .hero-btn:active {
    background-color: #00000050;
    transition: 0.1s ease;
  }

.hero-btn::after {
  content: '';
  width: 0;
  height: 2.196svh;
  opacity: 0;
  transform: scale(0);
  transform-origin: center left;
  background-color: #fff;
  transition: width 0.25s ease 0.075s, transform 0.3s ease 0.075s, opacity 0.05s ease 0.075s;
  will-change: transform, opacity;

  /* SVG Arrow Icon */
  -webkit-mask-image: url('data:image/svg+xml,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M19.7070312,9.2929688l-5.6005859-5.6005859c-0.390625-0.390625-1.0234375-0.390625-1.4140625,0 s-0.390625,1.0234375,0,1.4140625L16.5859375,9H1c-0.5522461,0-1,0.4477539-1,1s0.4477539,1,1,1h15.5859375l-3.8935547,3.8935547 c-0.390625,0.390625-0.390625,1.0234375,0,1.4140625c0.1953125,0.1953125,0.4511719,0.2929688,0.7070312,0.2929688 s0.5117188-0.0976562,0.7070312-0.2929688l5.6005859-5.6005859C20.0976562,10.3164062,20.0976562,9.6835938,19.7070312,9.2929688z" /></svg>');
  mask-image: url('data:image/svg+xml,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M19.7070312,9.2929688l-5.6005859-5.6005859c-0.390625-0.390625-1.0234375-0.390625-1.4140625,0 s-0.390625,1.0234375,0,1.4140625L16.5859375,9H1c-0.5522461,0-1,0.4477539-1,1s0.4477539,1,1,1h15.5859375l-3.8935547,3.8935547 c-0.390625,0.390625-0.390625,1.0234375,0,1.4140625c0.1953125,0.1953125,0.4511719,0.2929688,0.7070312,0.2929688 s0.5117188-0.0976562,0.7070312-0.2929688l5.6005859-5.6005859C20.0976562,10.3164062,20.0976562,9.6835938,19.7070312,9.2929688z" /></svg>');
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 2.196svh 2.196svh;
  mask-size: 2.196svh 2.196svh;
}
  .hero-btn:hover::after {
    transition: width 0.25s ease 0.02s, transform 0.3s ease 0.02s, opacity 0.05s ease 0.02s;
    width: 2.196svh;
    opacity: 1;
    transform: scale(1);
  }

@media screen and (max-width: 500px) {
  .hero-btn {
    width: 100%;
    padding: max(15px, 2.594svh);
  }
  .hero-btn:hover {
    padding-right: max(10px, 2svh);
  }
}




/* //////////////////////////////////////////////////////////////////////////////////////////

Homepage:
Hero Section:
Video

////////////////////////////////////////////////////////////////////////////////////////// */

/* Video - Container */

.video-container {
  display: block;
  width: 104%;
  margin-left: -2%;
  height: 125lvh;
  display: grid; 
  grid-template-rows: 1fr auto;
  view-timeline-name: --scroll-animation-timeline; /* Timeline (for Scroll Animation)*/
  will-change: transform;
  /* PREVENTS SELECTING */
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}
  @media screen and (max-width: 700px) {
    .video-container {
      height: 65lvh;
      width: 100%;
      margin: 0;
    }
  }

/* Alleen toepassen als scroll-animatie ondersteund wordt */
@supports (animation-timeline: scroll()) {
  .video-container {
    animation: video-parallax-animation linear forwards;
    animation-timeline: --scroll-animation-timeline;
    animation-range: 0% 100%;
  }
}

/* ////////// */

/* Video - Wrapper */

.video-wrapper {
  display: block;
  position: sticky;
  top: 50%;
  display: block;
  margin: 21.5lvh 0 -50lvh 0;
  margin-inline: auto;
  overflow: hidden;

  /* Entrance + Scroll Animations */
  animation:
    video-animation-entrance 0.7s cubic-bezier(0, 0, 0, 1) 2.255s backwards;
  animation-fill-mode: both;
  height: 43lvh;
  border-radius: 25lvh;
  width: calc(96% - 40px);
  max-width: 100lvh;
  --base-transform: translate3d(0, -50%, 0); 
  transform: var(--base-transform);
  transform-origin: center;
  will-change: transform, opacity;
}
  @media screen and (max-width: 700px) {
    .video-wrapper {
      position: sticky;
      top: unset;
      bottom: 0;
      grid-row: 2;
      width: calc(100% + 36px);
      margin: 0 -18px;
      overflow: hidden;
      /* Entrance + Scroll Animations */
      animation: 
        video-animation-entrance 0.7s cubic-bezier(0, 0, 0, 1) 2.255s backwards;
      animation-fill-mode: both;
      height: 25lvh;
      border-radius: 25lvh;
      width: calc(100% + 36px);
      max-width: unset;
      --base-transform: translate3d(0, 0, 0);
    }
  }

/* Alleen toepassen als scroll-animatie ondersteund wordt */
@supports (animation-timeline: scroll()) {
  .video-wrapper {
    animation:
      video-animation-entrance 0.7s cubic-bezier(0, 0, 0, 1) 2.255s backwards,
      video-animation-scroll cubic-bezier(0.5, 0.75, 0.5, 0.5);
    animation-timeline: auto, --scroll-animation-timeline;
    animation-range: normal, 71.55lvh 100lvh;
    animation-fill-mode: both;
  }
}
  @media screen and (max-width: 700px) {
    @supports (animation-timeline: scroll()) {
      .video-wrapper {
        animation:
          video-animation-entrance 0.7s cubic-bezier(0, 0, 0, 1) 2.255s backwards,
          video-animation-scroll cubic-bezier(0.5, 0.75, 0.5, 0.5);
        animation-timeline: auto, --scroll-animation-timeline;
        animation-range: normal, 26lvh 64lvh;
        animation-fill-mode: both;
      }
    }
  }


/* ///// */


/* Keyframes - Entrance Animation */

@keyframes video-animation-entrance {
  from {
    transform: var(--base-transform) translateY(50lvh) scale(0.4);
  }
  to {
    transform: var(--base-transform) translateY(0) scale(1);
  }
}


/* Keyframes - Scroll Animation */

@keyframes video-animation-scroll {
  from {
    height: 43lvh;
    border-radius: 600lvh;
    width: calc(96% - 40px);
    max-width: 100lvh;
  }
  to {
    margin-top: 0;
    height: 100lvh;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
  }
}
  @media screen and (max-width: 700px) {
    @keyframes video-animation-scroll {
      from {
        height: 25lvh;
        border-radius: 25lvh;
        width: calc(100% + 36px);
      }
      to {
        height: 65lvh;
        border-radius: 0;
        width: calc(100% + 36px);
      }
    }
  }


/* Keyframes - Parallax Animation */

@keyframes video-parallax-animation {
  0% {
    transform: translateY(0);
  }
  56% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(35lvh);
  }
}


/* ////////// */


/* Video - iframe */

.fallback-image,
.fallback-video,
.vimeo-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 178lvh;
  height: 56.25dvw;
  min-width: 100lvw;
  min-height: 100lvh;
}
  @media screen and (max-width: 700px) {
    .fallback-image,
    .fallback-video,
    .vimeo-iframe {
      min-height: 65lvh;
    }
  }


/* Fallback Background-Image for Video */
.fallback-image {
  background-color: #4972a0;
  background-image: url(../images/fallback-1.webp);
  background-position: center;
  background-size: contain;
  position: relative;
}
.fallback-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/fallback-2.webp);
  background-position: center;
  background-size: contain;
  opacity: 0;
  animation: fallback-img-fadeIn 0.5s cubic-bezier(0, 0, 0.1, 1) forwards 3.7s;
}
  @keyframes fallback-img-fadeIn {
    from {
      opacity: 0;
      transform: scale(1.25);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }


.fallback-video {
  opacity: 0;
  z-index: 1;
}

.vimeo-iframe {
  opacity: 0;
  z-index: 2;
}