/**
 * 星途 V5.0.0 - 简约亮眼主题
 * Vibrant Minimalism Theme
 * 核心理念: 90% 克制 + 10% 视觉爆发
 */

/* ============================================
   配色系统 - 和谐渐变色系
   ============================================ */

:root {
    /* 主色调 - 渐变色系（和谐但有差异）*/
    --color-indigo: #6366F1;      /* 靛蓝 240° - 主色调 */
    --color-cyan: #06B6D4;        /* 青色 190° - 副色调 */
    --color-purple: #8B5CF6;      /* 紫色 260° - 辅助色 */
    --color-pink: #EC4899;        /* 粉色 330° - 强调色（视觉爆发）*/
    
    /* 四象限独立色彩 */
    --accent-mbti: var(--color-indigo);
    --accent-ai: var(--color-cyan);
    --accent-bio: var(--color-purple);
    --accent-mgmt: var(--color-pink);
    
    /* 背景系统 */
    --bg-primary: #0a0e1a;
    --bg-secondary: #0d1220;
    --bg-elevated: #141824;
    --bg-purple-tint: #1a1432;    /* 紫调深色 */
    
    /* 透明色系统 */
    --alpha-10: rgba(255, 255, 255, 0.1);
    --alpha-5: rgba(255, 255, 255, 0.05);
    --alpha-3: rgba(255, 255, 255, 0.03);
    --alpha-2: rgba(255, 255, 255, 0.02);
}

/* ============================================
   Phase 1.1: Hero 动态渐变标题
   ============================================ */

.hero-title {
    /* 4色彩虹渐变 */
    background: linear-gradient(
        135deg,
        var(--color-indigo) 0%,
        var(--color-cyan) 30%,
        var(--color-purple) 60%,
        var(--color-pink) 100%
    );
    
    /* 渐变尺寸扩大用于动画 */
    background-size: 300% 300%;
    
    /* 文字渐变裁切 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    /* 缓慢流动动画 */
    animation: hero-gradient-flow 10s ease infinite;
}

