/* =========================================
   1. CONSTANTS & THEME
   ========================================= */
:root {
    --primary: #ff007a;
    --primary-rgb: 255, 0, 122;
    --secondary: #00d4ff;
    --secondary-rgb: 0, 212, 255;
    --bg: #000000;
    --glass: rgba(15, 15, 15, 0.9);
    --border: rgba(255, 255, 255, 0.08);
    --neon: 0 0 30px rgba(255, 0, 122, 0.7);
    --font-sci: 'Orbitron', sans-serif;
    --font-sub: 'Syncopate', sans-serif;
    --transition-ultra: 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}
html {
    background-color: #000 !important; /* ブラウザの隙間を黒く埋める */
    height: -webkit-fill-available;    /* iOSの高さ対策 */
}
/* =========================================
   2. BASE ARCHITECTURE
   ========================================= */
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--primary), var(--secondary)); border-radius: 10px; }
    * { 
    box-sizing: border-box; 
    -webkit-font-smoothing: antialiased; 
    -webkit-tap-highlight-color: transparent; /* ←これを追加 */
    }
body { 
    font-family: 'Noto Sans JP', sans-serif; margin: 0; background-color: var(--bg); 
    color: #ffffff; line-height: 1.6; overflow-x: hidden;
    background-image: radial-gradient(circle at 50% 50%, #0d000d 0%, #000 100%);
    min-height: 100vh;
    min-height: -webkit-fill-available;
    overflow-x: hidden;
    background-color: #000;
}

/* PCのみカスタムカーソルを表示 */
@media (min-width: 1025px) {
    body { cursor: none; }
}

/* =========================================
   3. BACKGROUND SYSTEM
   ========================================= */
#star-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -3; }
.ambient-noise { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('https://grainy-gradients.vercel.app/noise.svg'); opacity: 0.1; pointer-events: none; z-index: 9999; }
.scanlines { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0, 0, 0, 0.2) 50%); background-size: 100% 4px; z-index: -1; pointer-events: none; }
.bg-watermark { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-sci); font-size: 20vw; font-weight: 900; color: rgba(255, 255, 255, 0.01); pointer-events: none; z-index: -4; letter-spacing: -0.1em; white-space: nowrap; }

/* =========================================
   4. LOADER (Responsive)
   ========================================= */
#loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; overflow: hidden; display: flex; justify-content: center; align-items: center; background: #000; }
.loader-shutter { position: absolute; width: 100%; height: 50%; background: #000; transition: var(--transition-ultra); z-index: 10001; }
.shutter-top { top: 0; border-bottom: 1px solid var(--primary); }
.shutter-bottom { bottom: 0; border-top: 1px solid var(--primary); }
.loader-ui { position: relative; z-index: 10002; text-align: center; width: 90%; max-width: 400px; }
.loader-num { font-family: var(--font-sci); font-size: clamp(4rem, 15vw, 8rem); font-weight: 900; color: #fff; margin: 0; text-shadow: 0 0 50px var(--primary); }
.loader-bar-bg { width: 100%; height: 1px; background: rgba(255,255,255,0.05); margin: 20px auto; position: relative; overflow: hidden; }
.loader-bar-fill { position: absolute; height: 100%; width: 0%; background: var(--primary); box-shadow: 0 0 20px var(--primary); transition: width 0.1s; }
.loader-console { font-family: var(--font-sci); font-size: 0.6rem; color: #444; text-align: left; height: 60px; overflow: hidden; line-height: 1.5; }

/* =========================================
   5. HUD HEADER
   ========================================= */
header { 
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(20px);
    padding: 1rem 5%; position: fixed; width: 100%; top: 0; z-index: 2000; 
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--border);
    opacity: 0; transform: translateY(-100%); transition: 1s ease 1.5s;
}
body.loaded header { opacity: 1; transform: translateY(0); }
.logo { font-family: var(--font-sci); font-weight: 900; font-size: clamp(1rem, 4vw, 1.5rem); color: #fff; text-decoration: none; letter-spacing: 2px; }
.logo span { color: var(--primary); text-shadow: var(--neon); }
nav { display: flex; gap: 15px; }
nav a { color: #fff; text-decoration: none; font-family: var(--font-sub); font-size: 0.6rem; letter-spacing: 1px; opacity: 0.6; transition: 0.4s; }
@media (min-width: 768px) {
    nav { gap: 40px; }
    nav a { font-size: 0.65rem; letter-spacing: 3px; }
}

/* =========================================
   6. HERO AREA
   ========================================= */
.hero { 
    height: 100vh;  
    height: 100dvh;  
    display: flex; flex-direction: column; 
    justify-content: center; 
    align-items: center; text-align: center; padding: 0 20px; 
}
/* --- ロゴの発光：くすみを完全に消す --- */
.hero-title {
    font-family: var(--font-sci);
    font-size: clamp(3rem, 15vw, 12rem);
    font-weight: 900;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 0.9;

    /* 1. グラデーションを再定義（上:ピンク / 中:濃いピンク / 下:鮮やかな水色） */
    background: linear-gradient(to bottom, 
        #ff99cc 10%,   /* 上部の淡いピンク */
        #ff007a 45%,   /* 中心のメインピンク */
        #00d4ff 90%    /* 下部のシアンブルー */
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* 2. グラデーションを消さない「透明感のある発光」 */
    /* text-shadowではなく、filterを使うことでグラデーションの色を活かしたまま発光させます */
    filter: 
        drop-shadow(0 0 15px rgba(255, 0, 122, 0.6))  /* ピンクの発光 */
        drop-shadow(0 0 30px rgba(0, 212, 255, 0.4)); /* 下部から広がる青のオーラ */

    /* 3. スマホのカクつきを完全に封じ込めるGPU命令 */
    will-change: filter, transform;
    transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0);

    /* 出現アニメーション */
    opacity: 0;
    transform: scale(0.95);
    transition: 2s var(--transition-ultra) 1.2s;
}

/* スマホでの見え方をさらに画像に近づける */
@media (max-width: 768px) {
    .hero-title {
        /* スマホだと色が沈みがちなので、少しだけ明るさを補正 */
        filter: 
            brightness(1.2) 
            drop-shadow(0 0 10px rgba(255, 0, 122, 0.7))
            drop-shadow(0 0 20px rgba(0, 212, 255, 0.5));
    }
}
body.loaded .hero-title { opacity: 1; transform: scale(1); }
/* ロゴを脈動させるアニメーション */
@keyframes title-shimmer {
    0% { filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3)) drop-shadow(0 0 40px rgba(var(--primary-rgb), 0.6)); }
    100% { filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 70px rgba(var(--secondary-rgb), 0.9)); }
}

/* --- 背景が寂しいのを解消する追加設定 --- */
body::before {
    content: "";
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    /* 背景にオーロラのような光の溜まりを追加 */
    background: radial-gradient(circle at 20% 30%, rgba(var(--primary-rgb), 0.15) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(var(--secondary-rgb), 0.15) 0%, transparent 40%);
    z-index: -2;
    pointer-events: none;
}

/* --- 背景キャンバス：これを一番奥の「黒」にする --- */
#star-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -5; /* 一番奥 */
    background: #000; /* ここを黒にする */
}

/* --- Body：背景を透明にする（重要！） --- */
body {
    background: transparent !important; /* JSを見せるために透明化 */
    margin: 0;
    color: #ffffff;
}

/* 補助的なオーロラ光（CSSで薄く重ねる） */
body::after {
    content: "";
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(var(--primary-rgb), 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: -4;
}




/* =========================================
   7. TALENT GRID
   ========================================= */
.container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.section-label { font-family: var(--font-sub); color: var(--primary); font-size: 0.7rem; letter-spacing: 10px; text-align: center; display: block; margin: 80px 0 50px; text-transform: uppercase; }

.talent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; padding-bottom: 150px; }
@media (min-width: 768px) {
    .section-label { font-size: 0.8rem; letter-spacing: 25px; margin: 150px 0 100px; }
    .talent-grid { gap: 60px; }
}

