/* ============================================================
   travel.css — 行迹（Travel Notes）· 旋转城市画廊 / 暗夜电影
   滚动驱动旋转楼梯；卡片为玻璃质感照片；螺旋分离 + 呼吸。
   ============================================================ */
:root{
  --bg:#fbeef1; --bg-2:#f5dde6;
  --surface:rgba(255,255,255,.55); --surface-2:rgba(255,255,255,.8);
  --ink:#5a2e42; --ink-soft:rgba(90,46,66,.8); --ink-faint:rgba(90,46,66,.52);
  --accent:#e8638f; --accent-2:#c95a7f; --accent-ink:#ffffff;
  --line:rgba(90,46,66,.14); --line-strong:rgba(90,46,66,.28);
  --font-display:"Fraunces","Noto Serif SC",Georgia,"Songti SC",serif;
  --font-serif:"Noto Serif SC",Georgia,"Songti SC",serif;
  --font-sans:"Inter","Noto Sans SC",system-ui,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
body{background:var(--bg);color:var(--ink)}
.vignette{display:block;background:radial-gradient(120% 90% at 50% 30%,transparent 62%,rgba(120,60,90,.16) 100%)}
.grain{opacity:.06}

/* ---------- 背景：星尘 / 光晕 / 光环 ---------- */
.tv-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(90% 70% at 50% 8%,rgba(255,183,201,.6),transparent 62%),
    radial-gradient(70% 60% at 82% 88%,rgba(255,200,178,.55),transparent 60%),
    radial-gradient(60% 60% at 12% 78%,rgba(255,150,180,.42),transparent 58%),
    var(--bg)}
.tv-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.tv-glow-a{width:46vw;height:46vw;top:-12%;left:-8%;background:radial-gradient(circle at 40% 40%,rgba(255,150,185,.5),transparent 66%);animation:tvWashA 22s ease-in-out infinite}
.tv-glow-b{width:52vw;height:52vw;bottom:-16%;right:-10%;background:radial-gradient(circle at 50% 50%,rgba(255,190,158,.5),transparent 66%);animation:tvWashB 28s ease-in-out infinite}
.tv-glow-c{width:30vw;height:30vw;top:42%;left:54%;background:radial-gradient(circle at 50% 50%,rgba(255,158,190,.45),transparent 66%);animation:tvWashC 20s ease-in-out infinite}
@keyframes tvWashA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,5vh) scale(1.12)}}
@keyframes tvWashB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,-5vh) scale(1.08)}}
@keyframes tvWashC{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-5vw,3vh) rotate(14deg)}}

.tv-ring{position:absolute;border-radius:50%;border:1px solid rgba(90,46,66,.14);opacity:.6}
.tv-ring-a{width:64vw;height:64vw;left:18vw;top:14vh;animation:tvSpin 48s linear infinite}
.tv-ring-b{width:88vw;height:88vw;left:6vw;top:2vh;border-color:rgba(232,99,143,.16);animation:tvSpin 80s linear infinite reverse}
@keyframes tvSpin{to{transform:rotate(360deg)}}

.tv-particles{position:absolute;inset:0;background-image:
  radial-gradient(1.4px 1.4px at 20% 30%,rgba(90,46,66,.5),transparent 50%),
  radial-gradient(1.2px 1.2px at 70% 18%,rgba(232,99,143,.5),transparent 50%),
  radial-gradient(1.6px 1.6px at 84% 64%,rgba(201,90,127,.45),transparent 50%),
  radial-gradient(1px 1px at 38% 82%,rgba(90,46,66,.4),transparent 50%),
  radial-gradient(1.4px 1.4px at 55% 46%,rgba(232,99,143,.42),transparent 50%),
  radial-gradient(1.1px 1.1px at 12% 62%,rgba(90,46,66,.35),transparent 50%);
  background-repeat:repeat;background-size:440px 440px;opacity:.5;animation:tvFloat 26s linear infinite}
