/* ========= 容器结构 ========= */
#section-title {
    position: fixed;
    top: 20vh;
    right: 5vw;
    font-family: 'Cormorant Garamond', serif;
    font-size: 8vh;
    text-align: right;
    z-index: 6000;
    opacity: 0;
    transition: opacity 1s ease;
}

#section-title.visible {
    opacity: 1;
}

.right-arrow-placeholder {
    position: fixed;
    /* ✅ 页面级别定位 */
    right: 4vw;
    /* 距离右边 5% 屏幕宽度 */
    top: 25.3vh;
    transform: translateY(-50%);
    font-size: 0.8em;
    font-family: 'Cormorant Garamond', serif;
    /* 或其他优雅字体 */
    color: black;
    opacity: 0.5;
    pointer-events: none; }

/* ========= title 区域 ========= */
.title-item {
    position: relative;
    height: 1.3em;
    line-height: 1.3em;
    overflow: hidden;
    /* ✅ 新旧标题滑动受限制 */
    user-select: none;
    white-space: nowrap;
    padding: 0 5px;
}

/* 默认标题样式 */
.title-item span {
    position: relative;
    opacity: 1;
}

/* 旧标题：点击后瞬间透明 */
.title-item span.slide-out {
    opacity: 0;
}

.title-animator {
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    height: 1.3em;
    line-height: 1.3em;
    pointer-events: none;
    width: fit-content;
    padding-right: 5px;      /* ✅ 自定义你需要的右边距 */
    text-align: right;        /* ✅ 确保文本向右对齐 */
    display: flex; 
    white-space: nowrap;           
}

/* 初始状态：准备进入动画 */
.title-animator span {
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.5s ease;
}

/* 激活状态：动画目标状态 */
.title-animator span.enter {
    transform: translateY(0);
    opacity: 1;
}

/* ========= dropdown 区域 ========= */
.dropdown {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    gap: 8px;
    align-items: flex-end;
    width: max-content;
    z-index: 10; 

    max-height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

#section-title.locked .dropdown {
    transition: none !important;
    max-height: 0;
    opacity: 0; }

#section-title:hover:not(.locked) .dropdown {
    max-height: 100vh;
    /* 足够高以显示全部 */
    opacity: 1;
    pointer-events: auto;
}

/* dropdown 单项容器，负责裁剪自己的动画 */
.dropdown-item {
    position: relative;
    height: 1.3em;
    line-height: 1.3em;
    overflow: hidden;
    padding: 0 5px;
    text-align: right;
    cursor: pointer;
    font-weight: normal;
    width: 100%;
    /* ✅ 根据文字宽度自适应 */
    white-space: nowrap;
    transform: translateY(20%);
    animation: dropdownFadeIn 0.4s ease forwards;
}

/* 文字绝对定位，让滑动不影响其他布局 */
.dropdown-item span {
    display:inline-block;
    /* ✅ 让 transform 生效同时撑开容器 */
    transform: translateY(0);
    transition: transform 0.5s ease, color 0.3s ease;
    white-space: nowrap;
    text-align: right;
}

/* 点击后滑出 */
.dropdown-item.slide-up span {
    transform: translateY(-100%);
}

/* ========= hover 特效（黑块滑入） ========= */
.dropdown-item span::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(100% + 5px);
    width: 100%;
    height: 100%;
    background: black;
    transform: translateX();
    transition: transform 0.3s ease-in;
    z-index: -1;
}

.dropdown-item.hovered span::after {
    transform: translateX(calc(-100% - 5px));
}

.dropdown-item.hovered span {
    color: white;
}

/* 定义动画 */
@keyframes dropdownFadeIn {
    from {
        transform: translateY(20%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 依次延迟每一项 */
.dropdown-item:nth-child(1) {
    animation-delay: 0ms;
}

.dropdown-item:nth-child(2) {
    animation-delay: 60ms;
}

.dropdown-item:nth-child(3) {
    animation-delay: 120ms;
}

.dropdown-item:nth-child(4) {
    animation-delay: 180ms;
}

.dropdown-item:nth-child(5) {
    animation-delay: 240ms; 
}

.title-item.locked,
.dropdown.locked {
  pointer-events: none;
}


.title-item,
.title-item span,
.dropdown,
.dropdown-item {
    user-select: none;
    -webkit-user-select: none;
}

.title-item.locked,
.dropdown.locked {
    pointer-events: none;
}