:root {
  --quality-banner-height: 12vw;
  --dark-grey: #1c1c1c;
  --pink: #ff008d;
  --blue: #001eff;
  --purple: #8900ff;

  --flip-time: .2s;
}

@font-face {
  font-family: Slabo; 
  font-style: normal;
  font-weight: 400;
  src: url(Slabo27px-Regular.ttf);
}

html {
  background-color: #1c1c1c;
  color: white;
  font-family: Slabo;
}

.content {
  opacity: 0;

  animation: showBody 1s ease-in-out forwards;
  animation-delay: 4.5s;
}

@keyframes showBody {
  to {
    opacity: 1;
  }
}

.name-plate-wrapper {
  position: absolute;

  height: 100vh;
  max-width: 100vw;
  left: 50%;
  transform: translate(-50%, 0%);

  animation: moveNamePlate 1s ease-in-out forwards;
  animation-delay: 4s;
}

@keyframes moveNamePlate {
  to {
    height: 20vh;
    max-width: 100vw;
    left: 50%;
    transform: translate(-50%, 0%);
    top: 1vh;
  }
}

.name-plate {
  stroke-dasharray: 300 1000;
  stroke-dashoffset: -350;
  pointer-events: none;

  stroke: white;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;

  animation: animatePath 5s cubic-bezier(0.25, 0.25, 0.30, 1) forwards;
}

@keyframes animatePath {
  70% {
    stroke-dashoffset: 0;
    fill: rgba(255, 255, 255, 0);
  }
  100% {
    stroke-dashoffset: 0;
    fill: white;
  }
}

.ring {
  stroke-dasharray: 90 10;
  stroke-dashoffset: -19;
  stroke-width: 20px;
  stroke-linecap: round;
  transform: rotate(60deg);

  fill: none;

  animation: ringReveal ease-out 3s forwards;
}

@keyframes ringReveal {
  to {
    stroke-dashoffset: 81;
  }
}

.slider-bar {
  position: absolute;
  height: var(--quality-banner-height);
  width: 1vw;
  border-radius: 1vw;
  background: white;
}

.quality-banner {
  position: relative;
  height: var(--quality-banner-height);
}

.quality-banner > :nth-child(2) > :nth-child(1){
  clip-path: polygon(calc((100% - var(--window-x) / 2) + var(--mouse-x)) 0%, 
                     calc((100% - var(--window-x) / 2) + var(--mouse-x)) 100%, 
                     100% 100%, 
                     100% 0%
  );
  
  background-image: linear-gradient(90deg, var(--purple), var(--dark-grey))
}

.quality-banner > :nth-child(2) > :nth-child(2){
  clip-path: polygon(calc(var(--mouse-x) - var(--window-x) / 2) 0%, 
                     calc(var(--mouse-x) - var(--window-x) / 2) 100%, 
                     0% 100%, 
                     0% 0%
  );

  background-image: linear-gradient(90deg, var(--dark-grey), var(--blue))
}

.quality-banner > :nth-child(3) > :nth-child(1){
  clip-path: polygon(calc((100% - var(--window-x) / 2) + var(--mouse-x)) 0%, 
                     calc((100% - var(--window-x) / 2) + var(--mouse-x)) 100%, 
                     0% 100%, 
                     0% 0%);
}

.quality-banner > :nth-child(3) > :nth-child(2){
  clip-path: polygon(calc(var(--mouse-x) - var(--window-x) / 2) 0%, 
                     calc(var(--mouse-x) - var(--window-x) / 2) 100%, 
                     100% 100%, 
                     100% 0%);
}

.quality-banner-element-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--quality-banner-height);
  width: 100vw;

  position: absolute; 
  top:0; 
  left:50%; 
  transform: translate(-50%, 0);
}

.quality-banner-element-container object {
  height: calc(var(--quality-banner-height) - 2vw);
  padding: 1vw;
  display: flex;
  justify-content: center;
}

