/* ============================================================
   结花小站 · 页内转场 v3.2（收尾圆滑 + 流畅度精修 · 主人钦命）
   三套形制彼此分明：
     切换分类 = 菱形擦过（反旋收拢，宝石棱光）
     点开文章 = 圆光胀收（光聚一点，星屑迸开）
     回到首页 = 圆盘旋甩（流光旋面，缩没退场）
   v3 要点：① 幕件拆除前整体 240ms 柔光淡出，半空之物不再被硬摘
            ② 花瓣星屑寿命一律收在淡出之前
            ③ 旋盘缩到 0 才退场（v2 停在 15% 会被整块摘掉）
            ④ 立绘退场加"预备动作"，末帧归于透明
            ⑤ 新页内容错峰现身，缓动换柔
   ============================================================ */

/* 幕面同一张皮：纯色 + 樱点纹理（任何尺寸下观感一致，交棒无缝） */
.tx-skin,.tx-cover{
  background-color:#ffe6f0;
  background-image:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.92) 0 3px,transparent 4px),
    radial-gradient(circle at 72% 30%,rgba(255,255,255,.86) 0 2.4px,transparent 3.4px),
    radial-gradient(circle at 38% 62%,rgba(255,255,255,.82) 0 2.8px,transparent 3.8px),
    radial-gradient(circle at 84% 78%,rgba(255,255,255,.86) 0 2.2px,transparent 3.2px),
    radial-gradient(circle at 12% 88%,rgba(255,255,255,.78) 0 2.6px,transparent 3.6px);
  background-size:180px 180px
}

/* ── 素幕：转场幕先于内容出现（head 内联挂 tx-boot，纯 CSS 压顶） ── */
html.tx-boot::before{
  content:"";position:fixed;inset:0;z-index:2147483000;
  background-color:#ffe6f0;
  background-image:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.92) 0 3px,transparent 4px),
    radial-gradient(circle at 72% 30%,rgba(255,255,255,.86) 0 2.4px,transparent 3.4px),
    radial-gradient(circle at 38% 62%,rgba(255,255,255,.82) 0 2.8px,transparent 3.8px),
    radial-gradient(circle at 84% 78%,rgba(255,255,255,.86) 0 2.2px,transparent 3.2px),
    radial-gradient(circle at 12% 88%,rgba(255,255,255,.78) 0 2.6px,transparent 3.6px);
  background-size:180px 180px;
  animation:tx-boot-guard 2.4s ease-in forwards
}
@keyframes tx-boot-guard{0%,86%{opacity:1}100%{opacity:0;visibility:hidden}}

html.tx-lock{overflow:hidden}

/* ── 转场层 ── */
#tx-fx{position:fixed;inset:0;z-index:9998;pointer-events:none;overflow:hidden;contain:layout paint}
/* v3 · 拆幕前的柔光尾巴：半空的花瓣星屑随层淡出，绝不硬拔 */
#tx-fx.fade{animation:tx-fx-fade .34s cubic-bezier(.33,0,.18,1) forwards}
@keyframes tx-fx-fade{from{opacity:1}to{opacity:0}}

.tx-cover{position:absolute;z-index:1;will-change:transform,opacity}

/* 菱形（分类）· ::before 是宝石棱光 */
#tx-fx .tx-diamond{left:50%;top:50%;width:152vmax;height:152vmax;margin:-76vmax 0 0 -76vmax;
  border-radius:5vmax;border:3px solid rgba(255,255,255,.9);
  box-shadow:0 0 46px rgba(255,150,190,.45);transform:rotate(45deg) scale(0)}
#tx-fx .tx-diamond::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.5) 0 12%,rgba(255,255,255,0) 34%,rgba(255,255,255,.34) 60%,rgba(255,255,255,0) 82%);
  mix-blend-mode:soft-light}
/* 圆光（文章）· ::after 是聚在圆心的柔光，随圆收拢聚成一点 */
/* 圆光改作真圆盘：transform 缩放（合成器友好），圆心定在 50%/56%；
   圆点纹理按元素偏移做位相补偿，满屏一刻与素幕逐像素对齐，交棒无缝 */
