.Mozhga {
  width: 100%;

  position: absolute;

  margin-top: -50vh;
}
  :root {

  --space-xs: 8px;

  --space-sm: 16px;

  --space-md: 24px;

  --space-lg: 48px;



  --noir: rgba(102, 205, 170, 0.82), transparent 50%;

  --white: white;

  --gray: #D3D3D3;

  --main: Aquamarine;

  --additional: rgba(102, 205, 170);



  --roboto: "Roboto", sans-serif;

  --mono: "JetBrains Mono", monospace;

  --instrument: "Montserrat", sans-serif;



  --page-padding: clamp(18px, 4vw, 52px);

  --cubic: cubic-bezier(0.39, 0.1, 0.94, 0.76);

}
* {

  box-sizing: border-box;

}
html,

body {

  margin: 0;

  width: 100%;

  min-height: 100%;

  background: url("https://raw.githack.com/nadobrom185/Bakirov/main/photo_2026-10-30_21-56-46%20(1).jpg");

  color: var(--white);

  font-family: var(--roboto);

}

body {

  overflow-x: hidden;
}
html.visual,

html.visual body {

  height: auto;

}



.visual.visual-smooth {

  scroll-behavior: auto !important;

}



.visual.visual-smooth [data-visual-prevent] {

  overscroll-behavior: contain;

}

.visual.visual-stopped {

  overflow: hidden;
} 
.viz-cover-scroll {

  position: relative;

  width: 100%;

  max-width: 100vw;

  height: 500vh;

  background: 

    radial-gradient(circle at 50% 40%, rgba(255, 214, 243, 0.12), transparent 32%),

    linear-gradient(180deg, var(--noir), #000);

  overflow: visible;

  color: var(--white);

}
.viz-cover-sticky {

  position: sticky;

  top: 0;

  width: 100%;

  height: 100svh;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--noir);

  isolation: isolate;

}
.viz-cover-sticky::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: 0.18;

  background:

    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);

  background-size: 32px 32px;

  mask-image: radial-gradient(circle at center, black, transparent 78%);

  -webkit-mask-image: radial-gradient(circle at center, black, transparent 78%);

}
.viz-cover-sidecopy {

  position: absolute;

  top: 50%;

  z-index: 5;

  display: flex;

  gap: var(--space-sm);

  font-family: var(--mono);

  font-size: clamp(0.75rem, 1vw, 0.9rem);

  text-transform: uppercase;

  letter-spacing: 0.04em;

  color: var(--gray);

  pointer-events: none;

  overflow: visible;

  width: max-content;

  min-width: min(680px, 80vh);

  justify-content: center;

  align-items: center;

  will-change: transform, opacity, filter;

}



.viz-cover-sidecopy span {

  display: inline-block;

  white-space: nowrap;

  color: inherit;

  padding-inline: var(--space-xs);

  will-change: transform, opacity;

}

.viz-cover-sidecopy-left {

  left: var(--page-padding);

  right: auto;

  transform: translate(-50%, -50%) rotate(-90deg);

  transform-origin: center center;

}



.viz-cover-sidecopy-right {

  right: var(--page-padding);

  left: auto;

  transform: translate(50%, -50%) rotate(90deg);

  transform-origin: center center;

}
.viz-cover-center-copy {

  position: absolute;

  z-index: 4;

  width: min(760px, calc(100vw - var(--page-padding) * 2));

  text-align: center;

  pointer-events: none;

  color: var(--white);

  perspective: 1000px;

  will-change: transform, opacity, filter;

}

.viz-cover-overline {

  margin: 0 0 var(--space-sm);

  font-family: var(--mono);

  font-size: clamp(0.75rem, 1vw, 0.9rem);

  text-transform: uppercase;

  color: var(--m);

  will-change: transform, opacity, filter;

}
.viz-cover-intro-title {

  margin: 0;

  overflow: hidden;

  font-family: var(--instrument);

  font-size: clamp(3.5rem, 12vw, 13rem);

  font-style: italic;

  font-weight: 400;

  line-height: 0.78;

  letter-spacing: -0.06em;

  color: var(--white);

  text-transform: uppercase;

}



