* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #f8f5ef;
    color: #816955;
    font-family: "Calibri", "Arial", sans-serif;
}

/* 两个内容区上下排列 */
.main {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}


/*  第一屏：首页背景 */

#home-screen {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: #f9edd9;
    background-image: url("https://res.cloudinary.com/ab6obbr1/image/upload/v1790224782/%E4%BF%A1%E6%9C%9F%E7%BB%A3%E8%83%8C%E6%99%AF2.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


/* 顶部导航 */

.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 24px 40px;
    z-index: 3;
}

.header-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.main-navigation,
.header-controls {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-navigation {
    gap: 60px;
}

.main-navigation-link {
    color: #816955;
    font-size: 18px;
    text-decoration: none;
}

.header-controls {
    gap: 22px;
}

.auth-box {
    flex-shrink: 0;
}

.header-controls-button {
    border: none;
    border-radius: 50px;
    padding: 10px 20px;
    background-color: #f9edd9;
    color: #816955;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.header-controls-button:hover {
    background-color: #816955;
    color: #fff8ee;
    cursor: pointer;
}

/* 首页内容 */

.home-page-content {
    position: relative;
    min-height: 100vh;
    padding: 28vh 0 150px;
}

/* 左侧文字 */
.side-caption {
    position: absolute;
    top: 44%;
    left: 9.4%;
    padding: 40px 0 40px 25px;
    border-left: 1px solid #c7ac8899;
    color: #76543b;
    font-size: 15px;
    line-height: 1.95;
    letter-spacing: 0.07em;
}

/* 中间文字保留实际高度，避免与第二屏重叠 */
.text-center {
    position: relative; 
    width: 66%;
    margin-left: 29.4%;
}

.title-row {
    display: flex;
    align-items: center;
}

.title-wrap {
    position: relative;
}

.text-center-h1 {
    margin: 0;
    color: #76543b;
    font-family: "STKaiti", "KaiTi", "Kaiti SC", serif;
    font-size: 113px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 5px;
}

/* 红色印章 */
.seal {
    position: absolute;
    top: 28%;
    right: -25px;
    padding: 4px 3px;
    border-radius: 6px;
    background-color: #a43628;
    color: #fff0d6;
    font-family: "KaiTi", serif;
    font-size: 18px;
    line-height: 1;
    box-shadow: inset 0 0 0 2px #f6eddc33;
}

/* 标题旁的斜线 */
.slash {
    width: 1px;
    height: 65px;
    margin: 20px 40px 0 55px;
    background-color: #76543b;
    transform: rotate(36deg);
}

.english-name {
    margin: 15px 0 0;
    color: #76543b;
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: 0.48em;
}

/* 首页标语 */
.home-slogan {
    margin: 18px 0;
    color: #76543b;
    font-family: "STKaiti", "KaiTi", "Kaiti SC", serif;
    font-size: clamp(36px, 4.6vw, 76px);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 4px;
}

.description {
    margin: 16px 0 0;
    color: #927356;
    font-size: clamp(15px, 1.35vw, 22px);
    line-height: 1.65;
    letter-spacing: 0.16em;
}

.short-line {
    display: block;
    width: 86px;
    height: 1px;
    margin-top: 28px;
    background-color: #76543b;
}


/* 页码装饰 */

.page-index {
    position: absolute;
    bottom: 9%;
    left: 3.7%;
    display: grid;
    justify-items: center;
    gap: 17px;
    color: #b09478;
    font-size: 15px;
    letter-spacing: 1px;
}

.page-index .current {
    color: #76543b;
}

.page-index i {
    width: 1px;
    height: 15px;
    background-color: #ae8d6e;
}


/* 向下浏览按钮 */

.explore {
    position: absolute;
    bottom: 8%;
    left: 9.4%;
    display: flex;
    align-items: center;
    gap: 32px;
    color: #76543b;
    font-family: Georgia, "Times New Roman", "SimSun", serif;
    font-size: 21px;
    text-decoration: none;
}

.arrow {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 1px solid #76543b;
    border-radius: 50%;
    font-size: 29px;
}

.explore:hover .arrow {
    background-color: #76543b;
    color: #f9edd9;
}


/* 第二屏：何为湘绣 */

#xiang-about {
    position: relative; 
    width: 100%;
    min-height: 100vh;
    padding: 86px 70px 60px;
    background-color: #f8f5ef;
    color: #816955;
    text-align: left;
}

.xiang-about-title {
    margin: 0;
    font-family: "STXingkai", "华文行楷", "KaiTi", "楷体", serif;
    font-size: 60px;
    font-weight: bold;
    line-height: 66px;
    letter-spacing: 2px;
}

.xiang-about-subtitle {
    margin: 0;
    font-family: "Calibri", "Arial", sans-serif;
    font-size: 32px;
    font-weight: normal;
    line-height: 42px;
}

