/* ============================================================
   travel-gallery.css — 行迹 · ThreeUI Gallery 旋转画廊 + 关于/下载弹出卡片
   - 画廊：弧形编辑面板环绕垂直圆柱轨道（Three.js canvas），樱花粉暖色舞台 + 点阵网格
   - 关于/下载：相册滚完后的独立页面，XMind 式弹出卡片（缩放进场 + 倾斜产品截图拼贴）
   ============================================================ */

/* ---------- 旋转画廊舞台（樱花粉暖色） ---------- */
.gallery-track{position:relative;z-index:1}
.gallery-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.gallery-hero{position:relative;width:100%;height:100%;overflow:hidden;
  background:
    radial-gradient(72% 64% at 50% 42%,rgba(255,196,214,.62),rgba(255,224,233,.28) 74%),
    radial-gradient(60% 60% at 82% 88%,rgba(255,214,190,.5),transparent 60%),
    radial-gradient(50% 50% at 12% 78%,rgba(255,180,205,.42),transparent 58%),
    var(--bg)}
.gallery__canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.gallery-grid{position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:radial-gradient(rgba(90,46,66,.18) 1px,transparent 1px);
  background-size:26px 26px;opacity:.5;
  -webkit-mask:radial-gradient(88% 82% at 50% 46%,#000 18%,transparent 76%);
          mask:radial-gradient(88% 82% at 50% 46%,#000 18%,transparent 76%)}
.gallery__shade{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(120% 90% at 50% 30%,transparent 46%,rgba(232,99,143,.16) 100%),
    linear-gradient(180deg,rgba(255,255,255,.2) 0%,transparent 22%,transparent 64%,rgba(120,60,95,.10) 100%)}

/* 标题 */
.gallery-title{position:absolute;left:clamp(22px,5vw,72px);top:clamp(96px,17vh,158px);z-index:3;
  max-width:min(560px,90vw);pointer-events:none;
  transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
.gallery-title.is-dim{opacity:0;transform:translateY(-16px)}
.gallery-title .card__kicker{color:var(--accent)}
.gallery-title__name{font-family:var(--font-display);font-weight:560;
  font-size:clamp(3rem,9vw,7.2rem);line-height:.97;letter-spacing:-.03em;color:var(--ink);
  text-shadow:0 2px 0 rgba(255,255,255,.85),0 6px 26px rgba(255,255,255,.65)}
.gallery-title__desc{margin-top:1.1rem;font-family:var(--font-serif);
  color:var(--ink-soft);font-size:clamp(1rem,1.6vw,1.25rem);line-height:1.7;max-width:34ch;
  text-shadow:0 1px 0 rgba(255,255,255,.85),0 2px 12px rgba(255,255,255,.6)}

/* HUD 复用 travel.css 的 .stage__hud / .hud__*，此处仅加一处浅色玻璃衬底提升可读性 */
.stage__hud .hud__meta{text-shadow:0 1px 0 rgba(255,255,255,.8)}
.stage__hud .hud__cur{text-shadow:0 1px 0 rgba(255,255,255,.8)}

/* ---------- Outro：关于 / 下载（XMind 弹出卡片） ---------- */
.outro{position:relative;z-index:2;padding:clamp(64px,12vh,140px) var(--gutter,24px) clamp(80px,14vh,160px)}
.outro__inner{max-width:1180px;margin-inline:auto}
.outro__head{max-width:720px;margin-bottom:clamp(40px,8vh,72px)}
.outro__head .card__kicker{color:var(--accent)}
.outro__title{font-family:var(--font-display);font-size:clamp(2.4rem,6vw,4rem);font-weight:560;
  letter-spacing:-.02em;color:var(--ink);margin-top:.6rem}
.outro__lead{margin-top:1.1rem;font-family:var(--font-serif);color:var(--ink-soft);
  font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.8;max-width:58ch}

/* 单列大卡（XMind 全宽特性卡） */
.outro__grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,52px);align-items:start}
.outro-card{position:relative;border-radius:clamp(26px,3vw,38px);overflow:hidden;
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.55),transparent 52%),
    radial-gradient(96% 84% at 0% 100%,rgba(232,99,143,.30),transparent 58%),
    linear-gradient(140deg,#ffdbe6,#ffb7cd 55%,#ff9fbe);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 44px 96px -52px rgba(120,60,95,.42),inset 0 0 0 1px rgba(255,255,255,.38);
  padding:clamp(30px,5vw,60px);
  display:flex;flex-direction:column;
  /* XMind 弹出：初始隐藏，scale + translateY，弹簧式缓动 */
  opacity:0;transform:translateY(46px) scale(.92);
  transition:transform .82s cubic-bezier(.2,1.32,.32,1),opacity .62s ease;
  transition-delay:var(--pop-delay,0s);
  will-change:transform,opacity}
.outro-card.is-in{opacity:1;transform:none}
.outro-card::after{content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid rgba(255,255,255,.55);pointer-events:none;
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
/* 右侧圆形装饰 */
.outro-card::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);pointer-events:none}
.outro-card:nth-child(2){--pop-delay:.14s}

