:root{
  --bg: #fffaae;
  --bear: #ca7a17;
  --outline: #55575c;
  --sky: #6cd4f2;
  --green: #33dd33;
}

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

html,
body{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: "Jua", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}

body:before{
  content: "";
  position: fixed;
  top: -34px;
  right: 0;
  bottom: 0;
  left: -34px;
  background-image: radial-gradient(rgba(201, 120, 24, 0.14) 2px, transparent 2.5px);
  background-size: 34px 34px;
  pointer-events: none;
  will-change: transform;
  animation: dots 6s linear infinite;
}

body:after{
  content: "";
  position: fixed;
  inset: -20%;
  background: radial-gradient(ellipse 45% 35% at 30% 30%, rgba(255, 255, 255, 0.28), transparent 70%), radial-gradient(ellipse 40% 30% at 50% 85%, rgba(255, 196, 92, 0.22), transparent 70%);
  pointer-events: none;
  will-change: transform;
  animation: glow 20s ease-in-out infinite alternate;
}

.floaters{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.floater{
  position: absolute;
  bottom: -80px;
  animation: rise linear infinite;
}

.floater svg{
  display: block;
  width: 100%;
  height: 100%;
  animation: wobble ease-in-out infinite alternate;
  animation-duration: inherit;
}

.stage{
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-wrap{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  text-align: center;
}

.title{
  display: flex;
  justify-content: center;
  font-weight: 400;
  font-size: clamp(3rem, min(12vw, 15vh), 10rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  white-space: nowrap;
  -webkit-text-stroke: 0.14em var(--outline);
  paint-order: stroke fill;
}

.title .char{
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) scale(0.6);
  animation: pop 0.6s cubic-bezier(0.34, 1.7, 0.5, 1) forwards, bounce 3.2s ease-in-out infinite;
}

.title .char:nth-child(1){
  animation-delay: 150ms, 2s;
}

.title .char:nth-child(2){
  animation-delay: 220ms, 2.12s;
}

.title .char:nth-child(3){
  animation-delay: 290ms, 2.24s;
}

.title .char:nth-child(5){
  animation-delay: 360ms, 2.36s;
}

.title .char:nth-child(6){
  animation-delay: 430ms, 2.48s;
}

.title .char:nth-child(7){
  animation-delay: 500ms, 2.6s;
}

.title .char:nth-child(8){
  animation-delay: 570ms, 2.72s;
}

.title .blue{
  color: var(--sky);
}

.title .green{
  color: var(--green);
}

.title .gap{
  display: inline-block;
  width: 0.3em;
}

.domain{
  margin-top: clamp(0.4rem, 1.5vh, 1rem);
  font-size: clamp(1rem, 2.4vw, 1.6rem);
  letter-spacing: 0.08em;
  color: var(--outline);
  opacity: 0;
  animation: fade 0.8s ease 1s forwards;
}

.links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.7rem, 1.8vh, 1rem) clamp(0.5rem, 1.2vw, 0.9rem);
  margin-top: clamp(1rem, 3vh, 2rem);
}

.link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.42em 0.95em 0.42em 0.45em;
  font-size: clamp(1.05rem, min(2.1vw, 3vh), 1.5rem);
  color: #3b3d42;
  text-decoration: none;
  white-space: nowrap;
  background: #fff;
  border: 3px solid var(--outline);
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--outline);
  opacity: 0;
  scale: 0.6;
  translate: 0 20px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  animation: link-in 0.55s cubic-bezier(0.34, 1.7, 0.5, 1) forwards;
}

.link:nth-child(1){
  animation-delay: 1.15s;
}

.link:nth-child(2){
  animation-delay: 1.26s;
}

.link:nth-child(3){
  animation-delay: 1.37s;
}

.link:nth-child(4){
  animation-delay: 1.48s;
}

.link:hover{
  transform: translateY(-3px) rotate(-1.5deg);
  box-shadow: 0 8px 0 var(--outline);
}

.link:active{
  transform: translateY(5px);
  box-shadow: 0 0 0 var(--outline);
}

