/*
 * [INPUT]: 依赖 base.css 的 CSS 变量（主题色）
 * [OUTPUT]: #intro-overlay 相关所有样式
 * [POS]: 开机动画专属样式，仅首次加载时存在
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */

/* ============================================================
   遮罩层
   ============================================================ */
#intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg-body);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* 动画期间所有子元素也不拦截鼠标事件 */
#intro-overlay * {
    pointer-events: none;
}

#intro-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   MacBook Pro — CSS 绘制
   ============================================================ */
.intro-mac {
    pointer-events: none;
    position: relative;
    width: 30vw;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 28px;
}

/* 顶盖（屏幕部分） */
.intro-mac-lid {
    width: 90%;
    height: 0px;
    background: #1a1a1a;
    border-radius: 10px 10px 0 0;
    transform-origin: bottom center;
    transform: perspective(900px) rotateX(88deg);
    transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1),
                height    0.01s 0s;
    overflow: hidden;
    box-shadow:
        0 0 0 1.5px #333,
        -2px -2px 8px rgba(0,0,0,0.4);
    position: relative;
}

.intro-mac-lid.open {
    height: calc(30vw * 0.9 * 0.63);
    transform: perspective(900px) rotateX(0deg);
    transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1),
                height    0s 0s;
}

/* 摄像头 */
.intro-mac-lid::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #333;
    box-shadow: 0 0 0 1px #444;
    z-index: 2;
}

/* 屏幕（内发光） */
.intro-mac-screen {
    position: absolute;
    inset: 12px 14px 0 14px;
    border-radius: 4px;
    background: #0d0d0d;
    overflow: hidden;
    transition: background 0.4s ease;
}

.intro-mac-screen.lit {
    background: #0a0f14;
    box-shadow: inset 0 0 30px rgba(0, 200, 100, 0.04);
}

/* 底座 */
.intro-mac-base {
    width: 96%;
    height: calc(30vw * 0.03);
    min-height: 9px;
    background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    position: relative;
}

/* 转轴线 */
.intro-mac-base::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1.5px;
    background: #111;
    border-radius: 1px;
}

/* 脚垫 */
.intro-mac-base::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: #111;
    border-radius: 2px;
}

/* ============================================================
   终端内容（在屏幕内）
   ============================================================ */
.intro-term {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: clamp(10px, 1.1vw, 16px);
    line-height: 1.6;
    color: #c8ffc8;
    padding: clamp(6px, 1vw, 14px) clamp(8px, 1.2vw, 18px);
    overflow: hidden;
}

.intro-term-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.intro-term-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.intro-term-dot:nth-child(1) { background: #ff5f57; }
.intro-term-dot:nth-child(2) { background: #febc2e; }
.intro-term-dot:nth-child(3) { background: #28c840; }

.intro-term-title {
    font-size: clamp(8px, 0.8vw, 12px);
    color: rgba(255,255,255,0.3);
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.03em;
}

.intro-term-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.intro-line {
    white-space: pre;
    font-size: clamp(9px, 1vw, 14px);
    color: #b8e8b8;
    min-height: 1.6em;
}

.intro-prompt {
    color: #5afa8a;
    font-weight: 700;
}

.intro-output {
    color: rgba(180, 230, 180, 0.7);
}

.intro-cursor {
    display: inline-block;
    animation: intro-blink 0.6s step-end infinite;
    color: #5afa8a;
    font-size: 9px;
}

@keyframes intro-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* thinking 进度条 */
.intro-thinking-label {
    color: #5afa8a;
    font-weight: 700;
}

.intro-bar {
    color: #3dc86a;
    letter-spacing: -0.5px;
}

.intro-pct {
    color: rgba(180,230,180,0.6);
}

.intro-done {
    color: #5afa8a;
    font-weight: 700;
    margin-top: 2px;
}

/* ============================================================
   Mac 外的大终端窗口（屏幕下方补充信息）
   仅在宽屏显示
   ============================================================ */
.intro-tagline {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(0,0,0,0.3);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 20px;
    opacity: 0;
    animation: intro-fadein 0.6s ease 1s forwards;
}

[data-theme="dark"] .intro-tagline {
    color: rgba(255,255,255,0.2);
}

@keyframes intro-fadein {
    to { opacity: 1; }
}