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

:root {
    --yellow: #F5C842;
    --dim:    rgba(255,255,255,0.35);
    --light:  rgba(255,255,255,0.82);
}

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    background: #0a0812;
    font-family: 'Georgia', serif;
    cursor: none;
}

/* ── 自定义光标 ─────────────────────────────────────────── */
#cursor {
    position: fixed;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--yellow);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%,-50%);
    transition: width .2s, height .2s, background .3s;
    mix-blend-mode: difference;
}
#cursor.holding { width: 20px; height: 20px; }
#cursor.ready   { background: #fff; width: 14px; height: 14px; }

/* ── 介绍页 ─────────────────────────────────────────────── */
#intro {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: #06040e;
    z-index: 200;
    transition: opacity 1.6s ease;
}
#intro.out { opacity: 0; pointer-events: none; }

.intro-inner {
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
    gap: 1rem;
}
.intro-eye {
    font-size: 11px; letter-spacing: .28em;
    color: var(--yellow); text-transform: uppercase;
}
.intro-inner h1 {
    font-size: clamp(3.5rem, 9vw, 7rem);
    font-weight: 400; letter-spacing: .22em;
    color: #fff; line-height: 1;
}
.intro-sub {
    font-size: 13px; color: var(--dim);
    letter-spacing: .08em; line-height: 1.8;
    margin-top: .2rem;
}
#enterBtn {
    margin-top: 2rem;
    padding: .75rem 3.5rem;
    border: 1px solid rgba(245,200,66,.4);
    background: transparent;
    color: var(--yellow);
    font-family: inherit; font-size: 12px;
    letter-spacing: .24em; cursor: pointer;
    transition: all .3s;
}
#enterBtn:hover {
    background: rgba(245,200,66,.07);
    border-color: var(--yellow);
}

/* ── 主体 ───────────────────────────────────────────────── */
#app {
    position: fixed; inset: 0;
    transition: opacity .8s;
}
#app.hidden { opacity: 0; pointer-events: none; }

/* ── 场景层 ─────────────────────────────────────────────── */
#scene {
    position: absolute; inset: 0; overflow: hidden;
}
.layer {
    position: absolute;
    inset: -6%; width: 112%; height: 112%;
    will-change: transform;
}
.layer svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    overflow: visible;
}

/* 交互画布 */
#cvs {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 5; cursor: none;
}

/* ── 左侧声音面板（边缘抽屉） ──────────────────────────────
   平时只有一条细线贴着左边缘
   鼠标移入时整个面板滑出 */
#soundPanel {
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* 左侧触发条 — 细线，鼠标悬停触发展开 */
#soundPanel .trigger {
    width: 3px;
    height: 120px;
    background: rgba(245,200,66,0.25);
    border-radius: 0 2px 2px 0;
    cursor: pointer;
    transition: background .3s, width .3s;
    flex-shrink: 0;
}
#soundPanel:hover .trigger {
    background: rgba(245,200,66,0.6);
    width: 4px;
}

/* 左侧内容区 — 默认隐藏，悬停时滑出 */
#soundPanel .panel-content {
    display: flex; flex-direction: column; gap: .5rem;
    padding: 1rem .8rem 1rem 1rem;
    background: rgba(8,4,18,0.82);
    backdrop-filter: blur(8px);
    border-right: .5px solid rgba(255,255,255,.08);
    transform: translateX(-100%);
    opacity: 0;
    transition: transform .35s ease, opacity .3s ease;
    pointer-events: none;
}
#soundPanel:hover .panel-content {
    transform: translateX(0);
    opacity: 1;
    pointer-events: all;
}

/* ── 右侧载体面板（边缘抽屉） ─────────────────────────────── */
#formPanel {
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

#formPanel .trigger {
    width: 3px;
    height: 120px;
    background: rgba(160,208,255,0.25);
    border-radius: 2px 0 0 2px;
    cursor: pointer;
    transition: background .3s, width .3s;
    flex-shrink: 0;
}
#formPanel:hover .trigger {
    background: rgba(160,208,255,0.6);
    width: 4px;
}

#formPanel .panel-content {
    display: flex; flex-direction: column; gap: .5rem;
    padding: 1rem 1rem 1rem .8rem;
    background: rgba(8,4,18,0.82);
    backdrop-filter: blur(8px);
    border-left: .5px solid rgba(255,255,255,.08);
    transform: translateX(100%);
    opacity: 0;
    transition: transform .35s ease, opacity .3s ease;
    pointer-events: none;
    align-items: flex-end;
}
#formPanel:hover .panel-content {
    transform: translateX(0);
    opacity: 1;
    pointer-events: all;
}

/* 面板标签 */
.panel-label {
    font-size: 9px; letter-spacing: .2em;
    color: rgba(255,255,255,.28); text-transform: uppercase;
    margin-bottom: .2rem;
    white-space: nowrap;
}

/* 声音/载体按钮 */
.sbtn, .fbtn {
    background: transparent;
    border: none;
    border-left: 1.5px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.42);
    font-family: inherit; font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase;
    padding: .3rem .6rem;
    cursor: pointer;
    transition: all .25s;
    text-align: left;
    white-space: nowrap;
}
.fbtn { border-left: none; border-right: 1.5px solid rgba(255,255,255,.12); text-align: right; }
.sbtn:hover { color: rgba(255,255,255,.85); border-left-color: rgba(255,255,255,.4); }
.fbtn:hover { color: rgba(255,255,255,.85); border-right-color: rgba(255,255,255,.4); }

/* 选中状态 */
.sbtn.active {
    color: var(--yellow);
    border-left-color: var(--yellow);
}
.fbtn.active {
    color: #a0d0ff;
    border-right-color: #a0d0ff;
}

/* 当前选中显示在触发条旁边的小标签 */
#soundLabel, #formLabel {
    position: absolute;
    font-size: 9px; letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.3);
    pointer-events: none;
    white-space: nowrap;
    transition: opacity .3s;
}
#soundLabel { left: 10px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center; }
#formLabel  { right: 10px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: center; }
#soundPanel:hover #soundLabel,
#formPanel:hover  #formLabel { opacity: 0; }

/* ── 底部提示 ────────────────────────────────────────────── */
#hint {
    position: absolute;
    bottom: 2rem; left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    font-size: 11px; letter-spacing: .14em;
    color: var(--dim); text-transform: uppercase;
    pointer-events: none;
    transition: opacity .6s;
    white-space: nowrap;
}

/* ── 旁白 ───────────────────────────────────────────────── */
#narrative {
    position: absolute;
    top: 2rem; left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    font-size: clamp(.9rem, 1.8vw, 1.2rem);
    color: var(--yellow);
    letter-spacing: .06em; text-transform: uppercase;
    text-shadow: 0 2px 16px rgba(0,0,0,.8);
    pointer-events: none;
    opacity: 0; transition: opacity .8s;
    text-align: center; white-space: pre-line;
}
#narrative.show { opacity: 1; }

/* ── 黑色切换遮罩 ────────────────────────────────────────── */
#veil {
    position: fixed; inset: 0; z-index: 100;
    background: #06040e;
    opacity: 0; pointer-events: none;
    transition: opacity .6s;
}
#veil.on { opacity: 1; pointer-events: all; }