@import "style.css";

/* header */
header {
  width: 99%;
  max-width: 1500px;
  margin: 0 auto;
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1rem;
  grid-template-rows: repeat(16, 1.25rem);
  row-gap: 0.5rem;
}

#logo-small {
  display: none;
}

#logo-large {
  grid-area: 3 / 1 / 20 / 6;
}

#logo-large > object {
  display: inline-block;
  width: 100%;
  height: 100%;
}

nav {
  grid-area: 2 / 7 / 4 / 13;
  display: flex;
  border: none;
}

#top-menu {
  flex-basis: 100%;
  display: flex;
  justify-content: right;
  gap: 2rem;

  margin: 0 1rem 0 0;
  padding: 0;

  list-style-type: none;
  font: var(--menu-font);
}

#top-menu > li {
  position: relative;
  padding: 0 0.5rem 0 0.5rem;
}

#top-menu > li > a {
  text-decoration: none;
  color: var(--black);
}

#top-menu > li::before,
#top-menu > li::after {
  position: absolute;
  width: 16px;
  height: 16px;
  content: "";
}

#top-menu > li::before {
  left: -2px;
  top: -2px;
  border-top: 2px solid var(--orange);
  border-left: 2px solid var(--orange);
  opacity: 0;
  transition:
    opacity 0.3s,
    transform 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}

#top-menu > li::after {
  right: -2px;
  bottom: -2px;
  border-bottom: 2px solid var(--orange);
  border-right: 2px solid var(--orange);
  opacity: 0;
  transition:
    opacity 0.3s,
    transform 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}

#top-menu > li:hover::before {
  transform: translate(-5px, -4px);
  opacity: 1;
}

#top-menu > li:hover::after {
  transform: translate(5px, 4px);
  opacity: 1;
}

#index-title {
  grid-area: 8 / 7 / 13 / 13;
  display: flex;
  flex-direction: column;
}

#index-title > h1 {
  font: var(--top-title-font);
}

#header-cta {
  grid-area: 15 / 10 / 17 / 13;
  display: flex;
  position: relative;
}

#header-cta-button {
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  background-color: var(--orange);
  clip-path: polygon(
    10px 0,
    100% 0,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0 100%,
    0 10px
  );
  border: none;
  font: var(--cta-font);
  color: var(--black);
  min-width: 221px;
  position: relative;
  z-index: 1;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

#header-cta:after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);
  content: "GET IN TOUCH";
  font: var(--cta-font);
  background-color: var(--orange);
  border: none;
  text-shadow:
    -2px -2px 0px var(--white),
    3px 3px 0px var(--dark-grey);
  clip-path: var(--slice-0);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  min-width: 221px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#header-cta:hover:after {
  animation: 1s glitch;
  animation-timing-function: steps(2, end);
}

@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-40px, -40px);
  }
  10% {
    clip-path: var(--slice-3);
    transform: translate(20px, 20px);
  }
  20% {
    clip-path: var(--slice-1);
    transform: translate(-20px, 20px);
  }
  30% {
    clip-path: var(--slice-3);
    transform: translate(0px, 10px);
  }
  40% {
    clip-path: var(--slice-2);
    transform: translate(-10px, 0px);
  }
  50% {
    clip-path: var(--slice-3);
    transform: translate(10px, 0px);
  }
  60% {
    clip-path: var(--slice-4);
    transform: translate(10px, 20px);
  }
  70% {
    clip-path: var(--slice-2);
    transform: translate(-20px, 20px);
  }
  80% {
    clip-path: var(--slice-5);
    transform: translate(40px, -20px);
  }
  90% {
    clip-path: var(--slice-1);
    transform: translate(-20px, 0px);
  }
  100% {
    clip-path: var(--slice-1);
    transform: translate(0);
  }
}

@container (max-width: 1090px) {
  #index-title {
    grid-area: 8 / 6 / 13 / 13;
  }

  #logo-large {
    grid-area: 1 / 1 / 18 / 5;
  }
}

@container (max-width: 920px) {
  #index-title {
    grid-area: 5 / 5 / 10 / 13;
  }

  nav {
    grid-area: 2 / 5 / 4 / 13;
  }

  #header-cta {
    grid-area: 12 / 9 / 14 / 13;
  }
}

@container (max-width: 805px) {
  #index-title {
    grid-area: 5 / 2 / 10 / 11;
  }

  #header-cta {
    grid-area: 11 / 9 / 13 / 13;
  }

  #logo-large {
    display: none;
  }

  #logo-small {
    display: block;
    grid-area: 2 / 1 / 4 / 3;
  }

  #logo-small > object {
    display: inline-block;
    width: 100%;
    height: 100%;
  }

  nav {
    grid-area: 2 / 4 / 4 / 12;
  }
}

@media screen and (max-width: 768px) {
  #header-cta {
    grid-area: 14 / 2 / 17 / 6;
  }

  nav {
    grid-area: 2 / 3 / 4 / 11;
  }

  .illustration {
    transform: scale(0.75);
  }
}

@media screen and (max-width: 576px) {
  #index-title > h1 {
    font: var(--small-device-top-title-font);
  }

  #top-menu {
    font: var(--small-device-menu-font);
  }

  .illustration {
    transform: scale(0.7);
  }

  nav {
    grid-area: 2 / 4 / 4 / 13;
  }

  #logo-small {
    display: block;
    grid-area: 2 / 2 / 4 / 4;
  }
}

