/* ===========================
   Loading Animation Styles
   =========================== */

/* ローディング画面全体 */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-light);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.8s ease-out;
}

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

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

/* ローディングコンテナ */
.loading-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ロゴパーツの共通スタイル */
.logo-part {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 的(O) - 初期状態で非表示 */
.logo-o-circle {
    width: 25vw;
    height: 25vw;
    opacity: 0;
}

.logo-o-circle img {
    width: 100%;
    height: 100%;
    display: block;
}

.logo-o-circle.drawing {
    opacity: 1;
}

/* 矢印単体 - 飛来前 */
.logo-arrow-single {
    width: 35vh;
    height: 35vh;
    opacity: 0;
    transform: translate(calc(-50% - 15vw), calc(-50% + 45vh)) scale(1);
}

.logo-arrow-single.flying {
    animation: arrowFly 0.4s linear forwards;
}

@keyframes arrowFly {
    0% {
        opacity: 1;
        transform: translate(calc(-50% - 15vw), calc(-50% + 45vh)) scale(1);
    }
    65% {
        opacity: 1;
        transform: translate(calc(-50% - 4.5vh), -50%) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate(calc(-50% - 4.5vh), -50%) scale(1);
    }
}


/* 完成したロゴ(的と矢印の組み合わせ) */
.logo-combined {
    width: 25vw;
    height: 25vw;
    z-index: 2;
    display: none;
}

.logo-combined img {
    width: 100%;
    height: 100%;
}

.logo-combined.shrink-move {
    animation: shrinkAndMove 1.2s ease-out forwards;
}

@keyframes shrinkAndMove {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    58.33% {
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        transform: translate(calc(-50% + 5.3vh), -50%) scale(0.4);
    }
}

/* 他の文字（Gothr ugh） */
.logo-text {
    width: 60vh;
    height: auto;
    opacity: 0;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 3;
}

.logo-text.fade-in {
    display: block;
    animation: textFadeIn 0.3s ease-out forwards;
}

@keyframes textFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* カラーオーバーレイ(赤) */
.color-overlay {
    position: fixed;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 300%;
    background-color: var(--color-main);
    z-index: 1;
    display: none;
    clip-path: polygon(0 33.33%, 50% 33.33%, 66.67% 50%, 50% 66.67%, 0 66.67%);
}

.color-overlay.slide-red {
    display: block;
    animation: slideRed 0.5s linear forwards;
}

.color-overlay.slide-out {
    animation: slideRedOut 1s linear forwards;
}

@keyframes slideRed {
    0% {
        left: -100%;
    }
    100% {
        left: 0;
    }
}

@keyframes slideRedOut {
    0% {
        left: 0;
    }
    100% {
        left: 100%;
    }
}

/* 完成ロゴ(赤の流れに合わせて白に変化) */
.logo-combined.white-filter img,
.logo-text.white-filter img {
    animation: fadeToWhite 0.5s linear forwards;
}

@keyframes fadeToWhite {
    0% {
        filter: brightness(1) saturate(100%) invert(0);
        -webkit-filter: brightness(1) saturate(100%) invert(0);
    }
    100% {
        filter: brightness(0) saturate(100%) invert(1);
        -webkit-filter: brightness(0) saturate(100%) invert(1);
    }
}



/* SVGの場合の追加対応 */
.logo-combined.white-filter svg,
.logo-text.white-filter svg,
.logo-combined.white-filter svg *,
.logo-text.white-filter svg * {
    fill: #FBFBFB !important;
    stroke: #FBFBFB !important;
}

/* カラーオーバーレイ（暗赤） - 左から流れて明るい赤と文字を覆い隠す */
.dark-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-sub);
    z-index: 9998;
    display: none;
    transform: translateX(-100%);
}

.dark-overlay.slide-dark {
    display: block;
    animation: slideDarkCover 1s linear forwards;
}

@keyframes slideDarkCover {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}

/* 白いオーバーレイ - すべてのオーバーレイの下で待機、最後にフェードアウト */
.white-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FBFBFB;
    z-index: 0;
    opacity: 0;
    display: none;
    pointer-events: none;
}

.white-overlay.show {
    display: block;
    opacity: 1;
}

.white-overlay.fade-out {
    animation: whiteFadeOut 2s ease-out forwards;
}

