/* 界面细化层（2026-09-23）：统一动效曲线、入场动画、按压反馈与布局修整。
   保留 8-bit 像素风的硬边框与字体，只让运动更自然。开启“减少动态效果”时全部停用。 */
:root {
  --ease-out: cubic-bezier(.22, .9, .24, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);
}

@keyframes rf-drop   { from { opacity: 0; translate: 0 -16px; } to { opacity: 1; translate: 0 0; } }
@keyframes rf-left   { from { opacity: 0; translate: -22px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes rf-right  { from { opacity: 0; translate: 22px 0; }  to { opacity: 1; translate: 0 0; } }
@keyframes rf-rise   { from { opacity: 0; translate: 0 16px; }  to { opacity: 1; translate: 0 0; } }
@keyframes rf-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes rf-ring   { 0% { opacity: .85; scale: .55; } 80%, 100% { opacity: 0; scale: 1.9; } }
@keyframes rf-glow   { 0%, 100% { text-shadow: 3px 3px 0 var(--shadow), 6px 6px 0 rgba(65,166,246,.35), 0 0 0 rgba(255,205,117,0); }
                       50% { text-shadow: 3px 3px 0 var(--shadow), 6px 6px 0 rgba(65,166,246,.35), 0 0 18px rgba(255,205,117,.35); } }

/* ================= 场馆页 ================= */

/* 载入完成后界面分层入场：顶栏落下 → 左侧面板滑入 → 小地图与数据说明 */
body.app-ready #topbar        { animation: rf-drop .7s var(--ease-out) both; }
body.app-ready #panel         { animation: rf-left .7s var(--ease-out) .12s both; }
body.app-ready #minimap-wrap  { animation: rf-right .7s var(--ease-out) .22s both; }
body.app-ready .venue-data-note { animation: rf-fade .6s ease .3s both; }
body.app-ready #mobile-controls { animation: rf-rise .6s var(--ease-out) .2s both; }

/* 原本是 steps() 的像素跳帧过渡，改成顺滑缓动 */
#panel    { transition: transform .5s var(--ease-out), opacity .35s ease; }
#seat-card { transition: transform .55s var(--ease-out), opacity .35s ease; }
#loading  { transition: opacity .8s ease, visibility .8s; }

/* 按钮：悬停轻微抬起、按下落回，保留像素阴影 */
.pill, .zone-chip, .sc-nav button, .phone-zooms button {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s var(--ease-out), box-shadow .12s var(--ease-out);
}
@media (hover: hover) {
  .pill:hover:not(:active), .zone-chip:hover:not(:active) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 0 var(--shadow); }
}
.pill:active, .zone-chip:active, .sc-nav button:active { transition-duration: .05s; }

/* 提示、预览卡与沉浸层：滑入淡入 */
.view-toast:not([hidden])   { animation: rf-rise .4s var(--ease-out) both; }
.seat-preview:not([hidden]) { animation: rf-rise .45s var(--ease-spring) both; }
.immersive-layer:not([hidden]) { animation: rf-fade .5s ease both; }
.venue-data-note[open] .venue-data-note-body { animation: rf-rise .35s var(--ease-out) both; }

/* 座位视角暗角：视线自然聚焦舞台；演出模式四周更暗、带一点舞台色温 */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 78% 70% at 50% 46%, transparent 58%, rgba(4, 5, 12, .42) 100%);
  opacity: 0; transition: opacity 1s ease;
}
body.in-seat::after { opacity: 1; }
body.in-seat.show-mode::after {
  background: radial-gradient(ellipse 74% 66% at 50% 44%, transparent 50%, rgba(18, 8, 34, .58) 100%);
}
body.immersive::after { opacity: 1; }

/* 座位卡底部常驻的“沉浸观看 / 返回全景”：遮住卡片底部留白里露出的滚动内容 */
#seat-card .seat-card-actions::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px;
  background: #191b2a; pointer-events: none;
}
/* 按钮区上沿渐隐：滚动内容不再被一刀切断，也提示上方还能继续滚动 */
#seat-card .seat-card-actions::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 22px;
  background: linear-gradient(to bottom, rgba(25, 27, 42, 0), #191b2a); pointer-events: none;
}

