/* ==========================================================================
   创世蓝海 TRANDSEA - 首页专有样式（黑红集团风 V2）
   依赖 style.css 的黑红 tokens；承载首页 Hero / 粒子 / 轨道 / 跑马灯条等动效样式
   ========================================================================== */

/* ---------- Hero 首屏 ---------- */
.hero-v2 {
    position: relative; min-height: 100vh;
    display: flex; align-items: center;
    overflow: hidden;
    background:
        radial-gradient(1200px 700px at 78% -10%, rgba(227, 6, 19, .14), transparent 60%),
        radial-gradient(900px 600px at -10% 110%, rgba(227, 6, 19, .08), transparent 60%),
        linear-gradient(180deg, #0a0a0d 0%, #0d0d11 100%);
}
#particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hero-v2 .hero-glow-g { position: absolute; border-radius: 50%; filter: blur(90px); z-index: 1; pointer-events: none; opacity: .5; }
.hero-v2 .g1 { width: 520px; height: 520px; left: -140px; top: -120px; background: rgba(227, 6, 19, .22); animation: drift1 14s ease-in-out infinite alternate; }
.hero-v2 .g2 { width: 420px; height: 420px; right: -100px; bottom: -140px; background: rgba(143, 0, 10, .32); animation: drift2 18s ease-in-out infinite alternate; }
@keyframes drift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, 40px) scale(1.15); } }
@keyframes drift2 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-50px, -30px) scale(1.1); } }

.hero-v2 .hero-beams { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-v2 .hero-beams::before { content: ""; position: absolute; top: -20%; left: 18%; width: 1px; height: 140%; background: linear-gradient(180deg, transparent, rgba(227, 6, 19, .5), transparent); transform: rotate(24deg); animation: beam 9s linear infinite; }
.hero-v2 .hero-beams::after { content: ""; position: absolute; top: -20%; left: 56%; width: 1px; height: 140%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .22), transparent); transform: rotate(-18deg); animation: beam2 12s linear infinite; }
@keyframes beam { 0% { transform: translateY(-30%) rotate(24deg); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(30%) rotate(24deg); opacity: 0; } }
@keyframes beam2 { 0% { transform: translateY(30%) rotate(-18deg); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-30%) rotate(-18deg); opacity: 0; } }

.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; padding: 150px 0 130px; width: 100%; }
.hero-kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: 4px; color: var(--text2); text-transform: uppercase; margin-bottom: 28px; }
.hero-kicker i { width: 36px; height: 1px; background: var(--red-grad); display: inline-block; }
.hero-kicker b { color: var(--red-bright); font-weight: 600; }
.hero-title { font-weight: 800; line-height: 1.16; letter-spacing: 2px; font-size: clamp(42px, 6vw, 78px); margin-bottom: 26px; }
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span { display: inline-block; transform: translateY(110%); animation: lineUp 1s var(--ease) forwards; }
.hero-title .l2 > span { animation-delay: .18s; }
.hero-title .shimmer { background: var(--red-grad); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 4.5s linear infinite; }
@keyframes lineUp { to { transform: translateY(0); } }
@keyframes shimmer { 0% { background-position: 0% 50%; } 100% { background-position: -220% 50%; } }

.hero-rotator { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--text2); margin-bottom: 22px; letter-spacing: 1px; }
.hero-rotator .lab { color: var(--text3); flex: none; }
.rotator-track { position: relative; height: 34px; min-width: 220px; overflow: hidden; }
.rotator-track span { position: absolute; left: 0; top: 50%; transform: translateY(-50%) translateY(18px); opacity: 0; font-weight: 700; color: var(--text); font-size: 18px; letter-spacing: 2px; transition: all .55s var(--ease); white-space: nowrap; }
.rotator-track span.show { opacity: 1; transform: translateY(-50%) translateY(0); }
.rotator-track span::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: var(--red-grad); opacity: .8; }

.hero-sub { max-width: 560px; font-size: 16px; color: var(--text2); margin-bottom: 40px; line-height: 2; }
.hero-actions { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 56px; }
.play-ic { width: 30px; height: 30px; border-radius: 50%; background: var(--red); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; flex: none; }
.btn-ghost:hover .play-ic { background: var(--red-bright); }

