/* 基本的なリセットと背景設定 */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* 明るい初期背景色 */
    background-color: hsl(0, 50%, 95%);
    transition: background-color 2s ease-in-out;
}

/* ロゴを配置するコンテナ */
#logo-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}

/* ロゴのスタイル */
.logo {
    position: absolute;
    width: 50vw;
    max-width: 400px;
    height: auto;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* 奥のロゴはさらに薄く */
.logo[data-depth="0.1"] { opacity: 0.05; }
.logo[data-depth="0.2"] { opacity: 0.15; }
/* 前面のロゴは少し濃く */
.logo[data-depth="0.8"] { opacity: 0.25; }
.logo[data-depth="1.2"] { opacity: 0.40; }