/* =====================================================
   基础样式 (Base)
   
   全局重置、基础排版、容器系统、Section 节奏、
   页面入场/转场、减少动效偏好
   ===================================================== */

/* ===== 全局重置 ===== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== 基础排版 ===== */
body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--color-text-primary);
    background: var(--color-bg-main);
    min-height: 100vh;
    transition: background 0.3s ease, color 0.3s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
}

/* 品牌标题字体 */
.brand-title,
.hero-title,
.page-title,
.guide-title,
.story-header-title,
.fruit-title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* 装饰性文字 */
.handwritten,
.signature-text {
    font-family: var(--font-display);
    font-weight: 500;
}

/* ===== 内容容器系统 ===== */
.container {
    max-width: var(--content-wide);
    margin: 0 auto;
    padding-inline: 20px;
}

.container--narrow {
    max-width: var(--content-narrow);
    margin: 0 auto;
    padding-inline: 20px;
}

.container--default {
    max-width: var(--content-default);
    margin: 0 auto;
    padding-inline: 20px;
}

.container--wide {
    max-width: var(--content-wide);
    margin: 0 auto;
    padding-inline: 20px;
}

/* ===== Section 间距节奏 ===== */
.section {
    padding-block: clamp(60px, 8vw, var(--section-gap-md));
    padding-inline: 20px;
}

.section--compact {
    padding-block: clamp(48px, 6vw, var(--section-gap-sm));
    padding-inline: 20px;
}

.section--loose {
    padding-block: clamp(80px, 10vw, var(--section-gap-lg));
    padding-inline: 20px;
}

.section--page-header {
    padding-top: clamp(100px, 12vw, 160px);
    padding-bottom: clamp(40px, 5vw, 80px);
    padding-inline: 20px;
}

/* ===== 主内容区域 ===== */
.main-content {
    margin-top: 0;
    min-height: calc(100vh - 140px);
}

/* ===== 页面淡入 ===== */
.page-fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 页面转场：使用 animations.css 中的 .orange-roll-transition */

/* ===== 尊重用户动画偏好 ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .loading-orange,
    .skeleton {
        animation: none !important;
    }
}

/* 低性能设备降级 */
.low-performance .juice-splash,
.low-performance .leaf-falling,
.low-performance .sunshine-particles {
    display: none !important;
}