@keyframes tvFloat{0%{background-position:0 0}100%{background-position:440px 440px}}

/* ---------- 旋转楼梯舞台 ---------- */
.stage-track{position:relative;height:calc(9 * 100vh)}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;z-index:2}
.stage__scene{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 42%;transform-style:preserve-3d}
.stage__scene.is-ready .card{transition:none}

/* ---------- 卡片 ---------- */
.card{position:absolute;left:50%;top:50%;width:min(54vw,620px);aspect-ratio:16/10;border-radius:clamp(18px,2.2vw,28px);
  transform-style:preserve-3d;will-change:transform,opacity;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--bg-2);box-shadow:0 40px 90px -40px rgba(120,60,95,.24),inset 0 0 0 1px rgba(90,46,66,.14)}
.card::after{content:"";position:absolute;inset:0;z-index:6;border-radius:inherit;
  border:1px solid rgba(90,46,66,.12);pointer-events:none;
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
.card__media{position:absolute;inset:0;background-image:var(--photo);background-size:cover;background-position:center;
  filter:saturate(1.05) contrast(1.02);opacity:.92}
.card--cover .card__media{opacity:.8}
.card__skyline{position:absolute;inset:auto 0 0 0;height:38%;opacity:.5;
  background:linear-gradient(180deg,transparent,rgba(120,60,95,.45));pointer-events:none}
.card__shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(120,60,95,.14) 0%,rgba(120,60,95,.02) 36%,rgba(120,60,95,.78) 100%),
    radial-gradient(120% 80% at 50% 0%,rgba(216,178,106,.12),transparent 60%)}
.card__content{position:absolute;left:clamp(22px,4vw,44px);bottom:clamp(20px,3.4vw,40px);z-index:3;max-width:72%}
.card__kicker{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-mono);font-size:clamp(.66rem,1vw,.8rem);
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:.8rem}
.card__kicker::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
.card__name{font-family:var(--font-display);font-weight:560;font-size:clamp(2.4rem,6.4vw,4.4rem);line-height:1.02;
  letter-spacing:-.02em;color:var(--ink);text-shadow:none}
.card__desc{margin-top:.8rem;font-family:var(--font-serif);color:rgba(90,46,66,.82);
  font-size:clamp(.92rem,1.4vw,1.08rem);line-height:1.7;text-shadow:none}
.card.is-photo-back .card__media{filter:blur(0);opacity:.42}

/* ---------- 内容卡片（关于 / 下载） ---------- */
.card--content{width:min(56vw,640px);background:
  radial-gradient(90% 80% at 0% 0%,rgba(78,58,120,.30),transparent 60%),
  radial-gradient(80% 80% at 100% 100%,rgba(216,178,106,.12),transparent 55%),
  linear-gradient(150deg,#ffd7e2,#ffb3c9)}
.card--content .card__shade{background:
  linear-gradient(180deg,rgba(120,60,95,.12),rgba(120,60,95,.04) 40%,rgba(120,60,95,.68) 100%)}
.card--content .card__content{max-width:56%;max-width:calc(60% - 10px);bottom:clamp(20px,3.6vw,44px);left:clamp(22px,3.6vw,40px)}
.card--content .card__name{font-size:clamp(2rem,4.6vw,3.3rem)}
.card--content .card__desc{max-width:42ch}

/* 产品截图（framed shot） */
.card__shot{position:absolute;right:clamp(18px,2.6vw,34px);top:50%;width:min(34%,40%);aspect-ratio:4/3;z-index:3;
  transform:translateY(-50%) rotate(4deg);transform-origin:center;border-radius:14px;overflow:hidden;
  border:1px solid rgba(90,46,66,.18);box-shadow:0 28px 70px -28px rgba(120,60,95,.24),inset 0 0 0 1px rgba(90,46,66,.06)}
.card__shot::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(90,46,66,.1);pointer-events:none;
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
.card__shot img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.03)}
.card--about .card__shot img{object-position:right center}
.card--download .card__shot img{object-position:center}

