@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Days+One&family=Rubik+Glitch&family=Rubik:wght@300;400;500;600;700;800&display=swap');

@font-face {
  font-family: 'bebasLight';
  src: url('../fonts/bebasneue/bebasneuelight.woff2') format('woff2'),
       url('../fonts/bebasneue/bebasneuelight.woff') format('woff'),
       url('../fonts/bebasneue/bebasneuelight.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'bebasRegular';
  src: url('../fonts/bebasneue/bebasneueregular.woff2') format('woff2'),
       url('../fonts/bebasneue/bebasneueregular.woff') format('woff'),
       url('../fonts/bebasneue/bebasneueregular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'bebasBold';
  src: url('../fonts/bebasneue/bebasneuebold.woff2') format('woff2'),
       url('../fonts/bebasneue/bebasneuebold.woff') format('woff'),
       url('../fonts/bebasneue/bebasneuebold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}







html,body {margin:0;height:100%;background:#000;color:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto;}
#uvn-canvas {display:block;position:fixed;inset:0;width:100%;height:100%;}
#overlay {position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .35s;}
#overlay.loading{opacity:.85;pointer-events:auto;display:flex;align-items:center;justify-content:center;}




a {
  color: white;
  text-decoration: none;
}


.tint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  z-index: 6;
}

.overlay__text-block {
  width: 100%;
  height: 23px;
  overflow: hidden;
}

.overlay {
  border: 1px solid hsla(0, 0%, 100%, 0.3);
  border-radius: 5px;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  width: 600px;
  height: 450px;
  z-index: 7;
}

.overlay__close-btn {
  position: absolute;
  top: 28px;
  right: 30px;
  width: 30px;
  cursor: url('../src/assets/images/cursor.png'), auto;
  z-index: 6;
  transition: opacity 0.3s ease; 
}

.overlay__close-btn:hover {
  opacity: 0.5; 
}

.threed-svg {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.glitch__svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* Первая копия */
.glitch__svg:nth-child(1) svg {
  transform: translate(-2px, -2px);
  filter: hue-rotate(20deg);
  opacity: 0.8;
  animation: glitch 1.5s infinite;
}

/* Вторая копия */
.glitch__svg:nth-child(3) svg {
  transform: translate(2px, 2px);
  filter: hue-rotate(-20deg);
  opacity: 0.8;
  animation: glitch 1.5s infinite reverse;
}

@keyframes glitch {
  0% {
    transform: translate(0,0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(2px, -2px);
  }
  60% {
    transform: translate(-2px, -1px);
  }
  80% {
    transform: translate(1px, 2px);
  }
  100% {
    transform: translate(0,0);
  }
}

.top-eyelid {
  position: absolute;
  top: 0;
  width: 100%;
  background-color: black;
  transition: height 0.6s;
  z-index: 89;
}

.wait-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'bebasBold', sans-serif;
  font-size: 23px;
  font-weight: 400;
  color: white;
  z-index: 1000;
  
}

.top-eyelid_blur {
  position: absolute;
  bottom: -20px;
  width: 100%;
  background-color: black;
  transition: height 0.5s;
  z-index: 90;
  filter: blur(30px);
  background-color: black;
}

.bottom-eyelid {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: black;
  transition: height 0.6s;
  z-index: 89;
}

.bottom-eyelid_blur {
  position: absolute;
  top: -20px;
  width: 100%;
  background-color: black;
  transition: height 0.3s;
  z-index: 90;

  filter: blur(30px);
  background-color: black;
}

:root {
  /** sunny side **/
  --blue-background: #c2e9f6;
  --blue-border: #72cce3;
  --blue-color: #96dcee;
  --yellow-background: #fffaa8;
  --yellow-border: #f5eb71;
  /** dark side **/
  --indigo-background: #808fc7;
  --indigo-border: #5d6baa;
  --indigo-color: #6b7abb;
  --gray-border: #e8e8ea;
  --gray-dots: #e8e8ea;
  /** general **/
  --white: #fff;
}

* {
  margin: 0;
  padding: 0;
}

.toggle--label {
  transition: opacity 1.5s linear;
}

.toggle--checkbox {
  display: none;
  position: absolute;
  top: 20px;
  right: 20px;
}

.toggle--checkbox:checked ~ .background {
  background: var(--indigo-background);
}

.toggle--checkbox:checked + .toggle--label {
  background: var(--indigo-color);
  border-color: var(--indigo-border);
}

.toggle--checkbox:checked + .toggle--label .toggle--label-background {
  left: 60px;
  width: 5px;
}

.toggle--checkbox:checked + .toggle--label .toggle--label-background:before {
  width: 5px;
  height: 5px;
  top: -25px;
}

.toggle--checkbox:checked + .toggle--label .toggle--label-background:after {
  width: 5px;
  height: 5px;
  left: -30px;
  top: 20px;
}

.toggle--checkbox:checked + .toggle--label:before {
  background: var(--white);
  border-color: var(--gray-border);
  animation-name: switch;
  animation-duration: 350ms;
  animation-fill-mode: forwards;
}

.toggle--checkbox:checked + .toggle--label:after {
  transition-delay: 350ms;
  opacity: 1;
}

.toggle--label {
  cursor: url('../src/assets/images/cursor.png'), auto;
  position: absolute;
  top: -16px;
  right: 15px;
  width: 210px;
  height: 110px;
  background: var(--blue-color);
  border-radius: 100px;
  border: 5px solid var(--blue-border);
  display: flex;
  transition: all 350ms ease-in;
}

.toggle--label-background {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 10px;
  height: 5px;
  border-radius: 5px;
  background: var(--white);
  left: 135px;
  top: 45px;
  transition: all 150ms ease-in;
}

.toggle--label-background:before {
  content: '';
  position: absolute;
  top: -9px;
  width: 40px;
  height: 5px;
  border-radius: 5px;
  background: var(--white);
  left: -20px;
  transition: all 150ms ease-in;
}

.toggle--label-background:after {
  content: '';
  position: absolute;
  top: 8px;
  width: 40px;
  height: 5px;
  border-radius: 5px;
  background: var(--white);
  left: -10px;
  transition: all 150ms ease-in;
}

.toggle--label:before {
  animation-name: reverse;
  animation-duration: 350ms;
  animation-fill-mode: forwards;
  transition: all 350ms ease-in;
  content: '';
  width: 82px;
  height: 82px;
  border: 5px solid var(--yellow-border);
  top: 10px;
  left: 13px;
  position: absolute;
  border-radius: 82px;
  background: var(--yellow-background);
}

.toggle--label:after {
  transition-delay: 0ms;
  transition: all 250ms ease-in;
  position: absolute;
  content: '';
  box-shadow: var(--gray-dots) -13px 0 0 2px, var(--gray-dots) -24px 14px 0 -2px;
  left: 143px;
  top: 23px;
  width: 10px;
  height: 10px;
  background: transparent;
  border-radius: 50%;
  opacity: 0;
}
.threed-text
.overlay.loading {
  /* Добавьте нужные стили, например: */
  pointer-events: none; /* Отключить взаимодействие, пока идет загрузка */
  opacity: 0.5; /* Затемнение интерфейса */
}

.overlay.loading .threed-text.glitch,
.overlay.loading .container__link,
.overlay.loading .container__social,
.overlay.loading .container__music {
  opacity: 0.3; /* Сделать элементы менее заметными */
  pointer-events: none; /* Отключить клики */
}

.overlay__bar {
  z-index: 6;
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  width: 600px;
  height: 50px;
  border-radius: 5px;
  border: 1px solid hsla(0, 0%, 100%, 0.3);
  bottom: 40px;
  left: 0;
  right: 0;
}

.container__music {
  width: 60px;
  margin: auto 0 auto 0;
  height: 100%;
  border-left: 1px solid hsla(0, 0%, 100%, 0.3);
  cursor: url('../src/assets/images/cursor.png'), auto;
}

#poly {
  stroke: #ffffff;
  fill: none;
  stroke-width: 2px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.overlay__socials-container {
  display: flex;
  flex-direction: row;
  width: 59%;
  margin: auto 0px auto auto;
}

.blink-text {
  z-index: 999;
}

@media screen and (max-width: 800px) {
  .overlay__socials-container {
    width: 40%;
  }
}

@media screen and (max-width: 500px) {
  .overlay__socials-container {
    width: 27%;
  }
}

.container__social {
  cursor: url('../src/assets/images/cursor.png'), auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: auto 10px auto 0;
}

.container__social:nth-of-type(1) {
  cursor: url('../src/assets/images/cursor.png'), auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: auto 7px auto auto;
}

.container__link {
  position: relative;
  margin-left: 10px;
  cursor: url('../src/assets/images/cursor.png'), auto;
  line-height: 1;
  transition: 0.3s ease-out;
  font-family: 'bebasBold', sans-serif;
  font-size: 18px;
  font-weight: 400;
}

#bb {
  opacity: 1;
  transition: 0.2s ease-out;
  margin-bottom: 0;
}

#bb:nth-of-type(1) {
  margin-top: 30px;
}

#aa:hover > #bb {
  transform: translateY(-23px) scale(0.6, 0.6);
  opacity: 0;
  transition: 0.3s ease-out;
}

#cc {
  transform: scale(0.6, 0.6);
  opacity: 0;
  transition: 0.3s ease-out;
}

#aa:hover > #cc {
  transform: translateY(-37px) scale(1, 1);
  opacity: 1;
  transition: 0.3s ease-out;
}