#tx-fx .tx-iris{left:50%;top:56%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;
  border-radius:50%;transform:scale(0);
  background-position:calc(85vmax - 50vw) calc(85vmax - 56vh)}
#tx-fx .tx-iris::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.95) 0 6%,rgba(255,205,226,.5) 26%,rgba(255,255,255,0) 55%);
  opacity:.85}
/* 旋盘（首页）· ::after 是缓转的流光 */
#tx-fx .tx-spin{left:50%;top:50%;width:168vmax;height:168vmax;margin:-84vmax 0 0 -84vmax;
  border-radius:50%;border:4px solid rgba(255,255,255,.85);
  background-position:calc(84vmax - 50vw) calc(84vmax - 50vh);
  box-shadow:0 0 60px rgba(255,150,190,.5);transform:rotate(-135deg) scale(.15)}
#tx-fx .tx-spin::after{content:"";position:absolute;inset:-2%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 20deg,rgba(255,255,255,.5),rgba(255,214,232,0) 26%,rgba(255,255,255,.4) 52%,rgba(255,214,232,0) 78%,rgba(255,255,255,.5));
  mix-blend-mode:soft-light;animation:tx-sheen 1.6s linear infinite}
@keyframes tx-sheen{to{transform:rotate(360deg)}}

/* 星屑与光环（文章迸开）· 中途一记闪，落点更轻盈 */
.tx-spark{position:absolute;z-index:4;width:9px;height:9px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#fff 0 34%,rgba(255,214,232,.9) 60%,rgba(255,214,232,0) 72%);
  animation:tx-spark-out var(--d,.9s) cubic-bezier(.2,.7,.3,1) var(--dl,0s) forwards}
@keyframes tx-spark-out{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.4)}
  16%{opacity:1}
  52%{opacity:.9;transform:translate3d(calc(var(--sx)*.55),calc(var(--sy)*.55),0) scale(1.25)}
  100%{opacity:0;transform:translate3d(var(--sx),var(--sy),0) scale(.9)}
}
.tx-ring{position:absolute;z-index:4;left:50%;top:56%;width:40px;height:40px;margin:-20px 0 0 -20px;
  border-radius:50%;border:3px solid rgba(255,255,255,.95);opacity:0;
  animation:tx-ring-out .8s cubic-bezier(.2,.6,.25,1) forwards}
@keyframes tx-ring-out{0%{opacity:.95;transform:scale(.3)}55%{opacity:.5}100%{opacity:0;transform:scale(24)}}

/* 立绘 */
.tx-girl{position:absolute;z-index:3;display:block;border:0;opacity:0;will-change:transform;
  filter:drop-shadow(0 7px 15px rgba(190,110,140,.24))}
.tx-girl{backface-visibility:hidden}
#tx-fx.k-cat .tx-girl{right:3vw;bottom:0;height:min(56vh,500px);width:auto;transform:translateX(-124%)}
#tx-fx.k-post .tx-girl{left:0;right:0;margin:0 auto;bottom:0;height:min(64vh,580px);width:auto;transform:translateY(116%)}
#tx-fx.k-home .tx-girl{left:0;right:0;margin:0 auto;bottom:0;width:min(52vw,620px);height:auto;transform:translateX(124%)}

/* 花瓣：分类横扫、文章/首页飘落 · 中途摆一笔，落姿更活 */
.tx-petal{position:absolute;z-index:5;width:var(--sz,12px);height:calc(var(--sz,12px)*.85);
  border-radius:70% 8% 70% 8%;opacity:0;
  background:linear-gradient(140deg,#ffc7dc,#ff9dbb);
  filter:drop-shadow(0 1px 2px rgba(230,140,175,.35))}
.tx-petal.drop{animation:tx-fall var(--d,1.5s) cubic-bezier(.32,.4,.55,1) var(--dl,0s) forwards}
.tx-petal.fly{animation:tx-fly var(--d,1.4s) cubic-bezier(.3,.45,.5,1) var(--dl,0s) forwards}
@keyframes tx-fall{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}
  12%{opacity:.95}
  46%{transform:translate3d(calc(var(--x)*.38 - 16px),calc(var(--y)*.4),0) rotate(calc(var(--r)*.5))}
  80%{opacity:.8}
  100%{opacity:0;transform:translate3d(var(--x),var(--y),0) rotate(var(--r))}
}
@keyframes tx-fly{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}
  12%{opacity:.95}
  55%{transform:translate3d(calc(var(--fx)*.5),calc(var(--y)*.75 - 26px),0) rotate(calc(var(--r)*.6))}
  100%{opacity:0;transform:translate3d(var(--fx),var(--y),0) rotate(var(--r))}
}