.xiang-about-text {
    max-width: 770px;
    margin-top: 46px;
    font-family: "Times New Roman", "SimSun", serif;
    font-size: 33px;
    line-height: 1.165;
}

.xiang-about-text p {
    margin: 0;
}

img,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 千年一线 */

#traceability,
#traceability * {
    box-sizing: border-box;
}

#traceability {
    position: relative;
    display: block;

    width: 100%;
    min-width: 0;

    height: 300vh;
    height: 300svh;

    margin: 0;
    padding: 0;
    overflow: visible;

    background-color: #f9edd9;
    color: #816955;

    
    view-timeline-name: --thread-history;
    view-timeline-axis: block;
    view-timeline-inset: 0;
}

/* 展示窗口 */
#traceability .thread-stage {
    position: sticky;
    top: 0;

    width: 100%;
    height: 100vh;
    height: 100svh;

    margin: 0;
    padding: 0;

    overflow: clip;

    container-type: inline-size;
}

/* 横向画布 */
#traceability .thread-track {
    position: relative;

    width: 200%;
    min-width: 1552px;
    height: 100%;

    overflow: hidden;

    background-image: url("https://res.cloudinary.com/ab6obbr1/image/upload/v1790224788/%E4%BF%A1%E6%9C%9F%E7%BB%A3%E8%83%8C%E6%99%AF.png");
    background-repeat: repeat-x;
    background-position: left top;
    background-size: 50% 100%;

    font-family: "Calibri", "Arial", sans-serif;
    font-size: max(1px, 0.128866cqw);
    line-height: 1;

    will-change: transform;

    animation: thread-history-horizontal 1s linear both;
    animation-timeline: --thread-history;
    animation-range: contain 0% contain 100%;
}

/* 横移到画布最右端，正好展示最后一屏 */
@keyframes thread-history-horizontal {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% + 100cqw));
    }
}


/* 左上角标题 */

#traceability .traceability-heading {
    position: absolute;
    top: 9.7%;
    left: 2.58%;
}

#traceability .traceability-heading h2 {
    margin: 0;
    padding: 0;

    color: #816955;
    font-family:
        "LiSu",
        "隶书",
        "STXingkai",
        "华文行楷",
        serif;

    font-size: 32em;
    font-weight: bold;
    line-height: 1.05;
    letter-spacing: 1px;
}

#traceability .traceability-heading p {
    margin: 0;
    padding: 0;

    font-size: 18em;
    line-height: 1.1;
}

/* 棕色轴线和箭头 */

#traceability .traceability-axis {
    position: absolute;
    top: 47.02%;
    left: 2.58%;

    width: 94.72%;
    height: 2em;

    background-color: #816955;
    transform: translateY(-50%);
}

#traceability .traceability-axis::after {
    content: "";

    position: absolute;
    top: 50%;
    right: 0;

    width: 10em;
    height: 10em;

    border-top: 2em solid #816955;
    border-right: 2em solid #816955;

    transform: translateY(-50%) rotate(45deg);
}

/* 七个圆形节点 */

#traceability .traceability-dot {
    position: absolute;
    top: 47.02%;

    width: 15em;
    height: 15em;

    border-radius: 50%;
    background-color: #816955;

    transform: translate(-50%, -50%);
}

#traceability .traceability-dot-1 {
    left: 9.34%;
}

#traceability .traceability-dot-2 {
    left: 23.20%;
}

#traceability .traceability-dot-3 {
    left: 36.86%;
}

#traceability .traceability-dot-4 {
    left: 54.32%;
}

#traceability .traceability-dot-5 {
    left: 62.56%;
}

#traceability .traceability-dot-6 {
    left: 70.81%;
}

#traceability .traceability-dot-7 {
    left: 89.76%;
}

/* 时间线文字 */

#traceability .traceability-events {
    margin: 0;
    padding: 0;
    list-style: none;
}

#traceability .traceability-event {
    position: absolute;

    margin: 0;
    padding: 0;

    text-align: left;
    white-space: nowrap;
}

#traceability .traceability-event h3 {
    margin: 0;
    padding: 0;

    color: #816955;
    font-family:
        "LiSu",
        "隶书",
        "STXingkai",
        "华文行楷",
        serif;

    font-size: 22em;
    font-weight: bold;
    line-height: 1.05;
    letter-spacing: 1px;
}

#traceability .traceability-event p {
    margin: 0;
    padding: 0;

    font-size: 18em;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0;
}

/* 楚地绣源 */
#traceability .traceability-event-1 {
    left: 5.93%;
    top: 55.24%;
}

/* 民间生长 */
#traceability .traceability-event-2 {
    left: 21.91%;
    top: 28.95%;
}

/* 湘绣成型 */
#traceability .traceability-event-3 {
    left: 34.15%;
    top: 55.44%;
}

