#intro {
    position: fixed;
    inset: 0;
    z-index: 1001;
    overflow: hidden;
    transition: visibility 0s 2s;
    display: none;
  }
  
  html[data-intro-shown="true"] #intro {
    display: block;
  }
  
  #intro .background-1 {
    background: var(--base-color-black);
    position: absolute;
    inset: 0;
    z-index: 3;
    transform-origin: center top;
    transition: 
      transform 1000ms 0ms var(--ttf-5);
  }
  
  #intro .background-2 {
    background: var(--base-color-yellow);
    position: absolute;
    inset: 0;
    z-index: 2;
    transform-origin: center top;
    transition: 
      transform 1000ms 250ms var(--ttf-5);
  }
  
  #intro .background-3 {
    background: var(--base-color-black);
    position: absolute;
    inset: 0;
    opacity: 0.5;
    z-index: 1;
    transition: opacity 1500ms 250ms var(--ttf-7);
  }
  
  #intro .inner {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-flow: column nowrap;
    box-sizing: border-box;
    padding-top: calc(100 * var(--px));
  }
  
  #intro .logo {
    margin-top: auto;
    align-self: center;
    margin-bottom: calc(17 * var(--px-infinite));
    transform: translateY(30%);
    opacity: 0;
    transition: 1000ms 0ms var(--ttf-2);
    transition-property: transform, opacity;
  }
  
  #intro .logo svg {
    width: calc(336 * var(--px-infinite));
    height: auto;
    display: block;
    transition: transform 2s var(--ttf-5);
  }
  
  #intro .shape {
    align-self: flex-end;
    transform: rotate(-10deg) translateY(25%) translateX(5%);
    transform-origin: right bottom;
    opacity: 0;
    transition: 1000ms 0ms var(--ttf-2);
    transition-property: transform, opacity;
  }
  
  #intro .shape svg {
    width: calc(888 * var(--px-infinite));
    height: auto;
    display: block;
  }
  
  
  @media (max-width: 750px) {
    
    #intro .inner {
      justify-content: center;
    }
    
    #intro .logo {
      margin-top: 0;
    }
    
  }
  
  
  
  
  
  
  
  
  
  #intro.in .shape,
  #intro.in .logo {
    transform: none;
    opacity: 1;
  }
  
  #intro.in .logo svg {
    transform: translateY(-40%);
  }
  
  
  #intro.out {
    pointer-events: none;
    visibility: hidden;
  }
  
  #intro.out .background-1 {
    transform: scaleY(0);
  }
  
  #intro.out .background-2 {
    transform: scaleY(0);
  }
  
  #intro.out .background-3 {
    opacity: 0;
  }
  
  #intro.out .shape,
  #intro.out .logo {
    opacity: 0;
    transform: translateY(-100%);
    transition-timing-function: var(--ttf-5);
  }
  
  #intro.out .logo {
    transform: translateY(-300%);
  }