* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  cursor: url("diamond-selector-cursor-stretched.png") 0 0 , auto;

}
html {
  scroll-behavior:smooth;
  height:-webkit-fill-available;
    cursor: url("diamond-selector-cursor-stretched.png") 0 0 , auto;

}
body {
  font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  background-color:#000;
  color:#fff;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  min-height:-webkit-fill-available;
  cursor: url("diamond-selector-cursor-stretched.png") 0 0 , auto;
}
.splash-screen .confirm-button:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 15px #0000004d,inset 0 1px 1px #df0d0d26,0 0 60px #d518c099,0 0 100px #ff002433;
  background: #0006;
  padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 0px;
  padding-top: 0px;
}
.scroll-container {.splash-screen:has(.confirm-button:hover) .splash-background:before
  position:fixed;
  width:100%;
  height:40px;
  background:#000c;
  overflow:hidden;
  z-index:1000;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  cursor: url("diamond-selector-cursor-stretched.png") 0 0 , auto;
  transition:background-color .3s ease

}
.scroll-container:hover {
  background:#000000e6
}
.scroll-container.top {
  top:0;
  border-bottom:1px solid rgba(155,0,128,.2)
}
.scroll-container.bottom {
  bottom:0;
  border-top:1px solid rgba(155,0,128,.2)
}
.scroll-text {
  display:flex;
  white-space:nowrap;
  animation:scroll 20s linear infinite;
  will-change:transform
}
.scroll-container.bottom .scroll-text {
  animation:scrollReverse 20s linear infinite
}

.scroll-text span {
  display:inline-block;
  padding:8px 40px;
  font-family:Courier New,monospace;
  font-weight:700;
  color: #ff22c8;
  text-shadow: 0 0 10px rgba(255, 0, 155, 0.5);
  font-size:16px;
  letter-spacing:2px;
  flex-shrink:0
}
.copy-notification {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(.9);
  background: #b0f3;
  color: #eb00ff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  pointer-events: none;
  opacity: 0;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(151, 0, 255, 0.3);
  text-shadow: 0 0 10px rgba(187, 0, 255, 0.5);
  box-shadow: 0 0 20px #6800ff33,0 0 40px #7400ff1a;
}
.copy-notification.show {
  opacity:1;
  transform:translate(-50%,-50%) scale(1)
}
@keyframes scroll {
  0% {
    transform:translate(0)
  }
  to {
    transform:translate(-50%)
  }
}
@keyframes scrollReverse {
  0% {
    transform:translate(-50%)
  }
  to {
    transform:translate(0)
  }
}
.splash-screen {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2rem;
  z-index:100;
  transition:all .8s cubic-bezier(.4,0,.2,1);
  padding:2rem;
  min-height:100vh;
  height:100%;
  width:100vw;
  background-color:#111827;
  overflow:hidden;
  will-change:opacity,transform
}
}
.splash-screen:before {
  content:"";
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  border:2px solid transparent;
  background:linear-gradient(to right,#ff20e733,#f00eed1a,#f200d866);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  z-index:101;
  transition:all .3s ease
}
.splash-screen:after {
  content:"";
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  box-shadow:0 2px 10px #ff20e733,inset 0 1px 1px #f00eed1a,0 0 80px #f200d866,0 0 160px #f50c2d33;
  pointer-events:none;
  z-index:101;
  transition:all .3s ease
}
.splash-background {
  position:fixed;
  top:-50px;
  right:-50px;
  bottom:-50px;
  left:-50px;
  background-image:url(https://raw.githubusercontent.com/Hamavorera/nigma/refs/heads/main/bike.png);
  background-size:cover;
  background-position:center;
  z-index:-2;
  will-change:transform;
  animation:floatBackground 20s ease-in-out infinite;
  transform:translateZ(0)
}
.splash-background:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  box-shadow:inset 0 0 100px #00ff8026,inset 0 0 60px #00ff801a,inset 0 0 30px #00ff800d;
  transition:all .3s ease
}
.video-background {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
}

#myVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    transform: translateX(-50%) translateY(-50%);
}

