@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('./reset.css');
@import url('./colors.css');
@import url('./mobile.css');
@import url('./animations.css');

:root {
  /* --logo-w: calc(80vw - 50vh); */
  --logo-w: calc(90vw - 50vh);
  --logo-h: calc(var(--logo-w) / 5.49);
}
.show-catalog {
  transform: translateY(calc(var(--vh, 1vh) * -100));
}

.main-menu {
  position: fixed;
  display: block;
  left: 10px;
  top: 10px;
  z-index: 70;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  color: var(--blue);
  transition: all 500ms ease-in-out;
  animation: menu 1.5s 1 ease-out;
  -webkit-animation: menu 1.5s 1 ease-out;
  animation-delay: 5s;
  animation-fill-mode: both;
  will-change: opacity;
}
.menu-open {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 0 25px 25px 25px;
  box-shadow: 0 0 120px var(--blue);
  -webkit-border-radius: 0 25px 25px 25px;
  -moz-border-radius: 0 25px 25px 25px;
  -ms-border-radius: 0 25px 25px 25px;
  -o-border-radius: 0 25px 25px 25px;
}
.burger {
  position: relative;
  display: block;
  width: 32px;
  height: 18px;
  cursor: pointer;
  transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}
.burger-white div {
  background: #fff !important;
}
.burger div {
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  background: var(--blue);
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
}
.line-1 {
  top: 0;
  transform-origin: 0% 100%;
}
.line-2 {
  top: 50%;
  opacity: 1;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}
.line-3 {
  bottom: 0;
  transform-origin: 0% 0%;
}
.menu-body {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  margin: 20px;
  transition: grid-template-rows 500ms ease-in-out;
  -webkit-transition: grid-template-rows 500ms ease-in-out;
  -moz-transition: grid-template-rows 500ms ease-in-out;
  -ms-transition: grid-template-rows 500ms ease-in-out;
  -o-transition: grid-template-rows 500ms ease-in-out;
}
.menu-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.menu-open .line-1 {
  background: var(--blue) !important;
  width: 22px !important;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}
.menu-open .line-2 {
  opacity: 0;
}
.menu-open .line-3 {
  background: var(--blue) !important;
  width: 22px !important;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
}
.menu-open .menu-body {
  grid-template-rows: 1fr;
}
.menu-open .burger {
  transform: translate(5px, 5px);
  -webkit-transform: translate(5px, 5px);
  -moz-transform: translate(5px, 5px);
  -ms-transform: translate(5px, 5px);
  -o-transform: translate(5px, 5px);
}

.lang {
  margin-bottom: 10px;
  display: flex;
  font-size: 9pt;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row-reverse;
}
a.lang-active {
  border: 1px solid var(--blue);
}
.lang a {
  padding: 2px 5px;
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
}
.lang a:hover {
  background: rgba(0, 0, 0, 0.05);
}

.view {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
}
.page {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  overflow: hidden;
  transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
}
#wrapper {
  position: relative;
  display: block;
  height: calc(var(--vh, 1vh) * 100);
  width: 100vw;
  background-image: var(--main-bg);
  overflow: hidden;
  perspective: 200px;
}
.mobileNext {
  display: none;
}
.goNext {
  position: relative;
  display: flex;
  cursor: pointer;
  width: max-content;
  margin-top: 20px;
  transform-origin: 0 0;
  font-size: 12pt;
  align-items: center;
  gap: 10px;
}
.goNext svg {
  fill: #fff;
}
.nextBlue svg {
  fill: var(--blue) !important;
}

.logo-box {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  transform: translate3d(-50%, -50%, 0);
  -webkit-transform: translate3d(-50%, -50%, 0);
  -moz-transform: translate3d(-50%, -50%, 0);
  -ms-transform: translate3d(-50%, -50%, 0);
  -o-transform: translate3d(-50%, -50%, 0);
  transform-origin: 0 50%;
}

#logo-main {
  display: block;
  position: relative;
  width: var(--logo-w);
  height: var(--logo-h);
  fill: url('#blue-grad');
  filter: drop-shadow(0px 0px 15px var(--blue-shadow));
  -webkit-filter: drop-shadow(0px 0px 15px var(--blue-shadow));
}
.logo-blue {
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  filter: drop-shadow(0px 0px 15px var(--light-shadow)) !important;
  -webkit-filter: drop-shadow(0px 0px 15px var(--light-shadow)) !important;
}
.stop-1,
.stop-2,
.stop-3 {
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
}
.logo-blue .stop-1 {
  stop-color: var(--color-1);
}
.logo-blue .stop-2 {
  stop-color: var(--color-2);
}
.logo-blue .stop-3 {
  stop-color: var(--color-3);
}