@keyframes hero-gradient-flow {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* 副标题也添加微妙渐变 */
.hero-subtitle {
    background: linear-gradient(
        90deg,
        var(--color-indigo) 0%,
        var(--color-cyan) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: hero-gradient-flow 8s ease infinite;
}

/* ============================================
   Phase 1.2: Hero 动态光晕背景
   ============================================ */

.hero-banner {
    position: relative;
    overflow: hidden;
    
    /* 主背景渐变（紫调深色）*/
    background: linear-gradient(
        135deg,
        var(--bg-primary) 0%,
        var(--bg-purple-tint) 25%,
        var(--bg-secondary) 50%,
        var(--bg-purple-tint) 75%,
        var(--bg-primary) 100%
    );
    
    /* 网格叠加 */
    background-image: 
        linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
    background-size: 100% 100%, 50px 50px, 50px 50px;
}

/* 动态光晕效果 */
.hero-banner::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 50%;
    width: 1200px;
    height: 1200px;
    background: radial-gradient(
        circle,
        rgba(99, 102, 241, 0.15) 0%,
        rgba(6, 182, 212, 0.12) 30%,
        rgba(236, 72, 153, 0.10) 60%,
        transparent 80%
    );
    transform: translate(-50%, -50%);
    animation: hero-glow-pulse 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes hero-glow-pulse {
    0%, 100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
    }
}

/* 确保内容在光晕之上 */
.hero-content {
    position: relative;
    z-index: 1;
}

/* ============================================
   Phase 1.3: Hero CTA 渐变按钮
   ============================================ */

.hero-cta {
    position: relative;
    padding: 1rem 2.5rem;
    border-radius: 12px;
    border: none;
    
    /* 渐变背景 */
    background: linear-gradient(
        135deg,
        var(--color-indigo) 0%,
        var(--color-purple) 50%,
        var(--color-pink) 100%
    );
    background-size: 200% 200%;
    
    /* 文字 */
    color: white;
    font-weight: 600;
    font-size: 1.125rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    
    /* 发光阴影 */
    box-shadow: 
        0 4px 20px rgba(99, 102, 241, 0.4),
        0 8px 40px rgba(236, 72, 153, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    
    /* 动画 */
    animation: 
        cta-gradient-flow 3s ease infinite,
        cta-pulse 2s ease-in-out infinite;
    
    /* 过渡 */
    transition: all 0.3s ease;
    cursor: pointer;
}

.hero-cta:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 8px 30px rgba(99, 102, 241, 0.5),
        0 15px 60px rgba(236, 72, 153, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.hero-cta:active {
    transform: translateY(-1px) scale(1.02);
}

/* 渐变流动动画 */
@keyframes cta-gradient-flow {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* 脉冲动画 */
@keyframes cta-pulse {
    0%, 100% {
        box-shadow: 
            0 4px 20px rgba(99, 102, 241, 0.4),
            0 8px 40px rgba(236, 72, 153, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 
            0 4px 25px rgba(99, 102, 241, 0.6),
            0 8px 50px rgba(236, 72, 153, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
}

/* 外光环效果 */
.hero-cta::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: inherit;
    background-size: inherit;
    border-radius: 14px;
    filter: blur(20px);
    opacity: 0.6;
    z-index: -1;
    animation: cta-gradient-flow 3s ease infinite;
}

/* ============================================
   Phase 2.1: 四象限渐变背景
   ============================================ */

.quadrant {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
}

/* 渐变背景叠加层 */
.quadrant::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.7;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
}

/* MBTI - 靛蓝渐变 */
.quadrant-mbti::after {
    background: linear-gradient(
        135deg,
        rgba(99, 102, 241, 0.15) 0%,
        transparent 60%,
        rgba(99, 102, 241, 0.08) 100%
    );
}

.quadrant-mbti:hover::after {
    opacity: 1;
}

/* AI - 青色渐变 */
.quadrant-ai::after {
    background: linear-gradient(
        135deg,
        rgba(6, 182, 212, 0.15) 0%,
        transparent 60%,
        rgba(6, 182, 212, 0.08) 100%
    );
}

.quadrant-ai:hover::after {
    opacity: 1;
}

/* Bio - 紫色渐变 */
.quadrant-bio::after {
    background: linear-gradient(
        135deg,
        rgba(139, 92, 246, 0.15) 0%,
        transparent 60%,
        rgba(139, 92, 246, 0.08) 100%
    );
}

.quadrant-bio:hover::after {
    opacity: 1;
}

/* Mgmt - 粉色渐变（最亮眼）*/
.quadrant-mgmt::after {
    background: linear-gradient(
        135deg,
        rgba(236, 72, 153, 0.18) 0%,
        transparent 60%,
        rgba(236, 72, 153, 0.10) 100%
    );
    opacity: 0.9;  /* 初始就更亮 */
}

.quadrant-mgmt:hover::after {
    opacity: 1.2;
}

/* 确保内容在渐变之上 */
.quadrant-content {
    position: relative;
    z-index: 1;
}

/* ============================================
   Phase 2.2: 渐变边框卡片
   ============================================ */

.quadrant::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    opacity: 0.4;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
    
    /* Webkit 特有的蒙版 */
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* MBTI 渐变边框 */
.quadrant-mbti {
    --border-color: var(--color-indigo);
}

.quadrant-mbti::before {
    background: linear-gradient(
        135deg,
        var(--color-indigo) 0%,
        transparent 40%,
        transparent 60%,
        var(--color-indigo) 100%
    );
}

/* AI 渐变边框 */
.quadrant-ai {
    --border-color: var(--color-cyan);
}

.quadrant-ai::before {
    background: linear-gradient(
        135deg,
        var(--color-cyan) 0%,
        transparent 40%,
        transparent 60%,
        var(--color-cyan) 100%
    );
}

/* Bio 渐变边框 */
.quadrant-bio {
    --border-color: var(--color-purple);
}

.quadrant-bio::before {
    background: linear-gradient(
        135deg,
        var(--color-purple) 0%,
        transparent 40%,
        transparent 60%,
        var(--color-purple) 100%
    );
}

/* Mgmt 渐变边框 */
.quadrant-mgmt {
    --border-color: var(--color-pink);
}

.quadrant-mgmt::before {
    background: linear-gradient(
        135deg,
        var(--color-pink) 0%,
        transparent 40%,
        transparent 60%,
        var(--color-pink) 100%
    );
}

/* 悬停时边框更明显 + 流动效果 */
.quadrant:hover::before {
    opacity: 0.8;
    background-size: 200% 200%;
    animation: border-gradient-flow 3s ease infinite;
}

@keyframes border-gradient-flow {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* ============================================
   Phase 2.3: 图标渐变爆发效果
   ============================================ */

.quadrant-icon-svg {
    /* 渐变填充 */
    background: linear-gradient(
        135deg,
        var(--border-color) 0%,
        color-mix(in srgb, var(--border-color) 80%, white) 50%,
        var(--border-color) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    /* 微弱发光 */
    filter: drop-shadow(0 0 15px color-mix(in srgb, var(--border-color) 30%, transparent));
    
    /* 弹性过渡 */
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 悬停爆发效果 */
.quadrant:hover .quadrant-icon-svg {
    transform: scale(1.2) rotate(8deg);
    filter: 
        drop-shadow(0 0 30px var(--border-color))
        drop-shadow(0 0 60px color-mix(in srgb, var(--border-color) 60%, transparent))
        drop-shadow(0 0 90px color-mix(in srgb, var(--border-color) 40%, transparent));
}

/* 爆发光环 */
.quadrant-icon-wrapper {
    position: relative;
}

.quadrant-icon-wrapper::after {
    content: '';
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--border-color) 25%, transparent) 0%,
        transparent 70%
    );
    opacity: 0;
    transform: scale(0.7);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    z-index: -1;
}

.quadrant:hover .quadrant-icon-wrapper::after {
    opacity: 1;
    transform: scale(1.3);
}

/* ============================================
   Phase 2.4: 视觉焦点层级系统
   ============================================ */

/* 层级 1: 爆发（10%）- Hero CTA + Mgmt 象限 */
.visual-burst {
    /* 已在上面定义 */
}

/* 层级 2: 突出（30%）- Hero 标题 + MBTI 象限 */
.quadrant-mbti.available {
    /* 可用象限更突出 */
}

.quadrant-mbti.available .quadrant-icon-svg {
    filter: drop-shadow(0 0 20px color-mix(in srgb, var(--color-indigo) 40%, transparent));
}

.quadrant-mbti.available::before {
    opacity: 0.6;
}

.quadrant-mbti.available::after {
    opacity: 0.85;
}

/* 层级 3: 克制（60%）- 其他象限 */
.quadrant:not(.available) {
    opacity: 0.7;
}

.quadrant:not(.available) .quadrant-icon-svg {
    opacity: 0.6;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--border-color) 20%, transparent));
}

.quadrant:not(.available):hover {
    opacity: 0.85;
}

.quadrant:not(.available):hover .quadrant-icon-svg {
    opacity: 0.8;
}

/* ============================================
   响应式优化
   ============================================ */

@media (max-width: 768px) {
    .hero-banner::before {
        width: 800px;
        height: 800px;
    }
    
    .hero-cta {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }
    
    .quadrant-icon-wrapper::after {
        inset: -20px;
    }
}

@media (max-width: 480px) {
    .hero-banner::before {
        width: 600px;
        height: 600px;
    }
    
    .hero-cta {
        padding: 0.75rem 1.5rem;
        font-size: 0.9375rem;
    }
    
    .quadrant:hover .quadrant-icon-svg {
        transform: scale(1.15) rotate(6deg);
    }
}

/* ============================================
   减少动画偏好支持
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .hero-title,
    .hero-subtitle,
    .hero-cta,
    .hero-banner::before {
        animation: none;
    }
    
    .quadrant:hover::before {
        animation: none;
    }
    
    .quadrant-icon-svg,
    .quadrant-icon-wrapper::after {
        transition: none;
    }
}

/* ============================================
   打印样式
   ============================================ */

@media print {
    .hero-title,
    .hero-subtitle {
        -webkit-text-fill-color: #000;
        background: none;
        color: #000;
    }
    
    .hero-cta {
        background: #6366F1;
        box-shadow: none;
    }
    
    .quadrant::before,
    .quadrant::after,
    .quadrant-icon-wrapper::after {
        display: none;
    }
}