.splash-screen:has(.confirm-button:hover) .splash-background:before {
  box-shadow:inset 0 0 150px #fff,inset 0 0 100px #fff,inset 0 0 50px #fff
  padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 0px;
  padding-top: 0px;
}
@keyframes floatBackground {
  0% {
    transform:translateZ(0) scale(1.1)
  }
  25% {
    transform:translate3d(-10px,10px,0) scale(1.1)
  }
  50% {
    transform:translate3d(0,-10px,0) scale(1.1)
  }
  75% {
    transform:translate3d(10px,10px,0) scale(1.1)
  }
  to {
    transform:translateZ(0) scale(1.1)
  }
}
.splash-screen .overlay {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-image:url("bike.png");
  background:radial-gradient(circle at center,#00000059,#00000073 70%,#0009);
  z-index:-1;
  width:100vw;
  height:100vh;
}
.splash-screen .overlay:before {
  content:"";
  position:absolute;
  top:-10px;
  right:-10px;
  bottom:-10px;
  left:-10px;
  background:radial-gradient(circle at center,rgba(0,0,128,.1) 0%,rgba(0,0,128,.05) 50%,transparent 70%);
  opacity:0;
  transition:all .3s ease;
  transform:scale(.95);
  pointer-events:none
}
.splash-screen:has(.confirm-button:hover) .overlay:before {
  opacity:1;
  transform:scale(1.1)
  padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 0px;
  padding-top: 0px;
}
.splash-content {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2rem;
  width:100%;
  height:100%;
  justify-content:center
}
.splash-screen.hidden {
  opacity:0;
  transform:scale(1.1);
  pointer-events:none
}
.splash-screen img {
  width:100%;
  height:auto;
  object-fit:contain;
  transform:translateZ(0)
}
.splash-screen .access-restricted {
  max-width:min(800px,90vw);
  margin-bottom:2rem
}
.splash-screen .confirm-button {
    padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 0px;
  padding-top: 0px;
  cursor: url("diamond-selector-cursor-stretched.png") 0 0 , auto;
  position: relative;
  max-width: min(300px,50vw);
  cursor: pointer;
  margin-top: -2rem;
  padding: 1rem 2rem;
  background: #0000004d;
  border: 1px solid rgba(255,0,0,.1);
  border-radius: .75rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px #ff20e733,inset 0 1px 1px #f00eed1a,0 0 80px #f200d866,0 0 160px #f50c2d33;
  will-change: transform,box-shadow;
  z-index: 102;
  transform: scale(1);
  transition: transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1);
}}
.splash-screen .confirm-button:hover {
  transform:scale(1.15);
  box-shadow:0 4px 15px #0000004d,inset 0 1px 1px #ffffff26,0 0 60px #00ff8099,0 0 100px #00ff8033;
  background:#0006
  padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 0px;
  padding-top: 0px;
}
.splash-screen .confirm-button:active {
  transform:scale(1.1);
  box-shadow:0 2px 5px #0003,inset 0 1px 1px #ffffff0d,0 0 40px #00ff8066
  padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 0px;
  padding-top: 0px;
}
.container {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  visibility:hidden;
  opacity:0;
  transform:scale(.98);
  transition:all .8s cubic-bezier(.4,0,.2,1);
  will-change:visibility,opacity,transform;
  background-color:#000;
  position:relative
}
.container.visible {
  visibility:visible;
  opacity:1;
  transform:scale(1)
}
.hero {
  position:relative;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  perspective:1000px
}
.video-container {
  position:absolute;
  top:-50px;
  right:-50px;
  bottom:-50px;
  left:-50px;
  transform-style:preserve-3d;
  transition:transform .2s ease-out;
  will-change:transform
}
video {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:translateZ(0)
}
.desktop-video {
  display:block
}
.mobile-video {
  display:none
}
.overlay {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color: #80224e26;
}
.content {
  position:relative;
  z-index:10;
  text-align:center;
  padding:0 1rem;
  transform-style:preserve-3d;
  transition:transform .2s ease-out;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:100%;
  will-change:transform
}
.logo {
  max-width:min(800px,90vw);
  width:80%;
  height:auto;
  transform:scale(var(--logo-scale, 1));
  transition:transform .2s ease-out;
  will-change:transform;
  animation:floatLogo 6s ease-in-out infinite;
    cursor: url("diamond-selector-cursor-stretched.png") 0 0 , auto;

}
.logo.clicked {
  animation:logoClick .6s cubic-bezier(.22,1,.36,1)
}
@keyframes floatLogo {
  0%,
  to {
    transform:translateZ(0) scale(var(--logo-scale, 1))
  }
  25% {
    transform:translate3d(3px,-3px,0) scale(var(--logo-scale, 1))
  }
  50% {
    transform:translate3d(-2px,2px,0) scale(var(--logo-scale, 1))
  }
  75% {
    transform:translate3d(1px,-1px,0) scale(var(--logo-scale, 1))
  }
}
@keyframes logoClick {
  0% {
    transform:scale(var(--logo-scale, 1));
    filter:brightness(1) drop-shadow(0 0 0 rgba(0,0,0,0))
  }
  30% {
    transform:scale(calc(var(--logo-scale, 1) * .95));
    filter:brightness(.9) drop-shadow(0 1px 2px rgba(0,0,0,.3))
  }
  60% {
    transform:scale(calc(var(--logo-scale, 1) * 1.03));
    filter:brightness(1.1) drop-shadow(0 2px 4px rgba(0,0,0,.4))
  }
  to {
    transform:scale(var(--logo-scale, 1));
    filter:brightness(1) drop-shadow(0 0 0 rgba(0,0,0,0))
  }
}
.footer {
  position:fixed;
  bottom:4rem;
  left:50%;
  transform:translate(-50%);
  z-index:20;
  padding:.75rem 1.25rem;
  width:fit-content;
  min-width:420px;
  background:none;
  border:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none
}
.footer-content {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem
}
.launching-soon {
  max-width:min(160px,32vw);
  margin:.5rem 0;
    cursor: url("diamond-selector-cursor-stretched.png") 0 0 , auto;
  background: transparent; /* Убираем фон */
  border: none; /* Убираем рамку */
  color: transparent;
  transition:all .3s ease;
  padding:.4rem .3rem;
  background:#00000080;
  visibility: hidden;
  border-radius:12px;
  box-shadow: 0 0 20px #ff06c12e,0 0 40px #ff00cb14,inset 0 0 10px #af00ff30;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transform:scale(1.2);
  transform-origin:center center;
  will-change:transform,box-shadow;
}
.launching-soon:hover {
  transform:scale(1.1);
    background: transparent; /* Убираем фон */
  border: none; /* Убираем рамку */
  color: transparent;
  background:#0009;
  box-shadow: 0 0 20px #ff00ef1a,0 0 40px #ff00d70d,inset 0 0 10px #af00ff1a;
}
.launching-soon:active {
  transform:scale(1.1);
  background: transparent; /* Убираем фон */
  border: none; /* Убираем рамку */
  color: transparent;
  box-shadow: 0 0 20px #ff00ef1a,0 0 40px #ff00d70d,inset 0 0 10px #af00ff1a;
}
.social-links {
  display:flex;
  gap:1rem;
  justify-content:center;
  align-items:center;
  padding:0 1rem
}
.social-link {
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border-radius:12px;
  background:#00000080;
  transition:all .3s ease;
  will-change:transform,background-color,box-shadow;
  box-shadow: 0 0 20px #ff00fb33,0 0 40px #df00ff1a,inset 0 0 15px #bb00ff26;
}
.social-link:hover {
  background:#0009;
  transform:translateY(-2px);
  box-shadow: 0 0 30px #ff00fb33,0 0 60px #df00ff1a,inset 0 0 15px #bb00ff26;
}

