/* ============================================================
   云绘科技 · Apple Design 增强层
   说明：本文件在 style.css 之后加载，对现有设计做"增量精修"，
   不改变结构/语义，仅提升质感与动效（材质、光学排版、弹簧缓动、
   按压反馈、滚动揭示、深度阴影）。所有动画均尊重 prefers-reduced-motion。
   ============================================================ */

:root {
    /* Apple 风格缓动曲线 */
    --apple-ease-out: cubic-bezier(0.32, 0.72, 0, 1);      /* 入场/出场，干脆顺滑 */
    --apple-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);  /* 轻微回弹，仅用于物理性交互 */
    --apple-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);   /* 通用过渡 */

    /* 更克制的圆角（Apple 偏好更大的统一圆角） */
    --radius-card: 20px;
    --radius-tile: 28px;

    /* 更通透的玻璃材质权重 */
    --glass-blur-strong: blur(30px) saturate(180%);
}

/* ---------- 基础排版：光学尺寸 + 字距优化 ---------- */
body {
    font-optical-sizing: auto;
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
}

/* 标题统一收紧字距、优化断行（Apple 排版纪律） */
h1, h2, h3, .hero-title, .section-title, .page-header h1,
.about-text h2, .cta-section h3, .tech-section h2, .case-title,
.advantage-title, .service-title, .stat-number {
    letter-spacing: -0.02em;
    text-wrap: balance;
}

/* 选区高亮用品牌色 */
::selection {
    background: rgba(0, 180, 216, 0.3);
    color: #fff;
}

/* 锚点滚动避开固定导航 */
html {
    scroll-padding-top: 90px;
    -webkit-text-size-adjust: 100%;
}

/* ============================================================
   导航栏：Apple 工具栏材质（始终半透明 + 滚动后更实）
   ============================================================ */
.navbar {
    background: rgba(11, 20, 38, 0.55);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06); /* 顶部高光边，像光打到材质上 */
    transition: background 0.5s var(--apple-ease-soft),
                padding 0.4s var(--apple-ease-soft),
                box-shadow 0.5s var(--apple-ease-soft),
                border-color 0.5s var(--apple-ease-soft);
}

/* 滚动后"材料化"：更实、更强模糊、更淡阴影 */
.navbar.scrolled {
    background: rgba(11, 20, 38, 0.72);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border-bottom: 1px solid rgba(0, 180, 216, 0.14);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04),
                0 8px 40px rgba(0, 0, 0, 0.35);
}

/* Logo 按压反馈 */
.navbar-brand:active .logo {
    transform: scale(0.94);
    transition: transform 0.12s var(--apple-ease-out);
}

/* 导航链接：悬停更柔和，激活态微放大 */
.navbar-menu a {
    transition: color 0.3s var(--apple-ease-soft), transform 0.3s var(--apple-ease-out);
}
.navbar-menu a:hover {
    transform: translateY(-1px);
}
.navbar-menu a.active {
    color: #fff;
}

/* CTA 按钮：按压反馈 */
.navbar-cta {
    border-radius: 980px; /* Apple 胶囊形 */
    transition: transform 0.25s var(--apple-ease-spring),
                box-shadow 0.3s var(--apple-ease-soft),
                background 0.3s var(--apple-ease-soft);
}
.navbar-cta:hover {
    transform: translateY(-2px) scale(1.02);
}
.navbar-cta:active {
    transform: scale(0.96);
    transition: transform 0.1s var(--apple-ease-out);
}

/* ============================================================
   按钮：弹簧式按压反馈（Apple 核心：按下即响应）
   ============================================================ */
.btn-primary,
.btn-secondary {
    border-radius: 14px;
    transition: transform 0.28s var(--apple-ease-spring),
                box-shadow 0.35s var(--apple-ease-soft),
                background 0.3s var(--apple-ease-soft),
                border-color 0.3s var(--apple-ease-soft);
}
.btn-primary:hover {
    transform: translateY(-6px) scale(1.045);
    box-shadow: 0 18px 44px rgba(0, 180, 216, 0.35);
}
.btn-primary:active {
    transform: scale(0.955);
    transition: transform 0.1s var(--apple-ease-out);
}
.btn-secondary:hover {
    transform: translateY(-4px) scale(1.02);
}
.btn-secondary:active {
    transform: scale(0.965);
    transition: transform 0.1s var(--apple-ease-out);
}

/* ============================================================
   Hero：更大呼吸感 + 光学标题 + 微光晕
   ============================================================ */
