/**
 * Marketing Home Page - PREMIUM ENHANCEMENTS
 * 懒人直播营销首页 - Premium 增强样式（叠加在V2之上）
 *
 * 此文件仅包含Premium增强特性，不重复基础样式
 * 基础样式在 marketing-home-v2.css 中定义
 *
 * Premium Features:
 * - 7层阴影系统
 * - 5点网格渐变背景
 * - 增强动画效果
 * - 3D卡片倾斜
 * - 光标跟随效果
 *
 * Version: 3.0.0 (Premium Overlay)
 */

/* ============================
   1. Premium Shadow System (7-Layer)
   ============================ */
:root {
    /* 7层阴影变量 */
    --shadow-layer-1: 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-layer-2: 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-layer-3: 0 4px 8px rgba(0, 0, 0, 0.06);
    --shadow-layer-4: 0 8px 16px rgba(0, 0, 0, 0.08);
    --shadow-layer-5: 0 16px 32px rgba(0, 0, 0, 0.1);
    --shadow-layer-6: 0 32px 64px rgba(0, 0, 0, 0.12);
    --shadow-layer-7-primary: 0 0 80px rgba(102, 126, 234, 0.15);

    /* 组合Premium阴影 */
    --shadow-premium:
        var(--shadow-layer-1),
        var(--shadow-layer-2),
        var(--shadow-layer-3),
        var(--shadow-layer-4),
        var(--shadow-layer-5),
        var(--shadow-layer-6),
        var(--shadow-layer-7-primary);

    /* Premium缓动函数 */
    --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================
   2. Hero Section - 5-Point Mesh Gradient
   ============================ */
.hero-section {
    /* 覆盖V2的简单渐变，使用5点网格渐变 */
    background:
        radial-gradient(circle at 15% 25%, rgba(102, 126, 234, 0.18) 0%, transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(6, 182, 212, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.12) 0%, transparent 35%),
        radial-gradient(circle at 75% 30%, rgba(245, 158, 11, 0.14) 0%, transparent 45%),
        radial-gradient(circle at 30% 80%, rgba(236, 72, 153, 0.13) 0%, transparent 38%),
        linear-gradient(165deg, #1e2642 0%, #252d4a 50%, #2d3556 100%) !important;
    animation: meshShift 30s ease-in-out infinite alternate;
}

@keyframes meshShift {
    0% {
        background-position: 0% 0%, 100% 100%, 50% 50%, 75% 30%, 30% 80%, center;
    }
    50% {
        background-position: 10% 10%, 90% 90%, 60% 40%, 80% 25%, 25% 85%, center;
    }
    100% {
        background-position: 5% 15%, 95% 85%, 55% 45%, 70% 35%, 35% 75%, center;
    }
}

/* 增强Hero标题文字阴影 */
.hero-title {
    text-shadow:
        0 2px 20px rgba(102, 126, 234, 0.5),
        0 0 60px rgba(6, 182, 212, 0.25),
        0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* 彩虹渐变下划线（增强） */
.hero-title::after {
    animation: rainbowShift 8s linear infinite;
}

@keyframes rainbowShift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* ============================
   3. Feature Cards - Premium 7-Layer Shadow & 3D Tilt
   ============================ */
.feature-card {
    /* 应用Premium 7层阴影 */
    box-shadow: var(--shadow-premium) !important;
    transition: all 0.5s var(--ease-premium) !important;
    transform-style: preserve-3d;
}

/* Premium Hover - 3D倾斜 + 增强阴影 */
.feature-card:hover {
    transform: translateY(-16px) rotateX(2deg) scale(1.02) !important;
    box-shadow:
        var(--shadow-layer-1),
        var(--shadow-layer-2),
        var(--shadow-layer-3),
        var(--shadow-layer-4),
        var(--shadow-layer-5),
        0 48px 96px rgba(0, 0, 0, 0.18),
        0 0 120px rgba(102, 126, 234, 0.25) !important;
}

/* 增强图标Hover效果 */
.feature-card:hover .feature-icon {
    transform: translateY(-8px) scale(1.1) rotateY(5deg);
}

/* ============================
   4. Capability Diagrams - Premium 3D
   ============================ */
.capability-diagram {
    box-shadow: var(--shadow-premium);
    transition: all 0.6s var(--ease-premium);
    transform: perspective(1000px) rotateY(0deg);
}

.capability-diagram:hover {
    transform: perspective(1000px) rotateY(-3deg) scale(1.03);
    box-shadow:
        var(--shadow-layer-1),
        var(--shadow-layer-2),
        var(--shadow-layer-3),
        var(--shadow-layer-4),
        var(--shadow-layer-5),
        0 48px 96px rgba(0, 0, 0, 0.2),
        0 0 100px rgba(102, 126, 234, 0.3);
}

/* ============================
   5. Scroll Indicator - Enhanced Glow
   ============================ */
.scroll-indicator {
    box-shadow:
        0 0 0 8px rgba(102, 126, 234, 0.12),
        0 0 0 16px rgba(102, 126, 234, 0.06),
        0 0 0 24px rgba(102, 126, 234, 0.03),
        0 8px 32px rgba(102, 126, 234, 0.25) !important;
    transition: all 0.5s var(--ease-premium) !important;
}

.scroll-indicator:hover {
    box-shadow:
        0 0 0 12px rgba(102, 126, 234, 0.2),
        0 0 0 24px rgba(102, 126, 234, 0.12),
        0 0 0 36px rgba(102, 126, 234, 0.06),
        0 12px 48px rgba(102, 126, 234, 0.5) !important;
    transform: translateY(6px) scale(1.05) !important;
}

/* ============================
   6. Button - Ripple Effect
   ============================ */
.btn-ghost {
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--ease-premium) !important;
}

/* 涟漪背景层 */
.btn-ghost::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(102, 126, 234, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s var(--ease-premium), height 0.6s var(--ease-premium);
    z-index: -1;
}

.btn-ghost:hover::before {
    width: 400px;
    height: 400px;
}

/* ============================
   7. Scenario Cards - Enhanced Shadow
   ============================ */
.scenario-card {
    box-shadow: var(--shadow-premium);
    transition: all 0.5s var(--ease-premium) !important;
    transform-style: preserve-3d;
}

.scenario-card:hover {
    transform: translateY(-12px) rotateX(2deg) !important;
    box-shadow:
        var(--shadow-layer-1),
        var(--shadow-layer-2),
        var(--shadow-layer-3),
        var(--shadow-layer-4),
        var(--shadow-layer-5),
        0 40px 80px rgba(0, 0, 0, 0.16),
        0 0 100px rgba(6, 182, 212, 0.2) !important;
}

/* ============================
   8. Navigation - Enhanced on Scroll
   ============================ */
.marketing-nav.scrolled {
    box-shadow: var(--shadow-premium) !important;
}

/* ============================
   9. Animations - Scroll Triggered (JS控制)
   ============================ */
.feature-card.visible,
.capability-item.visible,
.scenario-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================
   10. Cursor Spotlight (JS动态创建)
   ============================ */
.cursor-spotlight {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.15) 0%, transparent 70%);
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* ============================
   11. Parallax Decorations (JS动态创建)
   ============================ */
.parallax-decoration {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    z-index: 0;
}

/* ============================
   12. Performance Optimizations
   ============================ */
/* GPU加速 */
.feature-card,
.capability-diagram,
.scenario-card,
.btn-ghost,
.scroll-indicator {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ============================
   13. Section Background Decorations
   ============================ */

/* Capability Section - Flowing Curves */
#capabilities.section-container {
    position: relative;
    background-image: url('/static/images/diagrams/capability-curves-bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Architecture Section - Connection Lines */
#architecture.section-container {
    position: relative;
    background-image: url('/static/images/diagrams/architecture-connection-bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Data Security Section - Dashboard Monitor */
#data-security.section-container {
    position: relative;
    background-image: url('/static/images/diagrams/dashboard-monitor-bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Scenarios Section - Use Case Patterns */
#scenarios.section-container {
    position: relative;
    background-image: url('/static/images/diagrams/scenario-pattern-bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* FAQ Section - Chat Bubbles */
#qa.section-container {
    position: relative;
    background-image: url('/static/images/diagrams/faq-bubbles-bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Contact Section - Email Communication */
#contact.section-container {
    position: relative;
    background-image: url('/static/images/diagrams/contact-email-bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 确保内容在背景之上 */
.section-container > * {
    position: relative;
    z-index: 10;
}

/* ============================
   14. Responsive - Mobile Optimizations
   ============================ */
@media (max-width: 767px) {
    /* 移动端简化阴影系统（性能优化） */
    .feature-card,
    .scenario-card {
        box-shadow:
            var(--shadow-layer-2),
            var(--shadow-layer-4),
            var(--shadow-layer-7-primary) !important;
    }

    /* 禁用3D效果 */
    .feature-card:hover,
    .scenario-card:hover {
        transform: translateY(-8px) !important;
    }

    /* 移动端禁用背景图（性能优化） */
    .section-container {
        background-image: none !important;
    }
}

/* ============================
   14. Scroll Animation - Visible State
   ============================ */
.feature-card.visible,
.capability-item.visible,
.scenario-card.visible,
.dashboard-section.visible,
.faq-item.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ============================
   15. Footer ICP Styling
   ============================ */
.footer-icp {
    margin-top: 12px;
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-align: center;
}

.footer-icp .footer-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 200ms ease;
}

.footer-icp .footer-link:hover {
    color: var(--text-secondary);
}

/* ============================
   16. Accessibility - Reduced Motion
   ============================ */
@media (prefers-reduced-motion: reduce) {
    .hero-section {
        animation: none !important;
        background: linear-gradient(165deg, #1e2642 0%, #252d4a 50%, #2d3556 100%) !important;
    }

    .hero-title::after {
        animation: none !important;
    }

    .feature-card,
    .capability-diagram,
    .scenario-card {
        transition-duration: 0.01ms !important;
    }
}