/* Hover Reveal Icon — 既定 opacity:0 で完全非表示 → hover で浮き上がり出現 */
:root {
    --bg-dark: #07080a;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --plate: #0d0f14;
    --line: #06c755;  /* LINE green */
    --mail: #2d7bff;  /* mail blue  */
    --git: #f1f5f9;   /* github     */
}

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

body {
    background: var(--bg-dark);
    color: var(--text-primary);
    font-family: 'Outfit', 'Inter', sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stage { width: 100%; max-width: 720px; padding: 48px 24px; text-align: center; }

.eyebrow {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px; letter-spacing: 0.3em; color: var(--mail); margin-bottom: 18px;
}

.title { font-size: 54px; font-weight: 700; line-height: 1.05; text-transform: uppercase; margin-bottom: 22px; }

.lead {
    font-family: 'Inter', sans-serif; color: var(--text-secondary);
    max-width: 520px; margin: 0 auto 56px; line-height: 1.7;
}

/* ---- dock ---- */
.dock { display: flex; gap: 36px; justify-content: center; flex-wrap: wrap; }

.reveal-card {
    position: relative;
    width: 96px; height: 96px;
    background: none; border: none; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

/* 既定で見えている黒いプレート（正体は隠れている） */
.plate {
    position: absolute; inset: 0;
    background: var(--plate);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.reveal-card:hover .plate {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}

/* ---- 隠密マーク本体: 既定 opacity:0（100%非表示） ---- */
.reveal-icon {
    position: relative;
    width: 46px; height: 46px;
    display: inline-flex;
    opacity: 0;                          /* 完全非表示 */
    transform: translateY(10px) scale(0.85);
    transition: opacity 0.35s ease, transform 0.35s ease, filter 0.3s ease;
    pointer-events: none;
}
.reveal-icon svg { width: 100%; height: 100%; display: block; }

.icon-line svg path { fill: var(--line); }
.icon-mail svg path { fill: var(--mail); }
.icon-git  svg path { fill: var(--git); }

/* hover: フェードイン＋浮き上がり＋発光 */
.reveal-card:hover .reveal-icon {
    opacity: 1;
    transform: translateY(-10px) scale(1.16);
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
}

.hint {
    margin-top: 44px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px; letter-spacing: 0.1em; color: var(--text-secondary);
}

@media (max-width: 600px) { .title { font-size: 38px; } .dock { gap: 22px; } }