/* ローディング画面のスタイル */
.loading-screen {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #042104;
    z-index: 9999;
    animation: animateTheBodyBg 10s linear infinite;
    transition: opacity 0.62s ease, visibility 0.62s ease;
}

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

@keyframes animateTheBodyBg {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(360deg);
    }
}

.loading-screen .loader {
    position: relative;
    width: 140px;
    height: 140px;
}

.loading-screen .loader span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(calc(18deg * var(--i)));
}

.loading-screen .loader span::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #00ff0a;
    box-shadow: 0 0 10px #00ff0a, 0 0 20px #00ff0a, 0 0 30px #00ff0a,
                0 0 40px #00ff0a, 0 0 60px #00ff0a, 0 0 80px #00ff0a,
                0 0 100px #00ff0a;
    animation: animateTheSpan 2s linear infinite calc(.1s * var(--i));
}

@keyframes animateTheSpan {
    0% {
        transform: scale(1);
    }
    80%, 90% {
        transform: scale(0);
    }
}

body.is-loading {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .loading-screen {
        transition: none;
    }

    .loading-screen .loader span::before {
        animation: none;
    }
}

/* 背景のソフトなグラデーション装飾（Blobs） */
.main-content-custom::before,
.main-content-custom::after {
    content: '';
    position: fixed;
    width: 90vw;
    height: 90vw;
    max-width: 1000px;
    max-height: 1000px;
    border-radius: 50%;
    filter: blur(150px); /* ぼかしを強くしてより幻想的に */
    z-index: -1;
    opacity: 0.2; /* 透明度を上げて色の存在感を強調 */
    pointer-events: none;
}

.main-content-custom::before {
    top: -15%;
    right: -10%;
    background: radial-gradient(circle, #c0df91 0%, transparent 70%);
}

.main-content-custom::after {
    bottom: 5%;
    left: -15%;
    background: radial-gradient(circle, #688938 0%, transparent 70%);
}

/* Bootstrapのbg-lightをよりハッキリとしたニュアンスカラーに変更 */
.bg-light {
    background-color: #e6f2d8 !important; /* 白く見えにくいように緑を少し濃く */
}

/* Projects / Contact の背景と境界を緑系グラデーションで馴染ませる */
#projects {
    position: relative;
    isolation: isolate;
    background: linear-gradient(
        to bottom,
        rgba(216, 238, 198, 0.18) 0%,
        rgba(216, 238, 198, 0.46) 24%,
        rgba(216, 238, 198, 0.58) 50%,
        rgba(216, 238, 198, 0.46) 76%,
        rgba(216, 238, 198, 0.18) 100%
    );
}

#projects::before,
#projects::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 180px;
    pointer-events: none;
    z-index: 0;
    filter: blur(18px);
    background: linear-gradient(
        to bottom,
        rgba(216, 238, 198, 0) 0%,
        rgba(216, 238, 198, 0.28) 30%,
        rgba(216, 238, 198, 0.44) 50%,
        rgba(216, 238, 198, 0.28) 70%,
        rgba(216, 238, 198, 0) 100%
    );
}

#projects::before {
    top: -90px;
}

#projects::after {
    bottom: -90px;
}

#projects .container {
    position: relative;
    z-index: 1;
}