/* ============================================================
   effect.css ｜ 盈美·金刚菩提 前台高级动效皮肤
   说明：所有样式类均使用 ym- 前缀，与现有 skin/css/style.css 完全隔离。
   用法：header.html 中引入本文件，然后在模板中加入 ym-* class 即可触发。
   兼容：全部现代浏览器；prefers-reduced-motion 自动降级。
   ============================================================ */

:root{
  /* 主题色板：墨黑 × 鎏金（文玩·东方·高级感） */
  --ym-bg:            #0b0b10;
  --ym-bg-2:          #111118;
  --ym-gold:          #d6336c;
  --ym-gold-light:    #f3a0c0;
  --ym-gold-deep:     #8f1d4e;
  --ym-ivory:         #f5f0e6;
  --ym-text:          #ece7db;
  --ym-text-dim:      rgba(236,231,219,.62);
  --ym-line:          rgba(214,51,108,.22);
  --ym-grad:          linear-gradient(120deg,#f3a0c0 0%,#d6336c 35%,#ffd6e4 55%,#8f1d4e 100%);
  --ym-glass:         rgba(12,12,18,.55);
  --ym-shadow:        0 18px 50px rgba(0,0,0,.45);
  --ym-ease:          cubic-bezier(.22,.61,.36,1);
  --ym-font-serif:    "Songti SC","SimSun","Noto Serif SC","STSong",serif;
  --ym-font-sans:     "PingFang SC","Microsoft YaHei","Segoe UI",Roboto,Arial,sans-serif;
}

/* ============ 1. 顶部阅读进度条（金色细条） ============ */
.ym-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:99999;
  background:var(--ym-grad);box-shadow:0 0 12px rgba(214,51,108,.8);border-radius:0 3px 3px 0;}

/* ============ 2. 滚动渐入（IntersectionObserver 驱动） ============ */
.ym-reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ym-ease),transform .9s var(--ym-ease);will-change:opacity,transform;}
.ym-reveal.ym-in{opacity:1;transform:none;}
.ym-reveal[data-ym="left"]{transform:translateX(-46px);}
.ym-reveal[data-ym="left"].ym-in{transform:none;}
.ym-reveal[data-ym="right"]{transform:translateX(46px);}
.ym-reveal[data-ym="right"].ym-in{transform:none;}
.ym-reveal[data-ym="zoom"]{transform:scale(.9);}
.ym-reveal[data-ym="zoom"].ym-in{transform:none;}
.ym-reveal[data-ym="clip"]{transform:translateY(100%);clip-path:inset(0 0 0 0);}
.ym-reveal[data-ym="clip"].ym-in{transform:none;}

/* 延迟档位 */
.ym-d1{transition-delay:.08s;} .ym-d2{transition-delay:.18s;} .ym-d3{transition-delay:.28s;}
.ym-d4{transition-delay:.38s;} .ym-d5{transition-delay:.48s;} .ym-d6{transition-delay:.58s;}

/* ============ 3. 标题流光渐变文字 ============ */
.ym-text-grad{background:var(--ym-grad);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ymShine 4.5s linear infinite;}
@keyframes ymShine{0%{background-position:0% 50%;}100%{background-position:220% 50%;}}

/* ============ 4. 卡片 3D Tilt + 光晕（JS 驱动 transform） ============ */
.ym-card3d{transform-style:preserve-3d;transition:transform .35s var(--ym-ease),box-shadow .35s var(--ym-ease);will-change:transform;}
.ym-card3d .ym-tilt-inner{transform:translateZ(26px);transform-style:preserve-3d;}

/* ============ 5. 图片光扫效果（hover 一道金色流光） ============ */
.ym-shine{position:relative;overflow:hidden;}
.ym-shine::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg);transition:left .85s var(--ym-ease);pointer-events:none;}
.ym-shine:hover::after{left:160%;}

/* ============ 6. 磁性按钮（JS 驱动 translate） ============ */
.ym-magnet{transition:transform .3s var(--ym-ease);will-change:transform;}

