/* ==========================================================================
   论文关键词词云（Word Cloud）
   紧凑方形小词云，每屏 10 个词，靠右与 tab 正文同水平浮动
   排布与动效逻辑见 script/utils.js 的 renderWordCloud()
   ========================================================================== */

/* 浮动槽位：靠右、位于 tab 正文右侧
   上外边距用于让开 .tab-content h3 标题（含其 border-bottom），
   否则标题的下边框线会横穿词云方框、标题右侧文字被方框盖住。 */
.cloud-slot {
    float: right;
    width: 210px;
    height: 210px;
    margin: 46px 0 10px 18px;
    position: relative;
}

/* 画布：严格方形，尺寸由 .cloud-slot 固定
   背景完全透明，只用一个细边框标示区域
   overflow:hidden + contain:strict 双层保险，任何内容都不可能溢出 */
.word-cloud {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    contain: strict;
    box-sizing: border-box;

    background: transparent;   /* 不要底色、不要底纹 */
    border: 1px solid #e4eaf0;
}

/* --------------------------------------------------------------------------
   标题与浮动的避让
   .tab-content h3 是块级元素且带 border-bottom，
   在浮动元素旁其边框会延伸进浮动区域，故让标题建立 BFC。
   -------------------------------------------------------------------------- */
.tab-content h3 {
    /* 让标题的边框不会被右侧浮动方框压住 */
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   词条：绝对定位，位置由螺旋碰撞检测算法分配
   只使用 0°(横) 与 90°(竖) 两种朝向，故占位盒与视觉盒完全一致
   -------------------------------------------------------------------------- */
.cloud-word {
    position: absolute;
    display: block;
    font-family: 'Microsoft YaHei', 'Arial', sans-serif;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: default;
    user-select: none;
    transform-origin: center center;
    will-change: transform, opacity, filter;

    /* 入场初始态：收缩在自身中心、向下沉降、带模糊，为 pop-up 蓄势 */
    opacity: 0;
    transform:
        translate(0, 9px)
        scale(0.3, 0.6);
    filter: blur(6px);
    transition:
        opacity 0.34s cubic-bezier(0.33, 1, 0.68, 1),
        filter 0.34s cubic-bezier(0.33, 1, 0.68, 1),
        transform 0.58s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* pop-up 落定态：弹性回弹到自然尺寸 */
.cloud-word.is-visible {
    opacity: 1;
    filter: blur(0);
    transform:
        translate(0, 0)
        scale(1);
}

/* --------------------------------------------------------------------------
   竖排：单字竖叠（writing-mode）
   每个字保持正立、自上而下堆叠，读者无需偏头即可阅读。
   早期方案是整体旋转 90°，会把字横躺，阅读体验很差——已废弃。
   -------------------------------------------------------------------------- */
.cloud-word.is-vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0;
    /* 竖排下字与字之间的纵向间距 */
    line-height: 1;
}

/* --------------------------------------------------------------------------
   新词强调：刚补入的词先"亮起来"，让更新的关键词获得更强注意力
   光晕 + 描边脉冲，色相不变，避免破坏分层配色语义
   -------------------------------------------------------------------------- */
.cloud-word.is-new {
    text-shadow: 0 0 9px var(--glow, rgba(0, 98, 155, 0.5));
    z-index: 4;
    transition:
        opacity 0.34s cubic-bezier(0.33, 1, 0.68, 1),
        filter 0.34s cubic-bezier(0.33, 1, 0.68, 1),
        text-shadow 1s ease-out,
        transform 0.58s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 强调光环：从词条中心扩散一圈然后消失 */
.cloud-word.is-new::after {
    content: '';
    position: absolute;
    inset: -3px -5px;
    border: 1.5px solid var(--glow, rgba(0, 98, 155, 0.5));
    border-radius: 2px;
    pointer-events: none;
    animation: cloud-halo 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cloud-halo {
    0% {
        opacity: 0;
        transform: scale(0.72);
    }
    25% {
        opacity: 0.95;
    }
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

/* dissolve 消散态：轻微放大 + 模糊 + 淡出，与 pop-up 形成对照 */
.cloud-word.is-leaving {
    opacity: 0;
    filter: blur(5px);
    transform:
        translate(0, -6px)
        scale(1.3);
    transition:
        opacity 0.42s ease-in,
        filter 0.42s ease-in,
        transform 0.42s cubic-bezier(0.64, 0, 0.78, 0);
    pointer-events: none;
    z-index: 0;
}

/* 悬停：仅放大提亮，不显示任何 tooltip */
.cloud-word-link {
    cursor: pointer;
}

.cloud-word-link.is-visible:hover {
    transform:
        translate(0, 0)
        scale(1.16);
    text-shadow: 0 0 12px currentColor;
    z-index: 6;
}

/* 空状态：该版块尚无收录论文时的占位提示 */
.cloud-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    text-align: center;
    color: #9aa7b2;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.03em;
}

/* 尊重用户的减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
    .cloud-word {
        transition: opacity 0.3s ease;
        filter: none;
        transform: none;
    }

    .cloud-word.is-visible,
    .cloud-word-link.is-visible:hover {
        transform: none;
    }

    .cloud-word.is-leaving {
        transform: none;
        filter: none;
    }

    .cloud-word.is-new::after {
        animation: none;
    }
}

/* 窄屏：取消浮动，词云居中独占一行，避免挤压正文 */
@media (max-width: 700px) {
    .cloud-slot {
        float: none;
        width: 100%;
        max-width: 250px;
        height: 250px;
        margin: 14px auto;
    }
}