/* loading.css - ローディングアニメーション専用 */

/* ===== OVERLAY ===== */
#loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #f0ebe3 url('../images/loading/loading_bk.png') center center / cover no-repeat;
    overflow: hidden;
    transition: opacity 0.5s ease;
}

#loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

#loading-screen.hidden {
    display: none;
}

/* ===== STAGE ===== */
.loading-stage {
    position: absolute;
    inset: 0;
}

.loading-stage.shake {
    animation: loadingShake 200ms ease-out;
}

@keyframes loadingShake {
    0%, 100% { transform: translateY(0); }
    25%      { transform: translateY(5px); }
    50%      { transform: translateY(-3px); }
    75%      { transform: translateY(2px); }
}

/* ===== BROWN MONSTER ===== */
.loading-brown {
    position: absolute;
    bottom: calc(50% - 15vmin);
    left: 50%;
    width: 22vmin;
    transform: translateX(-50%) translateY(100vh);
    transform-origin: bottom center;
    z-index: 10;
}

.loading-brown img {
    width: 100%;
    display: block;
}

.loading-brown.go {
    animation: loadingBrownIn 600ms cubic-bezier(0.12, 0, 0.18, 1) forwards;
}

@keyframes loadingBrownIn {
    0%   { transform: translateX(-50%) translateY(100vh); }
    45%  { transform: translateX(-50%) translateY(0); }
    55%  { transform: translateX(-50%) translateY(2%) scaleY(0.68) scaleX(1.28); }
    68%  { transform: translateX(-50%) translateY(-7%) scaleY(1.14) scaleX(0.9); }
    78%  { transform: translateX(-50%) translateY(1%) scaleY(0.93) scaleX(1.05); }
    88%  { transform: translateX(-50%) translateY(-1.5%) scaleY(1.03) scaleX(0.98); }
    100% { transform: translateX(-50%) translateY(0); }
}

/* ===== PINK STACK ===== */
.loading-pink-stack {
    position: absolute;
    bottom: calc(50% - 15vmin);
    left: calc(50% + 13vmin);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loading-pink-item {
    transform-origin: bottom center;
    transform: translateY(-100vh);
}

.loading-pink-item img {
    width: 100%;
    display: block;
}

.loading-pink-top    { width: 6vmin;  margin-bottom: -1.2vmin; z-index: 3; }
.loading-pink-middle { width: 5vmin;  margin-bottom: -2.5vmin; z-index: 2; }
.loading-pink-bottom { width: 10vmin; z-index: 1; }

.loading-pink-item.go {
    animation: loadingPinkIn 380ms cubic-bezier(0.12, 0, 0.18, 1) forwards;
}

@keyframes loadingPinkIn {
    0%   { transform: translateY(-70vh); }
    48%  { transform: translateY(0); }
    60%  { transform: translateY(4%) scaleY(0.65) scaleX(1.4); }
    72%  { transform: translateY(-18%) scaleY(1.2) scaleX(0.82); }
    82%  { transform: translateY(2%) scaleY(0.92) scaleX(1.08); }
    92%  { transform: translateY(-4%) scaleY(1.05) scaleX(0.96); }
    100% { transform: translateY(0); }
}

/* ===== GREEN MONSTER ===== */
.loading-green-wrap {
    position: absolute;
    bottom: calc(50% - 15vmin);
    left: calc(50% - 28vmin);
    z-index: 8;
    transform: translateX(100vw);
}

.loading-green-bob {
    transform: translateY(0);
}

.loading-green-body {
    transform-origin: bottom center;
    position: relative;
    height: 24vmin;
    width: 19vmin;
    transform: rotate(-18deg);
}

.loading-green-body img {
    height: 100%;
    width: auto;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.loading-green-front {
    display: none;
}

.loading-green-wrap.go {
    animation: loadingGreenH 1200ms linear forwards;
}

.loading-green-wrap.go .loading-green-bob {
    animation: loadingGreenBob 110ms ease-in-out infinite;
}

@keyframes loadingGreenH {
    0%   { transform: translateX(100vw); animation-timing-function: linear; }
    20%  { transform: translateX(0); animation-timing-function: ease-out; }
    34%  { transform: translateX(-7vmin); animation-timing-function: ease-in-out; }
    46%  { transform: translateX(3.5vmin); animation-timing-function: ease-in-out; }
    58%  { transform: translateX(-1.5vmin); animation-timing-function: ease-in-out; }
    72%  { transform: translateX(0.5vmin); animation-timing-function: ease-out; }
    100% { transform: translateX(0); }
}

@keyframes loadingGreenBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2vmin); }
}

.loading-green-wrap.brake .loading-green-bob {
    animation: none;
    transform: translateY(0);
}

.loading-green-wrap.brake .loading-green-body {
    animation: loadingGreenBrake 600ms ease-out forwards;
}

@keyframes loadingGreenBrake {
    0%   { transform: rotate(-18deg); }
    12%  { transform: rotate(-40deg); }
    35%  { transform: rotate(15deg); }
    55%  { transform: rotate(-8deg); }
    75%  { transform: rotate(3deg); }
    100% { transform: rotate(0deg); }
}

.loading-green-wrap.done {
    transform: translateX(0);
}

.loading-green-wrap.done .loading-green-bob {
    animation: none;
    transform: translateY(0);
}

.loading-green-wrap.done .loading-green-body {
    animation: none;
    transform: rotate(0deg);
}

.loading-green-wrap.done .loading-green-run {
    display: none;
}

.loading-green-wrap.done .loading-green-front {
    display: block;
}

/* ===== LOGO ===== */
.loading-logo {
    position: absolute;
    bottom: calc(50% + 20vmin);
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 30vmin;
    z-index: 15;
    opacity: 0;
}

.loading-logo img {
    width: 100%;
    display: block;
}

.loading-logo.go {
    animation: loadingLogoIn 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes loadingLogoIn {
    0%   { transform: translateX(-50%) scale(0) rotate(-8deg); opacity: 0; }
    50%  { transform: translateX(-50%) scale(1.2) rotate(2deg); opacity: 1; }
    70%  { transform: translateX(-50%) scale(0.93) rotate(-1deg); opacity: 1; }
    85%  { transform: translateX(-50%) scale(1.05) rotate(0.5deg); opacity: 1; }
    100% { transform: translateX(-50%) scale(1) rotate(0deg); opacity: 1; }
}

/* ===== CLOUD ===== */
.loading-cloud {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    transform: translateY(100%);
    pointer-events: none;
}

.loading-cloud img {
    width: 100%;
    display: block;
}

.loading-cloud.go {
    animation: loadingCloudIn 350ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes loadingCloudIn {
    0%   { transform: translateY(100%); }
    100% { transform: translateY(0); }
}