/* ==========================================
   Cyberpunk Custom Neon Style for Dark Mode
   ========================================== */

/* 1. Canvas Styling for Three.js background */
canvas#cyberpunk-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* -10から-1に変更して、背景の上にコンテンツの下に配置 */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

body.dark canvas#cyberpunk-canvas {
    opacity: 1;
}

/* 2. Cyberpunk Colors & Glow Effects when .dark is active */
html.dark,
body.dark {
    /* CSS Variables Overwrite */
    --background-color: transparent !important; /* 背景を透明にしてCanvasが見えるようにする */
    --secondary-background-color: rgba(12, 12, 28, 0.7) !important;
    --text-color: #e2e8f0 !important;
    --text-secondary-color: #c084fc !important;
    --primary-color: #ff007f !important;
    --secondary-color: #06060f !important;
    --text-link-color: #00ffff !important;
    
    background-color: transparent !important; /* 透明化 */
    color: #e2e8f0 !important;
}

/* コンテンツ部分やセクションの背景も透明化してCanvasを透過させる */
body.dark #content,
body.dark section,
body.dark .container,
body.dark .row {
    background-color: transparent !important;
}

/* Neon Flicker Keyframes (全体的な緩やかな揺らぎ) */
@keyframes neon-pink-flicker {
    0%, 100% {
        text-shadow: 0 0 5px #fff, 0 0 10px #ff007f, 0 0 20px #ff007f, 0 0 40px #ff007f, 0 0 60px #ff007f !important;
        opacity: 1;
    }
    50% {
        text-shadow: 0 0 4px #fff, 0 0 8px rgba(255, 0, 127, 0.7), 0 0 15px rgba(255, 0, 127, 0.5) !important;
        opacity: 0.95;
    }
}

@keyframes neon-cyan-flicker {
    0%, 100% {
        text-shadow: 0 0 5px #fff, 0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 30px #00f0ff, 0 0 50px #00f0ff !important;
        opacity: 1;
    }
    50% {
        text-shadow: 0 0 4px #fff, 0 0 8px rgba(0, 240, 255, 0.7), 0 0 15px rgba(0, 240, 255, 0.5) !important;
        opacity: 0.95;
    }
}

/* Neon Faulty (故障したネオン管の接触不良) Flicker Keyframes */
@keyframes neon-pink-faulty-flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 85%, 89%, 100% {
        text-shadow: 0 0 4px #fff, 0 0 10px #ff007f, 0 0 20px #ff007f, 0 0 40px #ff007f, 0 0 60px #ff007f !important;
        color: #fff !important;
        opacity: 1;
    }
    19%, 21%, 23%, 24%, 54%, 55%, 56%, 86%, 87%, 88% {
        text-shadow: none !important;
        color: rgba(255, 0, 127, 0.2) !important;
        opacity: 0.3;
    }
}

@keyframes neon-cyan-faulty-flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 70%, 72%, 100% {
        text-shadow: 0 0 4px #fff, 0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 30px #00f0ff, 0 0 50px #00f0ff !important;
        color: #fff !important;
        opacity: 1;
    }
    20%, 22%, 24%, 55%, 71% {
        text-shadow: none !important;
        color: rgba(0, 240, 255, 0.2) !important;
        opacity: 0.35;
    }
}

/* 文字単体の基本スタイル（ネオン管のチューブを再現） */
body.dark .neon-char {
    font-family: 'DotGothic16', sans-serif !important;
    display: inline-block;
    color: #fff !important;
    text-shadow: 0 0 5px #fff, 0 0 10px #ff007f, 0 0 20px #ff007f, 0 0 40px #ff007f, 0 0 60px #ff007f !important;
    animation: neon-pink-flicker 4s infinite alternate;
}

/* シアン（サブタイトル用）の文字単体スタイル */
body.dark .neon-char.neon-cyan-char {
    text-shadow: 0 0 5px #fff, 0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 30px #00f0ff, 0 0 50px #00f0ff !important;
    animation: neon-cyan-flicker 4s infinite alternate;
}

/* 故障点滅クラスの適用（不規則なチカチカ） */
body.dark .neon-char.neon-faulty {
    animation: neon-pink-faulty-flicker 5s infinite !important;
}

body.dark .neon-char.neon-faulty-cyan {
    animation: neon-cyan-faulty-flicker 6s infinite !important;
}

/* Glow effect for headings - ネオン発光を大幅に強化 */
body.dark h1, 
body.dark h2, 
body.dark h3, 
body.dark h4, 
body.dark h5, 
body.dark h6 {
    color: #ffffff !important;
    text-shadow: 0 0 5px #fff, 0 0 10px rgba(0, 240, 255, 0.8), 0 0 20px rgba(0, 240, 255, 0.6), 0 0 30px rgba(0, 240, 255, 0.4) !important;
    animation: neon-cyan-flicker 8s infinite alternate;
}

/* Glow effect for main title */
body.dark .hero-intro {
    color: #ffffff !important;
    text-shadow: 0 0 5px #fff, 0 0 10px rgba(0, 240, 255, 0.8), 0 0 20px rgba(0, 240, 255, 0.5) !important;
}

