/* AI 时代 5 屏叙事页 —— 复刻线上版 /ai-era */
*{box-sizing:border-box;margin:0;padding:0}
/* 底色放在根元素：body 不能 position:fixed，否则形成独立层叠上下文，粒子画布的 screen 混合会失效出现黑框 */
html{height:100%;overflow:hidden;background:#070A14}
body{height:100%;overflow:hidden}
body.era{position:relative;background:#070A14;color:#ECEEF8;font-family:var(--font-body);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* 背景层 */
.fde-stardust{position:fixed;inset:0;pointer-events:none}
.fde-glow{position:fixed;inset:0;pointer-events:none;background:radial-gradient(40% 45% at 50% 30%,rgba(79,107,255,.14),transparent 70%)}
@media (min-width:1024px){.fde-glow{background:radial-gradient(35% 50% at 72% 50%,rgba(79,107,255,.14),transparent 70%)}}
.fde-horizon-wrap{position:fixed;left:0;right:0;bottom:0;height:38%;pointer-events:none;overflow:hidden;perspective:420px}
.fde-horizon{position:absolute;left:-50%;right:-50%;bottom:0;height:200%;transform-origin:bottom;transform:rotateX(72deg);
  background-image:linear-gradient(#788cff1a 1px,#0000 1px),linear-gradient(90deg,#788cff1a 1px,#0000 1px);background-size:56px 56px;
  -webkit-mask-image:linear-gradient(#0000 40%,#000 90%);mask-image:linear-gradient(#0000 40%,#000 90%)}
.era-gold{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity 1s;background:radial-gradient(50% 60% at 70% 55%,rgba(232,201,138,.10),transparent 70%)}
.era-gold.on{opacity:1}

/* 粒子画布：移动端上半屏，桌面端右 60% */
.era-canvas{position:absolute;top:4rem;left:0;right:0;height:calc((100dvh - 4rem)*.45);pointer-events:none;opacity:0;transition:opacity .8s}
.era-canvas.ready{opacity:1}
.era-canvas canvas{display:block}
@media (min-width:768px){.era-canvas{height:auto;bottom:0;left:40%}}
.fde-p-label{position:absolute;left:0;top:0;white-space:nowrap;font-family:var(--font-heading);font-size:12px;font-weight:500;letter-spacing:.05em;transition:opacity .5s}
@media (min-width:768px){.fde-p-label{font-size:14px}}

/* 文本遮罩 */
.era-veil{position:absolute;left:0;right:0;bottom:0;height:calc((100dvh - 4rem)*.6);pointer-events:none;background:rgba(8,10,20,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(to top,#000 70%,transparent);mask-image:linear-gradient(to top,#000 70%,transparent)}
body.reduced .era-veil{background:rgba(8,10,20,.85)}
@media (min-width:768px){.era-veil{height:auto;top:0;right:auto;width:50%;-webkit-mask-image:linear-gradient(to right,#000 75%,transparent);mask-image:linear-gradient(to right,#000 75%,transparent)}}

/* 加载条 */
.era-loader{position:fixed;top:50%;left:50%;transform:translateX(-50%);width:10rem;height:1px;background:rgba(255,255,255,.1);z-index:30;transition:opacity .3s}
.era-loader div{height:100%;width:10%;background:#37E6FF;transition:width .15s}
.era-loader.done{opacity:0;pointer-events:none}

/* 顶栏 */
.era-top{position:fixed;top:0;left:0;right:0;z-index:20;height:4rem;margin-top:env(safe-area-inset-top);display:flex;align-items:center;gap:.75rem;padding:0 1rem}
@media (min-width:1024px){.era-top{padding:0 2rem}}
.era-close{width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;border-radius:999px;background:rgba(255,255,255,.05)}
.era-dots{flex:1;display:flex;justify-content:center;gap:.5rem}
.era-dots button{height:8px;width:8px;border-radius:999px;background:rgba(255,255,255,.3);transition:all .15s}
.era-dots button.on{width:24px;background:rgba(255,255,255,.9)}
.era-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.era-pill{height:36px;padding:0 .75rem;border-radius:999px;border:1px solid rgba(255,255,255,.25);font-size:12px;color:rgba(255,255,255,.9);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:border-color .15s}
.era-pill:hover{border-color:rgba(165,180,252,.7)}
.era-pill .ico{font-size:9px;letter-spacing:-1px}
@media (max-width:767px){.era-pill .lbl{display:none}}

/* 文本区 */
.era-text{position:absolute;left:0;right:0;bottom:0;z-index:10;display:flex;align-items:center;padding:0 1.5rem calc(3rem + env(safe-area-inset-bottom));height:calc((100dvh - 4rem)*.55)}
@media (min-width:768px){.era-text{height:auto;top:0;right:auto;width:46%;padding:5rem 1.5rem 3rem 6%}}
.era-slide{width:100%;text-shadow:0 2px 24px rgba(0,0,0,.6);opacity:0;transform:translateX(-24px);transition:opacity .3s,transform .3s}
.era-slide.in{opacity:1;transform:none}
body.reduced .era-slide{transform:none}
.era-label{display:flex;align-items:center;gap:.75rem;font-family:var(--font-en);font-size:12px;letter-spacing:.25em;text-transform:uppercase}
.era-label i{width:24px;height:1px;flex-shrink:0}
@media (min-width:1024px){.era-label{font-size:13px}}
.era-key{margin-top:1.25rem;font-family:var(--font-heading);font-weight:700;font-size:44px;line-height:1.15;white-space:nowrap;font-variant-numeric:tabular-nums}
.era-key span{-webkit-background-clip:text;background-clip:text;color:transparent}
@media (min-width:1024px){.era-key{font-size:72px}}
@media (min-width:1280px){.era-key{font-size:88px}}
.era-title{margin-top:1.25rem;font-weight:700;color:#fff;font-size:24px;line-height:1.25}
@media (min-width:1024px){.era-title{font-size:38px}}
.era-sub{margin-top:.75rem;font-family:var(--font-en);font-size:15px;line-height:1.375;color:rgba(255,255,255,.55);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:1024px){.era-sub{font-size:16px}}
.era-d{margin-top:.75rem;font-size:15px;color:rgba(255,255,255,.78)}
@media (min-width:1024px){.era-d{font-size:18px}}
.era-cta{margin-top:1.75rem}
.era-cta a{position:relative;display:inline-flex;overflow:hidden;border-radius:999px;padding:14px 32px;border:1px solid rgba(255,255,255,.4);
  background:linear-gradient(90deg,#4F6BFF,#A78BFA,rgba(255,211,122,.8));box-shadow:0 0 36px rgba(167,139,250,.5)}
.era-cta a::before{content:"";position:absolute;inset:0;transform:translateX(-100%);transition:transform .7s;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)}
.era-cta a:hover::before{transform:translateX(100%)}
.era-cta b{position:relative;font-size:16px;color:#fff;text-shadow:none}
@media (min-width:1024px){.era-cta b{font-size:18px}}
.era-cta p{margin-top:.5rem;padding-left:.5rem;font-family:var(--font-en);font-size:12px;color:rgba(255,255,255,.55)}

/* 底栏 */
.era-foot{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;padding:0 1.5rem calc(1rem + env(safe-area-inset-bottom));font-family:var(--font-en);font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.4);pointer-events:none}
@media (min-width:1024px){.era-foot{padding-left:2.5rem;padding-right:2.5rem}}
.era-foot .num{font-variant-numeric:tabular-nums}
.era-foot b{color:rgba(255,255,255,.8);font-weight:400}