/*
Theme Name: Tanuki Cyber Core
Theme URI: https://aitanukitokyo.com
Author: AI_TANUKI_TOKYO_Dev_Team
Author URI: https://aitanukitokyo.com
Description: AI音楽クリエーター「AI TANUKI TOKYO」向け完全モバイルファースト・超高速プロフィールサイト。「デジタルとリアルの二刀流」を体現するサイバーパンクテーマ。
Version: 1.4.1
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tanuki-cyber-core
Tags: one-column, custom-menu, featured-images, translation-ready, blog
*/

/* ==========================================================================
   TANUKI CYBER CORE - デザインシステム
   サイバーパンク調のネオン＆ダークテーマ
   ========================================================================== */

:root {
    /* ========================================
       カラーパレット - Cyberpunk Neon
       ======================================== */

    /* プライマリカラー - ネオンシアン */
    --tc-primary: #00f5ff;
    --tc-primary-dark: #00c4cc;
    --tc-primary-light: #7fffff;
    --tc-primary-glow: rgba(0, 245, 255, 0.5);

    /* セカンダリカラー - マゼンタ/ピンク */
    --tc-secondary: #ff00ff;
    --tc-secondary-dark: #cc00cc;
    --tc-secondary-light: #ff7fff;
    --tc-secondary-glow: rgba(255, 0, 255, 0.5);

    /* アクセントカラー - ネオンイエロー */
    --tc-accent: #ffff00;
    --tc-accent-dark: #cccc00;
    --tc-accent-glow: rgba(255, 255, 0, 0.5);

    /* ステータスカラー */
    --tc-live: #ff0040;
    /* ON AIR - 赤 */
    --tc-live-glow: rgba(255, 0, 64, 0.6);
    --tc-next: #ffcc00;
    /* NEXT - 黄 */
    --tc-next-glow: rgba(255, 204, 0, 0.6);
    --tc-offline: #666666;
    /* OFFLINE - グレー */

    /* 成功/警告/エラー */
    --tc-success: #00ff88;
    --tc-warning: #ffaa00;
    --tc-error: #ff3366;

    /* ダーク背景系 */
    --tc-bg-darkest: #0a0a0f;
    --tc-bg-darker: #0f0f1a;
    --tc-bg-dark: #141425;
    --tc-bg-medium: #1a1a30;
    --tc-bg-light: #252545;
    --tc-bg-card: rgba(20, 20, 40, 0.8);
    --tc-bg-glass: rgba(10, 10, 20, 0.7);

    /* テキストカラー */
    --tc-text-primary: #ffffff;
    --tc-text-secondary: #b0b0cc;
    --tc-text-muted: #666680;
    --tc-text-link: var(--tc-primary);

    /* ボーダー */
    --tc-border: rgba(0, 245, 255, 0.2);
    --tc-border-hover: rgba(0, 245, 255, 0.5);
    --tc-border-glow: 0 0 10px var(--tc-primary-glow);

    /* ========================================
       タイポグラフィ
       ======================================== */

    /* フォントファミリー */
    --tc-font-primary: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', sans-serif;
    --tc-font-display: 'Orbitron', 'Noto Sans JP', sans-serif;
    --tc-font-mono: 'JetBrains Mono', 'Source Code Pro', monospace;

    /* フォントサイズ (モバイルファースト) */
    --tc-text-xs: 0.75rem;
    /* 12px */
    --tc-text-sm: 0.875rem;
    /* 14px */
    --tc-text-base: 1rem;
    /* 16px */
    --tc-text-lg: 1.125rem;
    /* 18px */
    --tc-text-xl: 1.25rem;
    /* 20px */
    --tc-text-2xl: 1.5rem;
    /* 24px */
    --tc-text-3xl: 1.875rem;
    /* 30px */
    --tc-text-4xl: 2.25rem;
    /* 36px */
    --tc-text-5xl: 3rem;
    /* 48px */

    /* 行の高さ */
    --tc-leading-none: 1;
    --tc-leading-tight: 1.25;
    --tc-leading-normal: 1.5;
    --tc-leading-relaxed: 1.75;

    /* 文字間隔 */
    --tc-tracking-tight: -0.025em;
    --tc-tracking-normal: 0;
    --tc-tracking-wide: 0.05em;
    --tc-tracking-wider: 0.1em;

    /* ========================================
       スペーシング
       ======================================== */
    --tc-space-1: 0.25rem;
    /* 4px */
    --tc-space-2: 0.5rem;
    /* 8px */
    --tc-space-3: 0.75rem;
    /* 12px */
    --tc-space-4: 1rem;
    /* 16px */
    --tc-space-5: 1.25rem;
    /* 20px */
    --tc-space-6: 1.5rem;
    /* 24px */
    --tc-space-8: 2rem;
    /* 32px */
    --tc-space-10: 2.5rem;
    /* 40px */
    --tc-space-12: 3rem;
    /* 48px */
    --tc-space-16: 4rem;
    /* 64px */

    /* ========================================
       ボーダー半径
       ======================================== */
    --tc-radius-sm: 4px;
    --tc-radius-md: 8px;
    --tc-radius-lg: 12px;
    --tc-radius-xl: 16px;
    --tc-radius-2xl: 24px;
    --tc-radius-full: 9999px;

    /* ========================================
       シャドウ
       ======================================== */
    --tc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --tc-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
    --tc-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --tc-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
    --tc-shadow-neon: 0 0 20px var(--tc-primary-glow), 0 0 40px var(--tc-primary-glow);
    --tc-shadow-neon-pink: 0 0 20px var(--tc-secondary-glow), 0 0 40px var(--tc-secondary-glow);

    /* ========================================
       トランジション
       ======================================== */
    --tc-transition-fast: 150ms ease;
    --tc-transition-normal: 250ms ease;
    --tc-transition-slow: 400ms ease;
    --tc-transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ========================================
       Z-Index スケール
       ======================================== */
    --tc-z-base: 1;
    --tc-z-dropdown: 100;
    --tc-z-sticky: 200;
    --tc-z-modal: 300;
    --tc-z-popup: 400;
    --tc-z-toast: 500;
    --tc-z-max: 9999;

    /* ========================================
       ブレークポイント参照 (CSS変数としては使用不可、参照用)
       ======================================== */
    /* --tc-bp-sm: 640px;  */
    /* --tc-bp-md: 768px;  */
    /* --tc-bp-lg: 1024px; */
    /* --tc-bp-xl: 1280px; */
}

