/* ===============================================================================
Introduction
=============================================================================== */

.introduction-inner{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  aspect-ratio: 280/890;
  box-sizing: border-box;
  border-top: 1px solid var(--color5);
  width: calc(280 / var(--vw) * var(--base));
  margin-inline: auto;
  padding-block-start: calc(100 / var(--vw) * var(--base));
}

.introduction-inner > div{
  position: relative;
  z-index: 0;
  transition: 1.0s 0.4s ease;
}

.introduction-inner > div.hide{
  opacity: 0;
}

.introduction-inner > div p{
  position: relative;
  z-index: 0;
}

.introduction-inner > div p:not(:first-child){
  margin-block-start: 1.4em;
  opacity: 0;
}

.introduction-inner > div:not(.hide) p:nth-of-type(2){
  animation: intro-fade 1.0s 2.0s ease forwards;
  z-index: 10;
}

.introduction-inner > div:not(.hide) p:nth-of-type(3){
  animation: intro-fade 1.0s 1.2s ease forwards;
}

@keyframes intro-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#introduction-lead{
  position: absolute;
  top: 50%;
  z-index: 10;
}

#blink-cursor{
  animation: blink 0.8s step-end infinite;
}

.introduction-text{
  font-family: "JetBrains Mono", monospace;
  font-size: calc(11 / var(--vw) * var(--base));
  font-weight: 400;
}

.introduction-text2{
  font-size: calc(12 / var(--vw) * var(--base));
  font-weight: 400;
}

@media (min-width: 768px){
  .introduction-inner{
    aspect-ratio: 1142/1070;
    width: calc(1142 / var(--vw) * var(--base));
    padding-block-start: calc(130 / var(--vw) * var(--base));
    padding-block-end: calc(152 / var(--vw) * var(--base));
    padding-inline: calc(152 / var(--vw) * var(--base));
    font-size: calc(24 / var(--vw) * var(--base));
  }

  #introduction-lead{
    left: calc(130 / var(--vw) * var(--base));
  }

  #introduction-lead:hover,
  .secret-text:hover{
    cursor: url("../img/cursor2.svg") 16 16, auto;
  }

  .introduction-text2{
    font-size: calc(16 / var(--vw) * var(--base));
    text-align: right;
  }
}

/* ===============================================================================
Link
=============================================================================== */

#link{
  width: max-content;
  margin-block: calc(12 / var(--vw) * var(--base));
  margin-inline: auto;
}

.link-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(32 / var(--vw) * var(--base));
}

.link-button{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--color4);
  width: calc(300 / var(--vw) * var(--base));
  height: calc(100 / var(--vw) * var(--base));
  color: var(--color2);
  font-size: calc(24 / var(--vw) * var(--base));
  font-weight: 600;
}

.link-button:hover{
  color: var(--color2);
}

.link-button:not(.coming-soon):after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(1,8,13,0.1);
  transform: translateX(-50%);
  animation: button-slide 6s ease-in-out infinite;
}

@keyframes button-slide {
  0%, 10% { transform: translateX(-100%); }
  30%, 70% { transform: translateX(0%); }
  90%, 100% { transform: translateX(100%); }
}

.link-button.coming-soon{
  border: 1px solid var(--color3);
  background: var(--color5);
}

.label-buy-now{
  display: flex;
  align-items: center;
  position: absolute;
  top: calc(13 / var(--vw) * var(--base));
  left: calc(13 / var(--vw) * var(--base));
  background: var(--color2);
  width: max-content;
  height: calc(19 / var(--vw) * var(--base));
  padding-inline: 0.5em;
  color: var(--color4);
  font-family: "JetBrains Mono", monospace;
  font-size: calc(10.8 / var(--vw) * var(--base));
  font-weight: 500;
}

.label-coming-soon{
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  color: var(--color4);
  font-family: "JetBrains Mono", monospace;
  font-size: calc(13 / var(--vw) * var(--base));
  font-weight: 400;
}

@media (min-width: 768px){
  #link{
    margin-block: calc(130 / var(--vw) * var(--base));
  }

  .link-list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(24 / var(--vw) * var(--base));
  }

  .link-button{
    width: calc(365 / var(--vw) * var(--base));
    height: calc(130 / var(--vw) * var(--base));
    font-size: calc(32 / var(--vw) * var(--base));
  }

  .link-button:hover,
  .link-button:active{
    opacity: 1;
    text-decoration: none;
  }

  .label-buy-now{
    top: calc(16 / var(--vw) * var(--base));
    left: calc(16 / var(--vw) * var(--base));
    height: calc(22 / var(--vw) * var(--base));
    font-size: calc(13 / var(--vw) * var(--base));
  }

  .label-coming-soon{
    font-size: calc(16 / var(--vw) * var(--base));
  }
}