.social-link:active {
  transform:translateY(0);
  box-shadow: 0 0 20px #ff00fb33,0 0 40px #df00ff1a,inset 0 0 15px #bb00ff26;
}
.social-icon {
  width:48px;
  height:48px;
  object-fit:contain
}
.audio-toggle {
  position:fixed;
  bottom:1rem;
  right:1rem;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#0000004d;
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
    cursor: url("diamond-selector-cursor-stretched.png") 0 0 , auto;

  transition:all .3s ease;
  z-index:1000;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px)
}
.audio-toggle:hover {
  background:#00000080;
  transform:translateY(-2px)
}
.audio-toggle:active {
  transform:translateY(0)
}
.audio-toggle svg {
  width:24px;
  height:24px
}
.audio-toggle .hidden {
  display:none
}
.modal-overlay {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:#000000d9;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2000;
  opacity:0;
  visibility:hidden;
  transition:all .3s ease;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px)
}
.modal-overlay.active {
  opacity:1;
  visibility:visible
}
.modal-container {
  position:relative;
  aspect-ratio:9/16;
  height:80%;
  max-width:720px;
  background:#000000e6;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 0 40px #00ff801a,0 0 80px #00ff800d
}
.modal-video-wrapper {
  position:relative;
  width:100%;
  height:100%;
  padding-top:80.25%
}
.modal-video {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:contain
}
.modal-close {
  position:absolute;
  top:1rem;
  right:1rem;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#00000080;
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
    cursor: url("diamond-selector-cursor-stretched.png") 0 0 , auto;

  transition:all .3s ease;
  z-index:2001;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px)
}
.modal-close:hover {
  background:#000000b3;
  transform:scale(1.1)
}
.modal-close:active {
  transform:scale(.95)
}
.video-controls {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:1rem;
  background:linear-gradient(transparent,#000c);
  display:flex;
  flex-direction:column;
  gap:.5rem
}
.progress-bar {
  position:relative;
  width:100%;
  height:4px;
  background:#fff3;
  border-radius:2px;
    cursor: url("diamond-selector-cursor-stretched.png") 0 0 , auto;

  overflow:hidden
}
.progress-bar-filled {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  background:#00ff80;
  width:0;
  transition:width .1s linear
}
.progress-seek {
  position:absolute;
  top:-8px;
  right:0;
  bottom:-8px;
  left:0;
  width:100%;
  height:20px;
  opacity:0;
  cursor: url("diamond-selector-cursor-stretched.png") 0 0 , auto;
}
.time-display {
  display:flex;
  justify-content:space-between;
  color:#fff;
  font-size:14px;
  font-family:monospace
}
@media (max-width: 768px) {
  .footer {
    width:100%!important;
    min-width:unset!important;
    padding:0 max(1rem,env(safe-area-inset-left))!important;
    bottom:calc(env(safe-area-inset-bottom,0px) + 60px)!important;
    left:50%;
    transform:translate(-50%);
    z-index:1000
  }
  .footer-content {
    width:100%;
    gap:.75rem
  }
  .launching-soon {
    max-width:min(140px,30vw);
    margin:.25rem 0;
    padding:.4rem .3rem;
    transform:scale(1.1)
  }
  .social-links {
    width:100%;
    gap:.75rem;
    padding:0 max(.5rem,env(safe-area-inset-left));
    padding-bottom:calc(env(safe-area-inset-bottom,0px)/2);
    justify-content:space-between
  }
  .social-link {
    width:48px!important;
    height:48px!important;
    background:#00000080!important;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px)
  }
  .social-link .social-icon {
    width:36px;
    height:36px
  }
  .audio-toggle {
    top:max(1rem,env(safe-area-inset-top,1rem));
    right:1rem;
    bottom:unset;
    width:42px;
    height:42px
  }
  .container {
    min-height:-webkit-fill-available;
    height:100dvh
  }
  .scroll-container {
    height:32px
  }
  .scroll-text span {
    font-size:14px;
    padding:6px 24px
  }
  .modal-container {
    max-width:90vw;
    margin:5vh auto;
    border-radius:12px
  }
  .desktop-video {
    display:none
  }
  .mobile-video {
    display:block
  }
  .hero {
    height:100dvh;
    min-height:-webkit-fill-available
  }
  .content {
    transform:none!important;
    height:100dvh;
    min-height:-webkit-fill-available;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0
  }
  .video-container {
    transform:none!important
  }
  .logo {
    max-width:102vw!important;
    width:102%!important;
    margin:0 auto;
    transform:none!important;
    animation:none!important;
    --logo-scale: 1 !important
  }
  .scroll-text {
    animation:scroll 13.33s linear infinite!important
  }
  .scroll-container.bottom .scroll-text {
    animation:scrollReverse 13.33s linear infinite!important
  }
  @media (max-width: 360px) {
    .social-link {
      width:42px!important;
      height:42px!important
    }
    .social-link .social-icon {
      width:32px;
      height:32px
    }
    .social-links {
      gap:.5rem
    }
  }
}