/* =========================================================
   soumoku — ima studio Interactive UI
   app.imastudio.jp/soumoku の手書き芽吹きアニメを部品化。
   ========================================================= */

.ima-ui--soumoku,
.ima-soumoku {
  --ima-soumoku-bg: transparent;
  --ima-soumoku-scale-pc: 1;
  --ima-soumoku-scale-sp: 1;
  --ima-soumoku-pad-top-pc: 0px;
  --ima-soumoku-pad-bottom-pc: 0px;
  --ima-soumoku-pad-top-sp: 0px;
  --ima-soumoku-pad-bottom-sp: 0px;
  --ima-soumoku-stage-h: 70svh;
  position: relative;
  width: 100%;
  padding-top: var(--ima-soumoku-pad-top-pc, 0px);
  padding-bottom: var(--ima-soumoku-pad-bottom-pc, 0px);
  overflow: hidden;
  isolation: isolate;
  background: var(--ima-soumoku-bg);
}

.ima-soumoku__anim-layer,
.ima-soumoku__title-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.ima-soumoku__stage {
  position: relative;
  display: grid;
  place-items: center;
  height: var(--ima-soumoku-stage-h, 70svh);
  overflow: hidden;
}

.ima-soumoku__anim-layer,
.ima-soumoku__title-layer {
  will-change: transform, opacity;
}

.ima-soumoku__anim-layer {
  transition:
    transform 1.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 1.2s ease;
}

.ima-soumoku__frame,
.ima-soumoku__title-img {
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.ima-soumoku__frame {
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
  transform: scale(var(--ima-soumoku-scale-pc, 1));
}

.ima-soumoku__title-layer {
  opacity: 0;
  pointer-events: none;
}

.ima-soumoku__title-img {
  max-width: 36%;
  max-height: 25%;
}

.ima-soumoku__title-layer.is-show {
  opacity: 1;
  transition: opacity 0.9s ease;
}

.ima-soumoku__title-layer.is-hide {
  opacity: 0;
  transition: opacity 1.6s ease;
}

.ima-soumoku__title-layer.is-static {
  opacity: 1;
}

.ima-soumoku__title-layer.is-float .ima-soumoku__title-img {
  animation: ima-soumoku-floaty 6s ease-in-out infinite;
}

.ima-soumoku.is-paused .ima-soumoku__title-img {
  animation-play-state: paused;
}

@media (max-width: 640px) {
  .ima-ui--soumoku,
  .ima-soumoku {
    padding-top: var(--ima-soumoku-pad-top-sp, 0px);
    padding-bottom: var(--ima-soumoku-pad-bottom-sp, 0px);
  }

  .ima-soumoku__frame {
    transform: scale(var(--ima-soumoku-scale-sp, 1));
  }
}

@keyframes ima-soumoku-floaty {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5%) scale(1.012);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}