/* === 九境文章動畫 === */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes fogDrift{0%{transform:translateX(-10%);opacity:.3}50%{opacity:.5}100%{transform:translateX(10%);opacity:.3}}
@keyframes sparkle{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
@keyframes lightning{0%,90%,100%{opacity:0}95%{opacity:.8}}
@keyframes ascendGlow{0%,100%{box-shadow:0 0 30px rgba(212,160,23,.2)}50%{box-shadow:0 0 80px rgba(255,215,0,.5),0 0 120px rgba(255,255,255,.2)}}
@keyframes rainbowBorder{0%{border-color:#D4A017}25%{border-color:#ff6b8a}50%{border-color:#88ccff}75%{border-color:#66ff66}100%{border-color:#D4A017}}

/* Hero image effects */
.hero-img{position:relative;overflow:hidden;border-radius:12px;margin-bottom:24px}
.hero-img img{width:100%;display:block;border-radius:12px}
.hero-img .overlay{position:absolute;inset:0;pointer-events:none}

/* Fog overlay for realms 1-2 */
.fog-overlay{background:linear-gradient(90deg,transparent,rgba(200,200,200,.15),transparent);background-size:200% 100%;animation:fogDrift 8s ease-in-out infinite alternate}
/* Glow overlay for realms 3-5 */
.glow-overlay{background:radial-gradient(circle at 50% 50%,rgba(212,160,23,.15),transparent 70%);animation:fadeIn 2s}
/* Particle overlay for realms 6-7 */
.particle-overlay{background:radial-gradient(circle at 30% 40%,rgba(255,215,0,.1),transparent 50%),radial-gradient(circle at 70% 60%,rgba(255,255,255,.08),transparent 50%);animation:sparkle 4s ease-in-out infinite}
/* Lightning overlay for realm 8 */
.lightning-overlay{background:linear-gradient(135deg,transparent 40%,rgba(255,255,200,.15) 50%,transparent 60%);animation:lightning 3s ease-in-out infinite}
/* Ascend overlay for realm 9 */
.ascend-overlay{background:radial-gradient(circle at 50% 30%,rgba(255,215,0,.2),rgba(255,255,255,.1) 40%,transparent 70%);animation:sparkle 3s ease-in-out infinite}

/* Scroll-triggered fade-in */
.anim-section{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.anim-section.visible{opacity:1;transform:translateY(0)}

/* Realm badge float */
.realm-badge{animation:float 3s ease-in-out infinite}

/* CTA box shimmer */
.cta-box{position:relative;overflow:hidden}
.cta-box::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(212,160,23,.1),transparent);animation:shimmer 4s linear infinite}

/* Title glow for high realms */
.title-glow h1{text-shadow:0 0 20px rgba(212,160,23,.4),0 0 40px rgba(212,160,23,.2)}

/* Realms nav hover */
.realms-grid a{transition:all .3s;position:relative;overflow:hidden}
.realms-grid a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:#D4A017;transition:width .3s}
.realms-grid a:hover::after{width:100%}