.card__stats{display:flex;gap:clamp(18px,3vw,40px);margin-top:1.6rem;flex-wrap:wrap}
.card__stats .stat{display:flex;flex-direction:column;gap:.3rem;position:relative;padding-left:1rem}
.card__stats .stat::before{content:"";position:absolute;left:0;top:.35em;width:4px;height:1.5em;border-radius:2px;background:var(--accent)}
.card__stats .stat__num{font-family:var(--font-display);font-size:clamp(1.1rem,1.8vw,1.4rem);color:var(--accent);font-weight:560}
.card__stats .stat__label{font-family:var(--font-serif);color:var(--ink-soft);font-size:.82rem;letter-spacing:.04em}

.card__downloads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;margin-top:1.6rem;max-width:420px}
.dl-chip{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.85rem 1.05rem;border-radius:14px;
  background:rgba(255,255,255,.5);border:1px solid var(--line);color:var(--ink);text-decoration:none;
  transition:border-color var(--dur-s,0.3s) var(--ease,0.3s),background var(--dur-s,0.3s) var(--ease,0.3s),transform var(--dur-s,0.3s) var(--ease,0.3s)}
.dl-chip span{font-family:var(--font-serif);font-weight:600;font-size:.98rem}
.dl-chip small{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;color:var(--ink-faint)}
.dl-chip:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:rgba(232,99,143,.16);transform:translateY(-2px)}
.dl-chip--soon{opacity:.5;cursor:not-allowed}
.dl-chip--web{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.dl-chip--web span{color:var(--accent)}

/* ---------- 卡片进入/发光 ---------- */
.card.is-front .card__media{opacity:1}
.card.is-front .card__name{color:var(--ink)}

/* ---------- HUD ---------- */
.stage__hud{position:absolute;left:clamp(20px,4vw,54px);bottom:clamp(24px,5vh,52px);z-index:5;pointer-events:none}
.hud__inner{display:flex;align-items:flex-end;gap:clamp(18px,3vw,34px)}
.hud__index{display:flex;align-items:baseline;gap:.35em;font-family:var(--font-mono);color:var(--accent);
  font-size:clamp(.8rem,1.2vw,1rem);letter-spacing:.08em}
.hud__cur{font-size:clamp(2.2rem,4.6vw,3.4rem);font-weight:500;line-height:1;color:var(--ink)}
.hud__sep{color:var(--ink-faint)}
.hud__total{color:var(--ink-faint)}
.hud__meta{display:flex;flex-direction:column;gap:.35rem;max-width:30ch}
.hud__name{font-family:var(--font-display);font-size:clamp(1.1rem,2vw,1.55rem);color:var(--ink)}
.hud__desc{font-family:var(--font-serif);color:var(--ink-soft);font-size:.9rem;line-height:1.5}
.hud__dots{display:flex;gap:.55rem;margin-left:clamp(6px,2vw,20px)}
.hud__dot{width:7px;height:7px;border-radius:50%;background:rgba(90,46,66,.22);transition:background var(--dur-s) var(--ease),transform var(--dur-s) var(--ease)}
.hud__dot.is-on{background:var(--accent);transform:scale(1.35)}

/* ---------- 滚动提示 ---------- */
.stage__hint{position:absolute;right:clamp(20px,4vw,54px);bottom:clamp(28px,5vh,52px);z-index:5;display:flex;flex-direction:column;align-items:center;gap:.9rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
  transition:opacity 520ms var(--ease)}
.stage__hint.is-dim{opacity:0}
.stage__hint .scroll-line{width:1px;height:72px;background:linear-gradient(180deg,var(--accent),transparent);
  animation:tvHint 2.2s ease-in-out infinite}
@keyframes tvHint{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1)}100%{transform:scaleY(.2);transform-origin:bottom}}

/* ---------- 页脚 ---------- */
.footer{background:var(--bg-2)}
.footer__back{color:var(--accent)}

