.l-scrn {
  position: fixed;
  z-index: 9999;
  background: rgba(220, 215, 194, 1);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.l-scrn.hide {
  opacity: 0;
  visibility: hidden;
}
.l-scrn__img-1 {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 30vw;
  max-height: 50vh;
}
.l-scrn__img-2 {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  max-width: 25vw;
  max-height: 60vh;
}
.l-scrn__img-3 {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 30vw;
  max-height: 30vh;
}

@media (max-width: 1199px) {
  .l-scrn__img-2 {
    top: 29%;
  }
}

@media (max-width: 991px) {
  .l-scrn__img-2,
  .l-scrn__img-1 {
    max-width: 40vw;
  }
  .l-scrn__img-3 {
    max-width: 50vw;
  }
}
.l-scrn__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  aspect-ratio: 314/298;
  width: 19.625rem;
  max-width: 40vw;
}
.l-scrn__logo svg {
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}
.l-scrn__t1 {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  height: 18%;
  opacity: 0;
  width: auto;
}
.l-scrn__t2 {
  position: absolute;
  height: 14%;
  bottom: 24%;
  opacity: 0;
  right: 90%;
}
.l-scrn__t3 {
  position: absolute;
  height: 14%;
  bottom: 24%;
  opacity: 0;
  left: 90%;
}
:root {
  --l-speed: 0.5;
}
.l-scrn__circle,
.l-scrn__c-m {
  transition: calc(var(--arr) * var(--l-speed) * 0.01s)
    calc(var(--delay) * var(--l-speed) * 0.01s) stroke-dashoffset linear;
  stroke-dasharray: var(--arr);
  stroke-dashoffset: var(--arr);
}
.l-scrn__circle_1_1,
.l-scrn__circle_1_2 {
  --arr: 170;
  --delay: 0;
}
.l-scrn__c-m_1,
.l-scrn__c-m_2 {
  --arr: 30;
  --delay: 93;
}

.l-scrn__circle_3_2,
.l-scrn__circle_2_2 {
  --arr: 195;
  --delay: 123;
}
.l-scrn__circle_3_1,
.l-scrn__circle_2_1 {
  --arr: 146;
  --delay: 123;
}

.l-scrn__c-m_3,
.l-scrn__c-m_4 {
  --arr: 30;
  --delay: 269;
}

.l-scrn__circle_4_1,
.l-scrn__circle_5_1 {
  --arr: 144;
  --delay: 296;
}

.l-scrn__circle_4_2,
.l-scrn__circle_5_2 {
  --arr: 195;
  --delay: 299;
}

.l-scrn__c-m_5,
.l-scrn__c-m_6 {
  --arr: 15;
  --delay: 443;
}

.l-scrn__path-anim-1 {
  --delay: 0;
  transition: 0.5s calc(var(--delay) * var(--l-speed) * 0.01s) stroke-dashoffset
    ease-in-out;
  stroke-width: 1.5;
}
.l-scrn__eye-1 {
  --delay: 50;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
.l-scrn__eye-2 {
  --delay: 50;
  stroke-dasharray: 116;
  stroke-dashoffset: 116;
}
.l-scrn__eye-3 {
  --delay: 50;
  stroke-dasharray: 61;
  stroke-dashoffset: 61;
}
.l-scrn__eye-4 {
  --delay: 50;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}
.l-scrn__nose-1 {
  --delay: 130;
  stroke-dasharray: 43;
  stroke-dashoffset: 43;
}
.l-scrn__nose-2 {
  --delay: 130;
  stroke-dasharray: 68;
  stroke-dashoffset: 68;
}
.l-scrn__ear-1 {
  --delay: 130;
  stroke-dasharray: 126;
  stroke-dashoffset: 126;
}
.l-scrn__ear-2 {
  --delay: 130;
  stroke-dasharray: 75;
  stroke-dashoffset: 75;
}

.l-scrn__hand {
  --delay: 320;
  stroke-dasharray: 275;
  stroke-dashoffset: 275;
}
.l-scrn__lips-1 {
  --delay: 320;
  stroke-dasharray: 146;
  stroke-dashoffset: 146;
}
.l-scrn__lips-2 {
  --delay: 320;
  stroke-dasharray: 64;
  stroke-dashoffset: 64;
}

.l-scrn.active .l-scrn__path-anim-1,
.l-scrn.active .l-scrn__c-m,
.l-scrn.active .l-scrn__circle {
  stroke-dashoffset: 0;
}

.l-scrn__t1 {
  transition: 1s calc(150 * var(--l-speed) * 0.01s) opacity ease-in-out;
}
.l-scrn__t2 {
  transition: 1s calc(250 * var(--l-speed) * 0.01s) opacity ease-in-out;
}
.l-scrn__t3 {
  transition: 1s calc(350 * var(--l-speed) * 0.01s) opacity ease-in-out;
}
.l-scrn.active .l-scrn__t1,
.l-scrn.active .l-scrn__t2,
.l-scrn.active .l-scrn__t3 {
  opacity: 1;
}