/* ============================================================
   JO — Interaction Upgrade  ·  interactions.css  v1
   ------------------------------------------------------------
   只升级交互，不改结构 / 不改文案 / 不改视觉语言：
     1. 项目卡片 Hover：图片 1.04、卡片微位移、辅助信息淡入、操作提示
     2. 鼠标跟随：极小幅度，只用 transform
     3. 当前项目指示器 01 / 06
     4. 项目进入过渡：点击 → 放大淡出 → 跳转
     5. 导航 Hover / Active
     6. 按钮 Hover / Active / Focus
     7. 自定义光标（仅桌面；触摸设备与 reduced-motion 关闭）
   ============================================================ */

/* ---------------------------------------------- 1. 项目卡片 */
.o-work_preview{position:relative}
.o-work_preview .o-work_preview-image img{
  transform:translate3d(var(--jo-mx,0px),var(--jo-my,0px),0) scale(var(--jo-s,1));
  transition:transform .42s cubic-bezier(.215,.61,.355,1);
}
.o-work_preview .o-work_preview-image_container{
  transition:transform .38s cubic-bezier(.215,.61,.355,1),opacity .34s ease-out;
}
.o-work_preview .o-work_preview-content{transition:transform .38s cubic-bezier(.215,.61,.355,1),opacity .3s ease-out}
.o-work_preview .o-work_preview-meta{transition:opacity .32s ease-out,transform .32s ease-out}
.o-work_preview .o-work_preview-title{
  transition:letter-spacing .34s cubic-bezier(.215,.61,.355,1),opacity .3s ease-out;
}
.o-work_preview .o-cta_link-arrow{
  opacity:0;transform:translate3d(-8px,0,0);
  transition:opacity .3s ease-out,transform .32s cubic-bezier(.215,.61,.355,1);
}
/* 无 hover 能力（触摸）：箭头常显，避免理解为缺失 */
@media (hover:none),(pointer:coarse){
  .o-work_preview .o-cta_link-arrow{opacity:1;transform:none}
  .o-work_preview .o-work_preview-meta{opacity:1}
}

@media (hover:hover) and (pointer:fine){
  .o-work_preview:hover .o-work_preview-image img{--jo-s:1.03}
  .o-work_preview:hover .o-work_preview-image_container{transform:translate3d(0,-6px,0)}
  .o-work_preview:hover .o-work_preview-content{transform:translate3d(0,-3px,0)}
  .o-work_preview:hover .o-work_preview-meta{opacity:1}
  /* Typography 参与交互：标题字距轻微增加 */
  .o-work_preview:hover .o-work_preview-title{letter-spacing:calc(var(--jo-ls-base,0em) + .022em)}
  /* 箭头：opacity 0 → 1，translateX(-8px) → 0 */
  .o-work_preview:hover .o-cta_link-arrow{opacity:1;transform:translate3d(0,0,0)}
}

/* 图片上的操作提示（纯样式层，不改动既有 HTML 文案） */
.o-work_preview-image_container::after{
  content:"View Case Study";
  position:absolute;left:1.6rem;bottom:1.6rem;z-index:3;
  padding:.9rem 1.4rem;
  font-family:var(--font);
  font-size:1.1rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(17,17,25,.82);
  opacity:0;transform:translate3d(0,8px,0);
  transition:opacity .3s ease-out,transform .34s cubic-bezier(.215,.61,.355,1);
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .o-work_preview:hover .o-work_preview-image_container::after{opacity:1;transform:translate3d(0,0,0)}
}

/* 点击项目 → 进入过渡（200–500ms，无黑屏 / 无 loading 页） */
.o-work_preview.is-launching{pointer-events:none}
.o-work_preview.is-launching .o-work_preview-image img{--jo-s:1.06}
.o-work_preview.is-launching .o-work_preview-image_container{
  transform:translate3d(0,-14px,0);opacity:.35;
}
.o-work_preview.is-launching .o-work_preview-content{opacity:.25}

