:root {
  --color-brand-7: #ff6b6b;
  --color-brand-8: #ff8787;
  --color-beige: #f8f9fa;
  --color-black: #212529;
  --color-brand-2: #20c997;
}

body {
  margin: 0;
  overflow: hidden;
}

.site-loader {
  --radius: 100vmax;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  scale: 1;
  translate: 0 0;
  pointer-events: none;
  will-change: opacity, scale, translate;
}

.site-loader__shape {
  position: absolute;
  top: calc(50% - var(--radius) / 2);
  left: calc(50% - var(--radius) / 2);
  display: block;
  width: var(--radius);
  height: var(--radius);
  border-radius: var(--radius);
  will-change: transform;
}

.site-loader__shape:nth-child(1) {
  background-color: var(--color-brand-7);
}

.site-loader__shape:nth-child(2) {
  background-color: var(--color-beige);
}

.site-loader__head {
  position: absolute;
  top: calc(50% - var(--radius) / 2);
  left: calc(50% - var(--radius) / 2);
  display: block;
  width: var(--radius);
  height: var(--radius);
  background: var(--color-black);
  border-radius: 50%;
  opacity: 0;
  will-change: transform;
}

.site-loader__head:before {
  display: block;
  padding-top: 100%;
  content: "";
}

@keyframes site-loader-eye-blink {
  0% {
    clip-path: var(--path-close);
    animation-timing-function: cubic-bezier(0.34, 1.5, 0.34, 1);
  }
  8%,
  20% {
    clip-path: var(--path-open);
    animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  }
  24% {
    clip-path: var(--path-close);
  }
  28% {
    clip-path: var(--path-open);
  }
  32% {
    clip-path: var(--path-close);
  }
  36%,
  70% {
    clip-path: var(--path-open);
  }
  74% {
    clip-path: var(--path-close);
  }
  78%,
  100% {
    clip-path: var(--path-open);
  }
}

@keyframes site-loader-pupil {
  0%,
  30% {
    transform: translate3d(0, 0, 0);
  }
  40%,
  50% {
    transform: translate3d(-50%, 0, 0);
  }
  60%,
  70% {
    transform: translate3d(50%, 0, 0);
  }
  95%,
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.site-loader__head .site-loader__eye {
  position: absolute;
  top: 26.5%;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 44.57%;
  transform: scale(var(--radius-scale));
  will-change: clip-path, transform;
}

.site-loader__head .site-loader__eye:before {
  position: absolute;
  top: -10%;
  right: 0;
  bottom: -10%;
  left: 0;
  z-index: 1;
  background: #fff;
  content: "";
}

.site-loader__head .site-loader__eye.is-set {
  background: #fff;
  clip-path: var(--path-open);
  transition: clip-path 0.2s cubic-bezier(0.86, 0, 0.07, 1);
}

.site-loader__head .site-loader__pupil {
  position: absolute;
  top: 0;
  left: 27.6%;
  z-index: 2;
  width: 44.8%;
  height: 100%;
  background: #ff8787;
  border-radius: 50%;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.site-loader__head.is-visible {
  opacity: 1;
}

.site-loader__head.is-visible .site-loader__eye {
  animation: site-loader-eye-blink 5s linear 1 forwards;
}

.site-loader__head.is-visible .site-loader__pupil {
  animation: site-loader-pupil 3s cubic-bezier(0.645, 0.045, 0.355, 1) 1;
}

.site-loader[data-transition-to="bootcamp"] .site-loader__shape:nth-child(1) {
  background-color: var(--color-brand-8);
}

.site-loader[data-transition-to="bootcamp"] .site-loader__shape:nth-child(2) {
  background-color: var(--color-black);
}

.main-content {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.main-content.visible {
  opacity: 1;
}