.viz-cover-intro-title .char,

.viz-cover-overlay-title .char {

  display: inline-block;

  will-change: transform, opacity, filter;

}



.viz-cover-intro-text {

  width: min(560px, 86vw);

  margin: var(--space-md) auto 0;

  font-family: var(--roboto);

  font-size: clamp(1rem, 1vw, 1.125rem);

  line-height: 1.35;

  color: var(--additional);

  will-change: transform, opacity, filter;

}
.viz-cover-video-frame {

  position: relative;

  z-index: 3;

  width: 300px;

  height: 300px;

  overflow: hidden;

  background: var(--noir);

  border: 1px solid rgba(255, 255, 255, 0.18);

  box-shadow:

    0 0 0 1px rgba(255, 214, 243, 0.06),

    0 24px 80px rgba(0, 0, 0, 0.42);

  will-change: width, height, border-radius, transform;

}



.viz-cover-video-frame::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  opacity: 0.18;

  mix-blend-mode: screen;

  background: repeating-linear-gradient(

    to bottom,

    rgba(255, 255, 255, 0.16) 0px,

    rgba(255, 255, 255, 0.16) 1px,

    transparent 1px,

    transparent 7px

  );

  transform: translateY(-100%);

}



.viz-cover-video-frame::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  opacity: 0.35;

  background:

    linear-gradient(

      110deg,

      transparent 0%,

      transparent 42%,

      rgba(255, 214, 243, 0.18) 50%,

      transparent 58%,

      transparent 100%

    );

  transform: translateX(-120%);

}



.viz-cover-video {

  position: relative;

  z-index: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transform: scale(1);

  will-change: transform;

}
.viz-cover-dark-overlay {

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background: rgba(0, 0, 0, 0);

}



.viz-cover-frame-label {

  position: absolute;

  left: var(--space-sm);

  right: var(--space-sm);

  z-index: 2;

  display: flex;

  justify-content: space-between;

  font-family: var(--mono);

  font-size: 11px;

  line-height: 1;

  text-transform: uppercase;

  color: var(--white);

  mix-blend-mode: difference;

  pointer-events: none;

  will-change: transform, opacity;

}



.viz-cover-frame-label-top {

  top: var(--space-sm);

}



.viz-cover-frame-label-bottom {

  bottom: var(--space-sm);

}



.viz-cover-overlay {

  position: absolute;

  inset: 0;

  z-index: 3;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  color: var(--white);

  text-align: center;

  padding: var(--page-padding);

  clip-path: inset(100% 0 0 0);

  opacity: 0;

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

}

.viz-cover-overlay-inner {

  width: min(980px, 92vw);

  display: flex;

  flex-direction: column;

  align-items: center;

  color: var(--white);

}



.viz-cover-overlay-title {

  margin: 0;

  font-family: var(--instrument);

  font-size: clamp(3.75rem, 11vw, 10rem);

  font-style: italic;

  font-weight: 400;

  line-height: 0.78;

  letter-spacing: -0.06em;

  color: var(--white);

  text-transform: uppercase;

}



.viz-cover-overlay-text {

  width: min(680px, 90vw);

  margin: var(--space-md) auto 0;

  font-family: var(--roboto);

  font-size: clamp(1rem, 1.3vw, 1.25rem);

  line-height: 1.35;

  color: var(--additional);

}

.viz-cover-menu {

  margin-top: var(--space-md);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: var(--space-sm);

  font-family: var(--mono);

  font-size: clamp(0.75rem, 1vw, 0.9rem);

  text-transform: uppercase;

  color: var(--white);

}
.viz-cover-menu a {

  color: inherit;

  text-decoration: none;

  transition: color 0.3s var(--cubic);

}