/* 声明渐起 */
#traceability .traceability-event-4 {
    left: 51.16%;
    top: 33.06%;
}

/* 技艺新生 */
#traceability .traceability-event-5 {
    left: 60.24%;
    top: 52.98%;
}

/* 双面异绣 */
#traceability .traceability-event-6 {
    left: 68.11%;
    top: 31.42%;
}

/* 非遗时代 */
#traceability .traceability-event-7 {
    left: 86.66%;
    top: 55.85%;
}

/* 红色丝线 */

#traceability .traceability-thread {
    position: absolute;
    top: 0;
    left: 0;

    display: block;
    width: 100%;
    max-width: none;
    height: 100%;

    z-index: 2;
    pointer-events: none;
}

/* 红线随着滚动，沿原有曲线逐段画出 */
#traceability .traceability-thread path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;

/* 与页面横向移动共用同一滚动 */
    animation: thread-history-draw 1s linear both;
    animation-timeline: --thread-history;
    animation-range: contain 0% contain 100%;
}

/* 从隐藏整条红线，到完整显示红线 */
@keyframes thread-history-draw {
    from {
        stroke-dashoffset: 1000;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* 横轴、圆点和文字提前于红线显现 */

/* 棕色横轴：从左向右展开 */
#traceability .traceability-axis {
    animation: thread-axis-reveal 1s linear both;
    animation-timeline: --thread-history;
    animation-range: contain 0% contain 70%;
}

@keyframes thread-axis-reveal {
    from {
        /* 上下留出空间，避免裁掉箭头 */
        clip-path: inset(-20em 100% -20em -20em);
    }

    to {
        clip-path: inset(-20em -20em -20em -20em);
    }
}

/* 圆点和文字：只改变透明度，保留原来的位置 */
#traceability .traceability-dot,
#traceability .traceability-event {
    animation: thread-content-reveal 1s linear both;
    animation-timeline: --thread-history;
}

@keyframes thread-content-reveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 第一组：楚地绣源 */
#traceability .traceability-dot-1,
#traceability .traceability-event-1 {
    animation-range: contain 0% contain 4%;
}

/* 第二组：民间生长 */
#traceability .traceability-dot-2,
#traceability .traceability-event-2 {
    animation-range: contain 7% contain 14%;
}

/* 第三组：湘绣成型 */
#traceability .traceability-dot-3,
#traceability .traceability-event-3 {
    animation-range: contain 17% contain 24%;
}

/* 第四组：声明渐起 */
#traceability .traceability-dot-4,
#traceability .traceability-event-4 {
    animation-range: contain 30% contain 38%;
}

/* 第五组：技艺新生 */
#traceability .traceability-dot-5,
#traceability .traceability-event-5 {
    animation-range: contain 36% contain 44%;
}

/* 第六组：双面异绣 */
#traceability .traceability-dot-6,
#traceability .traceability-event-6 {
    animation-range: contain 43% contain 51%;
}

/* 第七组：非遗时代 */
#traceability .traceability-dot-7,
#traceability .traceability-event-7 {
    animation-range: contain 77% contain 83%;
}



/* 内容从下方浮现，同时由透明变为清晰 */

@media (prefers-reduced-motion: no-preference) {
    @keyframes xiang-visible-reveal {
        from {
            opacity: 0;
            translate: 0 48px;
            filter: blur(3px);
        }
        to {
            opacity: 1;
            translate: 0 0;
            filter: blur(0);
        }
    }

    /* 首页：刷新后，从下方浮现 */
    #home-screen :is(
        .header,
        .side-caption,
        .text-center,
        .page-index,
        .explore
    ) {
        animation: xiang-visible-reveal 1s ease-out both;
    }

    @supports (animation-timeline: view()) and
    (animation-range: entry 0% entry 220px) {

        /* 每个标题、段落和图片，分别随滚动显现 */
        #xiang-about :is(
            .xiang-about-title,
            .xiang-about-subtitle,
            .xiang-about-text > p
        ),
        #masterpiece :is(
            .classics-navigation,
            .classics-heading,
            .classic-row > .classic-picture,
            .classic-row > .classic-copy,
            .classic-lady > .classic-number,
            .classic-lady > .classic-name,
            .classic-lady > .classic-chinese,
            .lady-pictures > figure,
            .lady-description
        ) {
            animation: xiang-visible-reveal 1s linear both;
            animation-timeline: view(block);

            /* 进入屏幕后，再滚动220px，才完全显现 */
            animation-range: entry 0% entry 220px;
        }

        /* 千年一线：只调整标题入场 */
        #traceability .traceability-heading {
            animation: xiang-visible-reveal 1s linear both;
            animation-timeline: --thread-history;
            animation-range: entry 0% entry 220px;
        }
    }
}