/* ==========================================================================
   SAGEIC 动效系统 —— "Orchard Sweep"
   全站只有一个母题：一笔从左到右的陶土色"扫过"（像刷子蘸色划过纸面）。
     标题  逐词从遮罩下升起，斜体 <em> 被一笔陶土色扫亮
     图片  杏色幕布自左向右扫开，图片从放大回落，滚动时微视差
     按钮  深色自左向右填满，→ 右出左进
     眉题  前导短线自左画出；首页轮播指示线随自动播放自左填满
   一条曲线 --ease（快出慢收），三档时长：--t-ui .35s 交互 / --t-rv .9s 进场 / 1.1–1.8s 图片。
   只动 transform / translate / scale / opacity / clip / background-position。
   进场由 motion.js 给"首屏以下"的元素打 .rv，进入视口加 .in；隐藏态一律写成 .rv:not(.in)，
   所以首屏、AJAX 新插入、JS 失败的内容永远可见。首屏大标题靠 html.mo（head 内联脚本加）等待分词，2.5s 兜底显示。
   ========================================================================== */
:root{--ease:cubic-bezier(.16,1,.3,1);--t-ui:.35s;--t-rv:.9s;--rv-y:26px;--wd:42ms}
@media(max-width:767px){:root{--rv-y:16px;--wd:32ms}}

/* ---------- 1. 基础进场：文字 / 按钮 / 卡片上升淡入，同一父容器依次错开 ---------- */
.rv:not(.in){opacity:0;transform:translate3d(0,var(--rv-y),0)}
.rv{transition:opacity var(--t-rv) var(--ease),transform var(--t-rv) var(--ease);transition-delay:calc(var(--rv-i,0) * 90ms)}

/* ---------- 2. 标题：逐词遮罩升起 + <em> 陶土色扫亮 ---------- */
.elementor-heading-title,.elementor-slide-heading,.footer-tagline{--ink:var(--sg-primary);--ink-from:var(--sg-olive)}
.band-dark .elementor-heading-title,.hero .elementor-heading-title,.hero-slides .elementor-slide-heading,.footer-tagline{--ink-from:#fff}
.band-brand .elementor-heading-title,.band-photo .elementor-heading-title{--ink:#fff;--ink-from:rgba(255,255,255,.45)}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .1em .3em;margin:0 -.1em -.3em}  /* 留出斜体外伸与降部 */
.wi{display:inline-block;transition:transform 1.05s var(--ease);transition-delay:calc(var(--wi,0) * var(--wd))}
/* 背景只画在元素盒内，斜体 y / g 的降部和右侧外伸会没颜色（看起来被切掉）：盒子往下、往右扩，负 margin 抵消，排版不变 */
.wi.ink{padding:0 .12em .32em 0;margin:0 -.12em -.32em 0;
  color:transparent!important;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(90deg,var(--ink) 0 50%,var(--ink-from) 50% 100%);background-size:200% 100%;background-repeat:no-repeat;background-position:0 0;
  transition:transform 1.05s var(--ease) calc(var(--wi,0) * var(--wd)),
             background-position .9s var(--ease) calc(var(--wn,0) * var(--wd) + .35s + var(--ink-i,0) * .11s)}
/* 隐藏态：打了 .pre（首屏分词后的一帧）或 .rv 未进视口 */
:is(.pre,.rv:not(.in)) .wi{transform:translate3d(0,112%,0);transition:none}
:is(.pre,.rv:not(.in)) .wi.ink{background-position:100% 0}
/* 首屏大标题等待分词（html.mo 由 head 内联脚本添加；2.5s 兜底，JS 失败也会显示） */
@keyframes failsafe{to{opacity:1}}
.mo :is(.hero .hero-title .elementor-heading-title,.hero-slides .elementor-slide-heading):not(.split){opacity:0;animation:failsafe 0s 2.5s forwards}
/* 轮播：非当前张的词回到遮罩下，切到当前张时重新升起 + 扫亮 */
.hero-slides .swiper-initialized .swiper-slide:not(.swiper-slide-active) .wi{transform:translate3d(0,112%,0);transition:transform .4s ease}
.hero-slides .swiper-initialized .swiper-slide:not(.swiper-slide-active) .wi.ink{background-position:100% 0;transition:none}

/* ---------- 3. 眉题：前导短线自左画出 ---------- */
.elementor-widget-heading.eyebrow .elementor-heading-title::before,.hero-slides .hero-eyebrow::before{
  content:"";display:inline-block;width:28px;height:1px;margin:0 12px 0 0;vertical-align:middle;background:currentColor;
  transform-origin:0 50%;transition:transform .8s var(--ease) .15s}
.rv.eyebrow:not(.in) .elementor-heading-title::before{transform:scaleX(0);transition:none}

/* ---------- 4. 图片：杏色幕布自左向右扫开；普通图片同时从放大回落 + 轻微视差（Elementor 精简 DOM 下没有 widget-container，直接作用在组件上） ---------- */
.rv-img:not(.in){opacity:1;transform:none}
.rv-img{position:relative}
.rv-img img{display:block}
.rv-img::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:var(--sg-apricot);transform-origin:100% 50%;
  transition:transform 1.1s var(--ease);transition-delay:calc(var(--rv-i,0) * 90ms)}
.band-brand .rv-img::before{background:var(--sg-oat)}
.rv-img.in::before{transform:scaleX(0)}
.rv-img:not(.offset-block){overflow:hidden}  /* 错位块的杏色底在组件外侧，不能裁 */
.rv-img:not(.offset-block) img{scale:1.06;transition:scale 1.6s var(--ease);transition-delay:calc(var(--rv-i,0) * 90ms)}
.rv-img:not(.offset-block):not(.in) img{scale:1.18}
.rv-img.offset-block::after{transition:transform 1.1s var(--ease) .35s,opacity .6s ease .35s}
.rv-img.offset-block:not(.in)::after{transform:translate(-22px,-22px);opacity:0}
@supports(animation-timeline:view()){
  @keyframes drift-y{from{translate:0 -2.5%}to{translate:0 2.5%}}
  .rv-img:not(.offset-block) img{animation:drift-y linear both;animation-timeline:view();animation-range:cover}
}

/* Connect 四图：悬停慢推（放在 .rv-img 规则之后才压得住；首屏内未打标的也生效） */
.social-row .elementor-widget-image{overflow:hidden}
.social-row .elementor-widget-image img{transition:scale 1.2s var(--ease)}
.social-row .elementor-widget-image:hover img{scale:1.14;transition-delay:0s}

/* ---------- 5. 按钮：深色自左填满，→ 右出左进 ---------- */
.elementor-button,.elementor-slide-button{position:relative;isolation:isolate;overflow:hidden;--fill:var(--sg-deep);
  transition:color var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease)}
