/* ==========================================================================
   AI Director Studio - Stage Studio (台前调度工作台架构系统)
   高利用率宽幅布局 + 首屏文字视频双分栏 + 右侧 3D 透视毛玻璃卡片
   ========================================================================== */

/* ==========================================================================
   1. 滚动驱动吸顶画幅与双阶段全景容器 (Stage Flow Track & Pin)
   阶段 1: 大字居中介绍 (图2) -> 阶段 2: 滚动褪去并全屏展现架构工作台 (图1)
   ========================================================================== */
.stage-flow-track {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    height: 240vh; /* 滚动总长：前段居中大字，中段平滑褪去，后段全景工作台沉浸 */
    margin: 0 0 5rem 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.stage-flow-pin {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    overflow: hidden;
    box-sizing: border-box;
}

/* 阶段 1：大字居中技术介绍层 (纯黑曜石底色、纯粹居中对齐、动力学动效) */
.stage-intro-hero {
    position: absolute;
    top: 6rem;
    bottom: 2rem;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem 2rem;
    z-index: 10 !important;
    box-sizing: border-box;
    will-change: opacity, transform, filter;
    pointer-events: none !important;
    transition: opacity 0.15s ease-out;
}

.stage-intro-content {
    max-width: 960px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    pointer-events: none !important;
}

.stage-intro-kicker {
    font-size: 0.84rem;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.45);
    font-family: monospace;
    text-transform: uppercase;
}

.stage-intro-title {
    font-size: clamp(2.4rem, 4.4vw, 4rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.95), 0 0 60px rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, #ffffff 40%, rgba(255, 255, 255, 0.75) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stage-intro-desc {
    font-size: clamp(0.95rem, 1.15vw, 1.12rem);
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.68);
    max-width: 820px;
    margin: 0;
}

.stage-intro-scroll-hint {
    margin-top: 1.6rem;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.12em;
    font-family: monospace;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease, transform 0.2s ease;
    pointer-events: auto !important; /* 唯独此按钮允许点击快速滚动 */
}

.stage-intro-scroll-hint:hover {
    color: #ffffff;
    transform: translateY(2px);
}

.stage-hint-line {
    width: 22px;
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
}

/* 阶段 2：架构工作台全屏展示容器 (向下挪动避开全站 fixed 顶栏，对齐图1) */
.stage-studio-showcase {
    position: absolute;
    top: 5.2rem; /* 向上释放垂直空间，确保 6 大节点全量完整显示 */
    bottom: 1rem;
    left: 0;
    right: 0;
    display: none; /* 初始完全隐藏，绝不与大字发生叠化残影 */
    align-items: stretch;
    justify-content: center;
    width: 100%;
    z-index: 30 !important;
    box-sizing: border-box;
    will-change: opacity, transform;
    pointer-events: none; /* 默认未完全进入时绝不截留事件，由 JS 在到达对应进度时开启 auto */
    transition: opacity 0.2s linear, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.stage-studio-container {
    display: flex;
    gap: 0.25rem; /* 极致收窄视口与右侧卡片间距，主页宽度大幅扩展 */
    align-items: stretch;
    height: 100%;
    max-height: 860px;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    pointer-events: auto !important;
}

/* ==========================================================================
   2. 主工作台视口 (Active Main Stage Window) - 充满中间空间 (达 83%+)
   ========================================================================== */
.stage-main-viewport {
    flex: 1 1 auto; /* 充满全部剩余空间，不留中间缝隙 */
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: transparent; /* 去除整个外框卡片底色，与全站纯黑背景无缝融为一体 */
    border: none !important; /* 彻底去除整个外框描边 */
    border-radius: 0 !important; /* 去除外框圆角 */
    box-shadow: none !important; /* 去除外框投影 */
    overflow: hidden;
    position: relative;
    z-index: 1; /* 主视口处于底层，允许右侧卡片放大时向左悬浮覆盖在其上方 */
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

/* 顶部控制栏 (无边框平铺，极简单线分割) */
.stage-main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.35rem 0.85rem 0;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    user-select: none;
    z-index: 10;
}

.stage-header-left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

/* 去除胶囊框，标题直接呈现在页面中 */
.stage-window-badge {
    display: none !important;
}

.stage-window-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.stage-header-right {
    display: none !important;
}

.stage-header-status {
    display: none !important;
}

.stage-expand-btn {
    display: none !important;
}

/* 主视口内部滚动区域 */
.stage-main-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem 0.35rem 2.5rem 0;
    scroll-behavior: smooth;
    overscroll-behavior-y: auto;
}