@media screen and (max-width: 360px) {
  #top-menu {
    font: var(--xsmall-device-menu-font);
  }

  .illustration {
    transform: scale(0.6);
  }
}

/* main */
main {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  flex: 1;
}

.subsection {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.subsection::before {
  content: "";
  border: 0.5px solid var(--black);
  align-self: stretch;
}

#cdo {
  border-top: 2px solid var(--black);
  align-items: center;
  justify-content: center;
}

#cdo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 30px;
  flex-basis: 74%;
  flex-grow: 1;
  order: -1;
}

#cdo-text > h3 {
  font: var(--subsection-title-font);
  width: 75%;
}

#cdo-text > p {
  font: var(--subsection-text-font);
  width: 75%;
}

#cdo-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem 2rem;
  flex-basis: 12%;
  flex-grow: 1;
}

#cdo-illustration > object {
  display: inline-block;
  width: 16rem;
  height: 16rem;
}

#mle {
  border-top: 2px solid var(--black);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap-reverse;
}

#mle-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 30px;
  flex-basis: 58%;
  flex-grow: 1;
}

#mle-text > h3 {
  font: var(--subsection-title-font);
  width: 75%;
}

#mle-text > p {
  font: var(--subsection-text-font);
  width: 75%;
}

#mle-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  flex-basis: 35%;
  order: -1;
  flex-grow: 1;
}

.nn-step {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#de {
  border-top: 2px solid var(--black);
  align-items: center;
  justify-content: center;
}

#de-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 30px;
  flex-basis: 63%;
  order: -1;
  flex-grow: 1;
}

#de-text > h3 {
  font: var(--subsection-title-font);
  width: 75%;
}

#de-text > p {
  font: var(--subsection-text-font);
  width: 75%;
}

#de-illustration {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  justify-content: center;
}

#de-illustration-1,
#de-illustration-2 {
  min-width: 14.625rem;
}

#de-illustration-1 {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
  border-right: 2px solid var(--black);
  padding-left: 2rem;
}

.de-illustration-pipeline {
  display: flex;
  gap: 1rem;
}

.de-illustration-pipeline-pipe {
  width: 115px;
}

.de-company-worker {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-50px);
}

.de-company-worker::before {
  opacity: 0;
  content: "?";
  text-align: center;
  font: var(--emote-font);
  width: 1.875rem;
}

#de-illustration-2 {
  position: relative;
  border-left: 2px solid var(--black);
}

#de-illustration-2-dw {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  top: 50%;
  left: 0%;
}

#de-company-worker-1 {
  position: absolute;
  top: 15%;
  right: 0%;
  animation-name: worker-1-asking;
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0;
}

@keyframes worker-1-asking {
  3% {
    opacity: 100;
  }

  10% {
    top: 50%;
    right: 44.22%;
  }

  20% {
    top: 50%;
    right: 44.22%;
  }

  33% {
    top: 51.56%;
    right: 0%;
    opacity: 100;
  }

  34% {
    top: 51.56%;
    right: 0%;
    opacity: 0;
  }

  100% {
    top: 51.56%;
    right: 0%;
    opacity: 0;
  }
}

#de-company-worker-1::before {
  animation-name: worker-emote;
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#de-company-worker-2 {
  position: absolute;
  top: 50%;
  right: 0%;
  animation-name: worker-2-asking;
  animation-duration: 12s;
  animation-delay: 9s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0;
}

@keyframes worker-2-asking {
  3% {
    opacity: 100;
  }

  10% {
    top: 50%;
    right: 44.22%;
  }

  20% {
    top: 50%;
    right: 44.22%;
  }

  33% {
    top: 56.2%;
    right: 0%;
    opacity: 100;
  }

  34% {
    top: 56.2%;
    right: 0%;
    opacity: 0;
  }

  100% {
    top: 56.2%;
    right: 0%;
    opacity: 0;
  }
}

#de-company-worker-2::before {
  animation-name: worker-emote;
  animation-duration: 12s;
  animation-delay: 9s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#de-company-worker-3 {
  position: absolute;
  top: 66.8%;
  right: 0%;
  animation-name: worker-3-asking;
  animation-duration: 12s;
  animation-delay: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0;
}

@keyframes worker-3-asking {
  3% {
    opacity: 100;
  }

  10% {
    top: 50%;
    right: 44.22%;
  }

  20% {
    top: 50%;
    right: 44.22%;
  }

  33% {
    top: 18.5%;
    right: 0%;
    opacity: 100;
  }

  34% {
    top: 18.5%;
    right: 0%;
    opacity: 0;
  }

  100% {
    top: 18.5%;
    right: 0%;
    opacity: 0;
  }
}

#de-company-worker-3::before {
  animation-name: worker-emote;
  animation-duration: 12s;
  animation-delay: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes worker-emote {
  3% {
    opacity: 100;
    content: "?";
  }

  33% {
    opacity: 100;
    content: "?";
  }

  33% {
    opacity: 100;
    content: url("/resources/images/light-bulb.svg");
  }

  100% {
    opacity: 0;
    content: url("/resources/images/light-bulb.svg");
  }
}