/* =========================================================
   gsap-effects.css — 全站 GSAP 动效共享样式
   由 index.html / competitor.html 内联 GSAP 样式抽取合并
   使用方式：<link rel="stylesheet" href="/css/gsap-effects.css?v=20260731">
   ========================================================= */

/* ========== 模块 1: Hero 三卡片（首页 hero-visual） ========== */
.hero-gsap .hero-card-item {
    position: relative;
    overflow: hidden;
    will-change: transform;
    transform-style: preserve-3d;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
/* 渐变描边（hover 显现） */
.hero-gsap .hero-card-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(167,139,250,0.55), rgba(244,114,182,0.25) 45%, transparent 70%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.hero-gsap .hero-card-item:hover::before { opacity: 1; }
/* 底部发光渐变线 */
.hero-gsap .hero-card-item::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent, #a78bfa), transparent);
    opacity: 0;
    transform: scaleX(0.3);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}
.hero-gsap .hero-card-item:hover::after { opacity: 0.8; transform: scaleX(1); }
/* 跟随鼠标光晕 */
.hero-gsap .hero-card-glow {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167,139,250,0.14), rgba(244,114,182,0.06) 45%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}
.hero-gsap .hero-card-item:hover .hero-card-glow { opacity: 1; }
.hero-gsap .hero-card-item .hci-icon,
.hero-gsap .hero-card-item .hci-content,
.hero-gsap .hero-card-item .hci-arrow { position: relative; z-index: 1; }
/* 图标光晕 */
.hero-gsap .hci-icon { box-shadow: 0 0 0 rgba(0,0,0,0); }
.hero-gsap .hero-card-item:hover .hci-icon {
    box-shadow: 0 4px 16px rgba(167,139,250,0.25);
}
/* hover 卡片投影增强 */
.hero-gsap .hero-card-item:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,0.14), 0 0 0 1px rgba(167,139,250,0.12);
}
/* 移动端保持简单 */
@media (max-width: 767px) {
    .hero-gsap .hero-card-item::before,
    .hero-gsap .hero-card-item::after { display: none; }
}

/* ========== 模块 2: 文章卡片（首页近期文章 + 学习路径） ========== */
.cards-gsap .article-card,
.cards-gsap .track-card {
    position: relative;
    overflow: hidden;
    will-change: transform;
    cursor: pointer;
}
/* 顶部扫描光带（hover 时从左到右扫过） */
.cards-gsap .article-card::before,
.cards-gsap .track-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(167,139,250,0.08), rgba(244,114,182,0.06), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}
.cards-gsap .article-card:hover::before,
.cards-gsap .track-card:hover::before {
    animation: cardShine 0.9s ease forwards;
    opacity: 1;
}
@keyframes cardShine {
    0%   { left: -80%; }
    100% { left: 130%; }
}
/* 底部渐变进度线（hover 从左侧伸展） */
.cards-gsap .article-card::after,
.cards-gsap .track-card::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--accent, #a78bfa), var(--accent2, #f472b6));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 2;
}
.cards-gsap .article-card:hover::after,
.cards-gsap .track-card:hover::after {
    transform: scaleX(1);
}
/* 标题 hover 态 */
.cards-gsap .article-card h3,
.cards-gsap .track-card h3 {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}
.cards-gsap .article-card:hover h3,
.cards-gsap .track-card:hover h3 {
    transform: translateX(6px);
    color: var(--accent, #a78bfa);
}
/* 阅读更多箭头（JS 注入） */
.cards-gsap .ac-more {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 0.75rem;
    color: var(--accent, #a78bfa);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 3;
    pointer-events: none;
}
.cards-gsap .article-card:hover .ac-more {
    opacity: 1;
    transform: translateX(0);
}
/* 分类标签 hover 弹出 */
.cards-gsap .ac-cat {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, color 0.3s ease;
}
.cards-gsap .article-card:hover .ac-cat {
    transform: scale(1.08);
}
/* 点击涟漪 */
.cards-gsap .card-ripple {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167,139,250,0.35), transparent 70%);
    transform: scale(0);
    pointer-events: none;
    z-index: 2;
}
/* 卡片 hover 投影 */
.cards-gsap .article-card:hover,
.cards-gsap .track-card:hover {
    box-shadow: 0 10px 28px rgba(0,0,0,0.12), 0 0 0 1px rgba(167,139,250,0.08);
}
@media (max-width: 767px) {
    .cards-gsap .article-card::before,
    .cards-gsap .track-card::before,
    .cards-gsap .article-card::after,
    .cards-gsap .track-card::after { display: none; }
}