/* ===============================================================================
Button Effect
=============================================================================== */

.link-list-item{
  position: relative;
}

.link-list-item::before,
.link-list-item::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color3);
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
}

.link-list-item:not(:has(.coming-soon)):hover{
  box-shadow: 0 0 20px var(--color3);
}

.link-list-item:not(:has(.coming-soon)):hover::before,
.link-list-item:not(:has(.coming-soon)):hover::after {
  animation: pulsate 1.5s linear infinite;
}

.link-list-item:not(:has(.coming-soon)):hover::after {
  animation-delay: 0.75s;
}

@keyframes pulsate {
  0% {
    transform: scale(1,1);
    opacity: 1;
  }

  100% {
    transform: scale(1.1, 1.3);
    opacity: 0;
  }
}

/* ===============================================================================
Index
=============================================================================== */

#index{
  border-top: 1px solid var(--color5);
  margin-block-start: calc(100 / var(--vw) * var(--base));;
  margin-block-end: calc(90 / var(--vw) * var(--base));
  margin-inline: auto;
  padding-block-start: calc(100 / var(--vw) * var(--base));
  padding-inline: calc(16 / var(--vw) * var(--base));
}

.index-head{
  display: flex;
  justify-content: space-between;
  grid-column: span 2;
  border-bottom: 1px solid var(--color5);
  width: calc(280 / var(--vw) * var(--base));
  margin-block-end: calc(24 / var(--vw) * var(--base));
  margin-inline: auto;
  padding-block-end: 1.0em;
  font-size: calc(11 / var(--vw) * var(--base));
  font-family: "JetBrains Mono", monospace;
}

.index-list{
  display: grid;
  row-gap: calc(16 / var(--vw) * var(--base));
  width: calc(280 / var(--vw) * var(--base));
  height: auto;
  margin-inline: auto;
}

.index-list-item{
  border-bottom: 1px solid var(--color5);
}

.index-link{
  display: flex;
  align-items: center;
  column-gap: calc(16 / var(--vw) * var(--base));
  height: calc(48 / var(--vw) * var(--base));
  padding-inline-start: calc(8 / var(--vw) * var(--base));
  font-size: calc(18 / var(--vw) * var(--base));
  white-space: nowrap;
}

.index-link span{
  font-size: calc(10 / var(--vw) * var(--base));
  font-family: "JetBrains Mono", monospace;
}

.index-link:after{
  content: "→";
  display: block;
  /*background: url("../img/link-arrow.svg") no-repeat center/contain;
  width: calc(18 / var(--vw) * var(--base));
  height: 100%;*/
  margin-inline-start: auto;
}

@media (min-width: 768px){
  #index{
    display: grid;
    grid-template-columns: 1fr calc(400/1142*100%);
    column-gap: calc(42 / var(--vw) * var(--base));
    box-sizing: border-box;
    width: 100%;
    max-width: 1142px;
    margin-block-start: 0;
    margin-block-end: calc(130 / var(--vw) * var(--base));
    padding-block-start: calc(130 / var(--vw) * var(--base));
    padding-inline: 0;
  }

  .index-head{
    width: 100%;
    padding-block-end: 0.5em;
  }

  .index-list{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 1fr);
    row-gap: 0;
    width: 100%;
    height: 100%;
  }

  .index-link{
    height: 100%;
    font-size: calc(20 / var(--vw) * var(--base));
  }

  .index-link span{
    font-size: calc(11 / var(--vw) * var(--base));
  }

  .index-link,
  .index-link:after,
  .index-link span{
    transition: 0.3s ease;
  }

  .index-link:hover{
    padding-inline-start: calc(16 / var(--vw) * var(--base));
    color: var(--color1);
    background: rgba(249,247,3,0.06);
  }

  .index-link:hover:after,
  .index-link:hover span{
    color: var(--color4);
  }
}

/* ===============================================================================
KV
=============================================================================== */
#kv{
  margin-block: calc(100 / var(--vw) * var(--base));
}

#kv img{
  width: 100%;
  max-width: inherit;
}

@media (min-width: 768px){
  #kv{
    margin-block: calc(130 / var(--vw) * var(--base));
  }
}