.hero {
    padding-top: 9rem;
}
.hero-content {
    padding: 0 0.5rem;
}
.hero-title {
    font-size: clamp(3rem, 6.5vw, 5rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 800;
    text-wrap: balance;
}
.hero-subtitle {
    font-size: 1.25rem;
    line-height: 1.75;
    max-width: 640px;
    color: rgba(241, 245, 249, 0.78);
}
/* Hero 区域柔光晕，增强纵深 */
.hero::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    width: 70vw;
    height: 70vw;
    max-width: 900px;
    max-height: 900px;
    transform: translateX(-50%);
    background: radial-gradient(circle,
        rgba(0, 180, 216, 0.18) 0%,
        rgba(0, 229, 160, 0.08) 35%,
        transparent 70%);
    filter: blur(20px);
    z-index: 0;
    pointer-events: none;
}
.hero-badge {
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    padding: 0.5rem 1.1rem 0.5rem 0.9rem;
}

/* 统计数字：更克制、字距收紧 */
.stat-number {
    letter-spacing: -0.03em;
    font-weight: 700;
}
.hero-stats {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Hero 背景加高，供滚动视差使用（避免位移露白） */
.hero-bg {
    height: 125%;
    top: -12%;
    will-change: transform;
}

/* Hero 载入入场：逐元素上浮（Apple 启动感） */
@keyframes heroRise {
    from { opacity: 0; transform: translateY(48px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-content > * {
    animation: heroRise 0.95s var(--apple-ease-out) both;
}
.hero-content > *:nth-child(1) { animation-delay: 0.05s; }
.hero-content > *:nth-child(2) { animation-delay: 0.16s; }
.hero-content > *:nth-child(3) { animation-delay: 0.27s; }
.hero-content > *:nth-child(4) { animation-delay: 0.38s; }
.hero-content > *:nth-child(5) { animation-delay: 0.49s; }

/* ============================================================
   卡片：弹簧悬浮 + 更厚材质 + 按压反馈
   ============================================================ */
.glass-card {
    border-radius: var(--radius-card);
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(15, 29, 53, 0.55);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    transition: transform 0.45s var(--apple-ease-spring),
                box-shadow 0.45s var(--apple-ease-soft),
                border-color 0.45s var(--apple-ease-soft),
                background 0.45s var(--apple-ease-soft);
}
.glass-card:hover {
    transform: translateY(-18px) scale(1.04);
    border-color: rgba(0, 180, 216, 0.55);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6),
                0 0 56px rgba(0, 180, 216, 0.22);
    background: rgba(15, 29, 53, 0.78);
}
/* 可点击卡片的按压反馈 */
a .glass-card:active {
    transform: scale(0.975);
    transition: transform 0.12s var(--apple-ease-out);
}

.service-card,
.advantage-card,
.case-card,
.flow-step,
.format-card,
.equipment-card {
    border-radius: var(--radius-card);
}

.service-icon,
.advantage-icon {
    border-radius: 18px;
    transition: transform 0.4s var(--apple-ease-spring),
                box-shadow 0.4s var(--apple-ease-soft),
                background 0.4s var(--apple-ease-soft),
                border-color 0.4s var(--apple-ease-soft);
}
.service-card:hover .service-icon,
.advantage-card:hover .advantage-icon {
    transform: scale(1.18) translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 180, 216, 0.3);
}

/* ============================================================
   CTA / 容器区块：更大圆角、更柔和
   ============================================================ */
.cta-section {
    border-radius: var(--radius-tile);
    background: linear-gradient(135deg, rgba(0, 180, 216, 0.1), rgba(0, 229, 160, 0.05));
    border: 1px solid rgba(0, 180, 216, 0.18);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.section-header {
    margin-bottom: 4.5rem;
}
.section-title {
    font-size: clamp(2.1rem, 4.2vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
}

/* 内页页头更通透 */
.page-header {
    background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.page-header h1 {
    letter-spacing: -0.03em;
    line-height: 1.1;
}

/* ============================================================
   滚动揭示动画（JS 添加 .in-view）
   Apple 风格：轻微上浮 + 渐显，错峰 stagger
   ============================================================ */
/* 仅当 JS 成功启用揭示时才隐藏，避免 JS 失效导致内容不可见 */
html.reveal-on .reveal {
    opacity: 0;
    transform: translateY(64px) scale(0.92);
    transition: opacity 0.85s var(--apple-ease-soft),
                transform 1s var(--apple-ease-out);
    will-change: opacity, transform;
}
html.reveal-on .reveal.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ============================================================
   减少动态效果：直接切换为无位移的淡入
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html.reveal-on .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: opacity 0.4s ease !important;
    }
    .glass-card:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .navbar-cta:hover,
    .service-card:hover .service-icon,
    .advantage-card:hover .advantage-icon {
        transform: none !important;
    }
    .btn-primary:active,
    .btn-secondary:active,
    .navbar-cta:active,
    .navbar-brand:active .logo,
    a .glass-card:active {
        transform: none !important;
    }
    html { scroll-behavior: auto; }
    .hero-content > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   桌面端：菜单项间距更舒展
   ============================================================ */
@media (min-width: 1025px) {
    .navbar-menu { gap: 2.25rem; }
}