#animation1 {
  --scale: 0.80;
  --max-width: 120vh;
  --border-radius: 10em;
  --border-radius: 30%/22%;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: var(--c_bg_darker);
  overflow: hidden;
  opacity: 1;
  z-index: 1;
}

#animation1 label.frame {
  display: none;
}

#animation1 .box {
  --scale-interactive: var(--ratio);
  position: absolute;
  max-width: var(--max-width);
  width: 100%;
  height: 100%;
  transform: scale(var(--scale));
}

#animation1 > .background {
  --opacity-interactive: 0;
  background-color: #333;
  background: radial-gradient(ellipse 70% 60%, #444 20%, #181818 100%);
  overflow: hidden;
  border-radius: var(--border-radius);
}
@keyframes console_glow1 {
  0% {opacity:var(--opacity);}
  15% {opacity:calc(var(--opacity)*0.8);}
  30% {opacity:var(--opacity);}
  50% {opacity:calc(var(--opacity)*0.85);}
  55% {opacity:calc(var(--opacity)*0.95);}
  63% {opacity:calc(var(--opacity)*0.85);}
  100% {opacity:var(--opacity);}
}
#animation1 > .background::before {
  --height: 120em;
  content: '';
  position: absolute;
  top: calc(var(--height) * -1);
  width: 100%;
  height: var(--height);
  background: linear-gradient(to bottom,
    #000, #000 15.2%,
    #444, #444,
    #000 15.5%, #000 20%,
    #555, #555,
    #000 21%, #000 21.5%,
    #fff, #fff,
    #000 21.7%, #000 46%,
    #444, #444,
    #000 46.8%, #000 48%,
    #fff, #fff,
    #000 48.2%, #000 49%,
    #222, #222,
    #000 50%, #000 85%,
    #fff,
    #000 86%, #000 88%,
    #333,
    #000 89.5%, #000);
  mix-blend-mode: color-dodge;
  animation: console_lineshift 12s 1s linear infinite;
  opacity: 0.5;
}
@keyframes console_lineshift {
  0% {top: calc(var(--height) * -1); height:calc(var(--height));}
  100% {top: calc(100%); height:calc(var(--height));}
}

#animation1 canvas {
  transform: scale(var(--scale));
  /* background-image: url('/Images/Icons/Logo/logo_white.png'); */
  background-position: calc(50% - 0.2em) calc(50% + 0.07em);
  background-repeat: no-repeat;
  transform-origin: center;
  filter: drop-shadow(15em 15em 1.3em #0000);
  border-radius: var(--border-radius);
}

#animation1 #animation_text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: absolute;
  bottom: 20%;
  opacity: 1;
  /* height: calc(6 * 1.5 * 1em); */
  width: 42em;
  font-size: 1rem;
  overflow: hidden;
  /* background-color: #fff; */
}
#animation1 #animation_text p {
  user-select: none;
  width: fit-content;
  font-family: monospace;
  letter-spacing: 0.2em;
  word-spacing: 0.1em;
  cursor: none;
  color: #fff;
  line-height: 1.5em;
}
#animation1 #animation_text p.enter {
  align-self: center;
  color: #888;
  font-size: 1.4em;
  font-weight: bold;
  z-index: 1;
}
#animation1 #animation_text p.enter:hover {
  color: #fff;
}

#animation1 > .foreground {
  --opacity-interactive: 0;
  /* --scale-interactive: 2;
  transform: scale(var(--scale)); */
  --background-size-interactive: 700px;
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url('/Images/Bg/Terminal/lines2.jpg');
  background-size: 300px;
  background-position: center;
  mix-blend-mode: multiply;
  filter: brightness(2.5) contrast(1);
  z-index: 2;
}
#animation1 > .foreground::before {
  content: '';
  opacity: 1;
  position: absolute;
  /* background-color: #00b14b; */
  /* background-color: #b17f00; */
  background-color: #00b767;
  mix-blend-mode: multiply;
  width: 100%;
  height: 100%;
}

#animation1 > .cutout {
  --c_edge: #00090c;
  --shadow-blur: 0.8em;
  --shadow-offset: 0.2em;
  background-color: transparent;
  border-radius: var(--border-radius);
  box-shadow: 0 0 0 30vw var(--c_edge), inset 0 0 0.8em 0.2em var(--c_edge);
  -webkit-box-shadow: 0 0 0 40vw var(--c_edge), inset 0 0 var(--shadow-blur) var(--shadow-offset) var(--c_edge);
  z-index: 3;
}

#animation1 > .foreground,
#animation1 > .cutout {
  pointer-events: none;
}

#animation1.interactive canvas,
#animation1.interactive .foreground,
#animation1.interactive .box {
  transition:
      transform 2500ms 0ms ease-in-out,
      background-size 2500ms 0ms ease-in-out,
      box-shadow 2500ms 0ms ease-in-out,
      opacity 1300ms 1800ms ease-in;
  transform: scale(var(--scale-interactive, 1));
  opacity: var(--opacity-interactive, 1);
  background-size: var(--background-size-interactive, initial);
}
#animation1.interactive > .cutout {
  box-shadow: 0 0 0 30vw var(--c_edge), inset 0 0 0.8em calc(var(--shadow-offset)*2) var(--c_edge);
  -webkit-box-shadow: 0 0 0 30vw var(--c_edge), inset 0 0 calc(var(--shadow-blur)*2) calc(var(--shadow-offset)*2) var(--c_edge);
}
#animation1.interactive {
  animation: flash1 3300ms 0ms forwards ease-in-out;
}
#animation1.remove {
  transition: opacity 500ms ease-in-out;
  opacity: 0;
}
#animation1.interactive canvas {
  animation: shadow 3200ms 2200ms forwards ease-in;
}
@keyframes flash1 {
  80% {filter: brightness(0.9) contrast(1.2);}
  92% {filter: brightness(3.0) contrast(1.3);}
  100% {filter: brightness(1) contrast(1);}
}
@keyframes shadow {
  0% {filter: drop-shadow(0.5em 0.5em 0.2em #0000);}
  25% {filter: drop-shadow(15em 15em 1.3em #000c);}
  44% {filter: drop-shadow(0.1em 0.1em 0.1em #000c);}
  64% {filter: drop-shadow(0.65em 0.65em 0.25em #000c);}
  79% {filter: drop-shadow(0.48em 0.48em 0.19em #000c);}
  90% {filter: drop-shadow(0.5em 0.5em 0.2em #000c);}
  100% {filter: drop-shadow(0.5em 0.5em 0.2em #000c);}
}
@keyframes removeAnimation {
  0% {opacity: 1;}
  99% {opacity: 0;}
  100% {display: none;}
}




header {
  transition:
      opacity 500ms ease-in-out,
      transform 500ms 500ms ease-in-out,
      height 500ms 500ms ease-in-out;
  opacity: 1;
  transform: translateY(0);
  display: flex;
  justify-content: center;
  align-items: center;
}
header.intro {
  opacity: 0;
  height: 100vh;
  transform: translateY(-72px);
}
nav.intro {
  opacity: 0;
  pointer-events: none;
}