/* ========== 模块 3: 导航栏（全站 header） ========== */
.nav-gsap .header { will-change: transform; }
/* 菜单项箭头默认过渡 */
.nav-gsap .nav-dropdown-trigger i.fa-chevron-down {
    transition: color 0.25s ease;
}
/* 下拉菜单基础（GSAP 控制动画，避免闪屏） */
.nav-gsap .nav-dropdown-menu {
    transform-origin: top center;
}
/* 图标按钮 hover 光晕 */
.nav-gsap .header-actions .icon-btn {
    position: relative;
    overflow: hidden;
}
.nav-gsap .header-actions .icon-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at center, rgba(167,139,250,0.18), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.nav-gsap .header-actions .icon-btn:hover::after { opacity: 1; }

/* ========== 模块 4: 竞品大屏（competitor.html） ========== */
.dash-gsap .chip { cursor: default; will-change: transform; }
.dash-gsap .topmove { will-change: transform; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.dash-gsap .topmove:hover {
    border-color: var(--coda);
    box-shadow: 0 6px 20px rgba(124,92,255,0.12);
}
.dash-gsap .llm-chart-block { will-change: transform; }
.dash-gsap .share-btn,
.dash-gsap .top-btn { will-change: transform; transition: box-shadow 0.3s ease; }
/* 表格行 hover 高亮（动态渲染行） */
.dash-gsap .tbl-row { transition: background 0.25s ease; }
.dash-gsap .tbl-row:hover { background: rgba(124,92,255,0.06); }
/* 章节标题装饰 */
.dash-gsap .sec-title .bar { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
    .dash-gsap .chip, .dash-gsap .topmove { transition: none; }
}

/* ========== 模块 5: 文章列表页卡片（articles.html） ========== */
.list-gsap .article-card {
    position: relative;
    overflow: hidden;
    will-change: transform;
}
/* 底部渐变进度线（hover 从左侧伸展） */
.list-gsap .article-card::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--accent, #a78bfa), var(--accent2, #f472b6));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 2;
}
.list-gsap .article-card:hover::after { transform: scaleX(1); }
/* hover 投影 */
.list-gsap .article-card:hover {
    box-shadow: 0 10px 28px rgba(0,0,0,0.12), 0 0 0 1px rgba(167,139,250,0.08);
}

/* ========== 模块 6: 文章详情页（article.html） ========== */
.detail-gsap #articleBody { will-change: transform; }
.detail-gsap .ad-sidebar > * { will-change: transform; }

/* ========== 模块 7: 简历匹配页（resume-match.html） ========== */
.resume-gsap .step-line { transform-origin: left center; will-change: transform; }
.resume-gsap .jd-section,
.resume-gsap .section-label,
.resume-gsap #resultHero { will-change: transform; }

/* ========== 模块 8: 每日一练（daily-practice.html） ========== */
.quiz-gsap #pageHome .card { will-change: transform; }
.quiz-gsap #qzOpts > * { will-change: transform; }
.quiz-gsap #qNavDots > * { will-change: transform; }

/* ========== 模块 9: AI 日报（daily-ai.html） ========== */
.dailyai-gsap .card { will-change: transform; }
.dailyai-gsap .section-title { will-change: transform; }

/* ========== 模块 10: 学习计划（study-plan.html） ========== */
.plan-gsap .plan-section,
.plan-gsap .phase-week,
.plan-gsap .resource-item,
.plan-gsap .plan-row { will-change: transform; }

/* ========== 模块 11: PDF ⇄ DOC 转换工具（pdf-to-doc） ========== */
.pdftool-gsap .trade-step,
.pdftool-gsap .ts-num,
.pdftool-gsap .info-item,
.pdftool-gsap .opt-item { will-change: transform; }

/* ========== 模块 12: 星梦助手（star-dream） ========== */
.stardream-gsap .panel,
.stardream-gsap .title-line,
.stardream-gsap .form-group,
.stardream-gsap .dream-tag,
.stardream-gsap [class*=result] { will-change: transform; }

/* =========================================================
   React Bits 移植效果（模块 13-20）
   使用：给元素加对应 class 即生效
   ========================================================= */

/* ---------- Aurora 极光背景（.aurora-bg）已于 2026-08-09 移除：首页 Hero 背景特效清理 ---------- */