.e {
  position: absolute;
  display: block;
  height: calc(var(--vh, 1vh) * 100);
  width: calc(calc(var(--vh, 1vh) * 100) / 1.186);
  left: 0;
  top: 0;
  fill: rgba(255, 255, 255, 0.15);
  mix-blend-mode: lighten;
  z-index: 5;
}

.bottle {
  position: absolute;
  display: block;
  width: calc(var(--vh, 1vh) * 50);
  height: calc(var(--vh, 1vh) * 100);
  background: url('../img/bottle.webp') no-repeat center bottom;
  background-size: contain;
  left: 50%;
  top: 50%;
  z-index: 10;
  transform: translate3d(-50%, -50%, 0);
  -webkit-transform: translate3d(-50%, -50%, 0);
  -moz-transform: translate3d(-50%, -50%, 0);
  -ms-transform: translate3d(-50%, -50%, 0);
  -o-transform: translate3d(-50%, -50%, 0);
}

.bg {
  position: absolute;
  display: block;
  top: 0;
  left: 50%;
  height: calc(var(--vh, 1vh) * 60);
  width: calc(var(--vh, 1vh) * 60 * 5.29);
  background: url('../img/bgtr.webp') no-repeat left;
  background-size: contain;
  z-index: 1;
  transform: translate3d(-50%, -100%, 0);
  -webkit-transform: translate3d(-50%, -100%, 0);
  -moz-transform: translate3d(-50%, -100%, 0);
  -ms-transform: translate3d(-50%, -100%, 0);
  -o-transform: translate3d(-50%, -100%, 0);
  z-index: 1;
}
.mask {
  /*Изменить*/
  position: absolute;
  opacity: 0;
  display: block;
  width: 105vw;
  height: calc(105vw / 1.55);
  left: 50%;
  top: 50%;
  z-index: 2;
  background: url('../img/mask.svg') no-repeat center bottom;
  background-size: cover;
}
.bg-white {
  position: absolute;
  display: block;
  top: 0;
  left: -50vw;
  width: 200vw;
  height: calc(var(--vh, 1vh) * 100);
  transform: translateY(-100%);
  background-color: var(--light-bg);
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  z-index: 0;
  filter: blur(5px);
  -webkit-filter: blur(5px);
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  font-weight: 100;
  font-size: 28pt;
  line-height: auto;
  color: white;
  z-index: 11;
}
.text-blue {
  color: var(--blue);
}

.text-1,
.text-2,
.text-4,
.text-5 {
  transform: translate(calc(-50vw - 120%), -50%);
  -webkit-transform: translate(calc(-50vw - 120%), -50%);
  -moz-transform: translate(calc(-50vw - 120%), -50%);
  -ms-transform: translate(calc(-50vw - 120%), -50%);
  -o-transform: translate(calc(-50vw - 120%), -50%);
}
.text-3 {
  transform: translate(50vw, -50%);
  -webkit-transform: translate(50vw, -50%);
  -moz-transform: translate(50vw, -50%);
  -ms-transform: translate(50vw, -50%);
  -o-transform: translate(50vw, -50%);
}

.mainflow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 105vw;
  height: calc(105vw / 1.9);
  transform: translate(50vw, calc(var(--vh, 1vh) * -50 - 100%)) scaleY(0.5);
  background: url('../img/flow_N1.webp') no-repeat;
  background-size: contain;
  -webkit-transform: translate(50vw, calc(var(--vh, 1vh) * -50 - 100%))
    scaleY(0.5);
  -moz-transform: translate(50vw, calc(var(--vh, 1vh) * -50 - 100%)) scaleY(0.5);
  -ms-transform: translate(50vw, calc(var(--vh, 1vh) * -50 - 100%)) scaleY(0.5);
  -o-transform: translate(50vw, calc(var(--vh, 1vh) * -50 - 100%)) scaleY(0.5);
  z-index: 9;
}

