/* ═══════════════════════════════════════════════════
   520 · 知念  —— E-ink & Sunset Theme
   ═══════════════════════════════════════════════════ */

/* ── Fonts (local) ── */
@import url('/1/assets/fonts/fonts.css');

/* ── CSS Variables ── */
:root {
    --bg-primary: #FFFFFF;
    --bg-subtle: #F9F9F9;
    --text-primary: #2C3E50;
    --text-secondary: #5D6D7E;
    --text-light: #A0AEC0;
    --gold: #F5B041;
    --gold-deep: #E67E22;
    --gold-pale: #FEF5E7;
    --gold-glow: rgba(245, 176, 65, 0.3);
    --serif: 'Noto Serif SC', 'Songti SC', serif;
    --sans: system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--sans);
    color: var(--text-primary);
    background: var(--bg-primary);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

/* ── Scroll Container (snap-scroll wrapper) ── */
.scroll-container {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

/* ── Paper Texture Overlay ── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Scroll Snap Sections ── */
.page {
    width: 100%;
    height: 100vh;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 1.5rem;
    position: relative;
    z-index: 1;
}

.page-scrollable {
    width: 100%;
    min-height: 100vh;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 3rem 1.5rem 2rem;
    position: relative;
    z-index: 1;
    overflow-y: auto;
}

/* ── Typography ── */
.title-serif {
    font-family: var(--serif);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.1em;
}

.section-number {
    font-family: var(--serif);
    font-size: 0.75rem;
    color: var(--text-light);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.section-title {
    font-family: var(--serif);
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #E5E7EB;
}

.body-text {
    font-size: 1rem;
    line-height: 2;
    color: var(--text-secondary);
    max-width: 560px;
}

.body-text p {
    margin-bottom: 1em;
}

/* ── Gold Highlights ── */
.gold { color: var(--gold-deep); }
.gold-num {
    color: var(--gold-deep);
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.1em;
}

/* Highlighter pen effect */
.highlight-line {
    background: linear-gradient(transparent 60%, var(--gold-glow) 60%);
    padding: 0 2px;
}

.highlight-line.is-active {
    background: linear-gradient(transparent 60%, rgba(245, 176, 65, 0.45) 60%);
    transition: background 0.8s ease;
}

/* ── Typewriter ── */
.typewriter-cursor::after {
    content: '|';
    animation: blink 0.8s step-end infinite;
    color: var(--gold-deep);
    font-weight: 300;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* ── Scroll Hint ── */
.scroll-hint {
    color: var(--text-light);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    animation: gentle-bounce 2s ease-in-out infinite;
}

@keyframes gentle-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

/* ── Stat Cards ── */
.stat-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.stat-card {
    text-align: center;
    padding: 1rem 1.5rem;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: var(--bg-subtle);
    min-width: 120px;
}

.stat-card .stat-num {
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold-deep);
    line-height: 1.2;
}

.stat-card .stat-label {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 0.25rem;
}

/* ── Emotional KPI Chips (dual-color dual-layer) ── */
.kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    width: 100%;
    max-width: 400px;
    margin: 1.5rem auto;
}

.kpi-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: var(--bg-subtle);
}

.kpi-chip .kpi-label {
    font-size: 0.8rem;
    color: var(--text-light);
    letter-spacing: 0.08em;
}

.kpi-chip .kpi-num {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.2;
    background: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Polaroid Cards ── */
.polaroid-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 520px;
    width: 100%;
}

.polaroid {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transform: rotate(var(--rot, 0deg));
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.polaroid:nth-child(1) { --rot: -1.5deg; }
.polaroid:nth-child(2) { --rot: 1deg; }
.polaroid:nth-child(3) { --rot: 0.5deg; }
.polaroid:nth-child(4) { --rot: -0.8deg; }

.polaroid:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.polaroid .polaroid-emoji {
    display: none;
}

.polaroid .polaroid-title {
    font-family: var(--serif);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.polaroid .polaroid-desc {
    font-size: 0.75rem;
    color: var(--text-light);
    line-height: 1.6;
}

/* ── Chart Containers ── */
.chart-box {
    width: 100%;
    max-width: 560px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: var(--bg-subtle);
    padding: 1rem;
    margin-bottom: 1rem;
}

.chart-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100%;
    max-width: 560px;
}

/* ── Pie Chart + Legend Side-by-Side ── */
.pie-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    align-items: start;
    width: 100%;
    max-width: 560px;
}

.type-legend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.type-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.type-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.type-legend-bar {
    flex: 1;
    height: 4px;
    background: #F3F4F6;
    border-radius: 2px;
    overflow: hidden;
}

.type-legend-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 1s ease;
}

.type-legend-count {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-primary);
    flex-shrink: 0;
}

/* ── Emoji Display ── */
.emoji-row {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    gap: 1rem;
    padding: 1.5rem 0;
    width: 100%;
    max-width: 560px;
}

.emoji-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.emoji-item img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.12));
}

.emoji-item .emoji-count {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold-deep);
}

/* ── Text Emoji Pills ── */
.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    max-width: 560px;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--bg-subtle);
}

.pill .pill-count {
    font-size: 0.7rem;
    color: var(--text-light);
}

/* ── Meta Line (Page 4 stats) ── */
.meta-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 560px;
    width: 100%;
    padding: 0.75rem 0;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.meta-item .meta-dot {
    width: 4px;
    height: 4px;
    background: var(--gold);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Final Page ── */
.page-final {
    background: linear-gradient(180deg, #FFFFFF 0%, #FEF5E7 40%, #FDE8C8 100%);
}

.final-button {
    display: inline-block;
    padding: 0.75rem 2rem;
    border: 2px solid var(--gold-deep);
    border-radius: 999px;
    color: var(--gold-deep);
    font-family: var(--serif);
    font-size: 1rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    background: transparent;
    transition: all 0.3s ease;
    margin-top: 2rem;
}

.final-button:hover {
    background: var(--gold-deep);
    color: #fff;
}

.final-button:active {
    transform: scale(0.96);
}

/* Fireworks canvas overlay */
#fireworks-canvas {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}

#fireworks-canvas.active {
    opacity: 1;
}

.final-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1.5s ease 1s;
    font-family: var(--serif);
    font-size: 1.5rem;
    color: var(--gold-deep);
    letter-spacing: 0.15em;
    margin-top: 2rem;
}

.final-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Fade-in Animation ── */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in.delay-1 { transition-delay: 0.2s; }
.fade-in.delay-2 { transition-delay: 0.4s; }
.fade-in.delay-3 { transition-delay: 0.6s; }
.fade-in.delay-4 { transition-delay: 0.8s; }

/* ── Responsive ── */
@media (max-width: 640px) {
    .page, .page-scrollable {
        padding: 1.5rem 1.2rem;
    }

    .section-title {
        font-size: 1.25rem;
    }

    .body-text {
        font-size: 0.9rem;
        line-height: 1.9;
    }

    .stat-card .stat-num {
        font-size: 1.5rem;
    }

    .polaroid-grid {
        gap: 0.75rem;
    }

    .chart-pair {
        grid-template-columns: 1fr;
    }

    /* pie-row always stays side-by-side */

    .kpi-grid {
        gap: 0.5rem;
    }

    .emoji-item img {
        width: 52px;
        height: 52px;
    }
}

@media (min-width: 768px) {
    .page, .page-scrollable {
        padding: 3rem 2rem;
    }

    .body-text {
        font-size: 1.05rem;
    }
}