body.dark #hero h1,
body.dark #hero h2,
body.dark section h3 {
    font-family: 'DotGothic16', sans-serif !important;
    text-shadow: none !important; /* 親要素の不要な影の重なりを消去して文字の視認性を向上 */
}

/* 3. Glassmorphism for Cards and Containers */
body.dark .card,
body.dark .experience-container,
body.dark .list-group-item,
body.dark .bg-white {
    background-color: rgba(10, 10, 25, 0.65) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(0, 240, 255, 0.2) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 240, 255, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body.dark .card-header,
body.dark .card-body,
body.dark .card-footer {
    background-color: transparent !important;
    border: none !important;
}

/* Card Hover animation */
body.dark .card:hover,
body.dark .experience-container:hover {
    border-color: rgba(255, 0, 127, 0.5) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 0, 127, 0.4) !important;
    transform: translateY(-4px);
}

/* 4. Navigation Bar Cyberpunk Style */
body.dark .navbar {
    background-color: rgba(4, 4, 13, 0.8) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 2px solid rgba(255, 0, 127, 0.5) !important;
    box-shadow: 0 0 15px rgba(255, 0, 127, 0.3);
}

body.dark .navbar-brand {
    font-family: 'DotGothic16', sans-serif !important;
    color: #fff !important;
    text-shadow: none !important; /* 重複する影を消去 */
}

body.dark .nav-link {
    color: #e2e8f0 !important;
    transition: all 0.2s ease;
}

body.dark .nav-link:hover,
body.dark .nav-link.active {
    color: #ff007f !important;
    text-shadow: 0 0 8px rgba(255, 0, 127, 0.6);
}

/* 5. Buttons and Badges Customization */
body.dark .btn,
body.dark .badge-secondary,
body.dark .badge {
    background-color: rgba(0, 240, 255, 0.05) !important;
    border: 1px solid #00f0ff !important;
    color: #00f0ff !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.4), inset 0 0 5px rgba(0, 240, 255, 0.2) !important;
    text-shadow: 0 0 5px rgba(0, 240, 255, 0.6) !important;
    transition: all 0.3s ease;
}

body.dark .btn:hover {
    background-color: #ff007f !important;
    border-color: #ff007f !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px #ff007f, inset 0 0 10px rgba(255, 0, 127, 0.4) !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
}

/* Social icons custom glow */
body.dark .social-icon {
    border-radius: 50% !important;
    width: 45px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: #00f0ff !important;
    color: #00f0ff !important;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.5), inset 0 0 8px rgba(0, 240, 255, 0.3) !important;
    background-color: rgba(0, 240, 255, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body.dark .social-icon:hover {
    border-color: #ff007f !important;
    color: #ff007f !important;
    box-shadow: 0 0 25px #ff007f, inset 0 0 12px rgba(255, 0, 127, 0.5) !important;
    background-color: rgba(255, 0, 127, 0.1) !important;
    transform: scale(1.15) rotate(8deg) !important;
}

/* Badges hover/custom style */
body.dark .badge-secondary:hover {
    background-color: rgba(255, 0, 127, 0.1) !important;
    border-color: #ff007f !important;
    color: #ff007f !important;
    box-shadow: 0 0 12px rgba(255, 0, 127, 0.5) !important;
}

/* Experience Active tab styling */
body.dark .nav-pills .nav-link.active {
    background-color: rgba(255, 0, 127, 0.2) !important;
    border: 1px solid #ff007f !important;
    color: #ff007f !important;
    text-shadow: 0 0 5px rgba(255, 0, 127, 0.5);
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.3);
}

body.dark .nav-pills .nav-link {
    border: 1px solid transparent;
}

/* 6. List and Skills styling */
body.dark #about ul li {
    list-style: none;
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}

body.dark #about ul li::before {
    content: "⚡";
    position: absolute;
    left: 0;
    color: #ff007f;
    text-shadow: 0 0 5px rgba(255, 0, 127, 0.8);
}

body.dark a {
    color: #00ffff;
    text-decoration: none;
    transition: all 0.2s ease;
}

body.dark a:hover {
    color: #ff007f;
    text-shadow: 0 0 5px rgba(255, 0, 127, 0.6);
}

/* Footer style */
body.dark footer {
    background-color: #03030d !important;
    border-top: 1px solid rgba(0, 240, 255, 0.2);
    box-shadow: 0 -5px 15px rgba(0, 240, 255, 0.05);
}

/* Theme toggle button neon styling */
body.dark #theme-toggle {
    color: #ffcc00 !important;
    text-shadow: 0 0 8px rgba(255, 204, 0, 0.6);
}

body:not(.dark) #theme-toggle {
    color: #5533ff !important;
}

/* アンカーリンクのスクロール位置調整（固定ヘッダーの高さ分ずらす） */
section {
    scroll-margin-top: 90px;
}



/* テーマ切り替えボタンの位置・高さ・アイコンスタイルの調整 */
button#theme-toggle {
    font-size: 18px !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

button#theme-toggle i,
button#theme-toggle svg {
    position: relative !important;
    top: 3.5px !important; /* 日本語テキストとベースラインを揃えるための微調整 */
}

body.dark button#theme-toggle {
    color: #ff007f !important;
    text-shadow: 0 0 8px rgba(255, 0, 127, 0.6) !important;
}

body:not(.dark) button#theme-toggle {
    color: var(--text-color) !important;
}