/* 纯 CSS 动效，无 JavaScript。 */
.home-copy,
.chapter-copy,
.glance-copy,
.section-heading {
    animation: textMove 1s ease;
}

@keyframes textMove {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.robe,
.analysis-img,
.studio-img {
    animation: imageMove 1.2s ease;
}

@keyframes imageMove {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.scroll {
    animation: scrollMove 2s ease-in-out infinite;
}

@keyframes scrollMove {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }

    100% {
        transform: translateY(0);
    }
}

.cards article {
    transition: transform 0.3s;
}

.cards article:hover {
    transform: translateY(-8px);
}

.four-links span {
    transition: transform 0.3s;
}

.four-links span:hover {
    transform: translateY(-6px);
}

@media(max-width:800px) {
    @keyframes textMove {
        from {
            opacity: 0;
            transform: translateY(15px);
        }

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

    @keyframes imageMove {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}
html { scroll-behavior: smooth; }

#archive .section-heading, #analysis .section-heading,
#studio .section-heading, #today .section-heading {
    animation: textMove .85s ease both;
}
.section-heading::after {
    content: "";
    display: block;
    width: 110px;
    height: 1px;
    margin-top: 22px;
    background: #b84839;
    transform-origin: left;
    animation: lineOpen 1s .25s ease both;
}
@keyframes lineOpen { from { transform: scaleX(0); } to { transform: scaleX(1); } }

#archive .cards article, #today .cards article {
    animation: cardIn .8s ease both;
    overflow: hidden;
}
#archive .cards article:nth-child(1), #today .cards article:nth-child(1) { animation-delay: .15s; }
#archive .cards article:nth-child(2), #today .cards article:nth-child(2) { animation-delay: .32s; }
#archive .cards article:nth-child(3), #today .cards article:nth-child(3) { animation-delay: .49s; }
@keyframes cardIn {
    from { opacity: 0; transform: translateY(35px); }
    to { opacity: 1; transform: translateY(0); }
}
.cards article { position: relative; transition: transform .4s ease; }
.cards article::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; top: 230px;
    height: 1px;
    background: #b84839;
    transition: right .5s ease;
}
.cards article:hover::after { right: 0; }
.cards article img { display: block; transition: transform .6s ease, filter .6s ease; }
.cards article:hover img { transform: scale(1.06); filter: brightness(1.13); }
.cards article:hover { transform: translateY(-8px); }

#analysis .analysis-img { animation: imageReveal 1.3s ease both; transition: filter .5s ease, transform .5s ease; }
#analysis .analysis-img:hover { transform: scale(1.025); filter: brightness(1.16); }
@keyframes imageReveal {
    from { opacity: 0; transform: scale(1.07); filter: brightness(.55); }
    to { opacity: 1; transform: scale(1); filter: brightness(1); }
}
#analysis .analysis-notes p { animation: noteIn .7s ease both; transition: color .3s ease, padding-left .3s ease; }
#analysis .analysis-notes p:nth-child(1) { animation-delay: .3s; }
#analysis .analysis-notes p:nth-child(2) { animation-delay: .5s; }
#analysis .analysis-notes p:nth-child(3) { animation-delay: .7s; }
#analysis .analysis-notes p:hover { color: #efb59b; padding-left: 8px; }
@keyframes noteIn {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}
#analysis .analysis-foot { animation: textMove .8s 1s ease both; }

#studio .studio-img { animation: patternIn 1s ease both, patternFloat 5s 1s ease-in-out infinite; }
@keyframes patternIn {
    from { opacity: 0; transform: scale(.9) rotate(-4deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes patternFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.015); }
}
#studio .studio-left { animation: studioLeft .8s .2s ease both; }
#studio .studio-right { animation: noteIn .8s .4s ease both; }
@keyframes studioLeft {
    from { opacity: 0; transform: translateX(-25px); }
    to { opacity: 1; transform: translateX(0); }
}
#studio .studio-left p, #studio .studio-right p { transition: color .3s ease, padding-left .3s ease; }
#studio .studio-left p:hover, #studio .studio-right p:hover { color: #d37660; padding-left: 7px; }
#studio .colors { animation: colorPulse 3s 1s ease-in-out infinite; }
@keyframes colorPulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

#today .cards article:hover img { filter: brightness(1.18) saturate(1.08); }
#today .cards article::after { top: auto; bottom: 0; }

.header nav span, .side-nav span, .four-links span {
    transition: color .3s ease, opacity .3s ease, transform .3s ease;
}
.header nav span:hover, .side-nav span:hover, .four-links span:hover {
    color: #d47764; opacity: 1;
}
.four-links span:hover { transform: translateY(-6px); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.chapter-copy h2, .glance-copy h2, .section-heading h2 {
    animation: titleSlide .9s ease both;
}
@keyframes titleSlide {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@supports (animation-timeline: view()) {
    .screen {
        view-timeline-name: --page-enter;
        view-timeline-axis: block;
    }
    .chapter-copy, .glance-copy, .section-heading {
        animation: none;
    }
    .chapter-copy h2, .glance-copy h2, .section-heading h2 {
        animation: titleSlide linear both;
        animation-timeline: --page-enter;
        animation-range: entry 15% entry 65%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chapter-copy h2, .glance-copy h2, .section-heading h2 {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.screen:target .chapter-copy h2,
.screen:target .glance-copy h2,
.screen:target .section-heading h2 {
    animation: titleSlide 1.1s cubic-bezier(.2,.7,.2,1) both;
    animation-timeline: auto;
}

.header nav a, .side-nav a, .four-links a {
    display: inline-block;
    transition: color .3s ease, opacity .3s ease, transform .3s ease;
}
.header nav a:hover, .side-nav a:hover, .four-links a:hover { color: #d47764; opacity: 1; }
.four-links a:hover { transform: translateY(-6px); }

@media (prefers-reduced-motion: reduce) {
    .screen:target .chapter-copy h2,
    .screen:target .glance-copy h2,
    .screen:target .section-heading h2 { animation: none; opacity: 1; transform: none; }
}