#b {
  opacity: 1;
  transition: 0.2s ease-out;
  margin-top: 0;
}

#b:nth-of-type(1) {
  margin-top: 22px;
}

#a:hover > #b {
  transform: translateY(-23px) scale(0.6, 0.6);
  opacity: 0;
  transition: 0.3s ease-out;
}

#c {
  transform: scale(0.6, 0.6);
  opacity: 0;
  transition: 0.3s ease-out;
}

#a:hover > #c {
  transform: translateY(-27px) scale(1, 1);
  opacity: 1;
  transition: 0.3s ease-out;
}

.container__link::after {
  display: block;
  position: absolute;
  left: 0;
  width: 0;
  height: 2px;
  background-color: hsl(0, 0%, 100%);
  content: '';
  transition: width 0.3s ease-out;
}

.container__link:hover:after,
.container__link:focus:after {
  width: 100%;
}

._active {
  color: white;
  transition: 0.3s ease-out;
}

.glitch {
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
}

.glitch:hover {
  animation: glitch 725ms infinite;
  text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00;
}

.glitch span {
  position: absolute;
  top: 0;
  left: 0;
}

.threed-text span {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 34px;
}

.glitch span:first-child {
  opacity: 0.75;
}

.glitch span:first-child:hover {
  animation: glitch 500ms infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  transform: translate(-0.04em, -0.03em);
}

