/* ================================================================
   RIVULET LAB — entrance masks
   ---------------------------------------------------------------
   首页板块：纸张幕布（paper curtain）自上而下揭开
   内容块：clip-path 裁切上推 + 轻微位移，形成“印张翻页”的进入感
   新闻 / 导航页：共用同一套 [data-rlx-mask] 与 [data-rlx-reveal]
   仅在 html.rlx-motion 存在时生效，脚本失败或减少动效时内容照常可见
   ================================================================ */

/* ----------------------------------------------------------------
   1. 内容块：裁切遮罩
   ---------------------------------------------------------------- */
html.rlx-motion [data-rlx-mask] {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    transform: translateY(14px);
    transition:
        clip-path 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.55s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 80ms);
}

html.rlx-motion [data-rlx-mask].is-in {
    clip-path: inset(-40px);
    opacity: 1;
    transform: none;
}

/* 板块内部的内容块由幕布状态驱动，等幕布抬起后再落版 */
html.rlx-motion .rlx-sec [data-rlx-mask] {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    transform: translateY(14px);
}

html.rlx-motion .rlx-sec.is-in [data-rlx-mask] {
    clip-path: inset(-40px);
    opacity: 1;
    transform: none;
    transition-delay: calc(0.16s + var(--i, 0) * 70ms);
}

/* ----------------------------------------------------------------
   2. 原有卡片：轻量上浮（与遮罩分层，不抢戏）
   ---------------------------------------------------------------- */
html.rlx-motion [data-rlx-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.7s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 55ms);
}

html.rlx-motion [data-rlx-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* ----------------------------------------------------------------
   3. 板块幕布：整块纸面自上而下收起
   ---------------------------------------------------------------- */
html.rlx-motion .rlx-sec {
    position: relative;
}

html.rlx-motion .rlx-sec::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    background:
        linear-gradient(to bottom, #1456f0 0 1px, transparent 1px),
        linear-gradient(180deg, var(--rlx-paper) 0%, var(--rlx-paper-deep) 100%);
    transform-origin: bottom center;
    transform: scaleY(1);
    transition: transform 1.05s cubic-bezier(0.76, 0, 0.22, 1);
}

html.rlx-motion .rlx-sec.is-in::before {
    transform: scaleY(0);
    transition-delay: 0.04s;
}

/* 幕布右上角的章节标签，随幕布一起退场 */
html.rlx-motion .rlx-sec::after {
    content: attr(data-rlx-label);
    position: absolute;
    top: clamp(28px, 4.5vw, 54px);
    right: var(--rlx-pad);
    z-index: 7;
    color: #1456f0;
    font-family: var(--rlx-mono);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 1;
    transition:
        opacity 0.5s ease 0.18s,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

html.rlx-motion .rlx-sec.is-in::after {
    opacity: 0;
    transform: translateY(-12px);
}

/* ----------------------------------------------------------------
   4. 新闻 / 导航刊头：标题原本的 nx-rise 交给遮罩统一接管
   ---------------------------------------------------------------- */
html.rlx-motion .rlx-news .nx-title,
html.rlx-motion .rlx-news .nx-desc {
    animation: none;
}

/* 导航页卡片：与新闻列表使用同一套进入层 */
html.rlx-motion .rlx-nav .nav-card[data-rlx-reveal] {
    opacity: 0;
    transform: translateY(22px);
}

html.rlx-motion .rlx-nav .nav-card[data-rlx-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* ----------------------------------------------------------------
   5. 减少动效偏好：直接呈现最终状态
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html.rlx-motion [data-rlx-mask],
    html.rlx-motion .rlx-sec [data-rlx-mask],
    html.rlx-motion [data-rlx-reveal] {
        clip-path: none;
        opacity: 1;
        transform: none;
        transition: none;
    }

    html.rlx-motion .rlx-sec::before,
    html.rlx-motion .rlx-sec::after {
        display: none;
    }
}