/* ---------- 响应式 ---------- */
@media (max-width:760px){
  .card{width:min(86vw,560px)}
  .card--content{width:min(90vw,560px)}
  .card__content{max-width:86%}
  .card--content .card__content{max-width:80%}
  .card__shot{width:min(38%,44%)}
  .card__downloads{grid-template-columns:1fr;max-width:none}

  .card__stats{gap:1.2rem}
  .stage__hint{display:none}
  .hud__inner{flex-wrap:wrap}
}
@media (max-width:520px){
  .stage__hud{left:18px;right:18px;bottom:24px}
  .hud__desc{display:none}
  .card__name{font-size:clamp(2rem,9vw,3rem)}
  .card--download .card__desc{display:none}
  .card__shot{display:none}
  .card--content .card__content{max-width:100%}
}




/* ============================================================
   内容补充：数据一瞥 / 核心功能 / 城市足迹 / 工程优势
   ============================================================ */
@media (max-width:960px){
}
@media (max-width:640px){
  .ccard{width:240px}
}

/* ============================================================
   核心功能 · XMind 式滚动堆叠卡
   ============================================================ */
.tfeatures{position:relative;z-index:3;background:var(--bg);padding-bottom:clamp(40px,6vh,64px)}
.stack{width:min(100% - var(--gutter)*2, 1180px);margin:0 auto;
  display:grid;gap:clamp(18px,3vh,30px)}
.stack__item{position:sticky;top:calc(var(--nav-h) + 14px)}
.scard{position:relative;display:flex;flex-direction:column;gap:clamp(16px,2.4vh,26px);
  padding:clamp(18px,2.6vw,34px) clamp(20px,3vw,44px) clamp(24px,3.4vw,40px);
  border-radius:clamp(20px,2.4vw,30px);border:1px solid var(--line-strong);
  background:color-mix(in srgb,#fff 94%,var(--bg));
  box-shadow:0 34px 80px -42px rgba(120,60,95,.4);
  overflow:hidden;will-change:transform;
  transform-origin:center top}
/* 被后卡覆盖时的压暗层：只动 opacity（合成器），不再每帧改 filter 触发重绘 */
.scard::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;
  background:rgba(64,34,52,1);opacity:var(--stack-dim,0);pointer-events:none}
.scard__body{display:flex;flex-direction:column;justify-content:flex-start;gap:.85rem;min-width:0}
.scard__num{font:600 clamp(2.6rem,4.5vw,4rem)/1 var(--font-display);font-style:italic;
  letter-spacing:-.03em;color:color-mix(in srgb,var(--accent) 30%,transparent)}
.scard__tag{align-self:flex-start;font:500 .66rem/1 var(--font-mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-2);
  border:1px solid color-mix(in srgb,var(--accent-2) 34%,transparent);
  padding:.45em .95em;border-radius:100px}
.scard__title{margin:0;font:600 clamp(1.5rem,2.4vw,2.1rem)/1.2 var(--font-display);
  font-style:italic;letter-spacing:-.015em;color:var(--ink)}
.scard__text{margin:0;color:var(--ink-soft);font-size:clamp(.95rem,1.1vw,1.04rem);line-height:1.78}
.scard__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:.4rem}
.scard__chips span{font:500 .66rem/1 var(--font-mono);color:var(--accent-2);
  border:1px solid color-mix(in srgb,var(--accent-2) 30%,transparent);
  padding:.5em .95em;border-radius:100px;background:color-mix(in srgb,var(--accent-2) 6%,transparent)}
.scard__media{order:-1;border-radius:16px;overflow:hidden;background:var(--bg-2);
  border:1px solid var(--line);aspect-ratio:21 / 9;max-height:clamp(220px,42vh,420px)}
.scard__media img,.scard__media--strip img{width:100%;height:100%;object-fit:cover;display:block}
.scard__media img{width:100%;height:100%;object-fit:cover;display:block}
.scard__media--strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px;height:100%}
.scard__media--strip img{border-radius:10px;height:100%;min-height:0}
.scard__media--ghost{background:
  radial-gradient(70% 70% at 70% 30%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),
  var(--bg-2)}
