/*
===============================================
Shinka AI - Loading Screen & 3D Cube Logo
CSS3D キューブによる立体回転ロゴ
===============================================
*/

/* ========================================
   ローディング画面オーバーレイ
   ======================================== */

.c-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* ダークバリアント */
.c-loading--dark {
    background: #061B42;
}

.c-loading--dark .c-loading__cube-face {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

.c-loading--dark .c-loading__bar {
    background: rgba(255, 255, 255, 0.08);
}

.c-loading.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ========================================
   ローディング 3Dキューブ
   ======================================== */

.c-loading__cube-wrap {
    perspective: 600px;
    width: 100px;
    height: 100px;
    margin-bottom: 32px;
}

.c-loading__cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: cube-spin-loading 3s ease-in-out infinite;
}

.c-loading__cube-face {
    position: absolute;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: visible;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(33, 122, 254, 0.08);
}

.c-loading__cube-face img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

/* 各面の配置 (50px = 100px / 2) */
.c-loading__cube-face--front  { transform: translateZ(50px); }
.c-loading__cube-face--back   { transform: rotateY(180deg) translateZ(50px); }
.c-loading__cube-face--right  { transform: rotateY(90deg) translateZ(50px); }
.c-loading__cube-face--left   { transform: rotateY(-90deg) translateZ(50px); }
.c-loading__cube-face--top    { transform: rotateX(90deg) translateZ(50px); }
.c-loading__cube-face--bottom { transform: rotateX(-90deg) translateZ(50px); }

/* ========================================
   ローディングバー
   ======================================== */

.c-loading__bar {
    width: 120px;
    height: 2px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.c-loading__bar-fill {
    width: 0%;
    height: 100%;
    background: var(--gradient-blue-purple, linear-gradient(135deg, #0B2D6E, #2D7DD2));
    border-radius: 2px;
    animation: loading-bar 2s ease-in-out infinite;
}

/* ========================================
   ヒーロー 3Dキューブ
   ======================================== */

.shinka-hero__logo-3d {
    perspective: 800px;
    width: 140px;
    height: 140px;
    margin: 0 auto var(--spacing-2xl);
}

.shinka-hero__cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: cube-spin-hero 8s ease-in-out infinite;
}

.shinka-hero__cube-face {
    position: absolute;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: visible;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(33, 122, 254, 0.06);
    border-radius: 12px;
    box-shadow: inset 0 0 30px rgba(33, 122, 254, 0.03);
}

.shinka-hero__cube-face img {
    width: 65%;
    height: 65%;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(33, 122, 254, 0.2));
}

/* 各面の配置 (70px = 140px / 2) */
.shinka-hero__cube-face--front  { transform: translateZ(70px); }
.shinka-hero__cube-face--back   { transform: rotateY(180deg) translateZ(70px); }
.shinka-hero__cube-face--right  { transform: rotateY(90deg) translateZ(70px); }
.shinka-hero__cube-face--left   { transform: rotateY(-90deg) translateZ(70px); }
.shinka-hero__cube-face--top    { transform: rotateX(90deg) translateZ(70px); }
.shinka-hero__cube-face--bottom { transform: rotateX(-90deg) translateZ(70px); }

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

/* ローディング: やや速い多軸回転 */
@keyframes cube-spin-loading {
    0%   { transform: rotateX(0deg)   rotateY(0deg); }
    25%  { transform: rotateX(90deg)  rotateY(90deg); }
    50%  { transform: rotateX(180deg) rotateY(180deg); }
    75%  { transform: rotateX(270deg) rotateY(270deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* ヒーロー: ゆったり浮遊感のある回転 */
@keyframes cube-spin-hero {
    0%   { transform: rotateX(-15deg) rotateY(0deg)   translateY(0px); }
    25%  { transform: rotateX(5deg)   rotateY(90deg)  translateY(-8px); }
    50%  { transform: rotateX(-10deg) rotateY(180deg) translateY(0px); }
    75%  { transform: rotateX(5deg)   rotateY(270deg) translateY(-8px); }
    100% { transform: rotateX(-15deg) rotateY(360deg) translateY(0px); }
}

@keyframes loading-bar {
    0%   { width: 0%; }
    50%  { width: 100%; }
    100% { width: 0%; }
}

/* ========================================
   レスポンシブ
   ======================================== */

@media (max-width: 767px) {
    .c-loading__cube-wrap {
        width: 70px;
        height: 70px;
    }

    .c-loading__cube-face {
        width: 70px;
        height: 70px;
    }

    .c-loading__cube-face--front  { transform: translateZ(35px); }
    .c-loading__cube-face--back   { transform: rotateY(180deg) translateZ(35px); }
    .c-loading__cube-face--right  { transform: rotateY(90deg) translateZ(35px); }
    .c-loading__cube-face--left   { transform: rotateY(-90deg) translateZ(35px); }
    .c-loading__cube-face--top    { transform: rotateX(90deg) translateZ(35px); }
    .c-loading__cube-face--bottom { transform: rotateX(-90deg) translateZ(35px); }

    .c-loading__bar {
        width: 80px;
    }

    .shinka-hero__logo-3d {
        width: 100px;
        height: 100px;
    }

    .shinka-hero__cube-face {
        width: 100px;
        height: 100px;
    }

    .shinka-hero__cube-face--front  { transform: translateZ(50px); }
    .shinka-hero__cube-face--back   { transform: rotateY(180deg) translateZ(50px); }
    .shinka-hero__cube-face--right  { transform: rotateY(90deg) translateZ(50px); }
    .shinka-hero__cube-face--left   { transform: rotateY(-90deg) translateZ(50px); }
    .shinka-hero__cube-face--top    { transform: rotateX(90deg) translateZ(50px); }
    .shinka-hero__cube-face--bottom { transform: rotateX(-90deg) translateZ(50px); }
}

/* ========================================
   JSフォールバック：5秒後に自動非表示
   ======================================== */

@keyframes loading-fallback-hide {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

.c-loading {
    animation: loading-fallback-hide 0.6s 5s forwards;
}

.c-loading.is-hidden {
    animation: none;
}

/* アクセシビリティ：モーション軽減 */
@media (prefers-reduced-motion: reduce) {
    .c-loading__cube {
        animation: none;
        transform: rotateX(-15deg) rotateY(-30deg);
    }

    .c-loading__bar-fill {
        animation: none;
        width: 50%;
    }

    .shinka-hero__cube {
        animation: none;
        transform: rotateX(-15deg) rotateY(-30deg);
    }
}