.viz-cover-menu a:hover {

  color: var(--main);

}

.viz-cover-menu span {

  display: inline-flex;

  color: var(--main);

  opacity: 0.8;

}



.viz-cover-progress {

  position: absolute;

  left: var(--page-padding);

  right: var(--page-padding);

  bottom: var(--space-md);

  z-index: 7;

  height: 1px;

  background: rgba(255, 255, 255, 0.16);

  overflow: hidden;

}



.viz-cover-progress-bar {

  width: 0%;

  height: 100%;

  background: var(--main);

  transform-origin: left center;

}
.viz-cover-bottom-note {

  position: absolute;

  right: var(--page-padding);

  bottom: calc(var(--space-md) + 12px);

  z-index: 7;

  display: flex;

  align-items: center;

  gap: var(--space-xs);

  font-family: var(--mono);

  font-size: clamp(0.75rem, 1vw, 0.9rem);

  text-transform: uppercase;

  color: var(--additional);

  pointer-events: none;

  will-change: transform, opacity;

}

.viz-after-cover {

  min-height: 100vh;

  padding: var(--page-padding);

  display: flex;

  flex-direction: column;

  justify-content: center;

  background: var(--additional);

  color: var(--noir);

}
.viz-after-cover p {

  margin: 0 0 var(--space-sm);

  font-family: var(--mono);

  text-transform: uppercase;

}
.viz-after-cover h2 {

  margin: 0;

  font-family: var(--instrument);

  font-size: clamp(3rem, 10vw, 10rem);

  font-style: italic;

  line-height: 0.85;

}
@media (max-width: 767px) {
  :root {
    --space-xs: 6px;

    --space-sm: 12px;

    --space-md: 18px;

    --space-lg: 36px;
  }

  .viz-cover-scroll {

    height: 420vh;

  }

  .viz-cover-prelude {

    top: var(--space-sm);

    left: var(--space-sm);

    right: var(--space-sm);

    font-size: 11px;

  }

  .viz-cover-sidecopy {

    position: absolute;

    left: var(--space-sm);

    right: var(--space-sm);

    z-index: 5;

    width: auto;

    min-width: unset;

    max-width: calc(100vw - var(--space-sm) * 2);

    gap: var(--space-xs);

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    font-size: 10px;

    line-height: 1.1;

    text-align: center;

    transform: none;

    transform-origin: center center;

  }

  .viz-cover-sidecopy-left {

    top: calc(var(--space-sm) + 28px);

    bottom: auto;

    left: var(--space-sm);

    right: var(--space-sm);

    transform: none;

  }

  .viz-cover-overlay-title {

  font-size: clamp(2rem, 8vw, 8rem);

    letter-spacing: 0;

    padding-top: 5px;

    padding-bottom: 5px

}



  .viz-cover-sidecopy-right {

    top: auto;

    bottom: calc(var(--space-sm) + 28px);

    left: var(--space-sm);

    right: var(--space-sm);

    transform: none;

  }

  .viz-cover-center-copy {

    width: calc(100vw - var(--space-md) * 2);

  }

  .viz-cover-intro-title {

    font-size: clamp(2.1rem, 12vw, 4.8rem);

    letter-spacing: 0;

    padding-top: 5px;

    padding-bottom: 5px

  }

  .viz-cover-intro-text {

    font-size: clamp(0.875rem, 3.5vw, 1rem);

  }

  .viz-cover-video-frame {

    width: 210px;

    height: 210px;

  }

  .viz-cover-overlay {

    padding: var(--space-md);

  }

  .viz-cover-overlay-text {

    font-size: clamp(0.95rem, 3.8vw, 1.05rem);

  }

  .viz-cover-menu {

    gap: var(--space-xs);

    font-size: 11px;

  }

  .viz-cover-progress {

    left: var(--space-sm);

    right: var(--space-sm);

    bottom: var(--space-sm);

  }

  .viz-cover-bottom-note {

    display: none;

  }


}