:root {
  --aski-background: #202120;
  --aski-color: #f0efec;
  --vozim-pesok-background: #dedbd4;
  --vozim-pesok-color: #202120;
  --iskra-background: #a8aaa5;
  --iskra-color: #202120;
}

@property --status-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes status-border-flow {
  to {
    --status-border-angle: 360deg;
  }
}

@keyframes project-element-reveal {
  from {
    opacity: 0;
    translate: 0 clamp(24px, 4vh, 44px);
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

body.project-motion-ready .project-reveal {
  opacity: 0;
  translate: 0 clamp(24px, 4vh, 44px);
}

body.project-motion-ready .project-screen.is-project-visible .project-reveal {
  animation: project-element-reveal 840ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.project-motion-ready .project-screen.is-project-visible :is(
    .aski__title,
    .vozim__title,
    .iskra__title
  ) {
  animation-delay: 70ms;
}

body.project-motion-ready .project-screen.is-project-visible :is(
    .project-number,
    .aski__description,
    .vozim__description,
    .iskra__description
  ) {
  animation-delay: 180ms;
}

body.project-motion-ready .project-screen.is-project-visible .project-open-hitarea {
  animation-delay: 240ms;
}

.hero {
  position: sticky;
  z-index: 1;
  top: 0;
}

.project-scroll-anchor {
  width: 0;
  height: 0;
  pointer-events: none;
}

.project-screen {
  position: sticky;
  z-index: 2;
  top: 0;
  display: grid;
  min-height: 100svh;
  min-height: 100dvh;
  padding: var(--header-top) var(--edge) 3.2%;
  overflow: hidden;
  grid-template-rows: auto 1fr auto;
  scroll-margin-top: 0;
}

.project-open-hitarea {
  position: absolute;
  z-index: 5;
  top: 16%;
  left: 26%;
  width: 48%;
  height: 72%;
  padding: 0;
  border: 0;
  border-radius: min(2vw, 3vh);
  background: transparent;
  cursor: pointer;
}

.project-open-hitarea:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.72);
  outline-offset: -8px;
}

.project-open-label {
  display: none;
}

.project-number {
  display: none;
}

@media (max-width: 600px) {
  .project-open-hitarea {
    top: auto;
    right: calc(
      var(--mobile-project-info-edge, var(--edge)) -
      var(--mobile-project-button-optical-shift, 0px)
    );
    bottom: var(--mobile-project-info-bottom, 44px);
    left: auto;
    display: flex;
    width: var(--mobile-project-button-width, 148px);
    min-width: 0;
    height: var(--mobile-project-info-height, 52px);
    padding: 0 clamp(12px, 3.5vw, 18px);
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 999px;
    color: #f5f4f1;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.055)
    );
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 10px 28px rgba(10, 11, 14, 0.13);
    -webkit-backdrop-filter: blur(16px) saturate(1.25);
    backdrop-filter: blur(16px) saturate(1.25);
  }

  .project-open-hitarea:active {
    transform: scale(0.97);
  }

  .project-open-hitarea:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
  }

  .project-open-label {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    font-family: "Onest", Arial, sans-serif;
    font-size: clamp(10px, 3vw, 12px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.025em;
    text-align: center;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.34);
    white-space: nowrap;
  }

}

.project-screen--aski {
  --aski-edge: min(4.83vw, 8.55vh);
  --aski-mockup-shift-x: 0px;
  --aski-mockup-shift-y: 0px;

  color: var(--aski-color);
  background: var(--aski-background);
}

.project-screen--aski {
  display: block;
  padding: 0;
  isolation: isolate;
}

.aski__background,
.aski__fade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.aski__background {
  z-index: -3;
  object-fit: cover;
  object-position: center;
}

