:root {
  --color-fondo: #fff;
  --color-content: #ff3c32;
}
body {
  overflow: hidden;
  margin: 0px;
}
.contenedor {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background: var(--color-fondo);
  z-index: 9999;
}
.content_spash {
  width: 100%;
  height: 100%;
  position: absolute;
  background: var(--color-fondo);
  filter: contrast(20);
}
.cuadrado {
  width: 40px;
  height: 40px;
  transform: translate(-50%, -30%) rotate(-45deg) scale(1);
  position: absolute;
  background: var(--color-content);
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  right: 50%;
  filter: blur(2px);
  animation: ball-queen 22s cubic-bezier(0.32, 2, 0.59, 2) infinite;
}
.cuadrado::before,
.cuadrado::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-content);
  filter: blur(2px);
}
.cuadrado::before {
  left: 50%;
}
.cuadrado::after {
  top: -50%;
}
.ball {
  border-radius: 0% 50% 50% 50%;
  transform: rotate(45deg);
  box-shadow: inset -25px 10px 0px -10px --color-content;
  background: var(--color-content);
  width: 30px;
  height: 30px;
  position: absolute;
  z-index: 1;
  top: 30%;
  left: calc(50% - 15px);
  filter: blur(6px);

  animation: go 1.05s 0.1s infinite cubic-bezier(0.4, 0.62, 0.57, 0.98);
}

svg {
  height: 110px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  animation: line_heart 22s cubic-bezier(0.32, 2, 0.59, 2) infinite;
  position: absolute;
  top: calc(50% - 60px);
  left: calc(50% - 35px);
  scale: 0.5;
}
svg polyline#line {
  stroke-dasharray: 470;
  stroke-dashoffset: 0;
  animation: dash 4s linear infinite;
}
/* animacion linea continua RPM */
@keyframes dash {
  from {
    stroke-dashoffset: 470;
  }
  to {
    stroke-dashoffset: 0;
  }
}
/* animacion de corazon por escala */
@keyframes ball-queen {
  0%,
  3% {
    transform: translate(-50%, -30%) rotate(-45deg) scale(1.1);
  }
  4%,
  8% {
    transform: translate(-50%, -30%) rotate(-45deg) scale(1.2);
  }
  9%,
  13% {
    transform: translate(-50%, -30%) rotate(-45deg) scale(1.3);
  }
  14%,
  18% {
    transform: translate(-50%, -30%) rotate(-45deg) scale(1.4);
  }
  19%,
  23% {
    transform: translate(-50%, -30%) rotate(-45deg) scale(1.5);
  }
  24%,
  28% {
    transform: translate(-50%, -30%) rotate(-45deg) scale(1.6);
  }
  29%,
  33% {
    transform: translate(-50%, -30%) rotate(-45deg) scale(1.7);
  }
  34%,
  38% {
    transform: translate(-50%, -30%) rotate(-45deg) scale(1.8);
  }
  39%,
  43% {
    transform: translate(-50%, -30%) rotate(-45deg) scale(1.9);
  }
  44%,
  48% {
    transform: translate(-50%, -30%) rotate(-45deg) scale(2);
  }
  49%,
  53% {
    transform: translate(-50%, -30%) rotate(-45deg) scale(2.1);
  }
  54%,
  58% {
    transform: translate(-50%, -30%) rotate(-45deg) scale(2.2);
  }
  59%,
  63% {
    transform: translate(-50%, -30%) rotate(-45deg) scale(2.3);
  }
  64%,
  68% {
    transform: translate(-50%, -30%) rotate(-45deg) scale(2.4);
  }
  69%,
  73% {
    transform: translate(-50%, -30%) rotate(-45deg) scale(2.5);
  }
  74%,
  78% {
    transform: translate(-50%, -30%) rotate(-45deg) scale(2.6);
  }
  79%,
  83% {
    transform: translate(-50%, -30%) rotate(-45deg) scale(2.7);
  }
  84%,
  88% {
    transform: translate(-50%, -30%) rotate(-45deg) scale(2.8);
  }
  89%,
  93% {
    transform: translate(-50%, -30%) rotate(-45deg) scale(2.9);
  }
  94%,
  98% {
    transform: translate(-50%, -30%) rotate(-45deg) scale(3);
  }
}
/* animacion de linea RPM por escala */
@keyframes line_heart {
  0%,
  3% {
    transform: scale(1.1);
  }
  4%,
  8% {
    transform: scale(1.2);
  }
  9%,
  13% {
    transform: scale(1.3);
  }
  14%,
  18% {
    transform: scale(1.4);
  }
  19%,
  23% {
    transform: scale(1.5);
  }
  24%,
  28% {
    transform: scale(1.6);
  }
  29%,
  33% {
    transform: scale(1.7);
  }
  34%,
  38% {
    transform: scale(1.8);
  }
  39%,
  43% {
    transform: scale(1.9);
  }
  44%,
  48% {
    transform: scale(2);
  }
  49%,
  53% {
    transform: scale(2.1);
  }
  54%,
  58% {
    transform: scale(2.2);
  }
  59%,
  63% {
    transform: scale(2.3);
  }
  64%,
  68% {
    transform: scale(2.4);
  }
  69%,
  73% {
    transform: scale(2.5);
  }
  74%,
  78% {
    transform: scale(2.6);
  }
  79%,
  83% {
    transform: scale(2.7);
  }
  84%,
  88% {
    transform: scale(2.8);
  }
  89%,
  93% {
    transform: scale(2.9);
  }
  94%,
  98% {
    transform: scale(3);
  }
}
@keyframes go {
  to {
    transform: translate(0, 18vh);
  }
}