/* =================================================================
 * Reflex Test Styles (Complete: Parallax, Animation, Dark Mode)
 * =================================================================
 */

/* --- 全体シーン --- */
#road-scene {
    background: linear-gradient(to bottom, #87CEEB 0%, #87CEEB 40%, #34495e 40%, #2c3e50 100%);
    overflow: hidden;
    perspective: 300px;
    position: relative;
}

/* --- 空と雲 (遠景) --- */
.sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 45%;
    background: linear-gradient(to bottom, #0d47a1, #64b5f6);
    overflow: hidden;
}

.clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.4) 5%, transparent 20%),
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.5) 8%, transparent 25%),
        radial-gradient(circle at 80% 15%, rgba(255, 255, 255, 0.3) 6%, transparent 15%);
    background-size: 50% 100%;
    animation: moveSky 60s linear infinite;
    animation-play-state: paused;
}

/* --- 山 (中景) --- */
.mountains {
    position: absolute;
    top: 30%;
    left: 0;
    width: 200%;
    height: 15%;
    background-image: linear-gradient(to bottom, #555 20%, #222 100%);
    -webkit-mask-image: linear-gradient(to top, black 50%, transparent 100%);
    clip-path: polygon(0% 100%, 10% 20%, 25% 80%, 40% 10%, 55% 60%, 70% 30%, 85% 70%, 100% 100%,
            110% 20%, 125% 80%, 140% 10%, 155% 60%, 170% 30%, 185% 70%, 200% 100%);
    opacity: 0.8;
    animation: moveMountains 20s linear infinite;
    animation-play-state: paused;
}

/* --- 道路コンテナ（3D変形） --- */
.road-container {
    position: absolute;
    top: 45%;
    left: 50%;
    width: 1200px;
    height: 600px;
    transform: translateX(-50%) rotateX(60deg);
    transform-origin: 50% 0%;
    background-color: #2c3e50;
    overflow: hidden;
}

/* --- 路肩の風景 (近景) --- */
.side-landscape {
    position: absolute;
    top: 0;
    width: 30%;
    height: 100%;
    background-color: #2e7d32;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 190px, #3e2723 190px, #3e2723 200px),
        repeating-linear-gradient(0deg, transparent, transparent 45px, #bdc3c7 45px, #bdc3c7 50px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.1) 20px, rgba(0, 0, 0, 0) 40px);
    background-size: 100% 1000px;
    animation: moveRoad 1s linear infinite;
    animation-play-state: paused;
}

.side-landscape.left {
    left: 0;
    border-right: 10px solid #bdc3c7;
}

.side-landscape.right {
    right: 0;
    border-left: 10px solid #bdc3c7;
}

/* --- 道路本体 --- */
.road {
    position: absolute;
    top: 0;
    left: 30%;
    width: 40%;
    height: 100%;
    background-color: #34495e;
    box-shadow: inset 10px 0 20px rgba(0, 0, 0, 0.5), inset -10px 0 20px rgba(0, 0, 0, 0.5);
}

.road-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAKrVq36zwjjgzjIHEwgMYiCRUA0IwMzAwMAMw0JPw3jT94AAAAASUVORK5CYII=');
    opacity: 0.3;
    animation: moveRoad 0.5s linear infinite;
    animation-play-state: paused;
}

.center-line {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4%;
    height: 100%;
    background: repeating-linear-gradient(to bottom, #ffffff, #ffffff 15%, transparent 15%, transparent 30%);
    transform: translateX(-50%);
    animation: moveRoad 0.5s linear infinite;
    animation-play-state: paused;
}

.lane-line {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
}

.lane-line.left {
    left: 10%;
}

.lane-line.right {
    right: 10%;
}

/* --- 車体 --- */
.car-body {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 35%;
    z-index: 15;
    transform-origin: center bottom;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.hood {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #1a252f, #000);
    border-radius: 50% 50% 0 0 / 20% 20% 0 0;
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.8);
}

.dashboard {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background-color: #111;
    border-top: 1px solid #333;
}

/* --- 挙動アニメーション (Keyframes) --- */
@keyframes moveRoad {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 1000px;
    }
}

@keyframes moveMountains {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes moveSky {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -50% 0;
    }
}

@keyframes signalFlash {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-signal {
    animation: signalFlash 0.2s infinite;
}

/* ブレーキ中の沈み込み（ノーズダイブ） */
.car-body.braking-dive {
    transform: translateY(15px) rotateX(2deg);
    transition: transform 0.2s cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

/* 停止時の揺り戻し（リコイル） */
.car-body.braking-recoil {
    animation: recoil 0.6s ease-out forwards;
}

@keyframes recoil {
    0% {
        transform: translateY(15px) rotateX(2deg);
    }

    40% {
        transform: translateY(-5px) rotateX(-1deg);
    }

    100% {
        transform: translateY(0) rotateX(0);
    }
}

/* --- その他UI --- */
.drop-shadow {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8));
}

#btn-brake {
    transition: transform 0.1s, border-bottom-width 0.1s, background-color 0.2s;
}

#btn-brake:active:not(.disabled) {
    transform: translateY(4px);
    border-bottom-width: 4px !important;
    background-color: #c0392b !important;
    border-color: #a93226 !important;
}

/* --- 関連ツールリンク (Footer) --- */
.vision-tool-card {
    transition: all 0.2s ease;
}

.vision-tool-card:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
    z-index: 1;
}

/* =================================================================
 * 「詳しい使い方・測定のポイント」セクション限定のダークモード修正
 * (#how-to-use-collapse 内のみ適用 / 他箇所へ影響させない)
 * =================================================================
 */

/* カードラッパー (.bg-light) を暗く */
[data-bs-theme="dark"] #how-to-use-collapse .bg-light {
    background-color: #212529 !important;
    /* Dark Gray */
    border-color: #495057 !important;
    color: #e0e0e0 !important;
}

/* 内部カード (.bg-white) を少し明るいグレーに */
[data-bs-theme="dark"] #how-to-use-collapse .bg-white {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #e0e0e0 !important;
}

/* テキスト色の補正 */
[data-bs-theme="dark"] #how-to-use-collapse h3,
[data-bs-theme="dark"] #how-to-use-collapse h6,
[data-bs-theme="dark"] #how-to-use-collapse p,
[data-bs-theme="dark"] #how-to-use-collapse strong,
[data-bs-theme="dark"] #how-to-use-collapse .text-dark {
    color: #e0e0e0 !important;
}

[data-bs-theme="dark"] #how-to-use-collapse .text-muted,
[data-bs-theme="dark"] #how-to-use-collapse .small.text-muted {
    color: #adb5bd !important;
    /* 明るいグレー */
}