.aski__fade {
  z-index: -2;
  background:
    linear-gradient(
      180deg,
      rgba(18, 19, 22, 0) 46%,
      rgba(18, 19, 22, 0.22) 72%,
      rgba(14, 15, 18, 0.72) 100%
    ),
    rgba(58, 59, 63, 0.36);
  backdrop-filter: saturate(0.9);
}

.aski__mockups {
  position: absolute;
  z-index: 1;
  top: 61%;
  left: 51.6%;
  width: auto;
  max-width: none;
  height: 124%;
  transform: translate(
    calc(-50% + var(--aski-mockup-shift-x)),
    calc(-50% + var(--aski-mockup-shift-y))
  );
  filter: drop-shadow(0 2.2vh 2.8vh rgba(4, 5, 10, 0.28));
  pointer-events: none;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.project-screen--aski.is-mockup-active .aski__mockups {
  transition-duration: 110ms;
  transition-timing-function: ease-out;
}

.aski__title,
.aski__year,
.aski__description,
.aski__status,
.aski__counter,
.aski__type {
  position: absolute;
  z-index: 2;
  margin: 0;
}

.aski__title {
  top: 11.2%;
  left: var(--aski-edge);
  font-family: "Zalando Sans Expanded", Arial, sans-serif;
  font-size: min(3.55vw, 6.3vh);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: 0.008em;
}

.aski__year,
.aski__counter {
  top: 46.9%;
  display: flex;
  flex-direction: column;
  gap: 0.18em;
  font-family: "Zalando Sans Expanded", Arial, sans-serif;
  font-size: min(1.28vw, 2.27vh);
  font-weight: 500;
  line-height: 0.95;
}

.aski__year {
  left: var(--aski-edge);
}

.aski__description,
.aski__type {
  bottom: 11.5%;
  font-size: min(1.28vw, 2.27vh);
  line-height: 1.15;
}

.aski__description {
  left: var(--aski-edge);
}

@media (min-width: 601px) {
  .aski__description,
  .aski__type,
  .vozim__description,
  .vozim__type,
  .iskra__description,
  .iskra__type {
    opacity: 0.7;
  }
}

.aski__status {
  top: 11.5%;
  right: var(--aski-edge);
  display: flex;
  padding: min(0.82vw, 1.45vh) min(1.45vw, 2.58vh);
  align-items: center;
  gap: min(0.7vw, 1.24vh);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0.07)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 min(0.62vw, 1.1vh) min(1.88vw, 3.35vh) rgba(3, 6, 15, 0.16);
  font-size: min(1.16vw, 2.06vh);
  line-height: 1;
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
}

.aski__status-icon {
  display: block;
  width: min(1.36vw, 2.42vh);
  height: auto;
}

.aski__counter {
  right: var(--aski-edge);
  align-items: flex-end;
  text-align: right;
}

.aski__counter strong {
  font-weight: 500;
}

.aski__counter span {
  opacity: 0.34;
}

.aski__type {
  right: var(--aski-edge);
  text-align: right;
}

.project-screen--vozim-pesok {
  --vozim-edge: min(4.83vw, 8.55vh);

  z-index: 3;
  display: block;
  padding: 0;
  color: #f0efec;
  background: #36120d;
  isolation: isolate;
}

.vozim__background,
.vozim__fade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vozim__background {
  z-index: -3;
  object-fit: cover;
  object-position: center;
}

.vozim__fade {
  z-index: -2;
  background:
    linear-gradient(
      180deg,
      rgba(31, 15, 12, 0) 46%,
      rgba(31, 15, 12, 0.22) 72%,
      rgba(24, 10, 8, 0.74) 100%
    ),
    rgba(31, 15, 12, 0.1);
}

.vozim__title,
.vozim__year,
.vozim__description,
.vozim__status,
.vozim__counter,
.vozim__type {
  position: absolute;
  z-index: 2;
  margin: 0;
}

.vozim__title {
  top: 11.2%;
  left: var(--vozim-edge);
  font-family: "Zalando Sans Expanded", Arial, sans-serif;
  font-size: min(3.55vw, 6.3vh);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: 0.008em;
}

