@font-face {
  font-family: "Impact";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../font/impact.woff2") format("woff2");
}



:root {
  --color-bg: #efded5;
  --color-accent: #d45918;
  --color-white: #ffffff;
  --color-grey: #FFFFFFB2;
  --color-black: #000000;
  --color-hover: #799cb2;

  --intro-anim: .8s cubic-bezier(0.175, 0.885, 0.32, 1.275) .5s forwards;

  --viewport-unit: 1vh;
}
@supports (height: 100dvh) {
  :root {
    --viewport-unit: 1dvh;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-bg);
  font-family: "Impact";
  font-weight: 400 !important;
}
img, svg {
  display: block;
}
button, input {
  font: inherit;
}




.h2 {
  font-family: 'Impact';
  font-size: 32px;
  font-weight: 400;
  line-height: 100%;

  @media (min-width: 768px) { font-size: 72px; }
  @media (min-width: 1440px) { font-size: 96px; }
}
.h3 {
  font-family: 'Impact';
  font-size: 20px;
  font-weight: 400;
  line-height: 100%;

  @media (min-width: 768px) { font-size: 32px; }
  @media (min-width: 1440px) { font-size: 48px; }
}
.p1 {
  font-family: 'Impact';
  font-size: 20px;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 3%;

  @media (min-width: 768px) { font-size: 24px; }
  @media (min-width: 1440px) { font-size: 32px; }
}
.p2 {
  font-family: 'Impact';
  font-size: 20px;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 3%;
}





.stage {
  position: relative;
  width: 100%;
  /* height: 100vh; */
  /* height: 100svh; */
  height: calc(var(--viewport-unit) * 100) !important;
  max-height: none !important;

  overflow: hidden;
  background: var(--color-bg);
}
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: transparent;
  transform: translate(-50%, -50%);
  will-change: width, height;
}
.slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.slide__media {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  background-position: center;
  background-size: cover;
  will-change: transform;
}

.slide--photo-1 .slide__media { background-image: url("../img/slide-1.jpg"); }
.slide--photo-2 .slide__media { background-image: url("../img/slide-2.jpg"); }
.slide--photo-3 .slide__media { background-image: url("../img/slide-3.jpg"); }
.slide--photo-4 .slide__media { background-image: url("../img/slide-4.jpg"); }

.slide__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  user-select: none;
}
.slide__media--final {
  filter: grayscale(0) brightness(1) contrast(1);
  will-change: transform, filter;
}


/* Значок скролла */
.mousemove {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24vmin;
  height: 24vmin;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  animation: mousemove-opasity var(--intro-anim);
}
.mousemove img { max-width: 100%; max-height: 100%; }
.mousemove > .circle {
  position: absolute;
  animation: circleRotate 8s linear infinite;
}
@keyframes mousemove-opasity {
  to   { opacity: 1; }
}
@keyframes circleRotate {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}
.mousemove .desctop { display: none; }
@media (min-width: 768px) {
  .mousemove .desctop { display: block; }
  .mousemove .mobile { display: none; }
}


/* ИНТРО */
.intro {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  visibility: visible;
  animation: intro-bg var(--intro-anim);
  will-change: transform, visibility;
}
.intro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 767px) {
  .intro img {
    position: absolute;
    height: 70% !important;
    bottom: 0;
  }
}

@keyframes intro-bg {
  from { transform: translate3d(0, 0, 0); visibility: visible; }
  to { transform: translate3d(0, 100%, 0); visibility: hidden; }
}
/* тексты */
.stage-text {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 3;
  margin: 0;
  text-align: center;
  pointer-events: none;
  will-change: transform, color;
}
.stage-text.h2 {
  color: transparent;
  /* top: 8vh; */
  /* transform: translateY(calc(44vh - 0.4rem - 100%)); */
  top: calc(var(--viewport-unit) * 8);
  transform: translateY(calc(var(--viewport-unit) * 44 - 0.4rem - 100%));
  animation: intro-t-top var(--intro-anim);
}
.stage-text.h3 {
  color: transparent;
  /* bottom: 12vh; */
  /* transform: translateY(calc(100% - 44vh + 0.4rem)); */
  bottom: calc(var(--viewport-unit) * 12);
  transform: translateY(calc(100% - var(--viewport-unit) * 44 + 0.4rem));
  animation: intro-t-bottom var(--intro-anim);
  margin: 0 24px;
}
@keyframes intro-t-top {
  to { color: var(--color-accent); transform: translateY(0); }
}
@keyframes intro-t-bottom {
  to { color: var(--color-accent); transform: translateY(0); }
}



.stage-text.is-intro-done {
  animation: none;
  color: var(--color-accent);
  transform: translateY(0);
}
html.intro-playing,
html.intro-playing body {
  overflow: hidden;
}




/* форма */
.form-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: auto;
}
.form-box {
  position: relative;
  width: 100%;
  max-width: 500px;
  /* margin-top: -30vh; */
  margin-top: calc(var(--viewport-unit) * -30);
  text-align: center;
  margin-left: 24px;
  margin-right: 24px;
}
.form-box__title {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  color: var(--color-accent);
  will-change: transform, opacity;
}
.form-box__body {
  position: absolute;
  top: calc(50% + 48px);
  right: 0;
  left: 0;
}
.form-box__body > p {
  margin: 0 0 48px;
  color: var(--color-white);
}
.form-box__body > form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.form-box__body > form input,
.form-box__body > form button {
  width: 100%;
  height: 56px;
}
.form-box__body > form input {
  padding: 0 24px;
  color: var(--color-white);
  border: 1px solid var(--color-grey);
  border-radius: 100px;
  background: transparent;
  outline: none;
  transition: border-color 0.3s ease;
}
.form-box__body > form input::placeholder {
  color: var(--color-grey);
  transition: color 0.3s ease;
}
.form-box__body > form input:hover::placeholder {
  color: var(--color-white);
}
.form-box__body > form input:focus {
  border-color: var(--color-white);
}
.form-box__body > form button {
  color: var(--color-black);
  border: 0;
  background: var(--color-white);
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.form-box__body > form button:hover {
  color: var(--color-white);
  background: var(--color-hover);
}


@media (max-width: 767px) {
  .form-box__body {
    top: calc(50% + 24px);
  }
}


.isolated {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; 
  pointer-events: none;
  touch-action: none;
  user-select: none;
}





.form-box {
  transition: transform 0.25s ease;
}
html.keyboard-open .form-box {
  transform: translateY(calc(var(--form-shift, 0px) * -1));
  will-change: transform;
}

.thanks, .thanks * {
  color: var(--color-white);
}