/* ===== RESET & BASE ===== */
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --c-pink: rgb(44, 76, 238);
}

@font-face {
  font-family: 'ProximaV';
  src: url('ProximaVara.woff2') format('woff2'),
    url('ProximaVara.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 50% 200%;
  font-style: normal;
}

@font-face {
  font-family: 'ProximaV';
  src: url('ProximaVara.woff2') format('woff2'),
    url('ProximaVara.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 50% 200%;
  font-style: italic;
}

@font-face {
  font-family: 'MontserratV';
  src: url('Montserrat-VariableFont_wght.woff2') format('woff2'),
    url('Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 50% 200%;
  font-style: normal;
}

@font-face {
  font-family: 'Osw';
  src: url('Oswald-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 50% 200%;
  font-style: normal;
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: ProximaV, sans-serif;
}

.wr.size250px {
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  background: #64e;
}

.wr:before,
.wr:after {
  display: none;
}

i {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  font-style: normal;
}

i:before,
i:after {
  display: block;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* ─── Колонки ─────────────────────────────────── */
.stripe-column {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ─── Псевдоэлемент :before — градиент ───────── */
.stripe-column::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient, linear-gradient(to bottom, #0f0b6a, #2c4cee));
  pointer-events: none;
  z-index: 1;
  -webkit-animation: 12s ScaleVV cubic-bezier(.55, .06, .68, .19) infinite alternate;
  animation: 12s ScaleVV cubic-bezier(.55, .06, .68, .19) infinite alternate;
  -webkit-animation-delay: var(--delay, 0s);
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity, -webkit-filter, filter;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ─── Нечётные колонки — тени ─────────────────── */
.stripe-column--odd {
  position: relative;
  z-index: 2;
  -webkit-box-shadow: -3px 0 6px rgba(255, 255, 255, 0.1),
    3px 0 6px rgba(0, 0, 0, 0.1),
    1px 0 6px rgba(255, 255, 255, 0.1) inset,
    -3px 0 6px rgba(0, 0, 0, 0.1) inset;
  box-shadow: -3px 0 6px rgba(255, 255, 255, 0.1),
    3px 0 6px rgba(0, 0, 0, 0.1),
    1px 0 6px rgba(255, 255, 255, 0.1) inset,
    -3px 0 6px rgba(0, 0, 0, 0.1) inset;
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ─── Центральная колонка ────────────────────── */
.stripe-column--center {
  position: relative;
  z-index: 0;
  opacity: 1 !important;
}

/* ─── Контейнер градиента ────────────────────── */
.gradient-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#gradient-stripes-bg {
  position: relative;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: stretch;
  align-items: stretch;
  background: -webkit-linear-gradient(bottom, rgb(44, 76, 238) 0%, rgb(231, 95, 195) 50%, rgb(44, 76, 238) 100%);
  background: linear-gradient(to bottom, rgb(44, 76, 238) 0%, rgb(231, 95, 195) 50%, rgb(44, 76, 238) 100%);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ─── Анимация масштабирования ────────────────── */
@-webkit-keyframes ScaleVV {

  0%,
  60%,
  100% {
    opacity: 1;
    -webkit-filter: saturate(1);
    filter: saturate(1);
  }

  30% {
    -webkit-transform: scale(1, 1.25);
    transform: scale(1, 1.25);
    opacity: 0.6;
  }

  45% {
    opacity: 0;
    -webkit-filter: saturate(2);
    filter: saturate(2);
  }
}

@keyframes ScaleVV {

  0%,
  60%,
  100% {
    opacity: 1;
    -webkit-filter: saturate(1);
    filter: saturate(1);
  }

  30% {
    -webkit-transform: scale(1, 1.25);
    transform: scale(1, 1.25);
    opacity: 0.6;
  }

  45% {
    opacity: 0;
    -webkit-filter: saturate(2);
    filter: saturate(2);
  }
}

.cntnt {
  max-width: 980px;
  position: relative;
  z-index: 50;
  height: 250px;
  margin: 0 auto;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.titleBlock {
  position: absolute;
  right: 16px;
  top: 16px;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  width: 160px;
  z-index: 50;
  color: #fff;
  font-family: ProximaV;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.titleBlock svg {
  display: block;
  max-width: 100%;
  position: relative;
  height: auto;
  width: 100%;
  -webkit-filter: drop-shadow(2px 2px 1px rgba(255, 0, 255, 0.8));
  filter: drop-shadow(2px 2px 1px rgba(255, 0, 255, 0.8));
}

.titleBlock .title {
  font-size: 26px
}

.titleBlock .main {
  font-weight: 800;
  font-size: 1em;
  line-height: 1em;
  display: block;
}

.titleBlock .supTitle {
  text-transform: uppercase;
  font-size: 0.5em;
  white-space: nowrap;
  font-weight: 700;
  line-height: 1em;
  letter-spacing: .2em;
  display: block;
  margin: 1em auto 0
}

.bgvid {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  z-index: 10;
  max-width: 100vw;
  overflow: hidden;
  -webkit-filter: saturate(1);
  filter: saturate(1);
  width: 100%;
  height: 100%;
  will-change: transform, opacity, -webkit-clip-path, clip-path;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bgvid:before {
  background: -webkit-linear-gradient(15deg, rgba(44, 76, 238, 0.7) 0%, rgba(231, 95, 195, .5) 25%, rgba(231, 95, 195, .5) 50%, rgba(44, 76, 238, 0.8) 80%);
  background: linear-gradient(15deg, rgba(44, 76, 238, 0.7) 0%, rgba(231, 95, 195, .5) 25%, rgba(231, 95, 195, .5) 50%, rgba(44, 76, 238, 0.8) 80%);
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  will-change: transform, opacity, -webkit-backdrop-filter, backdrop-filter;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bgvid video {
  display: block;
  height: 250px;
  width: auto;
  position: absolute;
  min-height: 100%;
  min-width: 100%;
  right: 50%;
  top: 50%;

  transform: translate(50%, -50%);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  object-fit: cover;
}

.projectTitle {
  z-index: 50;
  position: absolute;
  left: -3px;
  top: 50%;
  width: 250px;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  font-weight: 800;
  -webkit-transform: rotate(-90deg) translate(-50%, 0);
  transform: rotate(-90deg) translate(-50%, 0);
  white-space: nowrap;
  background: -webkit-linear-gradient(left, rgb(44, 76, 238) 0%, rgb(231, 95, 195) 50%, rgb(44, 76, 238) 100%);
  background: linear-gradient(to left, rgb(44, 76, 238) 0%, rgb(231, 95, 195) 50%, rgb(44, 76, 238) 100%);
  height: 32px;
  line-height: 32px;
  font-size: 26px;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  white-space: nowrap;
  text-shadow: 1px 1px 6px rgba(0, 0, 0, .25);
  font-family: ProximaV;
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  white-space: nowrap;
}

.bgvid {
  -webkit-transition: all 1s ease-in-out 1s;
  transition: all 1s ease-in-out 1s;
  -webkit-clip-path: polygon(0% 0%, 0% 100%,
      0% 100%, 0% 0%,

      5% 0%, 5% 100%,
      5% 100%, 5% 0%,

      10% 0%, 10% 100%,
      10% 100%, 10% 0%,

      15% 0%, 15% 100%,
      15% 100%, 15% 0%,

      20% 0%, 20% 100%,
      20% 100%, 20% 0%,

      25% 0%, 25% 100%,
      25% 100%, 25% 0%,

      30% 0%, 30% 100%,
      30% 100%, 30% 0%,

      35% 0%, 35% 100%,
      35% 100%, 35% 0%,

      40% 0%, 40% 100%,
      40% 100%, 40% 0%,

      45% 0%, 45% 100%,
      45% 100%, 45% 0%,

      50% 0%, 50% 100%,
      50% 100%, 50% 0%,

      55% 0%, 55% 100%,
      55% 100%, 55% 0%,

      60% 0%, 60% 100%,
      60% 100%, 60% 0%,

      65% 0%, 65% 100%,
      65% 100%, 65% 0%,

      70% 0%, 70% 100%,
      70% 100%, 70% 0%,

      75% 0%, 75% 100%,
      75% 100%, 75% 0%,

      80% 0%, 80% 100%,
      80% 100%, 80% 0%,

      85% 0%, 85% 100%,
      85% 100%, 85% 0%,

      90% 0%, 90% 100%,
      90% 100%, 90% 0%,

      95% 0%, 95% 100%,
      95% 100%, 95% 0%,

      100% 0%, 100% 0%);
  clip-path: polygon(0% 0%, 0% 100%,
      0% 100%, 0% 0%,

      5% 0%, 5% 100%,
      5% 100%, 5% 0%,

      10% 0%, 10% 100%,
      10% 100%, 10% 0%,

      15% 0%, 15% 100%,
      15% 100%, 15% 0%,

      20% 0%, 20% 100%,
      20% 100%, 20% 0%,

      25% 0%, 25% 100%,
      25% 100%, 25% 0%,

      30% 0%, 30% 100%,
      30% 100%, 30% 0%,

      35% 0%, 35% 100%,
      35% 100%, 35% 0%,

      40% 0%, 40% 100%,
      40% 100%, 40% 0%,

      45% 0%, 45% 100%,
      45% 100%, 45% 0%,

      50% 0%, 50% 100%,
      50% 100%, 50% 0%,

      55% 0%, 55% 100%,
      55% 100%, 55% 0%,

      60% 0%, 60% 100%,
      60% 100%, 60% 0%,

      65% 0%, 65% 100%,
      65% 100%, 65% 0%,

      70% 0%, 70% 100%,
      70% 100%, 70% 0%,

      75% 0%, 75% 100%,
      75% 100%, 75% 0%,

      80% 0%, 80% 100%,
      80% 100%, 80% 0%,

      85% 0%, 85% 100%,
      85% 100%, 85% 0%,

      90% 0%, 90% 100%,
      90% 100%, 90% 0%,

      95% 0%, 95% 100%,
      95% 100%, 95% 0%,

      100% 0%, 100% 0%);
  will-change: transform, -webkit-clip-path, clip-path;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


.stage0 .bgvid:before {
  opacity: 0
}

.stage0 .bgvid,
.stage3 .bgvid,
.stage4 .bgvid {
  -webkit-transition: all 1s ease-in-out 1s;
  transition: all 1s ease-in-out 1s;
  -webkit-clip-path: polygon(0% 0%, 0% 100%,
      5% 100%, 5% 0%,

      5% 0%, 5% 100%,
      10% 100%, 10% 0%,

      10% 0%, 10% 100%,
      15% 100%, 15% 0%,

      15% 0%, 15% 100%,
      20% 100%, 20% 0%,

      20% 0%, 20% 100%,
      25% 100%, 25% 0%,

      25% 0%, 25% 100%,
      30% 100%, 30% 0%,

      30% 0%, 30% 100%,
      35% 100%, 35% 0%,

      35% 0%, 35% 100%,
      40% 100%, 40% 0%,

      40% 0%, 40% 100%,
      45% 100%, 45% 0%,

      45% 0%, 45% 100%,
      50% 100%, 50% 0%,

      50% 0%, 50% 100%,
      55% 100%, 55% 0%,

      55% 0%, 55% 100%,
      60% 100%, 60% 0%,

      60% 0%, 60% 100%,
      65% 100%, 65% 0%,

      65% 0%, 65% 100%,
      70% 100%, 70% 0%,

      70% 0%, 70% 100%,
      75% 100%, 75% 0%,

      75% 0%, 75% 100%,
      80% 100%, 80% 0%,

      80% 0%, 80% 100%,
      85% 100%, 85% 0%,

      85% 0%, 85% 100%,
      90% 100%, 90% 0%,

      90% 0%, 90% 100%,
      95% 100%, 95% 0%,

      95% 0%, 95% 100%,
      100% 100%, 100% 0%,

      100% 0%, 100% 0%);
  clip-path: polygon(0% 0%, 0% 100%,
      5% 100%, 5% 0%,

      5% 0%, 5% 100%,
      10% 100%, 10% 0%,

      10% 0%, 10% 100%,
      15% 100%, 15% 0%,

      15% 0%, 15% 100%,
      20% 100%, 20% 0%,

      20% 0%, 20% 100%,
      25% 100%, 25% 0%,

      25% 0%, 25% 100%,
      30% 100%, 30% 0%,

      30% 0%, 30% 100%,
      35% 100%, 35% 0%,

      35% 0%, 35% 100%,
      40% 100%, 40% 0%,

      40% 0%, 40% 100%,
      45% 100%, 45% 0%,

      45% 0%, 45% 100%,
      50% 100%, 50% 0%,

      50% 0%, 50% 100%,
      55% 100%, 55% 0%,

      55% 0%, 55% 100%,
      60% 100%, 60% 0%,

      60% 0%, 60% 100%,
      65% 100%, 65% 0%,

      65% 0%, 65% 100%,
      70% 100%, 70% 0%,

      70% 0%, 70% 100%,
      75% 100%, 75% 0%,

      75% 0%, 75% 100%,
      80% 100%, 80% 0%,

      80% 0%, 80% 100%,
      85% 100%, 85% 0%,

      85% 0%, 85% 100%,
      90% 100%, 90% 0%,

      90% 0%, 90% 100%,
      95% 100%, 95% 0%,

      95% 0%, 95% 100%,
      100% 100%, 100% 0%,

      100% 0%, 100% 0%);
}

.textlines {
  position: absolute;
  left: 54px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  z-index: 50;
  color: #fff;
  max-width: calc(100% - 240px);
  height: 100%;
  width: 100%;
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.textlines span {
  display: inline-block;
}

.textlines .line {
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  top: 50%;
  -webkit-transform: translate(0, calc(-50% + 32px));
  transform: translate(0, calc(-50% + 32px));
  font-size: 32px;
  font-family: ProximaV;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  opacity: 0;
  visibility: hidden;
  line-height: 1.35em;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
  will-change: transform, opacity, visibility;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;


}

.stage1 .line1,
.stage2 .line2,
.stage3 .line3,
.stage4 .line3 {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);

  -webkit-transition: all .5s ease-in-out .5s;
  transition: all .5s ease-in-out .5s;

}

.textline g {
  white-space: nowrap;
  background-color: transparent;
  text-shadow: 0 0 0 rgba(0, 0, 0, 0);

  display: inline-block;

  -webkit-box-shadow: 0 0 0 rgb(255, 255, 255) inset;
  box-shadow: 0 0 0 rgb(255, 255, 255) inset;
  -webkit-transition: all .5s ease-in-out .35s;
  transition: all .5s ease-in-out .35s;
  will-change: transform, -webkit-box-shadow, box-shadow;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

}

.textline b {
  font-weight: 600;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.textline .g1 b {
  font-weight: 800
}

.g1,
.g2,
.g3,
.g4 {

  color: #252525;
  text-transform: uppercase;
  font-size: .7em;
  padding: .05em .2em;
  line-height: 1.2em
}

.stage1 .textline .g1,
.stage2 .textline .g2,
.stage3 .textline .g3,
.stage4 .textline .g3 {
  -webkit-box-shadow: 0 -32px 0 rgb(255, 255, 255) inset;
  box-shadow: 0 -32px 0 rgb(255, 255, 255) inset;
  -webkit-transition: all .75s ease-in-out .75s;
  transition: all .75s cubic-bezier(.68, -0.55, .27, 1.55) .75s;
}

.g2 b,
.g3 b {
  background: -webkit-linear-gradient(bottom, rgb(44, 76, 238) 0%, rgb(231, 95, 195) 25%, rgb(231, 95, 195) 100%);
  background: linear-gradient(to bottom, rgb(44, 76, 238) 0%, rgb(231, 95, 195) 25%, rgb(231, 95, 195) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 650;
}

@-webkit-keyframes wacky {

  0%,
  20%,
  80%,
  100% {
    font-variation-settings: "wght" 800, "wdth" 200;
  }

  50% {
    font-variation-settings: "wght" 100, "wdth" 200;
  }
}

@keyframes wacky {

  0%,
  20%,
  80%,
  100% {
    font-variation-settings: "wght" 800, "wdth" 200;
  }

  50% {
    font-variation-settings: "wght" 100, "wdth" 200;
  }
}

.stage1 .projectTitle .pt,
.stage3 .projectTitle .pt {
  -webkit-animation: 2s wacky ease-in-out;
  animation: 2s wacky ease-in-out;
}

.stage1 .projectTitle .pt.pt-second,
.stage3 .projectTitle .pt.pt-second {
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
}

.stage4 .bgvid:before {
  -webkit-backdrop-filter: contrast(1) blur(6px) saturate(2);
  backdrop-filter: contrast(1) blur(6px) saturate(2);
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.stage3 .bgvid::before {
  opacity: 0;
}

.stage3 .textline {
  backdrop-filter: blur(16px)
}

.link1 {
  display: block;
  position: absolute;
  z-index: 999;
  color: transparent;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.textline {
  display: block;
  clear: both;
  float: left;
}

.adinfo {
  width: auto;
  padding: 0.5em 1em;
  text-align: center;
  backdrop-filter: blur(3px);
  white-space: nowrap;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  color: #fff;
  font-weight: 400;
  font-size: 9px;
  position: absolute;
  bottom: 0;

  text-transform: uppercase;
  z-index: 58;
  font-family: 'Osw', 'Arial Narrow', 'Helvetica Neue', sans-serif;
}

.age {
  position: absolute;
  z-index: 51;
  left: 54px;
  top: 0;
  color: #fff;
  font-size: 9px;
  text-align: center;
  width: 20px;
  top: 16px;
  height: 16px;
  border: 1px solid;
  line-height: 14px;
}

.erid b {
  font-weight: 400;
  text-transform: none
}


@media (max-width:640px) {
  .textlines .line {
    font-size: 24px;
    line-height: 1.35em
  }

  .textlines,
  .age {
    left: 40px
  }

}

@media (max-width:520px) {
  .projectTitle {
    font-size: 22px
  }

  .textlines .line {
    font-size: 18px
  }

  .titleBlock {
    width: 80px
  }

  .titleBlock .title {
    font-size: 14px;
  }

  .textlines {
    max-width: calc(100% - 48px)
  }

  .textlines .line {
    top: 60%;
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%);
  }

  .stage1 .line1,
  .stage2 .line2,
  .stage3 .line3,
  .stage4 .line3 {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(0, 0%);
    transform: translate(0, 0%);
    top: 60%;

  }

  .textline g {
    padding: 0 .2em;
    line-height: 1.25em;
  }
}