/* ══════════════════════════════════════════════════════════════════
   🍮 JELLY 动效系统 —— 从 image2pro.top 实测提取并移植
   原站注释原文：「从 .seg 胶囊菜单提炼出的动效系统，供全站按钮/弹层/卡片复用。
   核心手感三件套：
   1) 果冻回弹 keyframes（jellyPop / jellySquash）
   2) 展开专用果冻挤压（jellySquash，配合 grid 0fr→1fr）
   3) 液态高光扫过（jellySheen）」

   关键认知：果冻感 ≠ 等比 scale
   真正的果冻是 scaleY 与 scaleX **反向**变化：
     压扁时 scaleY(.72) + scaleX(1.015)  ← 体积守恒的错觉
   等比缩放只会「变小」，不会「Q弹」。

   原站四档缓动（实测值，不是猜的）：
     --jelly-ease      cubic-bezier(.22,1.4,.36,1)   果冻弹入
     --jelly-ease-soft cubic-bezier(.24,1.6,.35,1)   hover 上浮
     --jelly-ease-tick cubic-bezier(.3,1.6,.5,1)     打勾
   ══════════════════════════════════════════════════════════════════ */
#exStudioRoot{
  --jelly-ease:cubic-bezier(.22,1.4,.36,1);
  --jelly-ease-soft:cubic-bezier(.24,1.6,.35,1);
  --jelly-ease-tick:cubic-bezier(.3,1.6,.5,1);
  --jelly-dur:.62s;
  --jelly-dur-fast:.45s;
}

/* ---------- 一、按压回弹（所有可点元素）----------
   :active 负责「压下去」，keyframe 负责「弹回来」。
   两者不能共用一个 transition —— 按下要快 (.12s ease)，
   松开要弹 (.45s 带 overshoot)。 */
.jelly-tap{
  transition:transform var(--jelly-dur-fast) var(--jelly-ease-soft);
  will-change:transform;
}
.jelly-tap:active{
  transform:scale(.94);
  transition:transform .12s ease;
}

/* ---------- 二、果冻挤压 keyframes ----------
   这是「展开/收起」的核心。注意 scaleY 与 scaleX 反向。 */
@keyframes jellySquash{
  0%  {transform:scaleY(.72)  scaleX(1.015);}
  38% {transform:scaleY(1.06) scaleX(.992);}
  62% {transform:scaleY(.975) scaleX(1.004);}
  82% {transform:scaleY(1.012) scaleX(.998);}
  100%{transform:scaleY(1)    scaleX(1);}
}

/* ---------- 三、果冻弹入（弹层/卡片出现）---------- */
@keyframes jellyPop{
  0%  {opacity:0;transform:translate(var(--jelly-tx,-50%),var(--jelly-ty,-46%)) scale(.90);}
  55% {opacity:1;transform:translate(var(--jelly-tx,-50%),var(--jelly-ty,-50%)) scale(1.03);}
  78% {transform:translate(var(--jelly-tx,-50%),var(--jelly-ty,-50%)) scale(.985);}
  100%{opacity:1;transform:translate(var(--jelly-tx,-50%),var(--jelly-ty,-50%)) scale(1);}
}
.jelly-pop.show{animation:jellyPop var(--jelly-dur) var(--jelly-ease);}

/* ---------- 四、液态高光扫过（展开瞬间一道光）---------- */
.jelly-sheen{position:relative;overflow:hidden;}
.jelly-sheen::after{
  content:"";position:absolute;top:0;left:-60%;width:55%;height:100%;
  pointer-events:none;z-index:5;opacity:0;
  background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.22) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
}
.jelly-sheen.show::after,
.jelly-sheen.open::after{animation:jellySheen .9s cubic-bezier(.3,.7,.3,1) .05s;}
@keyframes jellySheen{
  0%  {transform:translate3d(0,0,0) skewX(-18deg);opacity:0;}
  20% {opacity:1;}
  100%{transform:translate3d(345.4545%,0,0) skewX(-18deg);opacity:0;}
}

/* ---------- 五、折叠容器（grid 0fr→1fr 弹性展开）----------
   比 max-height 更准，且能触发内部挤压动画。 */
.jelly-fold{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows var(--jelly-dur) var(--jelly-ease),
             opacity .28s ease .04s;
  will-change:grid-template-rows;
}
.jelly-fold.open{grid-template-rows:1fr;opacity:1;}
.jelly-fold-inner{overflow:hidden;min-height:0;transform-origin:top center;}
.jelly-fold.open .jelly-fold-inner{
  animation:jellySquash var(--jelly-dur) var(--jelly-ease);
}

