@charset "utf-8";

/* --- 1. ベースコンテナ --- */
.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    user-select: none;
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000; /* 真っ黒な背景 */
}

/* --- 2. ノイズエフェクト（強化） --- */
.pace::before {
    content: "";
    position: fixed;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    /* baseFrequency="0.8" で粒を少し粗く、
       numOctaves="4" で重なりを深くして密度を上げています。
    */
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
    
    /* 透過度を 0.4〜0.6 程度まで上げるとかなり濃くなります */
    opacity: 0.5; 
    
    /* オーバーレイや差分モードを使うと、よりザラザラした質感が強調されます */
    mix-blend-mode: screen; 
    
    z-index: 1;
    animation: noiseAnimation 0.1s steps(2) infinite; /* アニメーション速度をアップ */
}

/* --- 3. 不要な要素の完全排除 --- */
.pace .pace-progress,
.pace .pace-activity,
.pace::after {
    display: none !important;
}

/* --- アニメーション：ノイズの動き（より激しく） --- */
@keyframes noiseAnimation {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-5%, -5%); }
    50% { transform: translate(5%, 5%); }
    75% { transform: translate(-5%, 5%); }
    100% { transform: translate(5%, -5%); }
}

/* --- 読み込み完了後の挙動 --- */
.pace.pace-inactive {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}

/* メインコンテンツの初期状態（ノイズの裏側） */
.main {
    opacity: 0;
    transition: opacity 1.0s ease; /* 表示時のフェード時間 */
}

/* 準備完了後に付与するクラス */
body.is-ready .main {
    opacity: 1;
}

/* ノイズ自体の消え方も少し余韻を残す */
.pace.pace-inactive {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}