/* =========================================================
   科技主题效果  theme.css
   ========================================================= */

/* ---------- 全息视觉(Hero右侧) ---------- */
.hero{padding:70px 0 40px;position:relative;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;min-height:520px}
.hero-copy{position:relative;z-index:2}
.hero-tag{display:inline-flex;align-items:center;gap:10px;font-family:"Consolas",monospace;font-size:12px;letter-spacing:2px;color:var(--primary);border:1px solid var(--line);border-radius:var(--r-full);padding:7px 16px;background:rgba(0,212,255,.04);margin-bottom:24px}
.tag-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px var(--primary);animation:blink 1.6s ease-in-out infinite}
.hero-title{font-size:46px;font-weight:800;line-height:1.25;color:var(--text-1);letter-spacing:1px;max-width:640px}
.hero-subtitle{font-size:17px;color:var(--text-2);margin-top:16px;letter-spacing:1px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.hero-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}

.hero-visual{display:flex;align-items:center;justify-content:center;position:relative}
.holo-card{position:relative;width:340px;height:340px}
.holo-ring{position:absolute;border:1px solid rgba(0,212,255,.35);border-radius:50%}
.holo-ring-1{inset:0;border-top-color:transparent;border-right-color:var(--primary);animation:spin 10s linear infinite}
.holo-ring-2{inset:38px;border-bottom-color:transparent;border-left-color:var(--primary);animation:spin 8s linear infinite reverse}
.holo-core{position:absolute;inset:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:800;font-family:"Consolas",monospace;color:#03101a;background:radial-gradient(circle at 30% 30%,var(--primary),var(--accent));box-shadow:0 0 60px rgba(0,212,255,.5),inset 0 0 30px rgba(255,255,255,.3);animation:corePulse 3.5s ease-in-out infinite}
.holo-axis{position:absolute;background:rgba(0,212,255,.18)}
.holo-axis-x{left:8px;right:8px;top:50%;height:1px}
.holo-axis-y{top:8px;bottom:8px;left:50%;width:1px}
.holo-axis-z{left:50%;top:50%;width:180px;height:180px;transform:translate(-50%,-50%) rotate(45deg);border:1px dashed rgba(0,212,255,.15);background:none}
.holo-scan{position:absolute;left:0;right:0;height:70px;background:linear-gradient(to bottom,transparent,rgba(0,212,255,.14),transparent);animation:scan 4s ease-in-out infinite}

/* ---------- 滚动出现动画 ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- 动画定义 ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes corePulse{0%,100%{transform:scale(1);box-shadow:0 0 50px rgba(0,212,255,.45)}50%{transform:scale(1.05);box-shadow:0 0 80px rgba(0,212,255,.7)}}
@keyframes scan{0%,100%{top:0}50%{top:calc(100% - 70px)}}
@keyframes auroraFloat{0%,100%{opacity:.5;transform:translateX(-50%) translateY(0)}50%{opacity:1;transform:translateX(-50%) translateY(30px)}}