/* ---------- 六、列表项逐条弹入（错峰）---------- */
.jelly-item{
  transform:translateY(-9px) scale(.96);opacity:0;
  transition:background .22s ease,transform .16s ease,opacity .16s ease;
}
.jelly-fold.open .jelly-item{
  transform:translateY(0) scale(1);opacity:1;
  transition:
    background .22s ease,
    transform .5s var(--jelly-ease-soft) var(--d,0s),
    opacity .38s ease var(--d,0s);
}

/* ---------- 七、比例切换短促回弹（原站 ratioTapBounce）---------- */
@keyframes ratioTapBounce{
  0%  {transform:scale(1);}
  40% {transform:scale(.90);}
  70% {transform:scale(1.04);}
  100%{transform:scale(1);}
}
.jelly-bounce{animation:ratioTapBounce .34s cubic-bezier(.3,1.6,.5,1);}

/* ---------- 八、打勾弹入（原站 jellyTick）---------- */
@keyframes jellyTick{
  0%  {transform:scale(.5);opacity:0;}
  100%{transform:scale(1);opacity:1;}
}
.jelly-tick{animation:jellyTick .35s cubic-bezier(.3,1.6,.5,1);}

/* ---------- 九、展开菜单专用：结合 grid 折叠 + 挤压 + 扫光 ---------- */
/* 菜单：grid 行高从 0fr → 1fr 弹性展开。
   注意三个必需条件，缺一个就会「展开但看不见」：
   1) 容器的 padding 必须放在内层，否则 0fr 时 padding 仍占位
   2) 内层必须 overflow:hidden + min-height:0
   3) 行高用 0fr/1fr，不能用 auto（auto 无过渡） */
.st-ws-menu{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transform:translateY(-8px) scale(.97);
  transform-origin:top left;
  transition:
    grid-template-rows var(--jelly-dur) var(--jelly-ease),
    opacity .30s ease .04s,
    transform .45s var(--jelly-ease-soft);
  pointer-events:none;
  padding:0!important;      /* 关键：padding 移到内层 */
  width:270px;              /* 锁死宽度，grid 默认 stretch 会拉满 */
  justify-items:stretch;
}
.st-ws-menu.is-open{
  grid-template-rows:1fr;
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.st-ws-menu > .st-ws-menu-inner{
  overflow:hidden;
  min-height:0;
  transform-origin:top center;
  padding:8px;              /* 内层承载 padding */
  width:100%;
  box-sizing:border-box;
}
/* 菜单项不能被 grid 压缩到 0 宽 */
.st-ws-menu .st-ws-item{
  min-width:0;
  width:100%;
}
.st-ws-menu .st-ws-txt{
  min-width:0;
  flex:1;
}
.st-ws-menu .st-ws-item b,
.st-ws-menu .st-ws-item small{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.st-ws-menu.is-open > .st-ws-menu-inner{
  animation:jellySquash var(--jelly-dur) var(--jelly-ease);
}
/* 展开时一道光扫过 */
.st-ws-menu.is-open::after{
  animation:jellySheen .9s cubic-bezier(.3,.7,.3,1) .05s;
}

/* ---------- 十、模型下拉：果冻弹入 ---------- */
.st-model-menu{
  transform:translateY(10px) scale(.90);
  opacity:0;
  transition:
    opacity .28s ease,
    transform var(--jelly-dur) var(--jelly-ease);
}
.st-model-menu.is-open{
  transform:none;
  opacity:1;
}

/* ---------- 十一、结果卡：果冻弹入（替代旧的 exRise）---------- */
.st-result{
  animation:jellyPop2 .62s var(--jelly-ease) both;
}
@keyframes jellyPop2{
  0%  {opacity:0;transform:scale(.90) translateY(14px);}
  55% {opacity:1;transform:scale(1.025) translateY(0);}
  78% {transform:scale(.99) translateY(0);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}

/* ---------- 十二、首页 hero 首次进场：果冻弹入 ---------- */
.st-hero{
  animation:jellyPop2 .7s var(--jelly-ease) both;
}

/* ---------- 十三、提示词胶囊 hover：加一次轻微挤压 ---------- */
.st-hint:hover{animation:jellySquash .5s var(--jelly-ease);}
.st-mini:hover{animation:jellySquash .5s var(--jelly-ease);}

/* 减少动效偏好：全部降级 */
@media (prefers-reduced-motion:reduce){
  .jelly-tap,.jelly-sheen,.jelly-fold,.jelly-item,
  .st-ws-menu,.st-model-menu,.st-result,.st-hero,
  .st-hint:hover,.st-mini:hover{
    animation:none!important;
    transition-duration:.01ms!important;
  }
}