@keyframes whiteFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* フェードインアニメーション */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* レスポンシブ対応 - タブレット (600px - 1024px) */
@media (max-width: 1024px) and (min-width: 600px) {
    /* vminを使用してバランスを保つ */
    .logo-o-circle {
        width: 35vmin;
        height: 35vmin;
    }
    
    .logo-arrow-single {
        width: 35vmin;
        height: 35vmin;
    }
    
    .logo-combined {
        width: 35vmin;
        height: 35vmin;
    }
    
    .logo-text {
        width: 70vmin;
    }
    
    /* タブレット用矢印アニメーション - 左下から斜めに飛んでくる */
    .logo-arrow-single.flying {
        animation: arrowFlyTablet 0.4s linear forwards;
    }
    
    @keyframes arrowFlyTablet {
        0% {
            opacity: 1;
            transform: translate(calc(-50% - 60vmin), calc(-50% + 70vmin)) scale(1);
        }
        65% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
        100% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    }
    
    /* タブレット用アニメーション - 移動後のサイズを大きく */
    .logo-combined.shrink-move {
        animation: shrinkAndMoveTablet 1.2s ease-out forwards;
    }
    
    @keyframes shrinkAndMoveTablet {
        0% {
            transform: translate(-50%, -50%) scale(1);
        }
        58.33% {
            transform: translate(-50%, -50%) scale(1);
        }
        100% {
            transform: translate(calc(-50% + 6.5vmin), -50%) scale(0.7);
        }
    }
}

/* レスポンシブ対応 - モバイル (599px以下) */
@media (max-width: 599px) {
    /* vminを使用してバランスを保つ */
    .logo-o-circle {
        width: 40vmin;
        height: 40vmin;
    }
    
    .logo-arrow-single {
        width: 40vmin;
        height: 40vmin;
    }
    
    .logo-combined {
        width: 40vmin;
        height: 40vmin;
    }
    
    .logo-text {
        width: 80vmin;
    }
    
    /* モバイル用矢印アニメーション - 左下から斜めに飛んでくる */
    .logo-arrow-single.flying {
        animation: arrowFlyMobile 0.4s linear forwards;
    }
    
    @keyframes arrowFlyMobile {
        0% {
            opacity: 1;
            transform: translate(calc(-50% - 75vmin), calc(-50% + 75vmin)) scale(1);
        }
        65% {
            opacity: 1;
            transform: translate(calc(-50% - 3.5vh), -50%) scale(1);
        }
        100% {
            opacity: 1;
            transform: translate(calc(-50% - 3.5vh), -50%) scale(1);
        }
    }
    
    /* モバイル用アニメーション - 移動後のサイズを大きく */
    .logo-combined.shrink-move {
        animation: shrinkAndMoveMobile 1.2s ease-out forwards;
    }
    
    @keyframes shrinkAndMoveMobile {
        0% {
            transform: translate(-50%, -50%) scale(1);
        }
        58.33% {
            transform: translate(-50%, -50%) scale(1);
        }
        100% {
            transform: translate(calc(-50% + 7vh), -50%) scale(0.7);
        }
    }
    
    /* 小さい画面用の微調整 */
    @media (max-height: 600px) {
        .logo-o-circle,
        .logo-arrow-single,
        .logo-combined {
            width: 35vmin;
            height: 35vmin;
        }
        
        .logo-text {
            width: 70vmin;
        }
    }
}

/* レスポンシブ対応 - 小型モバイル (424px以下) */
@media (max-width: 424px) {
    /* 小型モバイル用矢印アニメーション - 左下から斜めに飛んでくる */
    .logo-arrow-single.flying {
        animation: arrowFlySmallMobile 0.4s linear forwards;
    }
    
    @keyframes arrowFlySmallMobile {
        0% {
            opacity: 1;
            transform: translate(calc(-50% - 75vmin), calc(-50% + 80vmin)) scale(1);
        }
        65% {
            opacity: 1;
            transform: translate(calc(-50% - 3.5vmin), -50%) scale(1);
        }
        100% {
            opacity: 1;
            transform: translate(calc(-50% - 3.5vmin), -50%) scale(1);
        }
    }
    
    /* 小型モバイル用アニメーション - 位置を統一 */
    .logo-combined.shrink-move {
        animation: shrinkAndMoveSmallMobile 1.2s ease-out forwards;
    }
    
    @keyframes shrinkAndMoveSmallMobile {
        0% {
            transform: translate(-50%, -50%) scale(1);
        }
        58.33% {
            transform: translate(-50%, -50%) scale(1);
        }
        100% {
            transform: translate(calc(-50% + 7.5vmin), -50%) scale(0.7);
        }
    }
    
    .logo-text {
        width: 85vmin;
    }
}