.talent-card { position: relative; height: 500px; cursor: pointer; perspective: 1000px; }
@media (min-width: 1024px) { .talent-card { height: 700px; } }

.talent-bg-layer { position: absolute; top: 5%; left: 0; width: 100%; height: 90%; background: rgba(255,255,255,0.02); border: 1px solid var(--border); clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%); transition: 0.6s; }
.talent-card:hover .talent-bg-layer { background: rgba(var(--primary-rgb), 0.05); border-color: var(--primary); box-shadow: var(--neon); }

.talent-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: 0.5s ease-out; }
.talent-img-wrap { position: absolute; width: 100%; height: 100%; z-index: 5; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.talent-img { width: 110%; height:105%; object-fit: contain; transition: 0.8s var(--transition-ultra); }
.talent-card:hover .talent-img { transform: scale(1.05) translateY(-20px); }

.talent-info { position: absolute; bottom: 30px; left: 20px; z-index: 20; }
.talent-name { font-family: var(--font-sci); font-size: clamp(1.5rem, 8vw, 2.5rem); font-weight: 900; margin: 0; }






/* =========================================
   8. NEWS & AUDITION
   ========================================= */
.news-section { margin-bottom: 100px; padding: 30px 20px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); backdrop-filter: blur(20px); }
.news-item { display: flex; flex-direction: column; padding: 15px 0; border-bottom: 1px solid var(--border); }
@media (min-width: 600px) {
    .news-item { flex-direction: row; align-items: center; }
    .news-date { width: 150px; }
}
.news-date { font-family: var(--font-sci); color: var(--primary); font-weight: 700; font-size: 0.9rem; }
.news-text { font-size: 0.9rem; font-weight: 300; color: #ccc; }

.audition-portal {
    margin: 100px 0; background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), #000);
    border: 1px solid var(--border); padding: 80px 20px; text-align: center;
}
.audition-h2 { font-family: var(--font-sci); font-size: clamp(2rem, 10vw, 5rem); letter-spacing: 5px; margin-bottom: 20px; }
.btn-join {
    padding: 20px 40px; background: #fff; color: #000; font-family: var(--font-sub);
    font-weight: 900; font-size: 1rem; text-decoration: none; letter-spacing: 5px;
    display: inline-block; transition: 0.4s;
}
.btn-join:hover { background: var(--primary); color: #fff; letter-spacing: 10px; }

/* =========================================
   9. MODAL
   ========================================= */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 5000; display: none; justify-content: center; align-items: flex-start; overflow-y: auto; padding: 20px 0; }