/* ==========================================================================
   ベースリセット & 基本スタイル
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--tc-font-primary);
    font-size: var(--tc-text-base);
    line-height: var(--tc-leading-normal);
    color: var(--tc-text-primary);
    background: var(--tc-bg-darkest);
    background-image:
        radial-gradient(ellipse at top, var(--tc-bg-dark) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, var(--tc-bg-medium) 0%, transparent 50%);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* グリッド背景 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(0, 245, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 245, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: -1;
}

/* ==========================================================================
   リンク
   ========================================================================== */

a {
    color: var(--tc-text-link);
    text-decoration: none;
    transition: color var(--tc-transition-fast);
}

a:hover {
    color: var(--tc-primary-light);
    text-shadow: 0 0 10px var(--tc-primary-glow);
}

/* ==========================================================================
   ボタン基本スタイル
   ========================================================================== */

.tc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tc-space-2);
    padding: var(--tc-space-3) var(--tc-space-6);
    font-family: var(--tc-font-display);
    font-size: var(--tc-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tc-tracking-wider);
    color: var(--tc-bg-darkest);
    background: var(--tc-primary);
    border: 2px solid var(--tc-primary);
    border-radius: var(--tc-radius-md);
    cursor: pointer;
    transition: all var(--tc-transition-normal);
    position: relative;
    overflow: hidden;
}

.tc-btn:hover {
    background: var(--tc-primary-light);
    box-shadow: var(--tc-shadow-neon);
    transform: translateY(-2px);
}

