/* animation.css */
.logo-wrapper {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    background: #ffffff; /* 白背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.math-logo {
    width: 85%;
    max-width: 350px;
    overflow: visible;
}

.arc-line {
    fill: none;
    stroke: #0066ff; /* 知的な青 */
    stroke-width: 2.2;
    stroke-linecap: round;
    /* JSで計算するため初期値は大きく */
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    
    /* duration: 2.5s (ゆったりとした描画)
       easing: cubic-bezier(0.3, 0, 0.1, 1) 
       -> 出だしは意識がある速度で、中盤から終盤にかけて非常に滑らかに減速
    */
    animation: draw 2.5s cubic-bezier(0.3, 0, 0.1, 1) forwards;
}

/* 遅延を少し広げて、線が追いかけっこをするような情緒的な動きに */
.arc-line:nth-child(1) { animation-delay: 0.0s; }
.arc-line:nth-child(2) { animation-delay: 0.15s; }
.arc-line:nth-child(3) { animation-delay: 0.3s; }
.arc-line:nth-child(4) { animation-delay: 0.45s; }

@keyframes draw {
    to { stroke-dashoffset: 0; }
}

/* 画面切り替え時のフェード */
.logo-wrapper.fade-out {
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}