/* ========================================
   AITOLIE - Loading Screen
   Dark Luxury Theme with Gold Accents
   ======================================== */

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: visibility 0s 1.5s;
    /* アニメーション完了後に非表示 */
}

/* Opening Curtains */
.loading__curtain {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    background: #0A0A0A;
    z-index: 0;
    /* 線が広がってから開くように遅延させる (0.6s) */
    transition: transform 1s cubic-bezier(0.8, 0, 0.2, 1) 0.6s;
}

.loading__curtain--top {
    top: 0;
    /* border-bottom removed */
}

.loading__curtain--bottom {
    bottom: 0;
    /* border-top removed */
}

/* Gold Line Animation */
.loading__line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #C9A962, #FFFFFF, #C9A962, transparent);
    z-index: 2;
    opacity: 0;
    box-shadow: 0 0 20px rgba(201, 169, 98, 0.8);
}

@keyframes lineSpread {
    0% {
        width: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    60% {
        width: 100%;
        opacity: 1;
    }

    100% {
        width: 100%;
        opacity: 0;
    }
}

/* Trigger Animations when hidden */
.loading.is-hidden {
    visibility: hidden;
}

.loading.is-hidden .loading__curtain--top {
    transform: translateY(-100%);
}

.loading.is-hidden .loading__curtain--bottom {
    transform: translateY(100%);
}

.loading.is-hidden .loading__line {
    /* 線のアニメーション実行 */
    animation: lineSpread 1s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

.loading.is-hidden .loading__content {
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.4s, transform 0.4s;
}

.loading__content {
    width: 100%;
    max-width: 400px;
    position: relative;
    text-align: center;
    z-index: 10;
    /* カーテンより上に */
}

/* SVG Logo Text Animation */
.loading__logo {
    width: 100%;
    max-width: 280px;
    height: 60px;
    margin-bottom: 48px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.loading__logo-text {
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 700;
    fill: none;
    stroke: #C9A962;
    stroke-width: 0.5;
}

/* Letter-by-letter animation */
.letter {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    fill: transparent;
    stroke: transparent;
    animation: draw-letter 0.4s ease-out forwards;
}

.letter-1 {
    animation-delay: 0s;
}

.letter-2 {
    animation-delay: 0.3s;
}

.letter-3 {
    animation-delay: 0.6s;
}

.letter-4 {
    animation-delay: 0.9s;
}

.letter-5 {
    animation-delay: 1.2s;
}

.letter-6 {
    animation-delay: 1.5s;
}

.letter-7 {
    animation-delay: 1.8s;
}

@keyframes draw-letter {
    0% {
        stroke: transparent;
        stroke-dashoffset: 100;
        fill: transparent;
    }

    1% {
        stroke: #C9A962;
    }

    50% {
        stroke: #C9A962;
        stroke-dashoffset: 0;
        fill: transparent;
    }

    100% {
        stroke: #C9A962;
        stroke-dashoffset: 0;
        fill: #C9A962;
    }
}

/* Chinchilla Animation */
.loading__animal-container {
    position: relative;
    width: 100%;
    height: 60px;
    margin-bottom: 12px;
}

.loading__animal {
    width: 50px;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    /* Invert to white and add gold tint */
    filter: invert(1) sepia(1) saturate(0.5) hue-rotate(10deg) brightness(1.2) drop-shadow(0 0 10px rgba(201, 169, 98, 0.5));
}

/* Progress Bar */
.loading__bar-container {
    width: 100%;
    height: 2px;
    background: rgba(201, 169, 98, 0.15);
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.loading__bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #A68B3D 0%, #C9A962 50%, #E8D5A3 100%);
    transition: width 0.1s linear;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(201, 169, 98, 0.5);
}

/* Percentage Text */
.loading__text {
    margin-top: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #C9A962;
    letter-spacing: 0.2em;
}

/* Floating particles animation */
.loading::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #C9A962;
    border-radius: 50%;
    top: 50%;
    left: 20%;
    box-shadow:
        0 0 10px #C9A962,
        60vw -20vh 0 #E8D5A3,
        30vw 30vh 0 rgba(201, 169, 98, 0.5),
        70vw 10vh 0 rgba(232, 213, 163, 0.4),
        10vw -30vh 0 rgba(201, 169, 98, 0.3);
    animation: float-particles 8s ease-in-out infinite;
}

@keyframes float-particles {

    0%,
    100% {
        transform: translateY(0) translateX(0);
        opacity: 0.6;
    }

    50% {
        transform: translateY(-20px) translateX(10px);
        opacity: 1;
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .loading {
        overflow: hidden;
        /* 横スクロール防止 */
    }

    .loading__content {
        max-width: 85%;
        padding: 0;
    }

    .loading__logo {
        width: 100%;
        height: auto;
        margin-bottom: 32px;
    }

    .loading__logo-text {
        font-size: 24px;
    }

    .loading__animal-container {
        height: 50px;
        margin-bottom: 8px;
    }

    .loading__animal {
        width: 40px;
    }

    .loading__text {
        font-size: 11px;
        margin-top: 16px;
    }
}