.quality-container {
  position: static;
  display: flex;
  padding: 0 2vw 0 2vw;
  user-select: none;
  height: var(--quality-banner-height);
}

.left-quality-container {
  justify-content: left;
  margin-right: auto;
  flex: 1;
}

.right-quality-container {
  justify-content: right;
  margin-left: auto;
  flex: 1;
}

.text-quality-container {
  font-size: 6vw;
}

.text-quality-container h2 {
  margin: 0;
  padding: 0;
}

header {
  height: 24vh;
}

a {
  color: #ffffff;
}

a:hover {
  color: #aaaaaa;
}

.card-container {
  position: relative;
  padding: 5vh;
  height: 50vw;
}

.card-parent {
  position: absolute;
}

.card-parent:hover {
  z-index: 2;

  .card{
    animation-name: flip;
    animation-duration: var(--flip-time);
    animation-fill-mode: forwards;
  }

  .splash {
    animation-name: flip-splash;
    animation-duration: var(--flip-time);
    animation-fill-mode: forwards;
  }

  .non-splash {
    animation-name: flip-non-splash;
    animation-duration: var(--flip-time);
    animation-fill-mode: forwards;
  }
}

.card-parent:not(:hover) {
  z-index: 2;

  .card{
    animation-name: reverse-flip;
    animation-duration: var(--flip-time);
    animation-fill-mode: forwards;
  }

  .splash {
    animation-name: reverse-flip-splash;
    animation-duration: var(--flip-time);
    animation-fill-mode: forwards;
  }

  .non-splash {
    animation-name: reverse-flip-non-splash;
    animation-duration: var(--flip-time);
    animation-fill-mode: forwards;
  }
}



.card {
  transform-origin: center;
  height: 50vh;
  aspect-ratio: 2/3;
  border-radius: 1vw;
  background-color: #001eff;
  border-width: 1vw;
  border-color: #ff008d;
  border-style: solid;
  box-shadow: .5vw .5vw #8900ff;
}

@keyframes flip {
  from{
    transform: rotateY(0);
  }
  to {
    transform: rotateY(180deg);
  }
}

@keyframes flip-splash {
  from {
    position: relative;
    visibility: visible;
  }
  50% {
    position: relative;
    visibility: visible;
  }
  50.1% {
    position: absolute;
    visibility: hidden;
  }
  to {
    position: absolute;
    visibility: hidden;
  }
}

@keyframes flip-non-splash {
  from {
    position: absolute;
    visibility: hidden;
  }
  50%{
    position: absolute;
    visibility: hidden;
  }
  50.1% {
    position: relative;
    visibility: visible;
  }
  to {
    position: relative;
    visibility: visible;
  }
}

@keyframes reverse-flip {
  from{
    transform: rotateY(180deg);
  }
  to {
    transform: rotateY(0);
  }
}

@keyframes reverse-flip-splash {
  from {
    position: absolute;
    visibility: hidden;
  }
  50% {
    position: absolute;
    visibility: hidden;
  }
  50.1% {
    position: relative;
    visibility: visible;
  }
  to {
    position: relative;
    visibility: visible;
  }
}

@keyframes reverse-flip-non-splash {
  from {
    position: relative;
    visibility: visible;
  }
  50%{
    position: relative;
    visibility: visible;
  }
  50.1% {
    position: absolute;
    visibility: hidden;
  }
  to {
    position: absolute;
    visibility: hidden;
  }
}

.left {
  left: 30%;
  transform: translate(-50%, 10%);
  z-index: 0;
}

.right {
  left: 70%;
  transform: translate(-50%, 10%);
  z-index: 0;
}

.center {
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 1;
}

.non-splash {
  transform: rotateY(180deg);
  position: absolute;
  visibility: hidden;
  object-fit: cover;
}

.splash > img {
  position: relative;
  object-fit: cover;
  overflow: hidden;
  display: block;
  height: 50vh;
  width: 100%;
}