/* ============ 7. 边框流动（conic 旋转描边） ============ */
.ym-border-flow{position:relative;overflow:hidden;}
.ym-border-flow::before{content:"";position:absolute;inset:-2px;z-index:0;
  background:conic-gradient(from var(--ym-rot,0deg),transparent 0 60%,rgba(214,51,108,.85) 72%,transparent 84%);
  animation:ymRotate 3.6s linear infinite;}
.ym-border-flow > *{position:relative;z-index:1;}
@keyframes ymRotate{to{--ym-rot:360deg;}}
@supports not (background:conic-gradient(#000,#fff)){
  .ym-border-flow::before{display:none;}
}

/* ============ 8. 鼠标光晕跟随（桌面端） ============ */
.ym-cursor-glow{position:fixed;top:0;left:0;width:520px;height:520px;z-index:5;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.05) 0%,transparent 62%);
  transform:translate(-50%,-50%);transition:opacity .4s;opacity:0;}
.ym-cursor-glow.ym-on{opacity:1;}
@media(pointer:coarse){.ym-cursor-glow{display:none;}}

/* ============ 9. 粒子光场画布 ============ */
.ym-particles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.ym-particles canvas{width:100%;height:100%;display:block;}

/* ============ 10. 波浪分隔 ============ */
.ym-wave{position:absolute;left:0;right:0;z-index:2;pointer-events:none;line-height:0;}
.ym-wave svg{display:block;width:100%;height:60px;}

/* ============ 11. 环形返回顶部 ============ */
.ym-to-top{position:fixed;right:26px;bottom:30px;width:52px;height:52px;z-index:9990;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(16px);transition:all .4s var(--ym-ease);}
.ym-to-top.ym-on{opacity:1;visibility:visible;transform:none;}
.ym-to-top svg{width:52px;height:52px;transform:rotate(-90deg);}
.ym-to-top circle.ym-ring{fill:none;stroke:rgba(214,51,108,.25);stroke-width:3;}
.ym-to-top circle.ym-ring-bar{fill:none;stroke:url(#ymGradRing);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:151;stroke-dashoffset:151;}
.ym-to-top .ym-tt-ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--ym-gold);font-size:20px;font-weight:700;}
.ym-to-top:hover .ym-tt-ico{color:var(--ym-gold-light);}

/* ============ 12. 毛玻璃吸顶导航（叠加在现有 #header 上） ============ */
.ym-glass-nav{background:#18191b!important;backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);transition:background .4s,box-shadow .4s;}
/* 全站导航统一深黑 #18191b（含首页），滚动后毛玻璃微透，与副站原版一致 */
.ym-glass-nav.ym-scrolled{background:rgba(24,25,27,.92)!important;box-shadow:0 10px 40px rgba(0,0,0,.35);}

/* ============ 13. 深色导航文字适配（首页深色场景用，列表页默认白底） ============ */
body.ym-dark-nav #header{background:transparent;box-shadow:none;}
body.ym-dark-nav #header .inner{border-bottom:1px solid rgba(255,255,255,.08);}
body.ym-dark-nav #nav ul li a{color:var(--ym-ivory);}


/* ============ 14. 数字滚动 ============ */
.ym-count{font-variant-numeric:tabular-nums;}

/* ============ 15. 装饰性标题下划线 ============ */
.ym-title-line{position:relative;display:inline-block;}
.ym-title-line::after{content:"";position:absolute;left:0;bottom:-12px;width:64px;height:3px;
  background:var(--ym-grad);border-radius:3px;box-shadow:0 0 10px rgba(214,51,108,.55);
  animation:ymLineIn .9s var(--ym-ease) .3s both;}
@keyframes ymLineIn{from{width:0;opacity:0;}to{width:64px;opacity:1;}}

/* ============ 16. 通用区块光晕背景 ============ */
.ym-glow-bg{position:relative;}
.ym-glow-bg::before{content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);
  width:720px;height:420px;background:radial-gradient(ellipse,rgba(255,255,255,.06),transparent 65%);
  pointer-events:none;z-index:0;}

/* ============ 17. 现有列表卡片增强（列表页 blogItem / 首页 proitem） ============ */
.ym-card-lift{transition:transform .4s var(--ym-ease),box-shadow .4s var(--ym-ease);}
.ym-card-lift:hover{transform:translateY(-8px);box-shadow:0 22px 46px rgba(0,0,0,.14);}

