@charset "UTF-8";

/* SETTING */
:root {
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-quad: cubic-bezier(0.11, 0, 0.5, 0);
}

/* SCROLL ANIMATION */
.split .split-text {
  opacity: 0;
  translate: 0 100%;
}
.split.scrollIn .split-text {
  opacity: 1;
  translate: 0;
  transition:
  opacity .7s var(--ease-in-quad) calc(var(--delay) * var(--index)),
  translate 1.3s var(--ease-out-quart) calc(var(--delay) * var(--index));
}
.fadeIn {
  opacity: 0;
  translate: 0 13%;
  transition: 
  opacity 1.3s var(--ease-out-cubic),
  translate 1.3s var(--ease-out-quint);
}
.fadeIn.scrollIn {
  opacity: 1;
  translate: 0;
}
.fadeInl {
  opacity: 0;
  translate: -13% 0;
  transition: 
  opacity 1.3s var(--ease-out-cubic),
  translate 1.3s var(--ease-out-quint);
}
.fadeInl.scrollIn {
  opacity: 1;
  translate: 0;
}
.fadeInr {
  opacity: 0;
  translate: 13% 0;
  transition: 
  opacity 1.3s var(--ease-out-cubic),
  translate 1.3s var(--ease-out-quint);
}
.fadeInr.scrollIn {
  opacity: 1;
  translate: 0;
}
.blur {
  opacity: 0;
  filter: blur(1em);
  scale: 1.1;
  transition:
  scale 1s var(--ease-out-quart),
  opacity 1.3s var(--ease-out-quart),
  filter 1s var(--ease-out-quart);
}
.blur.scrollIn {
  opacity: 1;
  filter: blur(0);
  scale: 1;
}
.zoomIn {
  opacity: 0;
  transform: scale(.8);
  transition: .8s var(--ease-out-quart);
}
.zoomIn.scrollIn {
  opacity: 1;
  transform: scale(1);
}

/* MOVING ANIMATION */
.float.scrollIn {
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% {
    transform: translateY(-8%);
  }
  50% {
    transform: translateY(8%);
  }
}
.heartbeat.scrollIn {
  animation: heartbeat 3s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 100% { 
    transform: scale(.8);
  }
  50% { 
    transform: scale(1);
  }
}