/* KAYOO 官网 · 企业历程「攀登山峰」v3 · 写实摄影 + 极简排版（jy- 前缀命名空间） */

/* 隐藏 React 原时间轴（保留 React 树，避免 reconcile 冲突） */
#timeline .container-1440 > *:not(.jy){display:none !important}

.jy{
  --jy-crimson:#A0252E;
  --jy-ink:#221C18;
  --jy-ink2:rgba(34,28,24,.68);
  --jy-ink3:rgba(34,28,24,.44);
  --jy-serif:Georgia,'Times New Roman','Songti SC','STSong',serif;
  padding-top:8px;
}

/* ── 全出血照片舞台 ── */
.jy-stage{
  position:relative;margin:0 calc(50% - 50vw);
  height:min(56.25vw,860px);min-height:480px;width:auto;
  overflow:hidden;background:#EFE7E0;
}
.jy-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center bottom;
  opacity:0;transform:scale(1.045);
  transition:opacity 1.6s ease,transform 3.2s cubic-bezier(.22,.6,.3,1);
}
.jy-go .jy-img{opacity:1;transform:scale(1)}
/* 四周羽化：照片边缘融入页面底色，任何分辨率都不生硬 */
.jy-fade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(246,239,232,.92) 0%, rgba(246,239,232,0) 9%),
    linear-gradient(0deg,  rgba(246,239,232,.78) 0%, rgba(246,239,232,0) 11%),
    linear-gradient(270deg,rgba(246,239,232,.85) 0%, rgba(246,239,232,0) 7%),
    linear-gradient(90deg, rgba(246,239,232,.55) 0%, rgba(246,239,232,0) 5%);
}
.jy-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}

/* ── 路径：细绯红线沿山势描画 ── */
.jy-trail{
  stroke:var(--jy-crimson);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 3s cubic-bezier(.45,.05,.35,1) .35s;
  filter:drop-shadow(0 1px 6px rgba(160,37,46,.28));
}
.jy-go .jy-trail{stroke-dashoffset:0}
.jy-noanim .jy-trail{transition:none;stroke-dashoffset:0}

/* ── 里程碑：发丝圈 + 小年份 ── */
.jy-m{cursor:pointer}
.jy-ring,.jy-year-tag{
  opacity:0;transform:translateY(10px);
  transition:opacity .8s ease,transform .9s cubic-bezier(.22,.65,.3,1);
}
.jy-in{opacity:1;transform:none}
.jy-noanim .jy-ring,.jy-noanim .jy-year-tag{transition:none;opacity:1;transform:none}

