/* =========================================
   GENKAI トップページ固有CSS（白ベース）
   共通は genkai.css。ここではダークヒーローのロゴアニメ・
   回転ワード・message ネットワーク演出・サービス/事例カードを定義。
   ========================================= */

/* トップではカスタムカーソル/CRTは使わない（白ベース） */
#custom-cursor { display: none !important; }
.crt-overlay { display: none !important; }

/* =========================================
   HERO（ダーク：ロゴアニメを残す唯一の大きなダーク）
   ========================================= */
#hero {
    padding: 150px 0 90px; position: relative; min-height: 100vh;
    display: flex; align-items: center; overflow: hidden;
    background:
        radial-gradient(ellipse at 78% 15%, rgba(53,146,209,0.40), transparent 55%),
        radial-gradient(ellipse at 12% 92%, rgba(226,32,24,0.18), transparent 55%),
        var(--dark);
    color: #eaf0f7;
}
#bg-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.7; }

.hero-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; position: relative; z-index: 2; }
.hero-text-area { max-width: 600px; }
.hero-tag {
    display: inline-block; background: rgba(127,192,240,0.1); border: 1px solid rgba(127,192,240,0.5);
    color: #7fc0f0; padding: 5px 15px; border-radius: 6px; font-size: 0.82rem; margin-bottom: 20px;
    font-family: var(--font-tech); letter-spacing: 1px;
}
.hero-title { font-family: var(--font-head); font-size: clamp(2.5rem, 5vw, 3.8rem); line-height: 1.2; margin-bottom: 28px; font-weight: 900; color: #fff; }
.hero-title span { background: var(--brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-desc { font-size: 1.08rem; color: #c3ccdd; margin-bottom: 36px; line-height: 1.9; }

/* --- 3D LOGO ANIMATION --- */
.hero-visual-area { position: relative; perspective: 1000px; display: flex; justify-content: center; align-items: center; height: 400px; }
.tilt-card { position: relative; width: 100%; max-width: 650px; aspect-ratio: 3 / 1; transform-style: preserve-3d; transition: transform 0.1s ease-out; }
.logo-wrapper { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
#hero svg { width: 100%; height: 100%; overflow: visible; }
.logo-path { stroke-width: 2px; stroke-dasharray: 1500; stroke-dashoffset: 1500; fill-opacity: 0; transition: stroke-dashoffset 2s cubic-bezier(0.19,1,0.22,1), fill-opacity 1s ease 1.5s, stroke-opacity 1s ease 1.5s; }
.active .logo-path { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
.layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; will-change: transform, opacity; }
.layer-main { z-index: 10; filter: drop-shadow(0 0 20px rgba(59,130,246,0.3)); transform: translateZ(40px); }
.layer-glitch { opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.layer-red .logo-path { stroke: #ff0000; fill: #ff0000 !important; fill-opacity: 0.5; }
.layer-blue .logo-path { stroke: #0000ff; fill: #0000ff !important; fill-opacity: 0.5; }
.subtitle-container { position: absolute; bottom: -30px; left: 0; width: 100%; text-align: center; color: #94a3b8; font-family: var(--font-tech); font-size: 1.1rem; letter-spacing: 0.4em; transform: translateZ(20px); opacity: 0; text-shadow: 0 0 5px rgba(59,130,246,0.5); transition: opacity 0.5s; }
.glitch-anim-red { animation: glitchSkewRed 0.4s infinite; opacity: 0.8; }
.glitch-anim-blue { animation: glitchSkewBlue 0.4s infinite; opacity: 0.8; }
@keyframes glitchSkewRed { 0%{transform:translate(0,0)} 20%{transform:translate(-4px,4px)} 40%{transform:translate(-4px,-4px)} 60%{transform:translate(4px,4px)} 80%{transform:translate(4px,-4px)} 100%{transform:translate(0,0)} }
@keyframes glitchSkewBlue { 0%{transform:translate(0,0)} 20%{transform:translate(4px,-4px)} 40%{transform:translate(4px,4px)} 60%{transform:translate(-4px,-4px)} 80%{transform:translate(-4px,4px)} 100%{transform:translate(0,0)} }

@media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 20px; }
    .hero-visual-area { order: -1; height: 250px; }
    .hero-text-area { margin: 0 auto; }
}
@media (max-width: 768px) {
    #hero { padding: 120px 0 60px; min-height: auto; }
    .hero-title { font-size: 2.2rem; }
}

/* =========================================
   ABOUT / 問題提起（白）＋ 回転ワード
   ========================================= */
#about { padding: 96px 0; background: var(--bg); }
.problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 44px; }

.about-catchphrase { font-family: var(--font-head); font-weight: 900; line-height: 1.4; margin: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.catchphrase-line1 { font-size: clamp(1.7rem, 5vw, 3.2rem); font-weight: 800; color: var(--title); white-space: nowrap; }
.rotating-word { display: inline-block; min-width: 4em; font-weight: 900; position: relative; }
.rotating-word.fade-out { animation: glitchFadeOut 0.6s ease-out forwards; }
.rotating-word.fade-in { animation: glitchFadeIn 0.6s ease-out forwards, gradientShift 3s ease-in-out infinite; }
@keyframes glitchFadeOut { 0%{opacity:1;transform:translateX(0) scale(1);filter:blur(0)} 60%{opacity:.4;filter:blur(1px)} 100%{opacity:0;transform:translateX(5px) scale(.95);filter:blur(3px)} }
@keyframes glitchFadeIn { 0%{opacity:0;transform:translateX(-5px) scale(1.05);filter:blur(3px)} 60%{opacity:.8} 100%{opacity:1;transform:translateX(0) scale(1);filter:blur(0)} }
@keyframes gradientShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.catchphrase-line2 { font-size: clamp(2rem, 6vw, 3.6rem); background: var(--brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0; transform: translateY(20px); }
.catchphrase-line2.visible { animation: glitchReveal 1s ease forwards; }
@keyframes glitchReveal { 0%{opacity:0;transform:translateY(20px) skewX(-5deg);filter:blur(5px)} 60%{opacity:1;transform:translateY(-2px) skewX(2deg)} 100%{opacity:1;transform:translateY(0) skewX(0);filter:blur(0)} }

/* =========================================
   SERVICE（白：画像付きカード）
   ========================================= */
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.service-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; display: flex; flex-direction: column; }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.service-img { width: 100%; height: 190px; object-fit: cover; }
.service-body { padding: 24px; flex-grow: 1; }
.service-title { font-family: var(--font-head); font-size: 1.2rem; font-weight: 800; margin-bottom: 12px; color: var(--title); }
.service-desc { font-size: 0.93rem; color: var(--sub); }

/* =========================================
   CASES（白：画像 + キャプション）
   ========================================= */
.case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.case-item { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.case-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.4s; }
.case-item:hover img { transform: scale(1.05); }
.case-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; background: linear-gradient(to top, rgba(7,16,24,0.92), transparent); color: #fff; }
.case-overlay h4 { font-family: var(--font-head); font-size: 1.1rem; font-weight: 800; margin-bottom: 4px; }
.case-overlay p { font-size: 0.86rem; color: #cfd8e6; }

/* =========================================
   MESSAGE（ダーク帯：ネットワーク演出を残す）
   ========================================= */
#message { text-align: center; padding: 100px 0; position: relative; background: var(--dark); overflow: hidden; color: #eaf0f7; }
#message-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.5; }
.message-content { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.message-content h2 { font-family: var(--font-head); font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; color: #fff; margin-bottom: 20px; }
.message-content p { color: #c3ccdd; line-height: 2; margin-bottom: 20px; }
.message-content .sign { color: #fff; font-weight: 700; }