/* ---------- Grid Scan 网格扫描（纯 CSS，.grid-scan） ---------- */
.grid-scan { position: relative; overflow: hidden; }
.grid-scan::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(124,92,255,0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124,92,255,0.09) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 25%, transparent 72%);
    mask-image: radial-gradient(ellipse at 50% 30%, black 25%, transparent 72%);
    z-index: 0;
}
.grid-scan::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 90px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(124,92,255,0.16), transparent);
    animation: grid-scan-move 5s linear infinite;
    z-index: 0;
}
@keyframes grid-scan-move {
    0%   { top: -12%; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { top: 112%; opacity: 0; }
}
.grid-scan > * { position: relative; z-index: 1; }

/* ---------- Gradient Text 渐变文字（纯 CSS，.gradient-text） ---------- */
.gradient-text {
    background: linear-gradient(90deg, #a78bfa, #f472b6, #38bdf8, #a78bfa);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    animation: gradient-text-flow 6s linear infinite;
}
@keyframes gradient-text-flow {
    0%   { background-position: 0% 0; }
    100% { background-position: 300% 0; }
}

/* ---------- Scrambled Text 乱码解密（.scrambled-text） ---------- */
.scrambled-text {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
}

/* ---------- Magnet 磁吸按钮（.magnet-btn） ---------- */
.magnet-btn { will-change: transform; display: inline-block; }

/* ---------- Click Spark 点击火花（全局，span.click-spark） ---------- */
.click-spark {
    position: fixed;
    width: 5px; height: 5px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    animation: click-spark-burst 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes click-spark-burst {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.2); opacity: 0; }
}

/* ---------- Spotlight Card 聚光卡（.spotlight-card） ---------- */
.spotlight-card { position: relative; overflow: hidden; }
.spotlight-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(220px circle at var(--sx, -200px) var(--sy, -200px), rgba(167,139,250,0.16), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}
.spotlight-card:hover::before { opacity: 1; }

/* ---------- Falling Text 掉落文字（.falling-text） ---------- */
.falling-text { display: inline-block; }
.falling-text span { will-change: transform, opacity; }

/* ========== 模块 21: 简历报告页增强 ========== */
#step3 .chart-card {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
}
#step3 .chart-card:hover {
    box-shadow: 0 12px 32px rgba(167, 139, 250, 0.18), 0 0 0 1px rgba(167,139,250,0.15);
    transform: translateY(-3px);
}
#step3 .section-label {
    position: relative;
    padding-left: 14px;
}
#step3 .section-label::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 16px;
    border-radius: 2px;
    background: linear-gradient(180deg, #a78bfa, #f472b6);
}
#dimCards .dim-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    cursor: default;
}
#dimCards .dim-card:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 10px 24px rgba(167, 139, 250, 0.2);
    border-color: rgba(167, 139, 250, 0.5) !important;
}
#suggestions .sugg-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#suggestions .sugg-item:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
#hardReqWrap .hard-req-chip {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#hardReqWrap .hard-req-chip:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
#step3 .result-hero {
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(167,139,250,0.08), rgba(56,189,248,0.06));
    border: 1px solid rgba(167, 139, 250, 0.2);
    margin-bottom: 18px;
}
.history-item:hover {
    border-color: rgba(167, 139, 250, 0.5) !important;
    transform: translateY(-1px);
}
.history-item { transition: transform 0.2s ease, border-color 0.2s ease; }


/* =========================================================
   模块 18: AI 课程文章增强（article.html 正文交互）
   配套 JS：gsap-effects.js 模块 18（initArticleEnhance）
   ========================================================= */
/* 阅读进度条（顶部固定细条） */
.enhanced-gsap .reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 100000;
    pointer-events: none;
}
.enhanced-gsap .reading-progress-bar {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #a78bfa, #f472b6, #38bdf8);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
    box-shadow: 0 0 8px rgba(167, 139, 250, 0.6);
}

/* 返回顶部按钮 */
.enhanced-gsap .back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(167, 139, 250, 0.35);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--accent, #a78bfa);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    z-index: 100000;
}
.enhanced-gsap .back-to-top.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.enhanced-gsap .back-to-top:hover {
    background: rgba(167, 139, 250, 0.18);
    box-shadow: 0 8px 24px rgba(167, 139, 250, 0.35);
}

/* 代码块：入场边框高亮（JS 进入视口时加 code-entered 类） */
.enhanced-gsap .article-content pre {
    border-left: 3px solid transparent;
    transition: border-color 0.4s ease;
    will-change: transform, opacity;
}
.enhanced-gsap .article-content pre.code-entered {
    border-left-color: var(--accent, #a78bfa);
    background-image: linear-gradient(90deg, rgba(167, 139, 250, 0.07), transparent 40%);
}

/* 标题底部渐变线（JS 注入 span.hd-line） */
.enhanced-gsap .article-content h2,
.enhanced-gsap .article-content h3 {
    position: relative;
}
.enhanced-gsap .hd-line {
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent, #a78bfa), var(--accent2, #f472b6));
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
    pointer-events: none;
}

/* 图片视差 */
.enhanced-gsap .article-content img {
    will-change: transform;
    transform-origin: center center;
}

@media (prefers-reduced-motion: reduce) {
    .enhanced-gsap .article-content pre,
    .enhanced-gsap .article-content img {
        transition: none;
    }
    .enhanced-gsap .back-to-top {
        transition: none;
    }
}