.vozim__year,
.vozim__counter {
  top: 46.9%;
  display: flex;
  flex-direction: column;
  gap: 0.18em;
  font-family: "Zalando Sans Expanded", Arial, sans-serif;
  font-size: min(1.28vw, 2.27vh);
  font-weight: 500;
  line-height: 0.95;
}

.vozim__year {
  left: var(--vozim-edge);
}

.vozim__description,
.vozim__type {
  bottom: 11.5%;
  font-size: min(1.28vw, 2.27vh);
  line-height: 1.15;
}

.vozim__description {
  left: var(--vozim-edge);
}

.vozim__status {
  top: 11.5%;
  right: var(--vozim-edge);
  display: flex;
  padding: min(0.82vw, 1.45vh) min(1.45vw, 2.58vh);
  align-items: center;
  gap: min(0.7vw, 1.24vh);
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.08)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 min(0.62vw, 1.1vh) min(1.88vw, 3.35vh) rgba(48, 14, 6, 0.16);
  font-size: min(1.16vw, 2.06vh);
  line-height: 1;
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
}

.vozim__status-icon {
  display: block;
  width: min(1.36vw, 2.42vh);
  height: auto;
}

.vozim__counter {
  right: var(--vozim-edge);
  align-items: flex-end;
  text-align: right;
}

.vozim__counter strong {
  font-weight: 500;
}

.vozim__counter span {
  opacity: 0.34;
}

.vozim__type {
  right: var(--vozim-edge);
  text-align: right;
}

.project-screen--iskra {
  --iskra-edge: min(4.83vw, 8.55vh);

  z-index: 4;
  display: block;
  padding: 0;
  color: #f0efec;
  background: #949594;
  isolation: isolate;
}

.iskra__background,
.iskra__fade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.iskra__background {
  z-index: -3;
  object-fit: cover;
  object-position: center;
}

.iskra__fade {
  z-index: -2;
  background:
    linear-gradient(
      180deg,
      rgba(31, 32, 31, 0) 46%,
      rgba(31, 32, 31, 0.2) 72%,
      rgba(20, 22, 21, 0.7) 100%
    ),
    rgba(43, 44, 43, 0.12);
}

.iskra__title,
.iskra__year,
.iskra__description,
.iskra__status,
.iskra__counter,
.iskra__type {
  position: absolute;
  z-index: 2;
  margin: 0;
}

.iskra__title {
  top: 11.2%;
  left: var(--iskra-edge);
  display: flex;
  flex-direction: column;
  gap: min(0.72vw, 1.28vh);
  font-family: "Zalando Sans Expanded", Arial, sans-serif;
  font-size: min(3.55vw, 6.3vh);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.008em;
}

.iskra__title span:first-child {
  font-size: 0.38em;
  line-height: 1;
  letter-spacing: -0.02em;
  opacity: 0.82;
}

.iskra__year,
.iskra__counter {
  top: 48.2%;
  display: flex;
  flex-direction: column;
  gap: 0.18em;
  font-family: "Zalando Sans Expanded", Arial, sans-serif;
  font-size: min(1.28vw, 2.27vh);
  font-weight: 500;
  line-height: 0.95;
}

.iskra__year {
  left: var(--iskra-edge);
}

.iskra__description,
.iskra__type {
  bottom: 10.5%;
  font-size: min(1.28vw, 2.27vh);
  line-height: 1.15;
}

.iskra__description {
  left: var(--iskra-edge);
}

.iskra__status {
  top: 11.5%;
  right: var(--iskra-edge);
  display: flex;
  padding: min(0.82vw, 1.45vh) min(1.45vw, 2.58vh);
  align-items: center;
  gap: min(0.7vw, 1.24vh);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0.08)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 min(0.62vw, 1.1vh) min(1.88vw, 3.35vh) rgba(35, 36, 35, 0.14);
  font-size: min(1.16vw, 2.06vh);
  line-height: 1;
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