.tc-btn:active {
    transform: translateY(0);
}

/* プライマリボタン */
.tc-btn--primary {
    background: linear-gradient(135deg, var(--tc-primary) 0%, var(--tc-secondary) 100%);
    border: none;
    color: var(--tc-text-primary);
}

.tc-btn--primary:hover {
    box-shadow: var(--tc-shadow-neon), var(--tc-shadow-neon-pink);
}

/* セカンダリボタン */
.tc-btn--secondary {
    background: transparent;
    color: var(--tc-primary);
}

.tc-btn--secondary:hover {
    background: var(--tc-primary);
    color: var(--tc-bg-darkest);
}

/* CTAボタン（配信用） */
.tc-btn--cta {
    padding: var(--tc-space-4) var(--tc-space-8);
    font-size: var(--tc-text-lg);
    background: var(--tc-live);
    border-color: var(--tc-live);
    color: var(--tc-text-primary);
}

.tc-btn--cta:hover {
    box-shadow: 0 0 30px var(--tc-live-glow);
}

/* 点滅アニメーション（ライブ中） */
.tc-btn--cta.is-live {
    animation: pulse-live 1.5s ease-in-out infinite;
}

/* ==========================================================================
   カード
   ========================================================================== */

.tc-card {
    background: var(--tc-bg-card);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-lg);
    padding: var(--tc-space-6);
    backdrop-filter: blur(10px);
    transition: all var(--tc-transition-normal);
}

.tc-card:hover {
    border-color: var(--tc-border-hover);
    box-shadow: var(--tc-border-glow);
}

/* ==========================================================================
   グラスモーフィズム
   ========================================================================== */

.tc-glass {
    background: var(--tc-bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--tc-radius-xl);
}

/* ==========================================================================
   アニメーション
   ========================================================================== */

/* ライブ点滅 */
@keyframes pulse-live {

    0%,
    100% {
        box-shadow: 0 0 20px var(--tc-live-glow);
    }

    50% {
        box-shadow: 0 0 40px var(--tc-live-glow), 0 0 60px var(--tc-live-glow);
    }
}

/* ネオングロー */
@keyframes neon-glow {

    0%,
    100% {
        text-shadow: 0 0 10px var(--tc-primary-glow);
    }

    50% {
        text-shadow: 0 0 20px var(--tc-primary-glow), 0 0 30px var(--tc-primary-glow);
    }
}

/* グリッチエフェクト */
@keyframes glitch {

    0%,
    100% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }
}

/* スキャンライン */
@keyframes scanline {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100vh);
    }
}

/* フェードイン */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* スライドアップ */
@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   ユーティリティクラス
   ========================================================================== */

/* テキストグロー */
.tc-text-glow {
    animation: neon-glow 2s ease-in-out infinite;
}

/* グリッチテキスト */
.tc-glitch {
    position: relative;
}

.tc-glitch:hover {
    animation: glitch 0.3s ease infinite;
}

/* 非表示 */
.tc-hidden {
    display: none !important;
}

/* スクリーンリーダー専用 */
.tc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   レスポンシブ - タブレット (768px+)
   ========================================================================== */

@media (min-width: 768px) {
    :root {
        --tc-text-base: 1rem;
        --tc-text-lg: 1.25rem;
        --tc-text-xl: 1.5rem;
        --tc-text-2xl: 1.875rem;
        --tc-text-3xl: 2.25rem;
        --tc-text-4xl: 3rem;
        --tc-text-5xl: 4rem;
    }
}

/* ==========================================================================
   レスポンシブ - デスクトップ (1024px+)
   ========================================================================== */

@media (min-width: 1024px) {
    body::before {
        background-size: 80px 80px;
    }
}

/* ==========================================================================
   印刷用スタイル
   ========================================================================== */

@media print {
    body {
        background: white;
        color: black;
    }

    body::before {
        display: none;
    }

    .tc-btn,
    .tc-card {
        border: 1px solid #ccc;
        box-shadow: none;
    }
}