/* ══════════ 一、切换分类 · 菱形擦过 ══════════ */
#tx-fx.lv.k-cat.go .tx-diamond{animation:tx-di-cover .48s cubic-bezier(.56,.02,.24,1) forwards}
#tx-fx.lv.k-cat.go .tx-girl{animation:tx-trot-in .54s cubic-bezier(.24,1.12,.32,1) .04s forwards}
@keyframes tx-di-cover{from{transform:rotate(45deg) scale(0)}to{transform:rotate(45deg) scale(1)}}
@keyframes tx-trot-in{
  0%{opacity:0;transform:translateX(-124%) rotate(-6deg)}
  16%{opacity:1}
  100%{opacity:1;transform:translateX(0) rotate(0)}
}
/* 入场：菱形反旋着收向中心，新页自中央现出；她蹦两下、先往左沉半拍再溜走 */
#tx-fx.en.k-cat .tx-diamond{transform:rotate(45deg) scale(1)}
#tx-fx.en.k-cat .tx-girl{opacity:1;transform:translateX(0)}
#tx-fx.en.k-cat.go .tx-diamond{animation:tx-di-open .58s cubic-bezier(.45,.02,.2,1) .08s forwards}
#tx-fx.en.k-cat.go .tx-girl{animation:tx-hop .3s ease .16s both,tx-hop .26s ease .54s both,tx-dash-right .5s cubic-bezier(.6,.02,.86,.42) .94s both}
@keyframes tx-di-open{
  0%{transform:rotate(45deg) scale(1);opacity:1}
  60%{opacity:1}
  100%{transform:rotate(74deg) scale(0);opacity:.2}
}
@keyframes tx-hop{0%{transform:translateY(0)}42%{transform:translateY(-17px) rotate(-2deg)}100%{transform:translateY(0)}}
@keyframes tx-dash-right{
  0%{opacity:1;transform:translateX(0) rotate(0)}
  16%{opacity:1;transform:translateX(-3.5%) rotate(-2.5deg)}
  100%{opacity:0;transform:translateX(128vw) rotate(13deg)}
}