.glitch span:last-child {
  opacity: 0.75;
}

.glitch span:last-child:hover {
  transform: translate(0.04em, 0.03em);
  animation: glitch 375ms infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}

@media screen and (max-width: 800px) {
  .overlay__bar {
    width: 80%;
  }
}

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00;
  }
  15% {
    text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00;
  }
  16% {
    text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff, -0.05em -0.05em 0 #fffc00;
  }
  49% {
    text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff, -0.05em -0.05em 0 #fffc00;
  }
  50% {
    text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff, 0 -0.04em 0 #fffc00;
  }
  99% {
    text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff, 0 -0.04em 0 #fffc00;
  }
  100% {
    text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff, -0.04em -0.025em 0 #fffc00;
  }
}

@keyframes switch {
  0% {
    left: 13px;
  }
  60% {
    left: 13px;
    width: 112px;
  }
  100% {
    left: 104px;
    width: 82px;
  }
}

@keyframes reverse {
  0% {
    left: 104px;
    width: 82px;
  }
  60% {
    left: 72px;
    width: 112px;
  }
  100% {
    left: 13px;
  }
}

@keyframes pulse {
  0%, 100% {
    text-shadow: 
      0 0 10px rgba(255, 0, 128, 0.8), 
      0 0 20px rgba(255, 0, 128, 0.6), 
      0 0 30px rgba(255, 0, 128, 0.4);
  }
  50% {
    text-shadow: 
      0 0 15px rgba(255, 0, 128, 0.8), 
      0 0 25px rgba(255, 0, 128, 0.6), 
      0 0 35px rgba(255, 0, 128, 0.4);
  }
}