.hero-stats { display: flex; gap: 0; border-top: 1px solid var(--line); padding-top: 26px; max-width: 620px; }
.hero-stats div { flex: 1; padding: 0 22px; border-left: 1px solid var(--line); }
.hero-stats div:first-child { padding-left: 0; border-left: none; }
.hero-stats b { display: block; font-size: 30px; font-weight: 800; color: var(--text); line-height: 1.2; }
.hero-stats b em { font-style: normal; background: var(--red-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-stats span { font-size: 12.5px; color: var(--text3); letter-spacing: 1px; }

/* Hero 右侧：创意轨道 */
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 520px; }
.orbit { position: relative; width: min(440px, 38vw); aspect-ratio: 1; }
.orbit-ring { position: absolute; border-radius: 50%; }
.orbit .r1 { inset: 0; border: 1px dashed rgba(255, 255, 255, .14); animation: spin 60s linear infinite; }
.orbit .r2 { inset: 8%; border: 1px solid rgba(227, 6, 19, .32); border-top-color: transparent; animation: spin 22s linear infinite; }
.orbit .r3 { inset: 16%; border: 1px dashed rgba(255, 255, 255, .08); animation: spinR 34s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinR { to { transform: rotate(-360deg); } }
.orbit-core { position: absolute; inset: 31%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #26262e, #0d0d11 70%); border: 1px solid var(--line-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 0 60px rgba(227, 6, 19, .22), inset 0 0 40px rgba(0, 0, 0, .6); }
.orbit-core .core-mark { font-family: var(--font-serif); font-size: 52px; font-weight: 700; background: var(--red-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.orbit-core small { font-size: 10px; letter-spacing: 5px; color: var(--text3); }
.orbit-node { position: absolute; width: 64px; height: 64px; border-radius: 50%; background: #17171d; border: 1px solid var(--line-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); z-index: 3; }
.orbit-node svg { width: 22px; height: 22px; stroke: var(--red-bright); }
.orbit-node span { font-size: 10px; color: var(--text2); letter-spacing: 1px; white-space: nowrap; }
.orbit-node.n1 { top: -4%; left: 50%; transform: translateX(-50%); }
.orbit-node.n2 { right: -3%; top: 44%; transform: translateY(-50%); }
.orbit-node.n3 { bottom: -4%; left: 50%; transform: translateX(-50%); }
.orbit-node.n4 { left: -3%; top: 44%; transform: translateY(-50%); }
.orbit-chip { position: absolute; z-index: 3; padding: 10px 18px; border-radius: 10px; background: rgba(20, 20, 26, .85); border: 1px solid var(--line-strong); backdrop-filter: blur(8px); font-size: 12.5px; color: var(--text2); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.orbit-chip b { color: var(--red-bright); font-size: 17px; font-weight: 800; margin-right: 6px; }
.orbit-chip.c1 { top: 14%; left: 2%; animation: floaty 5s ease-in-out infinite; }
.orbit-chip.c2 { bottom: 16%; right: 0; animation: floaty 6.5s ease-in-out infinite reverse; }
.orbit-chip.c3 { top: 14%; right: 0; animation: floaty 5.8s ease-in-out infinite .6s; }
.orbit-chip.c4 { bottom: 16%; left: 2%; animation: floaty 7s ease-in-out infinite reverse .3s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* 滚动提示 */
.scroll-cue { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: .7; }
.scroll-cue .mouse { width: 24px; height: 38px; border: 1.5px solid var(--text3); border-radius: 14px; position: relative; }
.scroll-cue .mouse i { position: absolute; left: 50%; top: 7px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 3px; background: var(--red-bright); animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0% { opacity: 1; transform: translateY(0); } 70% { opacity: 0; transform: translateY(12px); } 100% { opacity: 0; } }
.scroll-cue em { font-style: normal; font-size: 10px; letter-spacing: 4px; color: var(--text3); }

/* ---------- 品牌服务跑马灯条 ---------- */
.ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0c0c10; overflow: hidden; padding: 20px 0; position: relative; z-index: 2; }
.ticker-track { display: flex; gap: 56px; width: max-content; animation: tick 30s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span { font-size: 15px; letter-spacing: 3px; color: var(--text2); white-space: nowrap; display: flex; align-items: center; gap: 56px; }
.ticker-track span i { font-style: normal; color: var(--red); font-size: 14px; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ==========================================================================
   首页骨架屏（Skeleton Screen）
   数据驱动区块在 API 加载期间显示占位，避免「先原始界面、后完整」的闪烁
   容器被渲染函数 innerHTML 覆盖后，骨架屏自动消失
   ========================================================================== */
.sk { display: flex; flex-direction: column; gap: 14px; }
.sk-line { height: 14px; border-radius: 6px; background: var(--sk-bg, #1a1a20); position: relative; overflow: hidden; width: 100%; }
.sk-line.sm { height: 11px; }
.sk-line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); transform: translateX(-100%); animation: sk-shine 1.4s ease-in-out infinite; }
.sk-media { aspect-ratio: 16 / 10; border-radius: 12px; background: var(--sk-bg, #1a1a20); position: relative; overflow: hidden; }
.sk-media::after, .sk-icon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); transform: translateX(-100%); animation: sk-shine 1.4s ease-in-out infinite; }
.sk-icon { width: 52px; height: 52px; border-radius: 12px; background: var(--sk-bg, #1a1a20); position: relative; overflow: hidden; }
@keyframes sk-shine { to { transform: translateX(100%); } }
.sk-line.w30 { width: 30%; } .sk-line.w35 { width: 35%; } .sk-line.w40 { width: 40%; }
.sk-line.w55 { width: 55%; } .sk-line.w60 { width: 60%; } .sk-line.w70 { width: 70%; }
.sk-line.w80 { width: 80%; } .sk-line.w90 { width: 90%; }

/* 数据条带：4 个数字骨架 */
.sk-stat { align-items: center; padding: 44px 20px; }
.sk-stat .sk-line { text-align: center; }

/* 服务卡骨架 */
.sk-card { border: 1px solid var(--line); border-radius: 16px; padding: 34px 28px; min-height: 220px; }
.sk-card .sk-icon { margin-bottom: 6px; }

/* 项目卡骨架 */
.sk-proj { width: 430px; flex: none; }
.sk-proj .sk-media { aspect-ratio: 16 / 10; }
.sk-proj .sk-line { margin-top: 4px; }

/* 新闻卡骨架 */
.sk-news { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.sk-news .sk-media { border-radius: 0; aspect-ratio: 16 / 9; }
.sk-news .sk-line { margin: 0 20px; }
.sk-news .sk-line:first-of-type { margin-top: 18px; }
.sk-news .sk-line:last-child { margin-bottom: 22px; }

/* 客户 chip 骨架 */
.sk-chip { width: 150px; height: 74px; flex: none; border-radius: 12px; background: var(--sk-bg, #1a1a20); position: relative; overflow: hidden; }
.sk-chip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); transform: translateX(-100%); animation: sk-shine 1.4s ease-in-out infinite; }

/* 关于页：时间线骨架 */
.sk-tl { max-width: 860px; margin: 0 auto 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.sk-tl .sk-line:first-child { width: 22%; }

/* 关于页：价值观骨架 */
.sk-value { border: 1px solid var(--line); border-radius: 16px; padding: 30px 24px; min-height: 150px; }

/* 服务页：流程骨架 */
.sk-step { border: 1px solid var(--line); border-radius: 16px; padding: 30px 24px; min-height: 140px; }

/* 项目页：整卡骨架 */
.sk-projfull { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--bg3); }
.sk-projfull .sk-media { aspect-ratio: 16/10; border-radius: 0; }
.sk-projfull .sk-line { margin: 0 20px; }
.sk-projfull .sk-line:first-of-type { margin-top: 18px; }
.sk-projfull .sk-line:last-child { margin-bottom: 22px; }

/* 客户页：logo 块骨架 */
.sk-clogo { aspect-ratio: 5/3; border-radius: 12px; background: var(--sk-bg, #1a1a20); position: relative; overflow: hidden; }
.sk-clogo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); transform: translateX(-100%); animation: sk-shine 1.4s ease-in-out infinite; }

/* 招聘页：职位骨架 */
.sk-job { border: 1px solid var(--line); border-radius: 14px; padding: 24px 28px; background: var(--panel); }

/* 骨架屏阶段：暂停跑马灯滚动，避免占位块跟着滚 */
.proj-track:has(.sk), .marquee-track:has(.sk), .ticker-track:has(.sk) { animation-play-state: paused; }
/* 项目骨架：父容器限高隐藏溢出，track 自适应不再横向跑 */
.proj-marquee:has(.sk) { overflow: hidden; }
.proj-marquee:has(.sk) .proj-track { width: auto; flex-wrap: nowrap; overflow: hidden; padding: 8px 0 16px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
    .hero-inner { grid-template-columns: 1fr; padding: 140px 0 100px; gap: 40px; }
    .hero-visual { min-height: 0; order: -1; }
    .orbit { width: min(380px, 80vw); }
}
@media (max-width: 640px) {
    .section { padding: 80px 0; }
    .hero-stats { flex-wrap: wrap; gap: 16px; }
    .hero-stats div { flex: 1 1 40%; border-left: none; padding: 0; }
    .scroll-cue { display: none; }
    /* 小屏轨道较小，只保留前两个数据浮标，避免拥挤 */
    .orbit-chip.c3, .orbit-chip.c4 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-title .line > span { animation: none; transform: none; }
}