/* 露天场馆的天空选择放在观众状态旁边 */
.view-sky-field { grid-column: 1 / -1; }
.view-sky-field select { width: 100%; font: 16px system-ui; background: #171824; color: #fff; padding: 8px; border: 1px solid #777; margin-top: 4px; }

/* 桌面宽屏：收紧顶栏按钮间距，中文界面一行放得下 */
@media (min-width: 1200px) {
  #topbar .topbar-info { flex: 0 1 auto; }
  #topbar .top-actions { flex: 1 1 auto; gap: 8px; }
  #topbar .top-actions .pill { padding-inline: 11px; font-size: .86rem; }
}

/* 手机：顶栏只露常用操作，其余收进「更多」，给 3D 画面多留约 100px */
.more-toggle { display: none; }
@media (max-width: 760px) {
  /* 「更多」放在标题行右上角，常用操作一行排完 */
  .more-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 8px; right: 9px; margin: 0;
    min-width: 42px; min-height: 36px; padding: 4px 8px !important; font-size: 16px !important;
  }
  body:not(.in-seat) #topbar .topbar-info { padding-right: 50px; }
  /* :where() 不增加优先级，展开时下面的显示规则才能生效 */
  .top-actions > :where(#btn-random, #btn-shot, #btn-experience, .venue-travel-button, .language-picker) { display: none; }
  .top-actions .pill { padding: 7px 8px; font-size: 11.5px; }
  body.more-open .top-actions > :is(#btn-random, #btn-shot, .venue-travel-button) { display: inline-flex; animation: rf-rise .3s var(--ease-out) both; }
  body.more-open .top-actions > #btn-experience:not([hidden]) { display: inline-flex; animation: rf-rise .3s var(--ease-out) both; }
  body.more-open .top-actions > .language-picker { display: inline-flex; animation: rf-rise .3s var(--ease-out) both; }
  body.more-open .more-toggle { background: var(--gold); color: #0b0c14; }
  /* 座位视角里，顶部提示改到顶栏下方，不压住底部座位卡 */
  body.in-seat .view-toast { bottom: auto; top: calc(var(--toolbar-bottom, 64px) + 4px); }
}

/* ================= 首页 ================= */

/* 页头：桌面一行（品牌 | 标题 | 语言），手机两行，地图与场馆列表上移 */
@media (min-width: 781px) {
  #home-header {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    column-gap: 22px; row-gap: 2px; text-align: left;
    width: min(1480px, calc(100% - 40px)); margin: 0 auto; padding: 22px 0 14px;
  }
  #home-header .site-brand { grid-row: 1 / span 2; margin: 0; }
  #home-header h1 { grid-column: 2; font-size: 1.75rem; }
  #home-header p { grid-column: 2; margin-top: 2px; font-size: .78rem; letter-spacing: .16em; }
  #home-header .language-picker { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
  .home-data-note { width: min(1480px, calc(100% - 40px)); }
}
@media (max-width: 780px) {
  #home-header {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: 8px 10px; text-align: left; padding: max(12px, env(safe-area-inset-top)) 12px 10px;
  }
  #home-header .site-brand { margin: 0; justify-self: start; min-height: 42px; }
  #home-header .language-picker { grid-column: 2; grid-row: 1; margin: 0; }
  #home-header h1 { grid-column: 1 / -1; font-size: clamp(1.3rem, 6.4vw, 1.65rem); }
  #home-header p { grid-column: 1 / -1; margin-top: 0; }
}
#home-header h1 { animation: rf-glow 5s ease-in-out infinite; }

/* 下方各区块与地图区同宽，页面节奏统一 */
#concert-travel.travel-compact, #features, #support {
  width: min(1480px, calc(100% - 40px)) !important; max-width: none !important;
  margin-left: auto !important; margin-right: auto !important; box-sizing: border-box;
}
@media (max-width: 780px) {
  #concert-travel.travel-compact, #features, #support { width: calc(100% - 16px) !important; }
}

/* 首页入场：页头、说明、地图与列表依次出现 */
#home-header   { animation: rf-fade .6s ease both; }
.home-data-note { animation: rf-rise .6s var(--ease-out) .08s both; }
#map-wrap      { animation: rf-rise .7s var(--ease-out) .14s both; }
#side-col      { animation: rf-rise .7s var(--ease-out) .22s both; }

/* 场馆列表逐条浮现；详情卡切换场馆时淡入 */
#vl .vl-item { animation: rf-rise .45s var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 14) * 28ms); }
.vl-item { transition: border-color .15s ease, background-color .15s ease, transform .15s var(--ease-out); }
@media (hover: hover) { .vl-item:hover { transform: translateX(2px); } }
#venue-card.card-flash #vc-body { animation: rf-fade .35s ease both; }

/* 地图：选中场馆的标记外扩一圈呼吸光环 */
#bkk-big .pin.selected .pulse {
  display: block; fill: none; stroke-width: 2; transform-box: fill-box; transform-origin: center;
  animation: rf-ring 1.9s var(--ease-out) infinite;
}
#bkk-big .pin .dot { transition: fill .2s ease; }

/* 滚动到视口时再浮现（由 home.js 加 .reveal-ready，脚本失败时内容照常显示） */
html.reveal-ready .reveal { opacity: 0; translate: 0 24px; transition: opacity .7s ease, translate .8s var(--ease-out); }
html.reveal-ready .reveal.is-visible { opacity: 1; translate: 0 0; }

/* ================= 减少动态效果 ================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
  html.reveal-ready .reveal { opacity: 1; translate: none; }
}