.iskra__status-icon {
  display: block;
  width: min(1.36vw, 2.42vh);
  height: auto;
}

.aski__status-icon,
.vozim__status-icon,
.iskra__status-icon {
  opacity: 0.9;
}

.iskra__counter {
  right: var(--iskra-edge);
  align-items: flex-end;
  text-align: right;
}

.iskra__counter strong {
  font-weight: 500;
}

.iskra__counter span {
  opacity: 0.34;
}

.iskra__type {
  right: var(--iskra-edge);
  text-align: right;
}

.aski__status,
.vozim__status,
.iskra__status {
  border-color: rgba(255, 255, 255, 0.2);
}

.aski__status::before,
.vozim__status::before,
.iskra__status::before {
  position: absolute;
  z-index: 2;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--status-border-angle),
    rgba(255, 255, 255, 0.18) 0deg,
    rgba(255, 255, 255, 0.28) 30deg,
    rgba(255, 255, 255, 0.9) 60deg,
    rgba(255, 255, 255, 0.28) 90deg,
    rgba(255, 255, 255, 0.18) 120deg,
    rgba(255, 255, 255, 0.18) 180deg,
    rgba(255, 255, 255, 0.28) 210deg,
    rgba(255, 255, 255, 0.9) 240deg,
    rgba(255, 255, 255, 0.28) 270deg,
    rgba(255, 255, 255, 0.18) 300deg,
    rgba(255, 255, 255, 0.18) 360deg
  );
  content: "";
  pointer-events: none;
  animation: status-border-flow 7.5s linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.project-screen__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

.project-screen__index,
.project-screen__content p {
  margin: 0;
  font-size: var(--copy-size);
  line-height: 1.2;
}

.project-screen__title {
  margin: 0;
  font-family: "Zalando Sans Expanded", Arial, sans-serif;
  font-size: min(10.043vw, 17.877vh);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: 0.008em;
  text-align: right;
}