.jy-ring{
  fill:rgba(252,249,245,.92);stroke:rgba(34,28,24,.4);stroke-width:1.3;
  vector-effect:non-scaling-stroke;
  transition:stroke .3s ease,r .3s ease,fill .3s ease,opacity .8s ease,transform .9s cubic-bezier(.22,.65,.3,1);
}
.jy-dot{fill:rgba(34,28,24,.55);transition:fill .3s ease}
.jy-year-tag{
  font-family:var(--jy-serif);font-weight:500;letter-spacing:.14em;
  fill:rgba(34,28,24,.78);
  transition:fill .3s ease,opacity .8s ease,transform .9s cubic-bezier(.22,.65,.3,1);
}
.jy-m:hover .jy-ring{stroke:var(--jy-crimson)}
.jy-m:hover .jy-year-tag{fill:var(--jy-crimson)}
.jy-m.on .jy-ring{stroke:var(--jy-crimson);fill:#FFFFFF}
.jy-m.on .jy-dot{fill:var(--jy-crimson)}
.jy-m.on .jy-year-tag{fill:var(--jy-crimson);font-weight:700}

/* 未来：虚线幽灵圈 + 星 */
.jy-ring-f{fill:rgba(252,249,245,.55);stroke:rgba(34,28,24,.45);stroke-width:1.2;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.jy-star{opacity:0;transition:opacity 1.4s ease 2.2s}
.jy-go .jy-star{opacity:1;animation:jyTwinkle 3.4s ease-in-out 2.2s infinite}
@keyframes jyTwinkle{0%,100%{opacity:.35}50%{opacity:1}}
.jy-m.jy-future.on .jy-ring-f{stroke:var(--jy-crimson)}

/* ── 登山者：一点绯红微光 ── */
.jy-walker{
  fill:var(--jy-crimson);opacity:0;
  filter:drop-shadow(0 0 6px rgba(160,37,46,.75));
  transition:opacity .8s ease .5s;
}
.jy-go .jy-walker{opacity:1;animation:jyPulse 2.6s ease-in-out 3.6s infinite}
@keyframes jyPulse{0%,100%{filter:drop-shadow(0 0 5px rgba(160,37,46,.6))}50%{filter:drop-shadow(0 0 12px rgba(160,37,46,.95))}}
.jy-noanim .jy-walker{transition:none;opacity:1}

/* ── 左上文字：极简编辑排版（压在照片天空留白上）── */
.jy-copy{
  position:absolute;z-index:2;
  left:clamp(24px,6.5vw,110px);top:clamp(28px,9vh,96px);
  width:min(420px,46%);
  color:var(--jy-ink);
}
.jy-eyebrow{
  display:flex;align-items:center;gap:14px;
  font-size:11.5px;font-weight:500;letter-spacing:.32em;
  color:var(--jy-crimson);margin:0 0 18px;
}
.jy-el{display:inline-block;width:44px;height:1px;background:rgba(160,37,46,.45)}
.jy-heading{
  margin:0 0 34px;font-size:clamp(26px,3vw,42px);font-weight:300;
  letter-spacing:.14em;line-height:1.25;color:var(--jy-ink);
}
.jy-card{
  border-left:1px solid rgba(34,28,24,.22);
  padding-left:26px;
  transition:opacity .18s ease,transform .18s ease;
}
.jy-card.jy-swap{opacity:0;transform:translateY(8px)}
.jy-year{
  font-family:var(--jy-serif);font-size:clamp(44px,4.6vw,68px);
  font-weight:400;line-height:1;letter-spacing:.02em;
  margin-bottom:16px;color:var(--jy-ink);
}
.jy-is-future .jy-year{color:var(--jy-crimson)}
.jy-rule{width:36px;height:1px;background:rgba(160,37,46,.5);margin-bottom:18px}
.jy-title{margin:0 0 10px;font-size:19px;font-weight:500;letter-spacing:.08em}
.jy-desc{margin:0;font-size:13.5px;font-weight:300;line-height:2;color:var(--jy-ink2);letter-spacing:.03em}

/* ── 移动端：文案在上（纸色底），竖版照片在下 ── */
@media (max-width:760px){
  .jy-stage{height:125vw;min-height:0;margin:0 calc(50% - 50vw)}
  .jy-fade{background:/n    linear-gradient(180deg, rgba(246,239,232,.92) 0%, rgba(246,239,232,0) 8%),
    linear-gradient(0deg,  rgba(246,239,232,.78) 0%, rgba(246,239,232,0) 9%)}
  .jy-copy{position:static;width:auto;padding:8px 24px 34px}
  .jy-heading{margin-bottom:26px}
  .jy-year{font-size:44px;margin-bottom:12px}
  .jy-desc{font-size:13px}
  .jy-svg text{letter-spacing:.1em}
}

/* 尊重系统减弱动效 */
@media (prefers-reduced-motion:reduce){
  .jy-img,.jy-trail,.jy-ring,.jy-year-tag,.jy-walker{transition:none!important;animation:none!important}
  .jy-img{opacity:1;transform:none}
  .jy-trail{stroke-dashoffset:0}
  .jy-ring,.jy-year-tag,.jy-walker{opacity:1;transform:none}
}