.outro-card__content{position:relative;z-index:2;max-width:66ch}
.outro-card__icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:14px;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));color:#fff;
  font-family:var(--font-sans);font-weight:700;font-size:1.2rem;margin-bottom:.9rem;
  box-shadow:0 12px 26px -12px rgba(201,90,127,.7)}
.outro-card .card__kicker{color:var(--accent-2);display:block;margin-bottom:.55rem}
.outro-card__title{font-family:var(--font-display);font-size:clamp(1.9rem,4vw,3rem);font-weight:560;
  letter-spacing:-.02em;color:#5a2e42;line-height:1.12}
.outro-card__desc{margin-top:.7rem;font-family:var(--font-serif);color:rgba(90,46,66,.84);
  font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.78;max-width:46ch}

.outro-card .card__stats{margin-top:1.2rem}
.outro-card .card__downloads{margin-top:1.4rem;max-width:480px}

/* ---------- 产品截图拼贴（倾斜窗户） ---------- */
.outro-card__showcase{position:relative;flex:1;margin-top:clamp(26px,3vw,40px);min-height:clamp(360px,46vh,500px)}
.shot-pane{position:absolute;border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:0 40px 70px -34px rgba(120,60,95,.5),0 0 0 1px rgba(90,46,66,.07);
  transform-origin:center;
  transition:transform var(--dur,.6s) var(--ease,.25s)}
.outro-card.is-in .shot-pane{animation:paneFloat 7.5s ease-in-out infinite}
.outro-card.is-in .shot-pane:nth-child(3){animation-delay:-2.4s}
.outro-card.is-in .shot-pane:nth-child(2){animation-delay:-4.6s}
@keyframes paneFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* 关于卡：登录动画 + 足迹地图 + 相册 */
.outro-card--about .shot-pane--login{left:0%;top:10%;width:min(38%,400px);z-index:3;transform:rotate(-7deg)}
.outro-card--about .shot-pane--map{left:31%;top:24%;width:min(48%,500px);z-index:2;transform:rotate(2deg)}
.outro-card--about .shot-pane--album{right:0%;top:5%;width:min(32%,340px);z-index:1;transform:rotate(10deg)}

/* 下载卡：功能面板 + 桌面下载窗 + 手机 */
.outro-card--download .shot-pane--features{left:0%;bottom:1%;width:min(46%,490px);z-index:2;transform:rotate(-4deg)}
.outro-card--download .shot-pane--desktop{left:40%;top:14%;width:min(44%,470px);z-index:3;transform:rotate(3deg)}
.outro-card--download .shot-pane--mobile{right:0%;top:6%;width:min(19%,210px);z-index:1;transform:rotate(9deg)}

/* ---------- 窗口 mock（通用） ---------- */
.mock{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(120,60,95,.4)}
.mock__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#fdf1f5;border-bottom:1px solid #f6dde6}
.mock__dots{display:flex;gap:5px}
.mock__dot{width:8px;height:8px;border-radius:50%}
.mock__dot:nth-child(1){background:#ff8fab}
.mock__dot:nth-child(2){background:#ffc07a}
.mock__dot:nth-child(3){background:#a8e0b0}
.mock__title{flex:1;text-align:center;font:600 11px/1 var(--font-sans);color:#a06a7d;letter-spacing:.05em}
.mock__body{padding:clamp(12px,1.8vw,20px);display:flex;flex-direction:column;gap:.7rem}
.mock__img{position:relative;padding:0;aspect-ratio:16/9;overflow:hidden;background:#fff}
.mock__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(1.05) contrast(1.02)}
.mock__album{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px}
.mock__album img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
.mock__album img:nth-child(1){grid-row:span 2}

.mock__logo{font-family:var(--font-display);font-size:1.4rem;color:#5a2e42;text-align:center}
.mock__logo small{display:block;font-family:var(--font-sans);font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:#c48ba0;margin-top:.25rem}

/* ---------- 登录 mock（动画循环） ---------- */
.mock--login .mock__logo{font-family:var(--font-display);font-size:1.4rem;color:#5a2e42;text-align:center}
.mock--login .mock__logo small{display:block;font-family:var(--font-sans);font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:#c48ba0;margin-top:.25rem}
.mock--login .mock__field{display:flex;flex-direction:column;gap:.35rem}
.mock--login .mock__field label{font:600 .6rem/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:#a06a7d}
.mock--login .mock__input{position:relative;padding:.55rem .7rem;border-radius:9px;border:1px solid #f0d4de;background:#fff;
  font:600 .78rem/1 var(--font-sans);color:#5a2e42}
.mock--login .mock__input--user::after{content:"";display:inline-block;width:1px;height:.82em;background:#e38ca9;margin-left:2px;
  vertical-align:-1px;animation:caretBlink 1.1s steps(1) infinite}
.mock--login .mock__btn{margin-top:.25rem;padding:.62rem;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;font:600 .82rem/1 var(--font-sans);text-align:center;letter-spacing:.1em;
  animation:btnPulse 2.6s ease-in-out infinite}
.mock--login .mock__status{margin-top:.25rem;text-align:center;font:500 .66rem/1 var(--font-sans);color:#c48ba0;letter-spacing:.06em}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes btnPulse{0%,100%{transform:scale(1);box-shadow:0 6px 18px -6px rgba(232,99,143,.5)}50%{transform:scale(1.04);box-shadow:0 10px 26px -8px rgba(232,99,143,.75)}}

/* ---------- 分割线（复用） ---------- */
.outro__rule{height:1px;background:linear-gradient(90deg,var(--line-strong),transparent);margin-top:1.2rem}

/* ---------- 响应式 ---------- */
@media (max-width:760px){
  .gallery-title{top:clamp(84px,15vh,120px)}
  .outro__grid{grid-template-columns:1fr}
  .outro-card{padding:clamp(22px,5vw,30px);min-height:auto}
  .outro-card--download .outro-card__desc{display:none}
  .outro-card__showcase{min-height:clamp(300px,54vw,400px)}
  .outro-card--about .shot-pane--login{width:min(38%,320px)}
  .outro-card--about .shot-pane--map{width:min(48%,430px)}
  .outro-card--about .shot-pane--album{width:min(30%,260px)}
}
@media (max-width:520px){
  .gallery-title__name{font-size:clamp(2.6rem,13vw,4rem)}
  .gallery-title__desc{font-size:1rem}
  .outro__title{font-size:clamp(2rem,9vw,3rem)}
  .outro-card__title{font-size:clamp(1.6rem,8vw,2.2rem)}
  .outro-card__showcase{min-height:clamp(280px,120vw,340px)}
  .outro-card--about .shot-pane--album{display:none}
  .outro-card--download .shot-pane--mobile{display:none}
}