.project-screen__content {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.project-screen__content p {
  max-width: 34ch;
  opacity: 0.58;
}

.project-screen__next {
  width: fit-content;
  color: inherit;
  font-size: var(--copy-size);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}

@media (max-width: 1199px) {
  .project-screen__title {
    font-size: clamp(76px, 10vw, 120px);
  }

  .aski__mockups {
    height: min(108%, 90vw);
  }
}

@media (min-width: 601px) and (max-width: 900px) and (min-height: 601px) {
  .project-screen--aski,
  .project-screen--vozim-pesok,
  .project-screen--iskra {
    --aski-edge: var(--edge);
    --vozim-edge: var(--edge);
    --iskra-edge: var(--edge);
  }

  .aski__title,
  .vozim__title,
  .iskra__title {
    top: 9.5%;
    font-size: clamp(42px, 6vw, 54px);
  }

  .aski__mockups {
    top: 56.5%;
    height: 94%;
  }

  .aski__status,
  .vozim__status,
  .iskra__status {
    top: 10%;
    padding: 11px 18px;
    gap: 9px;
    font-size: 15px;
  }

  .aski__status-icon,
  .vozim__status-icon,
  .iskra__status-icon {
    width: 19px;
  }

  .aski__year,
  .aski__counter,
  .vozim__year,
  .vozim__counter,
  .iskra__year,
  .iskra__counter {
    top: 46%;
    font-size: 16px;
  }

  .aski__description,
  .aski__type,
  .vozim__description,
  .vozim__type,
  .iskra__description,
  .iskra__type {
    bottom: 8%;
    font-size: 16px;
  }

}

@media (max-height: 600px) and (orientation: landscape) {
  .project-screen--aski,
  .project-screen--vozim-pesok,
  .project-screen--iskra {
    --aski-edge: var(--edge);
    --vozim-edge: var(--edge);
    --iskra-edge: var(--edge);
  }

  .aski__title,
  .vozim__title,
  .iskra__title {
    top: 9%;
    font-size: clamp(30px, min(5.4vw, 9vh), 44px);
  }

  .iskra__title {
    gap: 5px;
  }

  .aski__status,
  .vozim__status,
  .iskra__status {
    top: 9%;
    padding: 8px 14px;
    gap: 7px;
    font-size: 13px;
  }

  .aski__status-icon,
  .vozim__status-icon,
  .iskra__status-icon {
    width: 16px;
  }

  .aski__mockups {
    top: 59.5%;
    height: 138%;
  }

  .aski__year,
  .aski__counter,
  .vozim__year,
  .vozim__counter,
  .iskra__year,
  .iskra__counter {
    top: 47%;
    font-size: 13px;
  }

  .aski__description,
  .aski__type,
  .vozim__description,
  .vozim__type,
  .iskra__description,
  .iskra__type {
    bottom: 7%;
    font-size: 13px;
  }

}

@media (max-width: 600px) {
  .project-screen {
    --mobile-project-info-edge: var(--edge);
    --mobile-project-button-optical-shift: clamp(
      0px,
      calc(70px - 16.667vw),
      4px
    );
    --mobile-project-top: clamp(42px, 5.5svh, 56px);
    --mobile-project-bottom: max(24px, env(safe-area-inset-bottom));
    --mobile-project-control-width: clamp(118px, 31vw, 128px);
    --mobile-project-control-height: 38px;
    --mobile-project-title-size: clamp(50px, 15.5vw, 72px);
    --mobile-project-info-height: clamp(48px, 6.5svh, 54px);
    --mobile-project-info-bottom: max(
      82px,
      calc(60px + env(safe-area-inset-bottom))
    );
    --mobile-project-number-width: 24px;
    --mobile-project-info-gap: clamp(10px, 3vw, 14px);
    --mobile-project-button-width: calc(
      50% - var(--mobile-project-info-edge) - var(--mobile-project-info-gap)
    );
    --mobile-project-title-bottom: calc(
      var(--mobile-project-info-bottom) + var(--mobile-project-info-height) + clamp(22px, 3svh, 30px)
    );

    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    padding-bottom: 0;
  }

  .project-screen__header {
    flex-direction: column;
    gap: 18px;
  }

  .project-screen__title {
    max-width: 100%;
    font-size: clamp(48px, 15.5vw, 76px);
    line-height: 0.92;
    overflow-wrap: anywhere;
    text-align: left;
  }

  .aski__fade {
    background:
      linear-gradient(
        180deg,
        rgba(18, 19, 22, 0) 18%,
        rgba(18, 19, 22, 0.5) 50%,
        rgba(14, 15, 18, 0.98) 100%
      ),
      rgba(58, 59, 63, 0.34);
  }

  .project-screen--aski::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(14, 15, 18, 0) 54%,
      rgba(14, 15, 18, 0.28) 66%,
      rgba(14, 15, 18, 0.82) 80%,
      rgba(14, 15, 18, 0.98) 100%
    );
    content: "";
    pointer-events: none;
  }

  .project-screen--aski,
  .project-screen--vozim-pesok,
  .project-screen--iskra {
    --aski-edge: var(--edge);
    --vozim-edge: var(--edge);
    --iskra-edge: var(--edge);
  }

  .aski__title,
  .vozim__title,
  .iskra__title {
    top: auto;
    right: auto;
    bottom: var(--mobile-project-title-bottom);
    left: var(--edge);
    width: calc(100% - (var(--edge) * 2));
    max-width: none;
    font-size: var(--mobile-project-title-size);
    line-height: 0.95;
    letter-spacing: -0.045em;
    text-align: left;
    transform: none;
  }

  .aski__title,
  .vozim__title {
    display: block;
    height: auto;
  }

  .iskra__title {
    height: auto;
    align-items: flex-start;
    justify-content: center;
  }

  .aski__status,
  .vozim__status,
  .iskra__status {
    top: var(--mobile-project-top);
    right: var(--edge);
    width: var(--mobile-project-control-width);
    height: var(--mobile-project-control-height);
    padding: 0 10px;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    white-space: nowrap;
  }

  .aski__status-icon,
  .vozim__status-icon,
  .iskra__status-icon {
    width: 16px;
  }

  .aski__year,
  .aski__counter,
  .vozim__year,
  .vozim__counter,
  .iskra__year,
  .iskra__counter {
    display: none;
  }

  .aski__type,
  .vozim__type,
  .iskra__type {
    right: auto;
    top: var(--mobile-project-top);
    bottom: auto;
    left: var(--edge);
    display: flex;
    width: calc(
      100% - (var(--edge) * 2) - var(--mobile-project-control-width) - 14px
    );
    height: var(--mobile-project-control-height);
    align-items: center;
    font-size: clamp(10px, 2.9vw, 12px);
    line-height: 1;
    text-align: left;
    opacity: 0.72;
    white-space: nowrap;
  }

  .aski__description,
  .vozim__description,
  .iskra__description {
    right: 50%;
    bottom: var(--mobile-project-info-bottom);
    left: calc(var(--mobile-project-info-edge) + var(--mobile-project-number-width) + 8px);
    display: flex;
    width: auto;
    height: var(--mobile-project-info-height);
    max-width: none;
    padding-right: var(--mobile-project-info-gap);
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    font-size: clamp(9px, 2.7vw, 11px);
    line-height: 1.15;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    transform: none;
  }

  .aski__description br,
  .vozim__description br,
  .iskra__description br {
    display: none;
  }

  .project-number {
    position: absolute;
    z-index: 2;
    bottom: var(--mobile-project-info-bottom);
    left: var(--mobile-project-info-edge);
    display: flex;
    width: var(--mobile-project-number-width);
    height: var(--mobile-project-info-height);
    align-items: center;
    font-family: "Zalando Sans Expanded", Arial, sans-serif;
    font-size: clamp(10px, 3vw, 12px);
    line-height: 1;
  }

  .project-screen--aski .project-number {
    color: #a970ff;
  }

  .project-screen--vozim-pesok .project-number {
    color: #ff8a52;
  }

  .project-screen--iskra .project-number {
    color: #41d5b4;
  }

  .aski__mockups {
    top: 53.5%;
    left: 48.5%;
    height: 84%;
    opacity: 0.85;
  }

  .vozim__background {
    object-position: 52% center;
  }

  .vozim__title {
    font-size: clamp(32px, 11vw, 46px);
    letter-spacing: -0.06em;
    white-space: nowrap;
  }

  .vozim__fade {
    background: linear-gradient(
      180deg,
      rgba(31, 15, 12, 0.06) 28%,
      rgba(31, 15, 12, 0.42) 56%,
      rgba(24, 10, 8, 0.96) 100%
    );
  }

  .iskra__background {
    object-position: center;
  }

  .iskra__fade {
    background: linear-gradient(
      180deg,
      rgba(31, 32, 31, 0.05) 28%,
      rgba(31, 32, 31, 0.4) 56%,
      rgba(20, 22, 21, 0.94) 100%
    );
  }

  .iskra__title {
    gap: 7px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .aski__status::before,
  .vozim__status::before,
  .iskra__status::before {
    --status-border-angle: 45deg;
    animation: none;
  }

  body.project-motion-ready .project-reveal,
  body.project-motion-ready .project-screen.is-project-visible .project-reveal {
    opacity: 1;
    translate: 0 0;
    animation: none;
  }
}

body.project-motion-static .project-reveal,
body.project-motion-static .project-screen.is-project-visible .project-reveal {
  opacity: 1;
  translate: 0 0;
  animation: none;
}