/* ============ 18. 主站首页 hero 标题逐字浮现（CSS 动画自动播放） ============ */
.ym-split-char{display:inline-block;opacity:1;
  animation:ymCharIn .75s var(--ym-ease) both;}
.ym-split-char.ym-space{width:.28em;}
@keyframes ymCharIn{0%{opacity:0;transform:translateY(26px) rotateX(38deg);}100%{opacity:1;transform:none;}}

/* ============ 19. 按钮微光描边 ============ */
.ym-btn-glow{position:relative;overflow:hidden;}
.ym-btn-glow::before{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 rgba(214,51,108,0);transition:box-shadow .35s;}
.ym-btn-glow:hover::before{box-shadow:0 0 26px rgba(214,51,108,.5);}

/* ============ 20. 徽标悬浮呼吸 ============ */
.ym-float-soft{animation:ymFloat 5.5s ease-in-out infinite;}
@keyframes ymFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}

/* ============ 21. 加载遮罩（首屏淡出） ============ */
.ym-page-mask{position:fixed;inset:0;z-index:99998;background:#0b0b10;
  display:flex;align-items:center;justify-content:center;transition:opacity .6s ease .1s,visibility .6s;}
.ym-page-mask.ym-done{opacity:0;visibility:hidden;}
.ym-page-mask .ym-mask-ring{width:44px;height:44px;border-radius:50%;
  border:3px solid rgba(214,51,108,.18);border-top-color:var(--ym-gold);
  animation:ymSpin .9s linear infinite;}
@keyframes ymSpin{to{transform:rotate(360deg);}}

/* ============ 22. 章节标题统一增强（叠加现有 .columnname） ============ */
.columnname h2{position:relative;}
.ym-section-head{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ym-ease),transform .8s var(--ym-ease);}
.ym-section-head.ym-in{opacity:1;transform:none;}

