/* Basic style */
:root {
  --primary: #fff;
  --secondary: #050840;
  --highlight-primary: #7ce7c9;
  --highlight-secondary: #9d7beb;
  --radius: 0.5rem;
  --pill: 2rem;
  --line: 0.1rem;
}
* {
  box-sizing: border-box;
}
body {
  margin: 2rem;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 2rem;
  background: var(--secondary);
}
section {
  max-width: 90vw;
}
a {
  display: inline-block;
  margin: 0.2em;
  padding: 0.4em 0.8em;
  background: var(--secondary);
  color: var(--highlight-primary);
  border: var(--line) solid var(--highlight-primary);
  border-radius: var(--pill);
  font-weight: normal;
  text-decoration: none;
  &:hover, &:focus {
    color: var(--primary);
    border-color: var(--primary);
  }
}
p {
  border: var(--line) solid var(--highlight-primary);
  padding: 0.4em 0.8em;
  color: var(--primary);
}
div {
  display: inline; 
}
em {
  color: var(--highlight-secondary);
}
/* UI Event Classes */
.inactive {
  opacity: .5; 
}
/* Jump animation on the interaction link */
.interaction {
  background: var(--highlight-secondary);
  color: var(--secondary);
  border-color: var(--secondary);
}

.jump {
  animation-name: jump;
  animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
  animation-duration: 1.2s;
  animation-iteration-count: 1;
}

@keyframes jump {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  10% {
    transform: scale(1.1, 0.9) translateY(0);
  }
  30% {
    transform: scale(0.9, 1.1) translateY(-5rem) rotate(10deg);
  }
  50% {
    transform: scale(1.05, 0.95) translateY(0);
  }
  57% {
    transform: scale(1, 1) translateY(-0.5rem) rotate(-2deg);
  }
  64% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}


/* Hieronder komen jouw animaties */

/* #1 */
.flip-f {
  animation: flip-f 0.5s linear both;
}

@keyframes flip-f {
  0% {
    transform: translateY(0) rotateX(0) scale(1);
    transform-origin: 50% 0%;
  }
  50% {
    transform: translateY(-50%) rotateX(-90deg) scale(2);
    transform-origin: 50% 50%;
  }
  100% {
    transform: translateY(-100%) rotateX(-180deg) scale(1);
    transform-origin: 50% 100%;
  }
}

/* #2 */
.log {
  display: none; 
}

.log.show {
  display: block; 
}

/* #4 */
.orbit.showOrbit {
  width: 400px;
  height: 400px; 
  position: absolute; 
  top: 10%; 
  left: 50%; 
  translate: -50%; 
}

.development.showDevelopment {
  position: absolute;
  top:35%;
  left:35%;
  transform:translate(-50%,-50%);
  height:50px;
  width:50px;
  border-radius:100%;
  background: #FE9C1B;
  animation: orbit 2 ease-in-out 6s;
  color: transparent;
  border: transparent;
  z-index: 99999;

  
  em {
    color: transparent;
  }
}

.sun.showSun {
  position: absolute;
  background: rgba( 255, 209, 0, 0.7 );
  backdrop-filter: blur( 3px );
  height:200px;
  width:200px;
  top:40%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius: 100%;
  z-index:2;  
}

/* @keyframes changeShape {
  0% {
    width: 400px;
  }
  100% {
    width: 50px; 
    color: transparent; 
  }
}

@keyframes changeHeight {
  0% {
    height: 65.5938px;
  }
  100% {
    height: 50px; 
  }  
} */

@keyframes orbit {
  0%{
    left:0%;
    z-index:1;
    scale:0.7;
    transform:translate(0%,-50%);
  }
  25%{
    scale:0.3;
    transform:translate(-100%,-50%);
  }
  50%{
    left:100%;
    z-index:1;
    
  }
  50.001%{
    z-index:3;
    
  }
  75%{
    scale:1;
  }
  100%{
    left:0%;
    transform:translate(0%,-50%);
    z-index:3;
    scale:0.72; 
  }
}

/* #6 */
.motion-path-wrapper.showMotionPathWrapper {
  --delay: 0ms;
  --path: path("M.4 76.8C102-24.9 266.9-24.9 368.5 76.8c81.3 81.3 81.3 213.2 0 294.5-65.1 65.1-170.6 65.1-235.6 0-52.1-52.1-52.1-136.5 0-188.5 41.6-41.6 109.2-41.6 150.8 0 33.3 33.3 33.3 87.3 0 120.6-26.7 26.7-69.9 26.7-96.5 0-21.3-21.3-21.3-55.9 0-77.2 17.1-17.1 44.7-17.1 61.8 0 13.6 13.6 13.6 35.8 0 49.4-10.9 10.9-28.6 10.9-39.5 0-8.7-8.7-8.7-22.9 0-31.6 7-7 18.3-7 25.3 0");  
  display: flex;
  justify-content: center;
  align-items: center;  
  position: relative; 
}

.motion-link.showMotionLink {
  position: absolute; 
  offset-path: var(--path);
  animation: move 4500ms 1 ease-in-out var(--delay);
}

@keyframes move {
  10% {
    opacity: 1;
    offset-distance: 0%;
    transform: scale(1);
  }
  /* 30% { */
    /* box-shadow: -0.5rem 0 0.3rem var(--color, white); */
  /* } */
  /* 70% { */
    /* box-shadow: -0.5rem 0 0.3rem var(--color, white); */
  /* } */
  90% {
    opacity: 1;
    offset-distance: 100%;
    transform: scale(0.2);
    box-shadow: none;
  }
  100% {
    opacity: 0;
    offset-distance: 100%;
    transform: scale(0.2);
  }
}

/* #8 */
.resize-event.resized {
  filter: invert(1);
}

.resize-event.resized {
  filter: invert(1);
}

/* #9 */
.page-load-link.pageLoaded {
  animation: rotate-scale-up 0.65s linear both;
}

@keyframes rotate-scale-up {
  0% {
    transform: scale(1) rotateZ(0);
  }
  50% {
    transform: scale(2) rotateZ(180deg);
  }
  100% {
    transform: scale(1) rotateZ(360deg);
  }
}

/* #10 - on click rotate */
.click-rotate.clicked {
	animation: rotate-diagonal-1 0.4s linear both;
}

@keyframes rotate-diagonal-1 {
  0% {
    transform: rotate3d(1, 1, 0, 0deg);
  }
  50% {
    transform: rotate3d(1, 1, 0, -180deg);
  }
  100% {
    transform: rotate3d(1, 1, 0, -360deg);
  }
}