* {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: #ffffff;
    color: #4a4a4a;
    overflow-x: hidden;
    font-weight: 200;
}

section {
    width: 100vw;
    height: 100vh;
    /* padding: 2rem 4rem; */
    display: flex;
    justify-content: center;
    align-items: left;
}

h1 {    
    color: #fff;
    font-size: 3rem;
    font-weight: 900;
    font-family: "Kingo";    
    text-align: left;
}

/*soon*/
.soon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 48vh;
    padding-top: 10vh
}

.hg {
    color: #444;
    fill: #444;
    margin-top: -5px;
}

/* main */
.main {
    background: 
        radial-gradient(circle at 50% 50%, rgb(23, 32, 105), rgb(8, 12, 45)),
        repeating-conic-gradient(
            from 45deg,
            #ec4899 0deg 15deg,
            #f59e0b 15deg 30deg,
            #10b981 30deg 45deg,
            #3b82f6 45deg 60deg,
            #8b5cf6 60deg 75deg,
            transparent 75deg 90deg
        ),
        repeating-radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.06) 0,
            rgba(255, 255, 255, 0.08) 2px,
            transparent 2px,
            transparent 5px
        ),
        linear-gradient(
            45deg,
            transparent 48%,
            rgba(255, 255, 255, 0.05) 48%,
            rgba(255, 255, 255, 0.05) 52%,
            transparent 52%
        ),
        linear-gradient(
            -45deg,
            transparent 48%,
            rgba(255, 255, 255, 0.05) 48%,
            rgba(255, 255, 255, 0.05) 52%,
            transparent 52%
        );
    background-size: 178% 220%;
    background-position: 50% 50%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    background-blend-mode: overlay, screen, overlay, normal;
    position: sticky;
    top: 0;
    z-index: -100;
    animation: mainGradientShift 260s ease-in-out infinite alternate;
}

.hg-type {
    position: fixed;
    top: 6vh;
    right: 6vw;
    opacity: 80%;
}


/* not */
.intro {
    background: radial-gradient(
        125% 125% at -2% 101%,
        rgba(245, 87, 2, 1) 10.5%,
        rgba(245, 120, 2, 1) 16%,
        rgba(245, 140, 2, 1) 17.5%,
        rgba(245, 170, 100, 1) 25%,
        rgba(238, 174, 202, 1) 40%,
        rgba(202, 179, 214, 1) 65%,
        rgba(148, 201, 233, 1) 100%
      );
    background-size: 130% 100%;
    animation: gradientShift 16s ease infinite;
    box-shadow: inset 0px 200px 132px #fff;
}


@keyframes gradientShift {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}


@keyframes mainGradientShift {
    0% {
        background-position:
            50% 50%,   /* radial */
            0% 0%,     /* conic repeat */
            0% 0%,     /* radial repeat */
            0% 0%,     /* linear 1 */
            0% 0%;     /* linear 2 */
    }
    100% {
        background-position:
            55% 60%,   /* subtle drift */
            100% 100%,
            100% 0%,
            0% 100%,
            100% 0%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .main { animation: none; }
}


/* ios */
.ios-optimized {
    -webkit-overflow-scrolling: touch;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}


/* bgs */
.light {
    background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 30%, #9fa8da 70%, #7986cb 100%);
}

/* ball */
.ball-container {
    position: fixed;
    bottom: 16vh;
    left: 8vw;
  }

  @keyframes rotateBall {
    0% {
      transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
    }
    50% {
      transform: rotateY(360deg) rotateX(360deg) rotateZ(0deg);
    }
    100% {
      transform: rotateY(720deg) rotateX(720deg) rotateZ(360deg);
    }
  }
  
  @keyframes bounceBall {
    0% {
      transform: translateY(-70px) scale(1, 1);
    }
    15% {
      transform: translateY(-56px) scale(1, 1);
    }
    45% {
      transform: translateY(70px) scale(1, 1);
    }
    50% {
      transform: translateY(73.5px) scale(1, 0.92);
    }
    55% {
      transform: translateY(70px) scale(1, 0.95);
    }
    85% {
      transform: translateY(-56px) scale(1, 1);
    }
    95% {
      transform: translateY(-70px) scale(1, 1);
    }
    100% {
      transform: translateY(-70px) scale(1, 1);
    }
  }
  
  .ball {
    animation-name: bounceBall;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    border-radius: 50%;
    height: 60px;
    position: relative;
    transform: translateY(-70px);
    transform-style: preserve-3d;
    width: 60px;
    z-index: 1;
  }
  
  .ball::before {
    background: radial-gradient(circle at 36px 20px, #ff8c16, #b35100);
    border: 2px solid #33333336;
    border-radius: 50%;
    content: "";
    height: calc(100% + 6px);
    left: -6px;
    position: absolute;
    top: -3px;
    transform: translateZ(1vmin);
    width: calc(100% + 6px);
  }
  
  .ball .inner {
    animation-name: rotateBall;
    animation-duration: 25s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    border-radius: 50%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    width: 100%;
  }
  
  .ball .line::before,
  .ball .line::after {
    border: none;
    border-radius: 50%;
    content: "";
    height: 99%;
    position: absolute;
    width: 99%;
  }
  
  .ball .line::before {
    transform: rotate3d(0, 0, 0, 0);
  }
  
  .ball .line::after {
    transform: rotate3d(1, 0, 0, 90deg);
  }
  
  .ball .line--two::before {
    transform: rotate3d(0, 0, 0, 2deg);
  }
  
  .ball .line--two::after {
    transform: rotate3d(1, 0, 0, 88deg);
  }
  
  .ball .oval::before,
  .ball .oval::after {
    border-top: 3px solid #33333326;
    border-radius: 50%;
    content: "";
    height: 99%;
    position: absolute;
    width: 99%;
  }
  
  .ball .oval::before {
    transform: rotate3d(1, 0, 0, 45deg) translate3d(0, 0, 6px);
  }
  
  .ball .oval::after {
    transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 0, -6px);
  }
  
  .ball .oval--two::before {
    transform: rotate3d(1, 0, 0, 135deg) translate3d(0, 0, -6px);
  }
  
  .ball .oval--two::after {
    transform: rotate3d(1, 0, 0, -135deg) translate3d(0, 0, 6px);
  }
  
  @keyframes bounceShadow {
    0% {
      filter: blur(5px);
      opacity: 0.6;
      transform: translateY(73px) scale(0.5, 0.5);
    }
    45% {
      filter: blur(1px);
      opacity: 0.9;
      transform: translateY(73px) scale(1, 1);
    }
    55% {
      filter: blur(1px);
      opacity: 0.9;
      transform: translateY(73px) scale(1, 1);
    }
    100% {
      filter: blur(5px);
      opacity: 0.6;
      transform: translateY(73px) scale(0.5, 0.5);
    }
  }
  
.shadow {
    animation-name: bounceShadow;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    background: rgba(0, 0, 0, 0.163);
    filter: blur(2px);
    border-radius: 50%;
    height: 6px;
    transform: translateY(73px);
    width: 54px;
}