@import url(./_global.css);

/* 
--------------------------------------------------------------
component > nav
 */

.c-nav {
  position: fixed;
  top: 4vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.c-nav-list {
  justify-content: center;
  gap: 6vw;
}

.c-nav-list-item {
  font-size: 1vw;
  text-shadow: 0 0 2px #fff, 0 0 1px #fff, 0 0 10px #000, 0 0 40px #fff;
}

.c-nav-list-item:nth-of-type(1) a:hover {
  color: #e54423;
}
.c-nav-list-item:nth-of-type(2) a:hover {
  color: #09ff4e;
}
.c-nav-list-item:nth-of-type(3) a:hover {
  color: #f67200;
}
.c-nav-list-item:nth-of-type(4) a:hover {
  color: #f0f600;
}
.c-nav-list-item:nth-of-type(5) a:hover {
  color: #ad09ff;
}

/* 
--------------------------------------------------------------
component > button
 */

.c-button-cta {
  height: 20vh;
  aspect-ratio: 1/1;
  position: fixed;
  bottom: 10px;
  right: 10px;
  overflow: hidden;
  z-index: 100;
  border-radius: 50%;
}

.c-button-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.c-button-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-button-background {
  background-image: url(../img/component/component-cta-background.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
  width: 100%;
  height: 400%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

/* 
--------------------------------------------------------------
component > title
 */

.c-titlebox {
  position: relative;
  margin-bottom: 100px;
  padding-left: 10%;
  border-bottom: 3px solid var(--pink);
}

.c-title {
  font-size: 50px;
}

.c-soundwavebox {
  height: 90px;
  display: flex;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  left: 10%;
  z-index: -1;
}

.c-soundbar {
  width: 6px;
  transform: scaleY(1) translateZ(0);
  background-color: var(--blue);
  margin-right: 10px;
  border-radius: 3px;
}

.c-soundbar:nth-of-type(1) {
  animation: bar1 1.2s infinite;
}

.c-soundbar:nth-of-type(2) {
  animation: bar2 1.4s infinite;
}

.c-soundbar:nth-of-type(3) {
  animation: bar3 1.1s infinite;
}

.c-soundbar:nth-of-type(4) {
  animation: bar4 1.2s infinite;
}

.c-soundbar:nth-of-type(5) {
  animation: bar5 1.5s infinite;
}

.c-soundbar:nth-of-type(6) {
  animation: bar6 1.1s infinite;
}

.c-soundbar:nth-of-type(7) {
  animation: bar7 1.3s infinite;
}

/* 
--------------------------------------------------------------
component > title > soundbar -- animation
 */

@keyframes bar1 {
  0% {
    transform: scaleX(1) scaleY(0.3) translateZ(0);
  }
  50% {
    transform: scaleX(1) scaleY(0.6) translateZ(0);
  }
  to {
    transform: scaleX(1) scaleY(0.3) translateZ(0);
  }
}
@keyframes bar2 {
  0% {
    transform: scaleY(0.8) translateZ(0);
  }
  50% {
    transform: scaleY(0.5) translateZ(0);
  }
  to {
    transform: scaleY(0.8) translateZ(0);
  }
}
@keyframes bar3 {
  0% {
    transform: scaleY(1) translateZ(0);
  }
  30% {
    transform: scaleY(0.3) translateZ(0);
  }
  60% {
    transform: scaleY(0.6) translateZ(0);
  }
  to {
    transform: scaleY(1) translateZ(0);
  }
}
@keyframes bar4 {
  0% {
    transform: scaleY(0.6) translateZ(0);
  }
  50% {
    transform: scaleY(0.4) translateZ(0);
  }
  to {
    transform: scaleY(0.6) translateZ(0);
  }
}
@keyframes bar5 {
  0% {
    transform: scaleY(0.6) translateZ(0);
  }
  50% {
    transform: scaleY(0.7) translateZ(0);
  }
  to {
    transform: scaleY(0.6) translateZ(0);
  }
}
@keyframes bar6 {
  0% {
    transform: scaleY(0.3) translateZ(0);
  }
  50% {
    transform: scaleY(0.8) translateZ(0);
  }
  to {
    transform: scaleY(0.3) translateZ(0);
  }
}
@keyframes bar7 {
  0% {
    transform: scaleY(0.3) translateZ(0);
  }
  50% {
    transform: scaleY(1) translateZ(0);
  }
  to {
    transform: scaleY(0.3) translateZ(0);
  }
}