.Givvvetank {
width: 100%;

position: absolute;

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

--space-xs: 8px;

--space-sm: 16px;

--space-md: 24px;

--space-lg: 48px;

--noir: rgba(0, 149, 182, 0.82), transparent 50%;

--white: white;

--gray: #D3D3D3;

--main: #3F888F;

--additional: rgba(42, 100, 120);

--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.githubusercontent.com/BezrukovaEkaterina/7prac/refs/heads/main/gt6.avif");

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;

  }


}