/* ============================================================
   Wander China — global styles & Apple-grade motion system
   配色：墨黑 #1C1B19 · 米白 #F7F4EF · 暖金 #A67C52 · 玉绿 #43615A
   ============================================================ */
html { scroll-behavior: smooth; }
body { font-family: 'Inter','Noto Sans SC','Noto Sans JP','Noto Sans KR',sans-serif; }
.tracking-luxe { letter-spacing: 0.25em; }
.hidden-view { display: none !important; }

/* 卡片悬停慢放大 */
.zoom-img  { transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.zoom-card:hover .zoom-img { transform: scale(1.06); }

/* 表单控件统一风格 */
.fld { width:100%; background:#fff; border:1px solid rgba(28,27,25,.15); border-radius:.6rem; padding:.75rem 1rem; font-size:.9rem; }
.fld:focus { outline:none; border-color:#A67C52; }

/* 顶部导航：滚动后收紧 + 阴影 */
header#site-nav nav { transition: height .45s cubic-bezier(.2,.7,.2,1); }
header#site-nav.scrolled nav { height: 3.4rem; }
header#site-nav.scrolled { box-shadow: 0 1px 24px rgba(28,27,25,.08); }

/* ============================================================
   ① 进入式动效（IntersectionObserver 触发一次）
   ============================================================ */
.reveal { opacity:0; transform: translateY(48px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity:1; transform: translateY(0); }
.reveal-scale { opacity:0; transform: scale(.92); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.reveal-scale.visible { opacity:1; transform: scale(1); }

/* 长距离滑入（easeOutExpo） */
.r-left,.r-right,.r-up { opacity:0; transition: opacity 1.3s cubic-bezier(.16,1,.3,1), transform 1.3s cubic-bezier(.16,1,.3,1); will-change:opacity,transform; }
.r-left  { transform: translateX(-90px) scale(.97); }
.r-right { transform: translateX(90px)  scale(.97); }
.r-up    { transform: translateY(90px); }
.r-left.visible,.r-right.visible,.r-up.visible { opacity:1; transform:none; }
.r-delay { transition-delay:.12s; }

/* 画框展开式揭示：图片从一个收窄的圆角画框缓缓撑满（Apple 产品页质感） */
.clip-reveal { clip-path: inset(14% 8% 14% 8% round 28px); transform: scale(1.1); transition: clip-path 1.5s cubic-bezier(.16,1,.3,1), transform 1.5s cubic-bezier(.16,1,.3,1); will-change: clip-path, transform; }
.clip-reveal.visible { clip-path: inset(0 0 0 0 round 16px); transform: scale(1); }

/* 标题逐词升起（词被裁切容器包裹，从下方 112% 升入） */
.ws .w  { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em; }
.ws .wi { display:inline-block; transform:translateY(115%); transition: transform 1s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i) * 70ms); will-change: transform; }
.ws.visible .wi { transform: translateY(0); }

/* ============================================================
   ② 滚动驱动动效（rAF 逐帧，随滚动进度连续变化）
   ============================================================ */
/* 段落逐词点亮：滚动经过时文字由 14% 透明度逐词亮起（Apple keynote 风格） */
.lit { color: rgba(28,27,25,1); }
.lit .lw { opacity:.13; transition: opacity .45s ease; }
.lit .lw.on { opacity:1; }
.lit-cream .lw { color:#F7F4EF; }

/* 视差图：容器裁切，内部图按 --par 平移（图预先放大避免露边） */
.par-wrap { overflow:hidden; }
.par-img  { width:100%; height:112%; object-fit:cover; transform: translateY(var(--par,0px)) scale(1.06); will-change: transform; }

/* 广州首屏：陈家祠 → 沙面 → 珠江新城 → 广州塔的动态城市画卷。
   后续放入 assets/video/guangzhou.mp4 时，视频会自动在这一层上方淡入。 */
.city-timelapse { position:absolute; inset:0; overflow:hidden; background:#1C1B19; }
.city-timelapse-frame { position:absolute; inset:-3%; width:106%; height:106%; object-fit:cover; opacity:0; transform:scale(1.03); animation: city-reel 24s ease-in-out infinite; will-change:opacity,transform; }
.city-timelapse-frame-1 { animation-delay:0s; }
.city-timelapse-frame-2 { animation-delay:6s; }
.city-timelapse-frame-3 { animation-delay:12s; }
.city-timelapse-frame-4 { animation-delay:18s; }
@keyframes city-reel {
  0%, 20% { opacity:1; transform:scale(1.03); }
  30%, 100% { opacity:0; transform:scale(1.1); }
}

/* 上海首屏：AI 航拍画面 + 蓝调至夜景的循环延时感。 */
.shanghai-timelapse { position:absolute; inset:0; overflow:hidden; background:#101a28; }
.shanghai-timelapse img { position:absolute; inset:-4%; width:108%; height:108%; object-fit:cover; animation:shanghai-aerial 18s ease-in-out infinite alternate; will-change:transform,filter; }
.shanghai-timelapse::before { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(115deg,rgba(9,20,35,.34),transparent 42%,rgba(255,183,102,.12)); animation:shanghai-light 18s ease-in-out infinite alternate; pointer-events:none; }
.shanghai-timelapse::after { content:""; position:absolute; z-index:1; inset:-20% -40%; background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.09) 50%,transparent 65%); transform:translateX(-30%); animation:shanghai-clouds 12s linear infinite; pointer-events:none; }
@keyframes shanghai-aerial {
  0% { transform:scale(1.02) translate3d(-.7%,.4%,0); filter:brightness(.82) saturate(.88) contrast(1.02); }
  48% { filter:brightness(.96) saturate(1) contrast(1.04); }
  100% { transform:scale(1.11) translate3d(1.3%,-1.2%,0); filter:brightness(1.08) saturate(1.12) contrast(1.06); }
}
@keyframes shanghai-light { from { opacity:.45; } to { opacity:.95; } }
@keyframes shanghai-clouds { to { transform:translateX(30%); } }

/* Contact 内的路线预览：三段式图片动线。 */
.contact-route-grid { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.contact-route-grid::before { content:""; position:absolute; left:16.5%; right:16.5%; top:1.05rem; height:1px; background:rgba(166,124,82,.48); z-index:0; }
.contact-route-card { position:relative; z-index:1; min-width:0; }
.contact-route-pin { display:flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem; border-radius:999px; background:#1C1B19; color:#F7F4EF; border:3px solid #F7F4EF; font-size:.72rem; margin:0 auto -.85rem; position:relative; z-index:2; }
@media (max-width:639px) {
  .contact-route-grid { grid-template-columns:1fr; gap:1rem; }
  .contact-route-grid::before { left:1.05rem; right:auto; top:1rem; bottom:1rem; width:1px; height:auto; }
  .contact-route-card { display:grid; grid-template-columns:2.1rem minmax(0,1fr); align-items:start; column-gap:.65rem; }
  .contact-route-pin { margin:0; }
  .contact-route-card > .contact-route-body { margin-top:.35rem; }
}

@media (prefers-reduced-motion:reduce) {
  .shanghai-timelapse img,.shanghai-timelapse::before,.shanghai-timelapse::after { animation:none; }
}

/* 英雄区内容随滚动淡出上移 */
.hero-fade { opacity: var(--ho,1); transform: translateY(var(--hy,0px)); will-change: opacity, transform; }

/* ============================================================
   ③ 城市页：粘性景点剧场（左图定格交叉淡化，右侧章节滚动）
   ============================================================ */
.show-media { position: sticky; top: 4rem; height: calc(100vh - 4rem); }
.show-media .show-img { position:absolute; inset:0; opacity:0; transform: scale(1.07); transition: opacity 1.1s cubic-bezier(.4,0,.2,1), transform 1.6s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; }
.show-media .show-img.active { opacity:1; transform: scale(1); }
.show-media .show-img img { width:100%; height:100%; object-fit:cover; }
.show-chapter { min-height: 88vh; display:flex; flex-direction:column; justify-content:center; }
.show-bar { transition: height .8s cubic-bezier(.2,.7,.2,1); }
@media (max-width: 767px) { .show-media { position:relative; top:0; height:52vh; } }

/* 缓慢 Ken Burns（用于粘性剧场当前图） */
@keyframes kenburns { 0% { transform: scale(1); } 100% { transform: scale(1.08); } }
.show-img.active img { animation: kenburns 9s ease-out forwards; }

/* ============================================================
   ④ Mimo 拨开效果（开屏紫禁城 / 敦煌壁画 …任意 [data-mimo] 区块可复用）
   底层=清晰艳丽；顶层涂层=灰暗版 + 跟随鼠标的多层水波遮罩
   ============================================================ */
[data-mimo] { cursor: crosshair; }
.mimo-base, .mimo-veil {
  position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat;
}
.mimo-veil {
  filter: grayscale(100%) brightness(.4) contrast(1.05);
  -webkit-mask-image: radial-gradient(circle at var(--mx,50%) var(--my,42%),
      rgba(0,0,0,0) 0, rgba(0,0,0,0) 95px,
      rgba(0,0,0,.10) 125px, rgba(0,0,0,0) 160px,
      rgba(0,0,0,.40) 225px, rgba(0,0,0,.72) 290px, #000 380px);
  mask-image: radial-gradient(circle at var(--mx,50%) var(--my,42%),
      rgba(0,0,0,0) 0, rgba(0,0,0,0) 95px,
      rgba(0,0,0,.10) 125px, rgba(0,0,0,0) 160px,
      rgba(0,0,0,.40) 225px, rgba(0,0,0,.72) 290px, #000 380px);
}
/* 壁画变体：岁月尘封的棕褐色调，拨开后重现矿物颜料的艳丽 */
.mimo-veil-sepia { filter: sepia(.5) grayscale(.55) brightness(.34) contrast(1.05); }
@keyframes floaty { 0%,100%{ transform:translateY(0); opacity:.9 } 50%{ transform:translateY(10px); opacity:.4 } }
.floaty { animation: floaty 2s ease-in-out infinite; }

/* ============================================================
   ⑤ 行程规划器 & 地图
   ============================================================ */
/* 地图瓦片做低饱和处理，贴合米白+墨黑的版面气质 */
.itin-map { border-radius: 1rem; overflow: hidden; }
.itin-map .leaflet-tile { filter: grayscale(.4) saturate(.7) contrast(.94) brightness(1.03); }
.itin-map .leaflet-container { font-family: inherit; background:#EDE9E1; }

/* 路线绘制动画：虚线流动 + 初次描画 */
.route-line { stroke-dasharray: 1 12; stroke-linecap: round; animation: routeflow 1.6s linear infinite; }
@keyframes routeflow { to { stroke-dashoffset: -13; } }

/* 编号标记 */
.poi-pin { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:9999px; background:var(--pin,#A67C52); color:#F7F4EF; font-size:12px; font-weight:600; border:2px solid #F7F4EF; box-shadow:0 2px 10px rgba(28,27,25,.35); }
.leaflet-div-icon { background:transparent; border:none; }

/* 隐藏横向滚动条（锚点条） */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* 首页目的地地图：城市标签 */
.map-city { display:inline-flex; align-items:center; gap:.4rem; background:#F7F4EF; border:1px solid rgba(28,27,25,.22); border-radius:9999px; padding:.3rem .75rem .3rem .55rem; font-size:12px; font-weight:600; color:#1C1B19; box-shadow:0 2px 10px rgba(28,27,25,.2); cursor:pointer; white-space:nowrap; transition:all .25s; }
.map-city::before { content:''; width:9px; height:9px; border-radius:9999px; background:#A67C52; flex:none; }
.map-city:hover, .map-city.on { background:#1C1B19; color:#F7F4EF; }
/* 窄屏：标签按比例收小，避免遮挡地图 */
@media (max-width: 720px) {
  .map-city { font-size:9.5px; padding:.16rem .45rem .16rem .34rem; gap:.25rem; box-shadow:0 1px 5px rgba(28,27,25,.18); }
  .map-city::before { width:5px; height:5px; }
}

/* 天数筛选按钮 */
.day-chip { border:1px solid rgba(28,27,25,.18); border-radius:9999px; padding:.4rem 1rem; font-size:.78rem; letter-spacing:.05em; cursor:pointer; transition:all .25s; background:#fff; }
.day-chip.on { background:#1C1B19; color:#F7F4EF; border-color:#1C1B19; }

/* 行程时间轴 */
.itin-day { position:relative; }
.itin-stop { position:relative; padding-left:1.9rem; }
.itin-stop::before { content:''; position:absolute; left:.42rem; top:1.4rem; bottom:-.4rem; width:1px; background:rgba(28,27,25,.14); }
.itin-stop:last-child::before { display:none; }
.itin-stop .dotc { position:absolute; left:0; top:.42rem; width:.9rem; height:.9rem; border-radius:9999px; border:2px solid var(--dc,#A67C52); background:#F7F4EF; }
.sight-chip { user-select:none; }
.sight-chip input { accent-color:#A67C52; }
.sight-chip.picked { border-color:#A67C52; background:rgba(166,124,82,.08); }

/* 结果面板浮入 */
.itin-pane { opacity:0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.itin-pane.in { opacity:1; transform:none; }

/* ============================================================
   ⑥ 打印：只输出行程攻略
   ============================================================ */
@media print {
  body * { visibility: hidden; }
  #itin-print, #itin-print * { visibility: visible; }
  #itin-print { position:absolute; left:0; top:0; width:100%; padding:0 1rem; }
  #itin-print .itin-map, #itin-print .no-print { display:none !important; }
}

/* ============================================================
   ⑦ 无障碍：偏好减少动效时全部直接呈现
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,.reveal-scale,.r-left,.r-right,.r-up,.clip-reveal,.itin-pane,.hero-fade,.par-img,
  .ws .wi,.lit .lw,.show-media .show-img,.show-img.active img,.city-timelapse-frame {
    opacity:1 !important; transform:none !important; transition:none !important; animation:none !important; clip-path:none !important;
  }
  .show-media .show-img { opacity:0 !important; }
  .show-media .show-img.active { opacity:1 !important; }
}