/* ===== 拾己 V8「夜空星语」动效增强层 v2.0 ===== */
/* 依据 shiji_v8_motion_spec v2.0：活夜空 / 星月章仪式 / Hero 3D / 卡片流光 / 雷达脉冲 / 品牌loading */

@property --sweep{syntax:'<angle>';initial-value:0deg;inherits:false}

/* ---------- 1. 活夜空背景（L1 CSS金粒子 + L2 大振幅星闪 + 极光带） ---------- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sky i{position:absolute;display:block;border-radius:50%;background:#F7B64D;animation:skyDrift var(--d,14s) ease-in-out var(--dl,0s) infinite}
@keyframes skyDrift{0%,100%{transform:translateY(0);opacity:.10}50%{transform:translateY(-20px);opacity:.22}}
@media (max-width:767px){@keyframes skyDrift{0%,100%{transform:translateY(0);opacity:.06}50%{transform:translateY(-20px);opacity:.13}}}
.starfield{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.starfield i{position:absolute;display:block;border-radius:50%;background:#F7B64D;box-shadow:0 0 6px rgba(247,182,77,.6);animation:sfTw var(--d,3.4s) ease-in-out var(--dl,0s) infinite}
.starfield i.main{box-shadow:0 0 12px 3px rgba(247,182,77,.9)}
@keyframes sfTw{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}
.aurora{position:fixed;left:0;right:0;top:0;height:200px;z-index:0;pointer-events:none;opacity:.12;
  background:linear-gradient(100deg,transparent 5%,rgba(247,182,77,.55) 30%,rgba(247,182,77,.08) 55%,rgba(247,182,77,.45) 80%,transparent 98%);
  background-size:220% 100%;animation:auroraFlow 40s linear infinite;filter:blur(16px)}
@keyframes auroraFlow{0%{background-position:0% 0}100%{background-position:220% 0}}
.app{background:transparent!important;position:relative;z-index:1}
@media (min-width:1200px){.app{background:transparent!important}}

/* ---------- 2. 星月章仪式 ---------- */
.seal-stamp.v8{animation:none!important}
.seal-stamp.halo{animation:sealHalo 3.6s ease-in-out infinite}
@keyframes sealHalo{0%,100%{filter:drop-shadow(0 0 18px rgba(247,182,77,.35))}50%{filter:drop-shadow(0 0 32px rgba(247,182,77,.6))}}
.seal-stamp .seal-moon{display:none}
.seal-stamp:before{animation:moonFloat 2.6s ease-in-out infinite;transform-origin:50% 0}
@keyframes moonFloat{0%,100%{transform:translateY(-2px) rotate(-9deg)}50%{transform:translateY(2px) rotate(9deg)}}
/* 流星：白色亮点 + 白色渐隐拖尾 */
.shooting-star{width:166px;height:8px}
.ss-head{position:absolute;right:0;top:1px;width:6px;height:6px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 14px 4px rgba(255,255,255,.95)}
.ss-tail{position:absolute;right:4px;top:3px;width:160px;height:3px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6) 55%,rgba(255,255,255,1))}
.seal-stamp .seal-burst{position:absolute;left:50%;top:50%;width:150px;height:150px;transform:translate(-50%,-50%);pointer-events:none;z-index:5}

/* ---------- 3. Hero ---------- */
.hero h1{perspective:600px}
.hero h1 .ch{display:inline-block;transform-style:preserve-3d;will-change:transform,opacity}
.hero h1 .ch.gold{color:var(--seal);animation:goldGlow 4s ease-in-out infinite}
@keyframes goldGlow{0%,100%{text-shadow:0 0 12px rgba(247,182,77,.35)}50%{text-shadow:0 0 28px rgba(247,182,77,.65)}}
.hero-star{position:absolute;right:0;top:-8px;width:44px;height:44px;pointer-events:none;opacity:.95;z-index:1}
@media (max-width:599px){.hero-star{width:32px;height:32px}}

/* ---------- 4. 卡片 tilt + 金边流光 + 图标常时呼吸 ---------- */
.test-card{transform-style:preserve-3d;will-change:transform;overflow:hidden}
.test-card:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--sweep,0deg),transparent 0 68%,rgba(247,182,77,.95) 82%,rgba(247,182,77,0) 94%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:0;pointer-events:none;z-index:2}
.test-card:hover:before{opacity:1;animation:borderSweep .6s linear}
@keyframes borderSweep{from{--sweep:0deg}to{--sweep:360deg}}
.card-icon{animation:iconBreathe 3.2s ease-in-out infinite}
@keyframes iconBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ---------- 5. 答题：选项迸发 ---------- */
.opt-burst{position:absolute;right:-10px;top:50%;width:72px;height:72px;transform:translateY(-50%);pointer-events:none;z-index:3}

/* ---------- 6. 结果：维度条流光 ---------- */
.bar i{position:relative;overflow:hidden}
.bar i:after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,244,214,.45) 50%,transparent 80%);
  transform:translateX(-110%);animation:barShine 2.8s ease-in-out 1.4s infinite}
@keyframes barShine{0%{transform:translateX(-110%)}55%,100%{transform:translateX(110%)}}

/* ---------- 7. 品牌 Loading ---------- */
.brand-loading{position:fixed;inset:0;z-index:80;background:rgba(12,15,22,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.brand-loading .bl-text{font-family:var(--serif);color:var(--ink);font-size:17px;letter-spacing:.08em;min-height:26px;margin:0}
.brand-loading .bl-caret{display:inline-block;width:1px;height:1em;background:var(--seal);vertical-align:-2px;margin-left:2px;animation:caretBlink 1s steps(1) infinite}
@keyframes caretBlink{50%{opacity:0}}

/* ---------- 8. 页面切换 fade+blur（View Transitions） ---------- */
::view-transition-old(root){animation:vtOut .2s ease both}
::view-transition-new(root){animation:vtIn .2s ease both}
@keyframes vtOut{to{opacity:0;filter:blur(6px)}}
@keyframes vtIn{from{opacity:0;filter:blur(6px)}}

/* ---------- reduced-motion：全静态 ---------- */
@media (prefers-reduced-motion:reduce){
  .starfield,.aurora,.sky{display:none}
  .seal-stamp.halo,.seal-stamp .seal-moon,.hero h1 .ch.gold,.card-icon,.bar i:after,.brand-loading .bl-caret{animation:none!important}
}