.ps-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1200 / 1691;
}

.ps-stage::before {
  content: none;
}

.all {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.mv-bg {
  position: absolute;
  width: 100%;
  top: 0;
  left: -0.142%;
}

.cable {
  position: absolute;
  width: 9.348%;
  top: 13.907%;
  left: 90.793%;
}

.debris {
  position: absolute;
  width: 94.618%;
  top: 9.437%;
  left: 1.983%;
}

.liver-all {
  position: absolute;
  width: 100%;
  top: 0.993%;
  left: 0;
}

.parts {
  position: absolute;
  width: 100%;
  top: 2.152%;
  left: -0.142%;
}

.liver-1 {
  position: absolute;
  width: 56.374%;
  top: 2.649%;
  left: 43.059%;
}

.liver-2 {
  position: absolute;
  width: 62.465%;
  top: 3.477%;
  left: -0.567%;
}

.liver-3 {
  position: absolute;
  width: 60.340%;
  top: 17.549%;
  left: -4.958%;
}

.liver-4 {
  position: absolute;
  width: 57.507%;
  top: 24.005%;
  left: 35.269%;
}

.liver-5 {
  position: absolute;
  width: 81.303%;
  top: 37.084%;
  left: 37.110%;
}

.liver-6 {
  position: absolute;
  width: 44.476%;
  top: 42.548%;
  left: 4.533%;
}

.liver-7 {
  position: absolute;
  width: 50.850%;
  top: 59.269%;
  left: 6.091%;
}

.liver-8 {
  position: absolute;
  width: 68.697%;
  top: 57.116%;
  left: 40.227%;
}

/* =========================
   初期状態
========================= */

.ps-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.mv-bg,
.cable,
.debris,
.parts,
.liver-1,
.liver-2,
.liver-3,
.liver-4,
.liver-5,
.liver-6,
.liver-7,
.liver-8,
.all,
.top-logo img,
.top-text {
  opacity: 0;
}

/* 既存位置はそのまま使う */
.mv-bg,
.cable,
.debris,
.parts,
.liver-1,
.liver-2,
.liver-3,
.liver-4,
.liver-5,
.liver-6,
.liver-7,
.liver-8,
.all {
  transform-origin: center center;
}

.mv-bg,
.cable,
.debris,
.parts {
  transform: scale(0.5);
}

.liver-1,
.liver-2,
.liver-3,
.liver-4,
.liver-5,
.liver-6,
.liver-7,
.liver-8 {
  transform: scale(0.5);
}

.all {
  transform: translateY(20px) scale(1.02);
}

.top-logo img {
  transform: scale(0.55);
}

.top-text {
  transform: translateY(10px);
}

/* =========================
   キーフレーム
========================= */

@keyframes blastIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  70% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes softReveal {
  0% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes logoBlastIn {
  0% {
    opacity: 0;
    transform: scale(0.55);
  }
  70% {
    opacity: 1;
    transform: scale(1.12);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes textFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pageShake {
  0%   { transform: translate(0, 0) rotate(0deg); }
  10%  { transform: translate(-4px, 2px) rotate(-0.25deg); }
  20%  { transform: translate(4px, -2px) rotate(0.2deg); }
  30%  { transform: translate(-3px, 3px) rotate(-0.18deg); }
  40%  { transform: translate(3px, -2px) rotate(0.15deg); }
  50%  { transform: translate(-3px, 2px) rotate(-0.12deg); }
  60%  { transform: translate(2px, -2px) rotate(0.1deg); }
  70%  { transform: translate(-2px, 1px) rotate(-0.08deg); }
  80%  { transform: translate(1px, -1px) rotate(0.05deg); }
  90%  { transform: translate(-1px, 1px) rotate(-0.03deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* =========================
   発火後
========================= */

#top.is-animate .mv-bg {
  animation: blastIn 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
  animation-delay: 0s;
}

#top.is-animate .cable {
  animation: blastIn 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
  animation-delay: 0.22s;
}

#top.is-animate .debris {
  animation: blastIn 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
  animation-delay: 0.46s;
}

#top.is-animate .parts {
  animation: blastIn 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
  animation-delay: 0.70s;
}

#top.is-animate .liver-1 {
  animation: blastIn 0.62s cubic-bezier(0.18, 0.9, 0.22, 1) forwards;
  animation-delay: 0.56s;
}
#top.is-animate .liver-2 {
  animation: blastIn 0.66s cubic-bezier(0.18, 0.9, 0.22, 1) forwards;
  animation-delay: 0.62s;
}
#top.is-animate .liver-3 {
  animation: blastIn 0.60s cubic-bezier(0.18, 0.9, 0.22, 1) forwards;
  animation-delay: 0.68s;
}
#top.is-animate .liver-4 {
  animation: blastIn 0.68s cubic-bezier(0.18, 0.9, 0.22, 1) forwards;
  animation-delay: 0.60s;
}
#top.is-animate .liver-5 {
  animation: blastIn 0.64s cubic-bezier(0.18, 0.9, 0.22, 1) forwards;
  animation-delay: 0.72s;
}
#top.is-animate .liver-6 {
  animation: blastIn 0.59s cubic-bezier(0.18, 0.9, 0.22, 1) forwards;
  animation-delay: 0.65s;
}
#top.is-animate .liver-7 {
  animation: blastIn 0.67s cubic-bezier(0.18, 0.9, 0.22, 1) forwards;
  animation-delay: 0.76s;
}
#top.is-animate .liver-8 {
  animation: blastIn 0.61s cubic-bezier(0.18, 0.9, 0.22, 1) forwards;
  animation-delay: 0.70s;
}

#top.is-animate .all {
  animation: softReveal 0.6s ease-out forwards;
  animation-delay: 1.2s;
}

#top.is-animate .top-logo img {
  animation: logoBlastIn 0.75s cubic-bezier(0.18, 0.9, 0.2, 1) forwards;
  animation-delay: 0.86s;
}

#top.is-animate .top-text {
  animation: textFadeIn 0.65s ease-out forwards;
  animation-delay: 1.36s;
}

body.is-shaking {
  animation: pageShake 0.7s ease-out both;
}