/* ============ 23. 正文排版增强（详情页）——仅保留装饰特效，文字字号/行高/颜色保持原版默认 ============ */
.ym-article-body h2{border-left:4px solid var(--ym-gold);margin:34px 0 16px;padding-left:14px;}
.ym-article-body h3{margin:26px 0 12px;}
.ym-article-body p{margin:14px 0;}
.ym-article-body img{border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.12);max-width:100%;height:auto;}
.ym-article-body blockquote{border-left:4px solid var(--ym-gold);background:rgba(214,51,108,.06);padding:12px 18px;border-radius:0 10px 10px 0;color:#6b6252;margin:18px 0;}

/* ============ 24. 移动端/降级 ============ */
@media (prefers-reduced-motion:reduce){
  .ym-reveal,.ym-split-char,.ym-card3d,.ym-float-soft{opacity:1!important;transform:none!important;transition:none!important;animation:none!important;}
  .ym-page-mask{display:none;}
  .ym-progress{display:none;}
}
@media (max-width:768px){
  .ym-to-top{right:16px;bottom:20px;transform:scale(.9);}
  .ym-cursor-glow{display:none;}
  .ym-reveal{transform:translateY(22px);}
}

/* ============ 25. 页脚鎏金增强（叠加现有 #footer 深色） ============ */
.ym-footer #footer{background:linear-gradient(180deg,#14141d 0%,#0b0b10 100%);border-top:1px solid rgba(214,51,108,.25);}
.ym-footer #footer a{color:#9d927c;transition:color .3s;}
.ym-footer #footer a:hover{color:var(--ym-gold-light);}
.ym-footer #footer #logoIcon .icon img{filter:drop-shadow(0 0 14px rgba(214,51,108,.35));}
.ym-footer #copyright p{color:#8a826f;}

/* ============ 26. 分页鎏金（栏目/搜索页 .pagination） ============ */
.pagination a{border-radius:8px!important;transition:all .28s var(--ym-ease)!important;}
.pagination a:hover{border-color:var(--ym-gold)!important;color:var(--ym-gold-deep)!important;transform:translateY(-2px);box-shadow:0 6px 16px rgba(214,51,108,.18)!important;}
.pagination a.page-num-current{background:var(--ym-gold)!important;border-color:var(--ym-gold)!important;color:#fff!important;}

/* ============ 27. 列表卡片（栏目页 blogItem） ============ */
.blogItem{border-radius:16px;padding:18px;background:#fff;transition:transform .4s var(--ym-ease),box-shadow .4s var(--ym-ease);}
.blogItem:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(0,0,0,.12);}
.blogItem .thumbnail{border-radius:12px;overflow:hidden;}
.blogItem .title a{transition:color .3s;}
.blogItem .title a:hover{color:var(--ym-gold-deep);}

/* ============ 28. 详情页增强（标题字号/颜色保持原版默认，仅保留元信息与动效） ============ */
#postmeta{display:flex;flex-wrap:wrap;gap:14px;color:#8a8272;}
#postmeta span{display:inline-flex;align-items:center;gap:5px;}
.detail-tag{transition:all .3s var(--ym-ease);}
.detail-tag:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(214,51,108,.25);color:var(--ym-gold-deep)!important;}
#imgnavi .figure .img{border-radius:12px;overflow:hidden;}
#related li{border-radius:14px;overflow:hidden;background:#fff;transition:transform .35s var(--ym-ease),box-shadow .35s var(--ym-ease);}
#related li:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(0,0,0,.12);}

/* ============ 29. 首页 banner hero 内容提升层级（粒子之上，不覆盖原定位；标语字号颜色保持原版） ============ */
#slides .ym-particles{z-index:1;}
#slides #mouse{z-index:3;position:relative;}
#slides .item .info{z-index:5;}
#slides .byzt.ym-split{letter-spacing:.12em;text-shadow:0 4px 30px rgba(0,0,0,.35);}

/* ============ 30. 右侧栏卡片微增强 ============ */
#sidebar .widget{border-radius:14px;transition:transform .35s var(--ym-ease),box-shadow .35s var(--ym-ease);}
#sidebar .widget:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(0,0,0,.08);}

/* ============ 31. 全站图片圆润统一（正文外） ============ */
#blogList .thumbnail img,#related .img img,#imgnavi .img img,.proitem .img img,.svlist .img img{border-radius:12px;}

/* ============ 32. 首页 hero 标题"为·爱·而·生"金色过光 ============
   保留原版"光藏右侧"静态渐变（平时纯白+右侧金光微露），
   周期性地让一道金色光带扫过文字，颜色与文字金色渐变完全一致。 */
#slides .byzt{
  background-image:linear-gradient(-22deg,#ffffff 0%,#ffffff 22%,rgba(255,238,180,1) 50%,#ffffff 78%,#ffffff 100%);
  background-size:200% 100%;
  background-position:200% center;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:ymHeroGoldShine 10s ease-in-out infinite,ymHeroGoldGlow 10s ease-in-out infinite;
}
/* 缓慢扫光：平时光藏右侧（原静态效果），28%起一道金光缓慢扫过文字，随后缓缓回位，循环自然不跳变 */
@keyframes ymHeroGoldShine{
  0%,26%{background-position:200% center;}
  60%{background-position:-100% center;}
  88%{background-position:-100% center;}
  100%{background-position:200% center;}
}
/* 金色光晕：在光带扫到文字中央时最亮，其余时间保持原阴影 */
@keyframes ymHeroGoldGlow{
  0%,24%{text-shadow:0 4px 30px rgba(0,0,0,.35);}
  42%{text-shadow:0 0 12px rgba(255,232,155,.5),0 0 30px rgba(255,232,155,.2),0 4px 30px rgba(0,0,0,.35);}
  58%{text-shadow:0 0 12px rgba(255,232,155,.5),0 0 30px rgba(255,232,155,.2),0 4px 30px rgba(0,0,0,.35);}
  70%{text-shadow:0 4px 30px rgba(0,0,0,.35);}
  100%{text-shadow:0 4px 30px rgba(0,0,0,.35);}
}
@media (prefers-reduced-motion:reduce){#slides .byzt{animation:none;background-position:200% center;text-shadow:0 4px 30px rgba(0,0,0,.35);}}