.modal-inner { width: 90%; max-width: 1000px; margin: auto; display: flex; flex-direction: column; gap: 30px; position: relative; padding-top: 60px; }
@media (min-width: 1024px) {
    .modal-inner { flex-direction: row; padding-top: 0; align-items: center; }
    .modal-view { flex: 1; }
    .modal-body { flex: 1.2; }
}
.modal-view { aspect-ratio: 1/1; background: #050505; border: 1px solid var(--primary); display: flex; justify-content: center; align-items: center; }
.sd-img { width: 90%; height: 90%; object-fit: contain; }

.modal-body h3 { font-family: var(--font-sci); font-size: clamp(2rem, 8vw, 4rem); color: var(--primary); margin: 0; }
.modal-body p { font-size: 1rem; line-height: 1.8; margin: 20px 0; color: #bbb; }

.close-btn { position: absolute; top: 0; right: 0; font-family: var(--font-sub); color: var(--primary); cursor: pointer; border: 1px solid var(--primary); padding: 10px 20px; font-size: 0.7rem; background: black; z-index: 100; }

footer { padding: 80px 0; text-align: center; border-top: 1px solid var(--border); font-size: 0.6rem; opacity: 0.5; }

/* =========================================
   10. UTILS
   ========================================= */
.reveal { opacity: 0; transform: translateY(30px); transition: 1s var(--transition-ultra); }
.reveal.active { opacity: 1; transform: translateY(0); }

#cursor, #cursor-dot { display: none; }
@media (min-width: 1025px) {
    #cursor { position: fixed; width: 40px; height: 40px; border: 1px solid var(--primary); border-radius: 50%; pointer-events: none; z-index: 10003; transform: translate(-50%, -50%); display: block; mix-blend-mode: difference; }
    #cursor-dot { position: fixed; width: 4px; height: 4px; background: #fff; border-radius: 50%; pointer-events: none; z-index: 10003; transform: translate(-50%, -50%); display: block; }
}

/* =========================================
   NEW REFINED LAYOUT (DASHBOARD & BOTTOM)
   ========================================= */

/* ダッシュボード（News & Schedule 横並び） */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2カラム */
    gap: 60px;
    margin: 80px 0;
    padding: 40px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.section-label-sm {
    font-family: var(--font-sci);
    font-size: 0.65rem;
    color: var(--primary);
    letter-spacing: 5px;
    display: block;
    margin-bottom: 25px;
    text-transform: uppercase;
}

/* ニュース & スケジュール（ミニマルリスト） */
.news-item-sm, .schedule-item-mini {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.85rem;
    transition: 0.3s;
}

.news-item-sm:hover, .schedule-item-mini:hover {
    background: rgba(var(--secondary-rgb), 0.05);
    padding-left: 10px;
}

.news-date, .sch-time {
    font-family: var(--font-sci);
    color: var(--secondary);
    min-width: 60px;
    font-weight: 700;
}

.sch-name {
    font-family: var(--font-sub);
    font-size: 0.7rem;
    color: #fff;
}

/* 下部アセット（About & Contact 横並び） */
.bottom-assets {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* 比率を変えてバランス調整 */
    gap: 80px;
    margin: 120px auto;
    padding-top: 100px;
    border-top: 1px solid var(--border);
}

.about-h2-sm {
    font-family: var(--font-sci);
    font-size: 2.2rem;
    line-height: 1.2;
    margin: 10px 0 20px;
}

.about-p-sm {
    font-size: 0.9rem;
    color: #888;
    line-height: 2;
    max-width: 500px;
}

.project-info-mini {
    margin-top: 30px;
    font-family: var(--font-sci);
    font-size: 0.65rem;
    color: #555;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.legal-links-sm {
    margin-top: 40px;
    font-size: 0.65rem;
    font-family: var(--font-sci);
    color: #444;
}

.legal-links-sm a {
    color: #666;
    text-decoration: none;
    transition: 0.3s;
}

.legal-links-sm a:hover {
    color: var(--primary);
}

/* ミニマルフォーム */
.contact-simple {
    background: rgba(255, 255, 255, 0.02);
    padding: 30px;
    border: 1px solid var(--border);
}

.form-mini {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-mini input, .form-mini textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
    color: #fff;
    font-size: 0.85rem;
    outline: none;
    transition: 0.3s;
}

.form-mini input:focus, .form-mini textarea:focus {
    border-bottom-color: var(--secondary);
}

.btn-submit-sm {
    margin-top: 20px;
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 15px;
    font-family: var(--font-sci);
    font-size: 0.75rem;
    letter-spacing: 3px;
    cursor: pointer;
    transition: 0.4s;
}

.btn-submit-sm:hover {
    background: var(--primary);
    color: #000;
    box-shadow: var(--neon);
}

/* --- Aboutセクションのフォントとレイアウトの洗練 --- */

.about-h2-sm {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900; /* 最大の太さに設定 */
    font-size: clamp(2rem, 6vw, 3.5rem); /* 少しサイズアップ */
    letter-spacing: -0.01em; /* わずかに広げて一文字ずつをハッキリさせる */
    line-height: 1.1;
    margin: 10px 0 25px;
    text-transform: uppercase;
    color: #ffffff; /* フォールバック用カラー */
}

.text-gradient {
    /* 1. グラデーションを明るい色に変更（暗い色を避ける） */
    background: linear-gradient(
        to right, 
        #00d4ff 0%,   /* 明るい水色 */
        #ff007a 100%  /* 鮮やかなピンク */
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* 2. 重厚感を出すためのドロップシャドウ */
    /* 文字の背後に「光の溜まり」を作ることで、細く見えるのを防ぎます */
    filter: drop-shadow(0 0 15px rgba(var(--primary-rgb), 0.5))
            drop-shadow(0 0 2px rgba(255, 255, 255, 0.2));

    /* 3. テキストの輪郭をわずかに強調（ブラウザによって細くなる現象への対策） */
    -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.1);
    
    display: inline-block; /* フィルタを正しく適用させるため */
}

.about-p-sm {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7); /* 純白より少し落として高級感を出す */
    line-height: 2.2; /* 行間を広げて読みやすく */
    max-width: 550px;
}

/* 運営情報のラベル部分をSpace Groteskに */
.project-info-mini {
    display: flex;
    gap: 40px;
    margin-top: 40px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.info-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.6rem;
    color: var(--primary);
    letter-spacing: 2px;
}

.info-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem;
    color: #fff;
    letter-spacing: 1px;
}