.flow {
  position: absolute;
  width: 100vw;
  height: 100vw;
  top: 100%;
  left: 100%;
  background: url('../img/flow-2.webp') no-repeat center;
  background-size: contain;
  transform-origin: 100% 100%;
  bottom: 0;
  right: 0;
  z-index: 5;
}
.flow-bg {
  position: absolute;
  display: block;
  width: 80vw;
  height: 80vw;
  top: 50%;
  left: 50%;
  background: url('../img/flow-2.webp') no-repeat center;
  background-size: contain;
  transform-origin: 50% 50%;
  mix-blend-mode: hard-light;
}
.fbg-1 {
  bottom: 0;
  right: 0;
}
.fbg-2 {
  top: 0;
  left: 0;
}

.glare {
  position: absolute;
  top: 0;
  left: 0;
  width: 80vw;
  height: calc(var(--vh, 1vh) * 100);
  background: radial-gradient(
    50% 100% at 0% 50%,
    #fff 0%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-100%);
  z-index: 2;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
}

.fill {
  position: absolute;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  background: var(--main-bg);
  opacity: 0;
}
.label {
  position: relative;
  display: block;
  width: calc(calc(var(--vh, 1vh) * 100) / 2 / 0.94);
  height: calc(calc(var(--vh, 1vh) * 100) / 2 / 0.94 / 1.35);
}
.drop {
  position: absolute;
  width: calc(calc(var(--vh, 1vh) * 100) / 5.4 * 0.66);
  height: calc(calc(var(--vh, 1vh) * 100) / 5.4);
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  background: url('../img/drop.webp') no-repeat center;
  background-size: contain;
  -webkit-transform: translateY(-50%) translateX(-50%);
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -o-transform: translateY(-50%) translateX(-50%);
  z-index: 20;
  opacity: 0;
}
.reton-box {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  opacity: 0;
}
.reton {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--vh, 1vh) * 74.19);
  height: calc(var(--vh, 1vh) * 85.68);
  transform: translate(-51%, -56%) scale(0.355);
  -webkit-transform: translate(-51%, -56%) scale(0.355);
  -moz-transform: translate(-51%, -56%) scale(0.355);
  -ms-transform: translate(-51%, -56%) scale(0.355);
  -o-transform: translate(-51%, -56%) scale(0.355);
  background: url('../img/reton_N.webp') no-repeat center;
  background-size: contain;
  opacity: 0;
}

@media screen and (orientation: portrait) {
  .lang {
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
  }

  .mobileNext {
    position: fixed;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    bottom: 0;
    z-index: 77;
    padding-top: 5px;
    height: 84px;
    bottom: -42px;
  }

  .goNext {
    display: none;
  }

  .text {
    width: 90vw;
    /* white-space: nowrap; */
    text-align: center;
  }

  :root {
    --logo-w: 90vw;
    --logo-h: calc(var(--logo-w) / 5.49);
  }

  .bg {
    height: 100vw;
    width: calc(100vw * 5.29);
  }

  .bottle {
    width: 50vw;
    height: 100vw;
  }

  .label {
    width: calc(100vw / 0.94);
    height: calc(100vw / 0.94 / 1.35);
  }
  .drop {
    width: calc(100vw / 5.4 * 0.66);
    height: calc(100vw / 5.4);
  }

  .reton {
    width: 74.19vw;
    height: 85.68vw;
    transform: translate(-52%, -61%) scale(0.71);
    -webkit-transform: translate(-52%, -61%) scale(0.71);
    -moz-transform: translate(-52%, -61%) scale(0.71);
    -ms-transform: translate(-52%, -61%) scale(0.71);
    -o-transform: translate(-52%, -61%) scale(0.71);
  }

  .flow {
    width: calc(var(--vh, 1vh) * 100);
    height: calc(var(--vh, 1vh) * 100);
  }
  .flow-bg {
    width: calc(var(--vh, 1vh) * 100);
    height: calc(var(--vh, 1vh) * 100);
  }
  .menu-content {
    font-size: 16pt;
  }
}

@media screen and (max-width: 414px) {
  .text {
    font-size: 22pt;
  }
}
@media screen and (max-width: 375px) and (max-height: 667px) {
  .text {
    font-size: 19pt;
  }
}
@media screen and (max-width: 360px) and (max-height: 740px) {
  .text {
    font-size: 20pt;
  }
}
@media screen and (max-width: 320px) and (max-height: 568px) {
  .text {
    font-size: 16pt;
  }
}