.stage-main-scroll::-webkit-scrollbar {
    width: 6px;
}
.stage-main-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

/* 核心首屏：左侧文字介绍 + 右侧功能视频预留位 (左右双分栏) */
.stage-hero-split {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2rem;
    align-items: start;
    margin-bottom: 2rem;
    padding-bottom: 1.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.stage-hero-left {
    display: flex;
    flex-direction: column;
}

.stage-content-lead {
    font-size: 0.92rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
    white-space: pre-line;
}

.stage-content-lead strong {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}

/* 亮点标签行：移至正文介绍下方，彻底去除胶囊框，采用纯文本排列并在下方增加横线分割 */
.stage-badges-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.2rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stage-badge-pill {
    font-size: 0.76rem;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.58);
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    position: relative;
    letter-spacing: 0.04em;
}

.stage-badge-pill:not(:last-child)::after {
    content: "·";
    position: absolute;
    right: -0.75rem;
    color: rgba(255, 255, 255, 0.25);
}

/* 右侧功能实录视频预留位卡片 (纯黑曜石质感) */
.stage-hero-right {
    display: flex;
    flex-direction: column;
}

.stage-video-card {
    background: #070709;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.85);
}

.stage-video-slate-hdr {
    display: none !important;
}

.stage-video-placeholder {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(22, 22, 26, 0.8) 0%, #040406 100%);
    position: relative;
    padding: 1.2rem;
    text-align: center;
    box-sizing: border-box;
}

.stage-video-placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 90%;
}

.stage-video-play-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0.2rem;
}

.stage-video-title-label {
    font-size: 0.84rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.35;
}

.stage-video-desc-label {
    font-size: 0.72rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.45);
}

/* 主舞台 SVG 架构图外框 (去除多余外层边框与背景) */
.stage-arch-box {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 2rem;
}

.stage-arch-box .blueprint-vector-stage {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.stage-block-wrapper {
    margin-top: 1.8rem;
}

/* ==========================================================================
   3. 右侧 3D 倾斜透视与真实毛玻璃预览坞 (Stage Manager 3D Strip) - 默认紧凑收缩，Hover 放大
   ========================================================================== */
.stage-dock-strip {
    flex: 0 0 190px;
    width: 190px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.22rem; /* 极致紧凑，总高度仅 ~390px，任何屏幕均能100%全览6卡 */
    overflow: visible !important; /* 彻底解除溢出裁切，允许卡片向左覆盖不被任何边界切断 */
    padding: 0.1rem 0 0.3rem 0;
    box-sizing: border-box;
    position: relative;
    z-index: 50 !important; /* 整个坞层级高于主视口 (z-index: 1) 与背景层 */
    pointer-events: auto !important;
}

.stage-dock-strip::-webkit-scrollbar {
    display: none;
    width: 0;
}

/* 缩略卡片：默认紧凑小巧占用低，向内 3D 侧倾，景深收纳感强 */
.stage-dock-card {
    position: relative;
    width: 100%;
    background: rgba(14, 14, 17, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    padding: 0.26rem 0.55rem;
    cursor: pointer !important;
    pointer-events: auto !important;
    /* 大幅度 3D 悬挂立体透视：rotateY(-14deg) 带来强烈的景深折角感 */
    transform: perspective(550px) rotateY(-14deg) scale(0.93) translateX(-6px) translateZ(0);
    transform-origin: right center;
    will-change: transform;
    /* 仿生弹性过场：移入优雅回弹，移出利落归位 */
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.22s ease,
                border-color 0.22s ease;
    box-shadow: -14px 16px 30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.04);
    user-select: none;
    z-index: 10;
}

/* 利用 ::after 预烘焙大范围高斯投影与光晕，通过纯 opacity 进行硬件加速淡入淡出，彻底消灭 box-shadow 逐帧重绘掉帧 */
.stage-dock-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 8px;
    box-shadow: -26px 32px 64px rgba(0, 0, 0, 0.95), 0 0 25px rgba(255, 255, 255, 0.22);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: -1;
    will-change: opacity;
}