.scard__media--ghost span{font:600 clamp(2rem,3.4vw,3rem)/1 var(--font-display);font-style:italic;
  letter-spacing:-.02em;color:color-mix(in srgb,var(--accent) 40%,transparent)}

@media (max-width:700px){
  .stack{display:block}
  .stack__item{position:static}
  .scard{min-height:0}.scard__media{aspect-ratio:16 / 9;max-height:30vh}
  .scard__media{min-height:180px;order:-1}
  .scard__media--strip img{aspect-ratio:4/3}
  .stack__item{top:calc(var(--nav-h) + 8px)}
}

/* ============================================================
   城市足迹胶片带（恢复）+ 衔接收紧
   ============================================================ */
.tfeatures{padding-bottom:clamp(20px,3vh,36px)}
.cityfilm-wrap{position:relative;z-index:3;background:var(--bg-2);
  padding-block:clamp(36px,5vh,64px) clamp(48px,7vh,88px)}
.cityfilm-head{margin-bottom:clamp(20px,3vh,30px)}
.cityfilm{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cityfilm__track{display:flex;gap:20px;width:max-content;animation:citytick 46s linear infinite}
.cityfilm:hover .cityfilm__track{animation-play-state:paused}
@keyframes citytick{to{transform:translateX(-50%)}}
.ccard{margin:0;width:300px;flex:none}
.ccard img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:16px;
  border:1px solid var(--line-strong);box-shadow:0 24px 52px -30px rgba(120,60,95,.45);
  transition:transform var(--dur-s) var(--ease)}
.ccard:hover img{transform:translateY(-5px) scale(1.02)}
.ccard figcaption{margin-top:.65rem;font:400 .7rem/1.4 var(--font-mono);letter-spacing:.12em;color:var(--ink-faint)}
@media (max-width:640px){ .ccard{width:240px} }

/* ============================================================
   堆叠卡内部元素：落桌弹簧入场（is-live 驱动，交错弹跳）
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .scard__num,.scard__tag,.scard__title,.scard__text,.scard__chips,.scard__media{
    opacity:0;transform:translateY(30px) scale(.94);
    transition:opacity .62s var(--ease-spring),transform .72s var(--ease-spring)}
  .scard__tag{transition-delay:.07s}
  .scard__title{transition-delay:.13s}
  .scard__text{transition-delay:.19s}
  .scard__chips{transition-delay:.27s}
  .scard__media{transition-delay:.16s}
  .scard__media--strip img{opacity:0;transform:translateY(22px) scale(1.08);
    transition:opacity .6s var(--ease-spring),transform .7s var(--ease-spring)}
  .scard__media--strip img:nth-child(2){transition-delay:.12s}
  .scard__media--strip img:nth-child(3){transition-delay:.24s}
  .stack__item.is-live .scard__num,
  .stack__item.is-live .scard__tag,
  .stack__item.is-live .scard__title,
  .stack__item.is-live .scard__text,
  .stack__item.is-live .scard__chips{opacity:1;transform:none}
  .stack__item.is-live .scard__media{opacity:1;transform:none}
  .stack__item.is-live .scard__media--strip img{opacity:1;transform:none}
}

/* ---------- 媒体横屏约束（防竖图溢出） ---------- */
.scard__media{aspect-ratio:16 / 10;max-height:clamp(220px,44vh,430px)}
.scard__media img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){
  .scard__media{aspect-ratio:16 / 9;max-height:34vh}
}

/* 移动端关闭内容弹跳（内容常显） */
@media (max-width:700px){
  .scard__num,.scard__tag,.scard__title,.scard__text,.scard__chips,.scard__media{
    opacity:1 !important;transform:none !important}
  .scard__media--strip img{opacity:1 !important;transform:none !important}
}