/**
 * =========================================================
 * Universe-Constants · V0.1
 * 宇宙显影常数 · 显影层（Visual Manifestation Layer）
 * =========================================================
 *
 * 源页面：569-VWEB-SDGH-HOME-🎬ShotDirect官网首页-V1.9-20260328.html
 * 目标：CSS 双层分离 — 本文件只承载颜色、字体、阴影、动画、视觉效果
 * 结构（布局、网格、间距）在 Starcore-Constants 中
 *
 * VXTS-20260329
 * =========================================================
 */

/* ===== 宇宙变量（Universe Variables） ===== */
:root{
  --white:#ffffff;
  --bg:#fafbfc;
  --bg2:#f0f2f5;
  --bg3:#e8ebef;
  --surface:#ffffff;
  --accent:#ff5722;
  --accent-light:#ff8a65;
  --accent-glow:rgba(255,87,34,0.12);
  --accent-deep:#e64a19;
  --blue:#2979ff;
  --green:#00c853;
  --green-bg:rgba(0,200,83,0.08);
  --red:#ff1744;
  --red-bg:rgba(255,23,68,0.06);
  --text:#1a1a2e;
  --text2:#555;
  --text3:#999;
  --border:rgba(0,0,0,0.06);
  --shadow:0 2px 20px rgba(0,0,0,0.06);
  --shadow-lg:0 12px 48px rgba(0,0,0,0.1);
  --shadow-accent:0 8px 32px rgba(255,87,34,0.25);
  --grad:linear-gradient(135deg,#ff5722 0%,#ff9800 100%);
  --grad2:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
}

/* ===== 宇宙根节点显影 ===== */
universe{
  background:var(--white);
  color:var(--text);
  font-family:-apple-system,"SF Pro Display","Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* ===== NAV ===== */
nav{
  background:rgba(255,255,255,0.85);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
}
nav .logo{font-size:20px;font-weight:800;color:var(--accent);letter-spacing:-0.5px}
nav .logo .shot{
  background:linear-gradient(135deg,#6a5cff,#2d1b4e,#b388ff,#1a1a2e);
  background-size:300% 300%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shotBreath 6s ease-in-out infinite;
}
nav .nav-cta{
  background:var(--text);color:#fff;font-size:14px;font-weight:600;
  padding:8px 24px;border-radius:8px;transition:all 0.3s;border:none;cursor:pointer;
  text-decoration:none;
}
nav .nav-cta:hover{background:var(--accent);box-shadow:var(--shadow-accent)}

/* ===== HERO 视觉 ===== */
.hero-video-bg{background:#000}
.hero-video-bg video{background:#000}

/* Intro 监视器视觉 */
.hero-intro{background:#ffffff;color:var(--text)}

/* 取景框 — 开机变红 */
.hero-intro::before{border:2px solid rgba(255,23,68,0);animation:viewfinderOn 0.6s 0.15s ease forwards}
@keyframes viewfinderOn{
  0%{border-color:rgba(255,23,68,0)}
  40%{border-color:rgba(255,23,68,0.7)}
  100%{border-color:rgba(255,23,68,0.45)}
}

.hero-intro-corners i{border-color:rgba(255,23,68,0.8);opacity:0;animation:cornerFlash 0.3s 0.3s ease forwards}
@keyframes cornerFlash{to{opacity:1}}

/* 扫描线 */
.hero-intro::after{
  background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26,26,46,0.018) 2px, rgba(26,26,46,0.018) 4px);
}

/* HUD 视觉 */
.hero-intro-hud{
  font-size:11px;font-weight:600;
  font-family:"SF Mono","Fira Code","Cascadia Code",monospace;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(26,26,46,0.72);
  opacity:0;animation:hudOn 0.4s 0.2s ease forwards;
}
@keyframes hudOn{to{opacity:1}}
.hero-intro-label span:first-child{color:rgba(26,26,46,0.88);font-weight:700}

/* REC 徽章 */
.hero-intro-rec-badge{
  background:rgba(255,23,68,0.1);border:1px solid rgba(255,23,68,0.25);
  color:#ff1744;font-weight:700;font-size:11px;letter-spacing:0.18em;
  opacity:0;animation:recBadgeOn 0.3s 0.5s ease forwards;
}
@keyframes recBadgeOn{to{opacity:1}}
.hero-intro-rec{
  background:#ff1744;box-shadow:0 0 6px rgba(255,23,68,0.5);
  animation:introRecPulse 1s ease-in-out infinite;
}
@keyframes introRecPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(0.7);opacity:0.45}
}

/* 时码 */
.hero-intro-timecode{
  font-family:"SF Mono","Fira Code",monospace;
  font-size:11px;font-weight:600;letter-spacing:0.12em;
  color:rgba(26,26,46,0.6);font-variant-numeric:tabular-nums;
}

/* Meta bar */
.hero-intro-meta{
  font-size:11px;font-family:"SF Mono","Fira Code",monospace;
  font-weight:500;letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(26,26,46,0.55);
  opacity:0;animation:hudOn 0.4s 0.6s ease forwards;
}

/* Timeline 视觉 */
.hero-intro-track{background:rgba(26,26,46,0.08)}
.hero-intro-track::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#ff5a36 0%,#ff8a00 42%,#ffb066 100%);
  transform:scaleX(0);transform-origin:left center;
  animation:introTrackSweep 2.7s linear forwards;
}
@keyframes introTrackSweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.hero-intro-segment{
  border:1px solid rgba(26,26,46,0.08);
  background:rgba(255,255,255,0.72);
  opacity:0.22;transform:translateY(6px);
  animation:introSegmentGlow 0.22s ease forwards;
}
.hero-intro-segment:nth-child(1){animation-delay:0.1s}
.hero-intro-segment:nth-child(2){animation-delay:0.6s}
.hero-intro-segment:nth-child(3){animation-delay:1.1s}
.hero-intro-segment:nth-child(4){animation-delay:1.6s}
.hero-intro-segment:nth-child(5){animation-delay:2.1s}
@keyframes introSegmentGlow{
  to{opacity:1;transform:translateY(0);border-color:rgba(255,90,54,0.22);box-shadow:0 10px 28px rgba(26,26,46,0.06)}
}
.hero-intro-segment-label{font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:rgba(26,26,46,0.42)}
.hero-intro-segment-name{font-size:14px;font-weight:600;letter-spacing:0.02em;color:rgba(26,26,46,0.86)}
@media(max-width:600px){.hero-intro-segment-name{font-size:12px;white-space:nowrap}}

/* Hero 内容视觉 */
.hero::before{
  background:radial-gradient(circle at 50% 50%,rgba(255,87,34,0.05) 0%,transparent 50%);
  animation:pulse 8s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:0.5}50%{transform:scale(1.1);opacity:1}}

