@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,700;0,900;1,700;1,900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

body {
    background-color: #050b14;
    color: #e2e8f0;
    overflow-x: hidden;
    font-family: 'Noto Sans JP', sans-serif;
}
.font-montserrat { font-family: 'Montserrat', sans-serif; }

/* ユーティリティ・エフェクト */
.glow-text-blue { text-shadow: 0 0 15px rgba(0, 212, 255, 0.5); }
.glow-text-orange { text-shadow: 0 0 15px rgba(255, 106, 0, 0.6); }
.glow-border-blue { box-shadow: 0 0 15px rgba(0, 212, 255, 0.3), inset 0 0 10px rgba(0, 212, 255, 0.1); border-color: rgba(0, 212, 255, 0.5); }

/* スプラッシュ画面 */
.splash-screen { position: fixed; inset: 0; z-index: 9999; background: #050b14; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.splash-ball { font-size: 100px; color: #00d4ff; animation: splashFly 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; text-shadow: 0 0 40px #00d4ff; }
@keyframes splashFly { 0% { transform: scale(0) rotate(0deg); opacity: 0; } 60% { transform: scale(1.5) rotate(720deg); opacity: 1; } 100% { transform: scale(1) rotate(1080deg); opacity: 0; } }
.splash-logo { opacity: 0; color: white; animation: fadeInLogo 1s ease-in forwards 1.2s; }
@keyframes fadeInLogo { to { opacity: 1; text-shadow: 0 0 30px #00d4ff; } }
.splash-fadeout { animation: splashOut 0.8s ease-in-out forwards 3s; pointer-events: none; }
@keyframes splashOut { to { opacity: 0; visibility: hidden; } }

/* 巨大タイトル用CSS */
.huge-title { font-size: 60px; line-height: 1; }
@media (min-width: 768px) { .huge-title { font-size: 120px; } }
@media (min-width: 1024px) { .huge-title { font-size: 180px; } }

/* 背景パターン・アニメーション */
.bg-dot-pattern { background-image: radial-gradient(rgba(0, 212, 255, 0.1) 1px, transparent 1px); background-size: 20px 20px; }
.floating-circle { animation: float 10s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.05); } }

.scanline-container { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.scanline { width: 100%; height: 10px; background: linear-gradient(to bottom, transparent, rgba(0, 212, 255, 0.2), transparent); position: absolute; top: 0; left: 0; animation: scan 6s linear infinite; }
@keyframes scan { 0% { transform: translateY(-100px); } 100% { transform: translateY(100vh); } }

.bg-grid-animated { background-image: linear-gradient(rgba(0, 212, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.05) 1px, transparent 1px); background-size: 40px 40px; animation: moveGrid 0.8s linear infinite; transform: skewX(-15deg) scale(1.2); }
@keyframes moveGrid { 0% { background-position: 0 0; } 100% { background-position: -40px 0; } }

/* スクロールフェードイン */
.fade-in-up { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-in-up.visible { opacity: 1; transform: translateY(0); }
.delay-100 { transition-delay: 100ms; } .delay-200 { transition-delay: 200ms; } .delay-300 { transition-delay: 300ms; }

/* KV アニメーション */
@keyframes speedLineAnim { 0% { transform: translateX(100vw); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(-20vw); opacity: 0; } }
.speed-line { position: absolute; right: 0; animation-name: speedLineAnim; animation-timing-function: linear; animation-iteration-count: infinite; }

@keyframes heroTextSlide { 0% { opacity: 0; transform: perspective(2000px) rotateY(12deg) rotateZ(-2deg) translateX(-100px) scale(0.9); } 100% { opacity: 1; transform: perspective(2000px) rotateY(12deg) rotateZ(-2deg) translateX(0) scale(1); } }
.hero-text { opacity: 0; transform-origin: left center; animation: heroTextSlide 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

.hover-glow-text span { display: inline-block; transition: color 0.3s, transform 0.3s, text-shadow 0.3s; }
.hover-glow-text span:hover { color: #00d4ff; text-shadow: 0 0 30px rgba(0, 212, 255, 1); transform: translateY(-8px); }

.perspective-container { perspective: 1000px; transform-style: preserve-3d; }
@keyframes flyBallRightToLeft { 0% { transform: translate3d(60vw, -10vh, -1500px) rotate(0deg); opacity: 0; } 10% { opacity: 0.7; } 80% { opacity: 0.7; } 100% { transform: translate3d(-100vw, 50vh, 800px) rotate(1080deg); opacity: 0; } }
@keyframes flyBallCenter { 0% { transform: translate3d(30vw, 30vh, -2000px) rotate(0deg); opacity: 0; } 10% { opacity: 0.5; } 80% { opacity: 0.5; } 100% { transform: translate3d(-80vw, -40vh, 1200px) rotate(-1080deg); opacity: 0; } }
@keyframes flyBallLeft { 0% { transform: translate3d(80vw, 50vh, -1200px) rotate(0deg); opacity: 0; } 10% { opacity: 0.6; } 80% { opacity: 0.6; } 100% { transform: translate3d(-50vw, -20vh, 600px) rotate(720deg); opacity: 0; } }

/* ネットワーク図アニメーション */
.network-path-base { stroke-dasharray: 6 8; opacity: 0.2; }
.network-path-glow { stroke-dasharray: 800; stroke-dashoffset: 800; transition: stroke-dashoffset 4.5s cubic-bezier(0.4, 0, 0.2, 1); }
.network-path-glow.draw { stroke-dashoffset: 0; }
.network-node { position: absolute; opacity: 0; transform: translate(-50%, -50%) scale(0.3); transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 10; }
.network-node.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* HUD風コーナーフレーム */
.hud-corner-tl { position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-top: 2px solid #00d4ff; border-left: 2px solid #00d4ff; }
.hud-corner-tr { position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-top: 2px solid #00d4ff; border-right: 2px solid #00d4ff; }
.hud-corner-bl { position: absolute; bottom: 0; left: 0; width: 8px; height: 8px; border-bottom: 2px solid #00d4ff; border-left: 2px solid #00d4ff; }
.hud-corner-br { position: absolute; bottom: 0; right: 0; width: 8px; height: 8px; border-bottom: 2px solid #00d4ff; border-right: 2px solid #00d4ff; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #050b14; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #ff6a00; }