/* ══════════ 二、点开文章 · 圆光胀收 ══════════ */
#tx-fx.lv.k-post.go .tx-iris{animation:tx-ir-cover .52s cubic-bezier(.56,.02,.24,1) forwards}
#tx-fx.lv.k-post.go .tx-girl{animation:tx-pop-in .56s cubic-bezier(.24,1.14,.32,1) .08s forwards}
@keyframes tx-ir-cover{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes tx-pop-in{0%{opacity:0;transform:translateY(116%)}14%{opacity:1}100%{opacity:1;transform:translateY(0)}}
/* 入场：她先探出来，圆光往中心收拢聚成一点光，收时迸一圈星屑 */
#tx-fx.en.k-post .tx-iris{transform:scale(1)}
#tx-fx.en.k-post.go .tx-iris{animation:tx-ir-open .66s cubic-bezier(.5,.02,.18,1) .44s forwards}
#tx-fx.en.k-post.go .tx-girl{animation:tx-rise .58s cubic-bezier(.24,1.14,.32,1) .06s both,tx-wiggle .52s ease .88s both,tx-drop-out .46s cubic-bezier(.6,.02,.86,.42) 1.40s both}
@keyframes tx-ir-open{0%{transform:scale(1);opacity:1}55%{opacity:1}100%{transform:scale(0);opacity:.92}}
@keyframes tx-rise{0%{opacity:0;transform:translateY(116%) scale(.97)}22%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes tx-wiggle{0%{transform:translateY(0) rotate(0)}25%{transform:translateY(-4px) rotate(-3.5deg)}55%{transform:translateY(0) rotate(3.5deg)}80%{transform:translateY(-2px) rotate(-1.5deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes tx-drop-out{
  0%{opacity:1;transform:translateY(0)}
  18%{opacity:1;transform:translateY(-2.5%) rotate(1.2deg)}
  100%{opacity:0;transform:translateY(120%) rotate(-3deg)}
}

/* ══════════ 三、回到首页 · 圆盘旋甩 ══════════ */
#tx-fx.lv.k-home.go .tx-spin{animation:tx-sp-cover .5s cubic-bezier(.5,.02,.28,1) forwards}
#tx-fx.lv.k-home.go .tx-girl{animation:tx-slide-in .56s cubic-bezier(.24,1.1,.34,1) .1s forwards}
@keyframes tx-sp-cover{from{transform:rotate(-135deg) scale(.15)}to{transform:rotate(0deg) scale(1)}}
@keyframes tx-slide-in{0%{opacity:0;transform:translateX(124%) rotate(4deg)}18%{opacity:1}100%{opacity:1;transform:translateX(0) rotate(0)}}
/* 入场：圆盘带流光反向甩出、缩没为止（v2 停 15% 会被硬摘，v3 修）；她歪头一笑再往左让开 */
#tx-fx.en.k-home .tx-spin{transform:rotate(0deg) scale(1)}
#tx-fx.en.k-home.go .tx-spin{animation:tx-sp-open .62s cubic-bezier(.42,.02,.18,1) .12s forwards}
#tx-fx.en.k-home .tx-girl{opacity:0;transform:translateX(0)}
#tx-fx.en.k-home.go .tx-girl{animation:tx-show .34s ease .04s both,tx-tilt .62s ease .5s both,tx-slide-out .5s cubic-bezier(.6,.02,.86,.42) 1.18s both}
@keyframes tx-sp-open{
  0%{transform:rotate(0deg) scale(1);opacity:1}
  55%{opacity:1}
  100%{transform:rotate(230deg) scale(0);opacity:0}
}
@keyframes tx-show{from{opacity:0}to{opacity:1}}
@keyframes tx-tilt{0%{transform:rotate(0)}30%{transform:rotate(-4deg) translateY(-3px)}65%{transform:rotate(2.8deg)}100%{transform:rotate(0)}}
@keyframes tx-slide-out{
  0%{opacity:1;transform:translateX(0)}
  16%{opacity:1;transform:translateX(2.5%) rotate(1.5deg)}
  100%{opacity:0;transform:translateX(-130%) rotate(-7deg)}
}

/* ── 新页内容错峰上浮现身 / 旧页轻轻退后 ── */
html.tx-reveal .topbar{animation:tx-cin .56s cubic-bezier(.16,.74,.24,1) .02s both}
html.tx-reveal .wrap{animation:tx-cin .68s cubic-bezier(.16,.74,.24,1) .1s both}
html.tx-reveal .site-footer{animation:tx-cin .72s cubic-bezier(.16,.74,.24,1) .18s both}
@keyframes tx-cin{from{opacity:0;transform:translateY(12px) scale(.998)}to{opacity:1;transform:none}}
html.tx-leave .topbar,html.tx-leave .wrap,html.tx-leave .site-footer{
  transition:opacity .34s ease,transform .34s ease;opacity:.5;transform:scale(.992)}

/* ── 小屏 ── */
@media (max-width:560px){
  #tx-fx.k-cat .tx-girl{height:min(44vh,360px);right:1vw}
  #tx-fx.k-post .tx-girl{height:min(52vh,420px)}
  #tx-fx.k-home .tx-girl{width:min(84vw,420px);height:auto;left:0;right:0;margin:0 auto}
  .tx-petal{--sz:10px}
  .tx-spark{width:7px;height:7px}
}

/* ── 尊重要求减少动效的访客 ── */
@media (prefers-reduced-motion:reduce){
  html.tx-boot::before{animation:none}
  #tx-fx,.tx-cover,.tx-girl,.tx-petal,.tx-spark,.tx-ring{animation:none!important}
  #tx-fx .tx-cover::before,#tx-fx .tx-cover::after{animation:none!important}
  html.tx-reveal .topbar,html.tx-reveal .wrap,html.tx-reveal .site-footer{animation:none}
  html.tx-leave .topbar,html.tx-leave .wrap,html.tx-leave .site-footer{transition:none;opacity:1;transform:none}
}