.link:focus-visible{
  outline: 3px dashed var(--outline);
  outline-offset: 5px;
}

.link .badge{
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75em;
  height: 1.75em;
  border: 2.5px solid var(--outline);
  border-radius: 50%;
}

.link .badge svg{
  width: 62%;
  height: 62%;
  fill: #fff;
  stroke: var(--outline);
  stroke-width: 1.6;
  paint-order: stroke;
}

.link .dot{
  position: relative;
  width: 38%;
  height: 38%;
  background: #fff;
  border-radius: 50%;
}

.link .dot:after{
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 50%;
  animation: ping 1.6s ease-out infinite;
}

.link.live .badge{
  background: #ff5a5a;
}

.link.live:hover{
  background: #fff0f0;
}

.link.tv .badge{
  background: var(--sky);
}

.link.tv:hover{
  background: #eefaff;
}

.link.music .badge{
  background: var(--green);
}

.link.music:hover{
  background: #effdea;
}

.link.fan .badge{
  background: var(--bear);
}

.link.fan:hover{
  background: #fff4e6;
}

.bear-wrap{
  position: relative;
  width: min(46vh, 80vw);
  transform: translateY(130%);
  animation: peek 0.9s cubic-bezier(0.34, 1.4, 0.5, 1) 0.9s forwards;
}

.bear-wrap svg{
  display: block;
  overflow: visible;
}

.bear-wrap .fur{
  fill: var(--bear);
}

.bear-wrap .ink{
  fill: #000;
}

.bear-body{
  width: 100%;
  height: auto;
}

.bear-head,
.eyes{
  position: absolute;
  inset: 0;
}

.bear-head{
  transform-origin: 50% 86.42%;
  will-change: transform;
  animation: tilt 4.5s ease-in-out 2s infinite;
}

.bear-face{
  width: 100%;
  height: 100%;
}

.eyes{
  will-change: transform;
  transition: transform 0.15s ease-out;
}

.eye{
  position: absolute;
  will-change: transform;
  animation: blink 5s ease-in-out 3s infinite;
}

.eye-left{
  top: 17.78%;
  left: 15.8%;
  width: 32.78%;
  height: 30.62%;
}

.eye-right{
  top: 18.27%;
  left: 56.84%;
  width: 29.72%;
  height: 29.63%;
}

@keyframes dots{
  to{
    transform: translate(34px, 34px);
  }
}

@keyframes glow{
  to{
    transform: translate(4%, -3%) scale(1.08);
  }
}

@keyframes rise{
  from{
    transform: translateY(0);
  }

  to{
    transform: translateY(calc(-100vh - 160px));
  }
}

@keyframes wobble{
  0%{
    transform: translateX(-18px) rotate(-20deg);
  }

  100%{
    transform: translateX(18px) rotate(20deg);
  }
}

@keyframes pop{
  to{
    opacity: 1;
    transform: none;
  }
}

@keyframes bounce{
  0%, 70%, 100%{
    opacity: 1;
    transform: translateY(0);
  }

  80%{
    opacity: 1;
    transform: translateY(-0.08em);
  }

  90%{
    opacity: 1;
    transform: translateY(0.02em);
  }
}

@keyframes fade{
  to{
    opacity: 0.8;
  }
}

@keyframes link-in{
  to{
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }
}

@keyframes ping{
  from{
    opacity: 0.9;
    transform: scale(1);
  }

  to{
    opacity: 0;
    transform: scale(2.8);
  }
}

@keyframes peek{
  to{
    transform: translateY(0);
  }
}

@keyframes tilt{
  0%, 100%{
    transform: rotate(0deg);
  }

  25%{
    transform: rotate(-2.5deg);
  }

  75%{
    transform: rotate(2.5deg);
  }
}

@keyframes blink{
  0%, 90%, 100%{
    transform: scaleY(1);
  }

  93%{
    transform: scaleY(0.06);
  }

  96%{
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce){
  *,
  *:before,
  *:after{
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }

  .floaters{
    display: none;
  }
}