.hero-logo{font-size:clamp(48px,10vw,80px);font-weight:800;letter-spacing:-2px;margin-bottom:8px;color:var(--text)}
.hero-logo .shot{
  background:linear-gradient(135deg,#6a5cff,#2d1b4e,#b388ff,#1a1a2e);
  background-size:300% 300%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shotBreath 6s ease-in-out infinite;
}
@keyframes shotBreath{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hero-logo span:not(.shot){color:var(--accent)}

.hero h2{font-size:clamp(20px,4vw,32px);font-weight:400;color:var(--text2);margin-bottom:48px;letter-spacing:1px}
.hero-slogan{
  background:linear-gradient(135deg,#ffffff 0%,#ffffff 20%,#d1d5db 40%,#6b7280 70%,#1f2937 100%);
  background-size:300% 300%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:sloganBreath 4s ease-in-out infinite;
}
@keyframes sloganBreath{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.scroll-hint{color:var(--text3);font-size:13px;animation:bounce 2s infinite}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* ===== SHOWCASE ===== */
.showcase{background:var(--bg)}
.showcase h2{font-size:28px;color:var(--text);margin-bottom:8px}
.showcase-sub{color:var(--text2);font-size:16px;margin-bottom:48px}
.showcase-item{background:var(--surface);border:1px solid var(--border)}
.showcase-item:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.video-placeholder{background:linear-gradient(135deg,var(--bg2),var(--bg));color:var(--text3);font-size:15px;letter-spacing:2px}
.showcase-title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:4px}
.showcase-desc{color:var(--text2);font-size:13px}
.showcase-more{color:var(--text3);font-size:14px;animation:bounce 2s infinite}

/* ===== BUTTONS ===== */
.btn-primary{background:var(--grad);color:#fff;font-size:18px;font-weight:700}
.btn-primary:hover{transform:translateY(-3px);box-shadow:var(--shadow-accent)}

/* ===== PAIN ===== */
.pain{background:var(--white)}
.section-label{font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.section-title{font-size:clamp(28px,5vw,40px);font-weight:800;margin-bottom:48px;line-height:1.2}
.pain-item{background:var(--red-bg);border:1px solid rgba(255,23,68,0.08)}
.pain-icon{background:rgba(255,23,68,0.1);color:var(--red);font-weight:700;font-size:18px}
.pain-text{font-size:16px;color:var(--text2);line-height:1.6}
.insight-card{background:var(--grad);color:#fff;font-size:clamp(20px,4vw,28px);font-weight:700;line-height:1.4;box-shadow:var(--shadow-accent)}

/* ===== WHAT ===== */
.what{background:var(--bg)}
.what-content p.lead{font-size:20px;color:var(--text2);margin-bottom:32px}
.what-quote{font-size:clamp(24px,4.5vw,36px);font-weight:800;line-height:1.3;border-left:4px solid var(--accent)}
.what-sub{font-size:18px;color:var(--text2);margin-top:32px}

/* ===== CAPABILITIES ===== */
.caps{background:var(--white)}
.cap-card{background:var(--surface);border:1px solid var(--border)}
.cap-card::before{background:var(--grad)}
.cap-card:hover{border-color:transparent;box-shadow:var(--shadow-lg)}
.cap-num{font-size:48px;font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px;line-height:1}
.cap-title{font-size:22px;font-weight:700;margin-bottom:12px}
.cap-desc{color:var(--text2);font-size:16px;line-height:1.6}

/* ===== COMPARE ===== */
.compare{background:var(--bg)}
.compare-grid{box-shadow:var(--shadow-lg)}
@media(max-width:700px){.compare-arrow{background:none !important;font-size:26px;color:var(--accent);transform:rotate(90deg)}}
.compare-bad{background:#fff5f5}
.compare-good{background:#f0fdf4}
.compare-label{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
.compare-bad .compare-label{background:rgba(255,23,68,0.1);color:var(--red)}
.compare-good .compare-label{background:rgba(0,200,83,0.1);color:var(--green)}
.compare-bad p{color:var(--text3);font-size:17px;font-style:italic}
.compare-good p{color:var(--text);font-size:15px;font-family:"SF Mono","Fira Code",monospace}
.compare-arrow{background:var(--white);font-size:28px;color:var(--accent);font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 20px}
.compare-bottom{font-size:22px;color:var(--text2);font-weight:500}
.compare-bottom strong{color:var(--text)}
.compare-bottom strong::after{background:var(--grad)}

/* ===== LITE PRODUCT ===== */
.lite{background:var(--white)}
.lite-info .lite-badge{background:var(--grad);color:#fff;font-size:12px;font-weight:800;padding:6px 18px;border-radius:20px;letter-spacing:2px;margin-bottom:20px;display:inline-block}
.lite-info h2{font-size:clamp(28px,5vw,36px);font-weight:800;margin-bottom:12px}
.lite-info .lite-sub{color:var(--text2);font-size:17px;margin-bottom:32px}
.lite-features li{font-size:17px;border-bottom:1px solid var(--border)}
.lite-features li .check{background:var(--green-bg);color:var(--green);font-weight:700;font-size:14px}
.lite-card-visual{background:linear-gradient(145deg,#1a1a2e 0%,#2d1b4e 100%);color:#fff;box-shadow:var(--shadow-lg)}
.lite-card-visual::before{background:radial-gradient(circle,rgba(255,87,34,0.3) 0%,transparent 70%)}
.lite-card-visual .price-tag{font-size:13px;color:rgba(255,255,255,0.5);letter-spacing:2px;font-weight:600;margin-bottom:12px}
.lite-card-visual .price{font-size:56px;font-weight:900;margin-bottom:8px}
.lite-card-visual .price-note{font-size:14px;color:rgba(255,255,255,0.5);margin-bottom:32px}
.lite-card-visual .btn-lite{background:var(--grad);color:#fff;font-size:18px;font-weight:700}
.lite-card-visual .btn-lite:hover{box-shadow:var(--shadow-accent)}

/* ===== ROADMAP ===== */
.roadmap{background:var(--bg)}
.road-step{background:var(--surface);border:1px solid var(--border)}
.road-step:hover{box-shadow:var(--shadow-lg)}
.road-step.active{border-color:var(--accent);box-shadow:0 4px 24px rgba(255,87,34,0.12)}
.road-step.active::before{background:var(--grad)}
.road-label{font-size:12px;font-weight:800;letter-spacing:3px;text-transform:uppercase}
.road-step.active .road-label{color:var(--accent)}
.road-step:not(.active) .road-label{color:var(--text3)}
.road-title{font-size:24px;font-weight:800;margin-bottom:8px}
.road-desc{color:var(--text2);font-size:15px}
.road-step.active .road-title{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ===== CTA ===== */
.cta{background:var(--bg)}
.cta::before{background:radial-gradient(circle,rgba(255,87,34,0.06) 0%,transparent 60%)}
.cta h2{font-size:clamp(32px,6vw,52px);font-weight:800;color:var(--text)}
.cta p{color:var(--text2);font-size:20px;margin-bottom:48px}
.cta .btn-primary{font-size:20px}

/* ===== CLOSING ===== */
.closing{background:var(--white)}
.closing p{color:var(--text3);font-size:18px;line-height:2.4}
.closing blockquote{
  font-size:clamp(24px,4vw,32px);font-weight:800;color:var(--text);margin:24px 0;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ===== FOOTER ===== */
footer{border-top:1px solid var(--border);color:var(--text3);font-size:13px;background:var(--bg)}
footer .brand{color:var(--accent);font-weight:700}

/* ===== JUMP MANIFEST ===== */
.jump-manifest{background:var(--white)}
.jump-label{font-size:11px;letter-spacing:0.12em;color:var(--text3);white-space:nowrap}
.jump-count{font-size:13px;font-weight:700;letter-spacing:0.04em;color:var(--text2);font-variant-numeric:tabular-nums;white-space:nowrap}