/* ---------------------------------------------- 3. 当前项目指示器 */
.jo-proj-ind{
  position:fixed;right:2.8rem;bottom:2.8rem;z-index:120;
  display:none;align-items:baseline;gap:.5rem;
  padding:1rem 1.4rem;
  font-family:var(--font);
  font-size:1.1rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(17,17,25,.55);
  border:1px solid rgba(255,255,255,.16);
  pointer-events:none;
  opacity:0;transform:translate3d(0,10px,0);
  transition:opacity .32s ease-out,transform .32s cubic-bezier(.215,.61,.355,1);
}
.jo-proj-ind.is-on{opacity:1;transform:translate3d(0,0,0)}
.jo-proj-ind_num{font-variant-numeric:tabular-nums;font-size:1.4rem}
.jo-proj-ind_sep{opacity:.45}
.jo-proj-ind_total{opacity:.55;font-variant-numeric:tabular-nums}
.jo-proj-ind_name{
  margin-left:.8rem;padding-left:1rem;border-left:1px solid rgba(255,255,255,.22);
  font-weight:500;letter-spacing:.08em;text-transform:none;opacity:.75;
  max-width:22rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (min-width:60em){ .jo-proj-ind{display:flex} }

/* ---------------------------------------------- 5. 导航 Hover / Active */
.c-header-nav_item,.c-mobile_menu-nav_item{
  position:relative;
  transition:color .25s ease-out,transform .25s cubic-bezier(.215,.61,.355,1);
}
@media (hover:hover) and (pointer:fine){
  .c-header-nav_item:hover{transform:translate3d(4px,0,0)}
  .c-mobile_menu-nav_item:hover{transform:translate3d(4px,0,0)}
}
.c-header-nav_item::after{
  content:"";position:absolute;left:0;right:0;bottom:-.6rem;height:1px;
  background:currentColor;opacity:0;transform:scaleX(.4);transform-origin:left center;
  transition:opacity .28s ease-out,transform .32s cubic-bezier(.215,.61,.355,1);
}
.c-header-nav_item.is-active{color:var(--c-accent)}
.c-header-nav_item.is-active::after{opacity:.85;transform:scaleX(1)}

/* ---------------------------------------------- 6. 按钮 Hover / Active / Focus */
.o-button{transition:border-color .4s,transform .2s cubic-bezier(.215,.61,.355,1)}
@media (hover:hover) and (pointer:fine){
  .o-button:hover{transform:translate3d(0,-1px,0)}
}
.o-button:active{transform:translate3d(0,0,0)}
.o-button:focus-visible,
.c-header-nav_item:focus-visible,
.c-mobile_menu-nav_item:focus-visible,
.o-cta_link:focus-visible,
.o-work_preview-image_container:focus-visible{
  outline:2px solid currentColor;outline-offset:4px;
}
.end-next,.to-top,.proto-tab,.proto-chip,.proto-row{
  transition:transform .2s cubic-bezier(.215,.61,.355,1),background-color .2s ease-out,
             border-color .2s ease-out,color .2s ease-out,opacity .2s ease-out;
}
@media (hover:hover) and (pointer:fine){
  .end-next:hover{transform:translate3d(0,-1px,0)}
}
.end-next:active,.to-top:active,.proto-tab:active,.proto-chip:active{transform:translate3d(0,0,0)}

/* ---------------------------------------------- 7. 自定义光标（Dot + Ring） */
.jo-cursor{position:fixed;top:0;left:0;z-index:9998;pointer-events:none}
.jo-cursor .jo-cursor-dot,
.jo-cursor .jo-cursor-ring{
  position:fixed;top:0;left:0;border-radius:999px;opacity:0;
  will-change:transform;
  transition:opacity .24s ease-out,
             width .26s cubic-bezier(.215,.61,.355,1),
             height .26s cubic-bezier(.215,.61,.355,1),
             margin .26s cubic-bezier(.215,.61,.355,1),
             background-color .26s ease-out,border-color .26s ease-out;
}
.jo-cursor.is-on .jo-cursor-dot,
.jo-cursor.is-on .jo-cursor-ring{opacity:1}

/* Dot：7px，快速跟随 */
.jo-cursor .jo-cursor-dot{
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  background:var(--c-ink,#111);
  transform:translate3d(var(--jo-dx,-100px),var(--jo-dy,-100px),0);
}
/* Ring：32px，延迟跟随 → 极轻惯性，无拖尾 */
.jo-cursor .jo-cursor-ring{
  width:32px;height:32px;margin:-16px 0 0 -16px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(17,17,25,.30);background:transparent;
  transform:translate3d(var(--jo-rx,-100px),var(--jo-ry,-100px),0) scale(var(--jo-rs,1));
}
/* 点击：缩小 → 恢复 */
.jo-cursor.is-down .jo-cursor-ring{--jo-rs:.78}

/* 状态文字：VIEW / ZOOM / OPEN */
.jo-cursor .jo-cursor-label{
  font-family:var(--font);font-size:1rem;font-weight:700;letter-spacing:.18em;
  color:#fff;opacity:0;transform:scale(.92);
  transition:opacity .2s ease-out,transform .24s cubic-bezier(.215,.61,.355,1);
}

/* Navigation / Button：OPEN */
.jo-cursor.is-open .jo-cursor-ring{
  width:46px;height:46px;margin:-23px 0 0 -23px;
  background:rgba(17,17,25,.05);border-color:rgba(17,17,25,.24);
}
/* Project：VIEW */
.jo-cursor.is-view .jo-cursor-ring{
  width:72px;height:72px;margin:-36px 0 0 -36px;
  background:rgba(17,17,25,.90);border-color:transparent;
}
/* Image：ZOOM */
.jo-cursor.is-zoom .jo-cursor-ring{
  width:64px;height:64px;margin:-32px 0 0 -32px;
  background:rgba(17,17,25,.90);border-color:transparent;
}
.jo-cursor.is-view .jo-cursor-label,
.jo-cursor.is-zoom .jo-cursor-label{opacity:1;transform:scale(1)}
.jo-cursor.is-view .jo-cursor-dot,
.jo-cursor.is-zoom .jo-cursor-dot{opacity:0}

/* 深色区块 / 灯箱内：反相为浅色 */
.jo-cursor.is-invert .jo-cursor-dot{background:#fff}
.jo-cursor.is-invert .jo-cursor-ring{border-color:rgba(255,255,255,.42)}
.jo-cursor.is-invert.is-open .jo-cursor-ring{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.32)}

@media (hover:hover) and (pointer:fine){
  .jo-cursor-on,.jo-cursor-on *{cursor:none}
}
/* 触摸设备 / 粗指针：不显示自定义光标 */
@media (hover:none),(pointer:coarse){
  .jo-cursor{display:none !important}
}

/* ---------------------------------------------- 8. Hero Typography */
.js-welcome-tagline{
  transition:letter-spacing .45s cubic-bezier(.215,.61,.355,1),
             transform .5s cubic-bezier(.215,.61,.355,1);
}
.c-welcome-tagline .js-line--sub{transition:letter-spacing .45s cubic-bezier(.215,.61,.355,1)}
@media (hover:hover) and (pointer:fine){
  /* 字距 +0.03em（在原 --ls-tighter 基础上叠加，不写死数值） */
  .js-welcome-tagline:hover{letter-spacing:calc(var(--ls-tighter,-.02em) + .03em)}
  .js-welcome-tagline:hover .js-line--sub{letter-spacing:.14em}
}

/* ---------------------------------------------- 减少动画偏好 */
@media (prefers-reduced-motion:reduce){
  .js-welcome-tagline,.c-welcome-tagline .js-line--sub,
  .o-work_preview .o-work_preview-title{transition:none}
  .js-welcome-tagline:hover{letter-spacing:var(--ls-tighter,-.02em)}
  .jo-cursor{display:none !important}
  .o-work_preview .o-work_preview-image img{transition:none}
  .o-work_preview:hover .o-work_preview-image img{--jo-s:1.02}
  .o-work_preview:hover .o-work_preview-image_container,
  .o-work_preview:hover .o-work_preview-content{transform:none}
  .jo-proj-ind{transition:none}
}