.elementor-button::before,.hero-slides .elementor-slide-button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .55s var(--ease)}
.elementor-button:hover::before,.elementor-button:focus-visible::before,.hero-slides .elementor-slide-button:hover::before{transform:scaleX(1);transform-origin:0 50%}
/* 各样式的填充色：实心 → 深陶土；满橙带白按钮 → olive；描边 → olive / 白 */
.elementor-widget-button:not(.btn-outline):not(.btn-outline-light) .elementor-button:hover,.hero-slides .elementor-slide-button:hover,.inquiry-form .elementor-button:hover{background-color:var(--sg-primary)!important}
.band-brand .elementor-widget-button .elementor-button{--fill:var(--sg-olive)}
.band-brand .elementor-widget-button .elementor-button:hover{background-color:#fff!important;color:#fff!important}
.band-brand .elementor-widget-button .elementor-button:hover .elementor-button-text{color:#fff}
.elementor-widget-button.btn-outline .elementor-button{--fill:var(--sg-olive)}
.elementor-widget-button.btn-outline-light .elementor-button{--fill:#fff}
.elementor-widget-button.btn-outline .elementor-button:hover,.elementor-widget-button.btn-outline-light .elementor-button:hover{background:transparent!important}
/* 箭头 */
.elementor-button-text::after,.hero-slides .elementor-slide-button::after{content:"→";display:inline-block;margin-left:.6em}
@keyframes arrow-loop{0%{transform:none}45%{transform:translateX(12px);opacity:0}46%{transform:translateX(-12px);opacity:0}100%{transform:none;opacity:1}}
.elementor-button:hover .elementor-button-text::after,.hero-slides .elementor-slide-button:hover::after{animation:arrow-loop .6s var(--ease)}
.hdr-util .elementor-button-text::after{content:none}

/* ---------- 6. 卡片：上浮、图片慢推、标题扫线 ---------- */
.pcard-tpl{transition:translate .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.pcard-tpl:hover{translate:0 -4px;border-color:transparent}
.pcard-img,.pcard-img a{display:block;overflow:hidden}
.pcard-img img{transition:scale 1.2s var(--ease)}
.pcard-tpl:hover .pcard-img img{scale:1.06}
.pcard-title .elementor-heading-title a,.post-body p a,.post-body li a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.pcard-tpl:hover .pcard-title .elementor-heading-title a,.post-body p a:hover,.post-body li a:hover{background-size:100% 1px}
.post-body p a,.post-body li a{text-decoration:none;background-size:100% 1px;background-image:linear-gradient(var(--sg-apricot),var(--sg-apricot))}
.post-body p a:hover,.post-body li a:hover{background-image:linear-gradient(currentColor,currentColor)}

/* ---------- 7. 首页信任滚动条（.marquee，gen_templates.py 首页第 2 块） ---------- */
.marquee{overflow:hidden;padding:20px 0;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 48s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--sg-serif);font-style:italic;font-weight:500;font-size:26px;line-height:1.2;color:#fff;white-space:nowrap;padding:0 26px}
.marquee i{font-style:normal;color:var(--sg-primary);font-size:14px;align-self:center}
@keyframes marquee{to{transform:translateX(-50%)}}
@media(max-width:767px){.marquee span{font-size:20px;padding:0 18px}}

/* ---------- 8. Hero：内页副文与按钮在标题之后升起；首页轮播背景慢推、指示线随播放填满 ---------- */
@keyframes rise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes kb{from{transform:scale(1.1)}to{transform:scale(1)}}
@keyframes bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:no-preference){
  .hero .elementor-widget:not(.hero-title){animation:rise 1s var(--ease) both}
  .hero .elementor-widget.eyebrow{animation-delay:0s}
  .hero .hero-sub{animation-delay:.55s}
  .hero .elementor-widget-button{animation-delay:.7s}
  .hero-slides .swiper-slide-active .swiper-slide-bg{animation:kb 7s cubic-bezier(.25,.1,.25,1) both}
  .hero-slides .swiper-initialized .swiper-slide:not(.swiper-slide-active) :is(.elementor-slide-description,.elementor-slide-button){opacity:0;transform:translate3d(0,22px,0)}
  .hero-slides .swiper-slide-active :is(.elementor-slide-description,.elementor-slide-button){transition:opacity 1s var(--ease),transform 1s var(--ease)}
  .hero-slides .swiper-slide-active .elementor-slide-description{transition-delay:.55s}
  .hero-slides .swiper-slide-active .elementor-slide-button{transition-delay:.7s}
}
.hero-slides .swiper-pagination-bullet{position:relative;width:44px!important;height:14px!important;margin:0 5px!important;border-radius:0!important;opacity:1!important;
  background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) center/100% 2px no-repeat!important}
.hero-slides .swiper-pagination-bullet::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.hero-slides .swiper-pagination-bullet-active::after{animation:bar 6s linear forwards}
.hero-slides:hover .swiper-pagination-bullet-active::after{animation-play-state:paused}
@media(max-width:767px){.hero-slides .swiper-pagination-bullet{width:28px!important}}

/* ---------- 9. 页眉：吸顶后毛玻璃 + logo 轻缩（不改布局高度，免得页面跳动） ---------- */
.hdr-nav{transition:background-color .4s ease}
.hdr-logo img{transition:transform .5s var(--ease);transform-origin:0 50%}
.is-stuck .hdr-nav{background-color:rgba(255,255,255,.95)!important;-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px)}
@media(min-width:1025px){.is-stuck .hdr-logo img{transform:scale(.88)}}

/* ---------- 10. 下拉菜单 / 懒图 / 跨页过渡 / 阅读进度 / 情感带视差 ---------- */
@keyframes mm-in{from{opacity:0;transform:translate3d(0,-10px,0)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  .hdr-menu .e-n-menu-content>.e-con.e-active{animation:mm-in .4s var(--ease) both}
  @media(max-width:1024px){.hdr-menu .e-n-menu-toggle[aria-expanded=true]+.e-n-menu-wrapper{animation:mm-in .35s var(--ease) both}}
}
img.lz{opacity:0;transition:opacity .7s ease}
img.lz.ld{opacity:1}
@view-transition{navigation:auto}
.elementor-location-header{view-transition-name:site-header}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translate3d(0,14px,0)}}
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .5s var(--ease) .08s both}
@supports(animation-timeline:scroll()){
  body.single-post::after{content:"";position:fixed;top:0;left:0;right:0;height:3px;background:var(--sg-primary);transform-origin:0 50%;z-index:101;
    animation:bar linear both;animation-timeline:scroll(root)}
  @keyframes drift-bg{from{background-position:center 0%}to{background-position:center 45%}}
  .band-photo{animation:drift-bg linear both;animation-timeline:view()}
}

/* ---------- 11. 减少动态效果：一律关闭 ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .rv,.wi{opacity:1!important;transform:none!important}
  .rv-img img{scale:1!important;translate:none!important}
  .rv-img::before{display:none}
  .wi.ink{background-position:0 0!important}
  .marquee-track{flex-wrap:wrap;width:auto}
  @view-transition{navigation:none}
}