/* =========================================
   Hero Section 
   ========================================= */

/* 3D空間のコンテナ */
.perspective-container {
    perspective: 1000px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 奥から手前に永遠に流れる3Dグリッド */
.grid-plane {
    position: absolute;
    width: 200%;
    height: 200%;
    left: -50%;
    bottom: -50%;
    /* 極めて薄いグレーの線 */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    /* 空間を奥に倒すことで奥行きを出す */
    transform: rotateX(75deg);
    animation: grid-move 3s linear infinite;
}

@keyframes grid-move {
    0% { background-position: 0 0; }
    100% { background-position: 0 60px; }
}

/* 中央を白くして文字をくっきり見せる */
.bg-radial-white {
    background: radial-gradient(circle at center 40%, rgba(255,255,255,0.9) 20%, rgba(255,255,255,0) 70%);
}

/* 縦に走る光のライン（スキャンライン） */
.light-beam {
    position: absolute;
    width: 1px;
    height: 100vh;
    top: -100vh;
}

/* 1本目：極薄い朱色の光 */
.beam-1 {
    left: 25%;
    background: linear-gradient(to bottom, transparent, rgba(218, 76, 31, 0.2), transparent);
    animation: beam-drop 8s ease-in-out infinite;
}

/* 2本目：グレーの光 */
.beam-2 {
    left: 75%;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05), transparent);
    animation: beam-drop 12s ease-in-out infinite;
    animation-delay: 4s;
}

@keyframes beam-drop {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(200vh); opacity: 0; }
}

/* --- テキストサイズ --- */
/* (以下はそのまま) */
.hero-text {
    line-height: 1.15;
    font-size: 13vw !important; 
}

@media (min-width: 768px) {
    .hero-text {
        font-size: 5.5vw !important; 
        white-space: nowrap;
    }
}

@media (min-width: 1280px) {
    .hero-text {
        font-size: 5rem !important; 
    }
}

/* =========================================
   SCROLL DOWN Animation
   ========================================= */
.scroll-line {
    width: 1px;
    height: 70px;
    /* ベースの線を薄いグレーに変更 */
    background-color: rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    margin-top: 10px;
    /* 白背景用に付けていた影を削除 */
    box-shadow: none; 
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 動くアニメーションの線を黒に近いグレーに変更 */
    background-color: #333;
    animation: scrollDown 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes scrollDown {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

/* =========================================
   選ばれる理由：番号（白抜き → ホバーで黒塗り）
   ========================================= */
#strength .strength-number {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px #333;
    transition:
        color 0.45s ease,
        -webkit-text-fill-color 0.45s ease,
        -webkit-text-stroke-width 0.45s ease,
        -webkit-text-stroke-color 0.45s ease;
}

#strength .group:hover .strength-number {
    color: #333;
    -webkit-text-fill-color: #333;
    -webkit-text-stroke-width: 0;
    -webkit-text-stroke-color: transparent;
}