@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);
  }
}

/* MV */
.mv-img-item {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  will-change: transform, opacity;
}
.mv-img-item.loop {
  animation: mvLoop 4200ms ease-in-out infinite;
}
.mv-img-item.loop.i1 { animation-delay: 0ms; }
.mv-img-item.loop.i2 { animation-delay: 250ms; }
.mv-img-item.loop.i3 { animation-delay: 500ms; }
@keyframes mvLoop {
  /* --- pop in --- */
  0%   { opacity: 0; transform: translateY(10px) scale(0.96); }
  8%   { opacity: 1; transform: translateY(-2px) scale(1.03); }
  12%  { opacity: 1; transform: translateY(0) scale(1); }
  /* --- float --- */
  30%  { transform: translateY(-4px); }
  50%  { transform: translateY(0); }
  65%  { transform: translateY(-4px); }
  /* --- pop out --- */
  75%  { opacity: 1; transform: translateY(0) scale(1); }
  85%  { opacity: 0; transform: translateY(10px) scale(0.96); }
  /* --- hidden wait --- */
  100% { opacity: 0; transform: translateY(10px) scale(0.96); }
}

/* ヒラメキ */
#hi {
  animation: hi-slide 3s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes hi-slide {
  0%   { transform: translate(-986.843px, 198.611px); }
  15%  { transform: translate(-986.843px, 198.611px); }
  45%  { transform: translate(-1036.802px, 198.611px); }
  65%  { transform: translate(-1036.802px, 198.611px); }
  85%  { transform: translate(-986.843px, 198.611px); }
  100% { transform: translate(-986.843px, 198.611px); }
}
#hi_2 {
  animation: hi_2-slide 3s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes hi_2-slide {
  0%   { transform: translate(-1086.761px, 198.611px); }
  15%  { transform: translate(-1086.761px, 198.611px); }
  45%  { transform: translate(-1036.802px, 198.611px); }
  65%  { transform: translate(-1036.802px, 198.611px); }
  85%  { transform: translate(-1086.761px, 198.611px); }
  100% { transform: translate(-1086.761px, 198.611px); }
}
#ra {
  animation: ra-slide 3s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes ra-slide {
  0%   { transform: translate(-556.263px, 198.613px); }
  15%  { transform: translate(-556.263px, 198.613px); }
  45%  { transform: translate(-506.304px, 198.613px); }
  65%  { transform: translate(-506.304px, 198.613px); }
  85%  { transform: translate(-556.263px, 198.613px); }
  100% { transform: translate(-556.263px, 198.613px); }
}
#ra_2 {
  animation: ra_2-slide 3s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes ra_2-slide {
  0%   { transform: translate(-456.345px, 198.613px); }
  15%  { transform: translate(-456.345px, 198.613px); }
  45%  { transform: translate(-506.304px, 198.613px); }
  65%  { transform: translate(-506.304px, 198.613px); }
  85%  { transform: translate(-456.345px, 198.613px); }
  100% { transform: translate(-456.345px, 198.613px); }
}
#me {
  animation: me-slide 3s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes me-slide {
  0%   { transform: translate(-1133.633px, 475.002px); }
  15%  { transform: translate(-1133.633px, 475.002px); }

  45%  { transform: translate(-1183.592px, 475.002px); }
  65%  { transform: translate(-1183.592px, 475.002px); }

  85%  { transform: translate(-1133.633px, 475.002px); }
  100% { transform: translate(-1133.633px, 475.002px); }
}
#me_2 {
  animation: me_2-slide 3s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes me_2-slide {
  0%   { transform: translate(-1233.551px, 475.002px); }
  15%  { transform: translate(-1233.551px, 475.002px); }
  45%  { transform: translate(-1183.592px, 475.002px); }
  65%  { transform: translate(-1183.592px, 475.002px); }
  85%  { transform: translate(-1233.551px, 475.002px); }
  100% { transform: translate(-1233.551px, 475.002px); }
}
#ki {
  animation: ki-slide 3s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes ki-slide {
  0%   { transform: translate(-711.852px, 479.638px); }
  15%  { transform: translate(-711.852px, 479.638px); }
  45%  { transform: translate(-661.893px, 479.638px); }
  65%  { transform: translate(-661.893px, 479.638px); }
  85%  { transform: translate(-711.852px, 479.638px); }
  100% { transform: translate(-711.852px, 479.638px); }
}
#ki_2 {
  animation: ki_2-slide 3s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes ki_2-slide {
  0%   { transform: translate(-611.933px, 479.638px); }
  15%  { transform: translate(-611.933px, 479.638px); }
  45%  { transform: translate(-661.893px, 479.638px); }
  65%  { transform: translate(-661.893px, 479.638px); }
  85%  { transform: translate(-611.933px, 479.638px); }
  100% { transform: translate(-611.933px, 479.638px); }
}
#ra, #ra_2 { animation-delay: .1s; }
#me, #me_2 { animation-delay: .2s; }
#ki, #ki_2 { animation-delay: .3s; }