.legal-links-sm {
    margin-top: 50px;
    border-top: 1px solid var(--border);
    padding-top: 20px;
}


/* レスポンシブ調整（スマホで見ると縦に並ぶ） */
@media (max-width: 900px) {
    .dashboard-grid, .bottom-assets {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

/* --- LIVE STATUS INDICATOR --- */
.live-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 0, 0, 0.1);
    padding: 5px 12px;
    border: 1px solid rgba(255, 0, 0, 0.5);
    border-radius: 4px;
    backdrop-filter: blur(5px);
    pointer-events: none;
    opacity: 0; /* デフォルトは非表示 */
    transition: 0.5s;
}

/* 配信中のタレントカードにこのクラスを付与すると表示される */
.is-live .live-badge {
    opacity: 1;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #ff0000;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 10px #ff0000;
}

/* 脈動するリング（波紋エフェクト） */
.live-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 1px solid #ff0000;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: live-pulse 2s infinite;
}

.live-text {
    font-family: var(--font-sci);
    font-size: 0.7rem;
    font-weight: 900;
    color: #ff0000;
    letter-spacing: 2px;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.8);
}

/* アニメーション：拡大しながら消えていく */
@keyframes live-pulse {
    0% {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    100% {
        width: 300%;
        height: 300%;
        opacity: 0;
    }
}

/* カード自体のホバー効果をLIVE時のみ強化（オプション） */
.is-live.talent-card .talent-bg-layer {
    border-color: #ff0000 !important;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
}

/* ポーズ変更ボタンのスタイル */
.pose-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    z-index: 100; /* 最前面 */
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--secondary);
    color: var(--secondary);
    font-family: var(--font-sci);
    font-size: 0.6rem;
    padding: 5px 10px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
}

@media (hover: hover) {
    .pose-btn:hover {
        background: var(--secondary);
        color: #000;
        box-shadow: 0 0 15px var(--secondary);
    }
}

/* 小さなインジケーターアイコン */
.pose-icon {
    width: 6px;
    height: 6px;
    background: var(--secondary);
    border-radius: 50%;
    display: inline-block;
}

.pose-btn:hover .pose-icon {
    background: #000;
}
/* --- ファイルの最下部に追加 --- */

/* タレントカード周辺の画像選択・保存ダイアログを抑制 */
.talent-card, 
.talent-img, 
.pose-btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    -webkit-user-drag: none;
    -khtml-user-drag: none;
}

/* ポーズボタンを押した瞬間のリアクション */
.pose-btn:active {
    transform: scale(0.95); 
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}