/* 卡片内部所有文本与徽标子元素禁止拦截指针，确保整张卡片为一个不可分割的原生点击实体 */
.stage-dock-card * {
    pointer-events: none !important;
}

/* 鼠标悬停动效：从 -14deg 强烈侧倾强力翻转展平并浮凸放大至最顶层 */
.stage-dock-card:hover {
    transform: perspective(550px) rotateY(0deg) scale(1.08) translateX(-24px) translateZ(0) !important;
    background-color: rgba(22, 22, 28, 0.98);
    border-color: rgba(255, 255, 255, 0.75);
    transition-duration: 0.38s;
    z-index: 100 !important; /* 悬停时跃迁至最高层，覆盖在主网页上方 */
}

.stage-dock-card:hover::after {
    opacity: 1;
    transition-duration: 0.38s;
}

/* 选中激活状态：仅高亮边框与质感底色，保持与未选中卡片一致的大幅 3D 侧倾 */
.stage-dock-card.is-active {
    background-color: rgba(18, 18, 22, 0.92);
    border-color: rgba(255, 255, 255, 0.65);
    transform: perspective(550px) rotateY(-14deg) scale(0.93) translateX(-6px) translateZ(0);
    box-shadow: -16px 18px 34px rgba(0, 0, 0, 0.9), 0 0 14px rgba(255, 255, 255, 0.15);
    z-index: 10;
}

.stage-dock-card.is-active:hover {
    transform: perspective(550px) rotateY(0deg) scale(1.08) translateX(-24px) translateZ(0) !important;
    background-color: rgba(22, 22, 28, 0.98);
    border-color: rgba(255, 255, 255, 0.9);
    transition-duration: 0.38s;
    z-index: 100 !important;
}

/* 卡片内部超紧凑排版，高度压至 ~62px，彻底实现 6 卡全景同屏 */
.stage-dock-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.08rem;
}

.stage-dock-tag {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-family: monospace;
    letter-spacing: 0.04em;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 500;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.stage-dock-tag.tag-multi-agent {
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-weight: 500;
}

.stage-dock-card:hover .stage-dock-tag {
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.28);
}

.stage-dock-index {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.65);
    font-family: monospace;
    font-weight: 600;
}

.stage-dock-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.1rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stage-dock-desc {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.46);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.12rem;
}

.stage-dock-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 0.12rem;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.stage-dock-footer:hover {
    border-top-color: rgba(255, 255, 255, 0.25);
}

.stage-dock-footer:hover .stage-dock-badge {
    color: #ffffff;
}

.stage-dock-footer:hover .stage-dock-arrow {
    color: #ffffff;
    transform: translateX(4px);
}

.stage-dock-badge {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.45);
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.stage-dock-arrow {
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.2s ease, color 0.2s ease;
}

.stage-dock-card:hover .stage-dock-arrow {
    transform: translateX(3px);
    color: #ffffff;
}

.stage-dock-card.is-active .stage-dock-arrow {
    color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   4. 响应式布局降级
   ========================================================================== */
@media (max-width: 1120px) {
    .stage-flow-track {
        height: auto !important;
        margin-bottom: 3rem !important;
    }
    .stage-flow-pin {
        position: relative !important;
        height: auto !important;
        overflow: visible !important;
        display: block !important;
        padding: 0 !important;
    }
    .stage-intro-hero {
        position: relative !important;
        inset: auto !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        padding: 3rem 1.5rem 2rem !important;
    }
    .stage-intro-scroll-hint {
        display: none !important;
    }
    .stage-studio-showcase {
        position: relative !important;
        inset: auto !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }
    .stage-studio-container {
        flex-direction: column;
        height: auto;
        min-height: auto;
        max-height: none;
    }
    .stage-main-viewport {
        flex: 1 1 100%;
        min-height: 700px;
    }
    .stage-hero-split {
        grid-template-columns: 1fr;
    }
    .stage-dock-strip {
        flex: 1 1 100%;
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: visible;
        padding: 0.8rem 0;
    }
    .stage-dock-card {
        min-width: 240px;
        transform: none !important;
    }
}