/* About 頁：捲動帶鏡頭的白板。
   頁面本身不捲動內容，.runway 撐出捲動長度，.stage 固定在畫面上，
   about.js 依捲動位置移動 .world（整張白板）。顏色沿用 style.css 的 blog 變數，
   所以 data-theme="dark" 時會跟著變。 */

body.about-board { background: var(--blog-bg); }
/* style.css 的 body.inner-page main 會限寬 960px、留出 nav 高度，白板要滿版、從畫面頂端開始 */
body.about-board main.runway { max-width: none; margin: 0; padding-top: 0; }

.runway { position: relative; }
.stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background-color: var(--blog-bg);
  background-image: radial-gradient(color-mix(in srgb, var(--blog-text) 16%, transparent) 1.2px, transparent 1.2px);
}
/* 終點可以拖；手機上保留上下捲動回到路線，左右拖白板 */
.stage.free { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.stage.free.dragging { cursor: grabbing; }
@media (hover: hover) and (pointer: fine) { .stage.free { touch-action: none; } }

.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.trail { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.trail path { fill: none; stroke: var(--blog-text); stroke-width: 1.4; stroke-linecap: round; opacity: .5; }

.board-item {
  position: absolute; margin: 0;
  opacity: 0; transform: translateY(24px);
  transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.board-item.in { opacity: 1; transform: none; }
.board-item img { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }

/* 開場照片：沿用 style.css 的 .about-photo 彩蛋樣式，只把比例改成照片原比例 */
.board-item.about-photo { aspect-ratio: auto; display: block; border: 0; background: transparent; overflow: visible; }
.board-item.about-photo img { height: auto; }

.shot { box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 40px rgba(0,0,0,.08); }

.board-intro { font-size: calc(20px * var(--ts, 1)); line-height: 2; font-weight: 300; color: var(--blog-text); }
.board-intro .lead { font-size: calc(15px * var(--ts, 1)); letter-spacing: .1em; color: var(--blog-text-muted); margin-bottom: 18px; font-weight: 400; }

.studio-mark { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 210px; letter-spacing: -.02em; line-height: 1; color: var(--blog-strong); margin: 0; white-space: nowrap; }
.board-story { font-size: calc(18px * var(--ts, 1)); line-height: 2.1; font-weight: 300; color: var(--blog-text); }
.board-story .addr { font-size: calc(13px * var(--ts, 1)); letter-spacing: .12em; color: var(--blog-text-muted); margin-bottom: 14px; font-weight: 400; }

/* 顆粒：疊一層會動的雜訊 */
.board-grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .08;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: boardGrain 1.2s steps(6) infinite;
}
@keyframes boardGrain {
  0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); }
  60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); }
}

/* 履歷入口：57UDIO 後面的藍點。偶爾淡淡擴散一圈暗示可以互動，
   滑過或點一下展開清單。清單（.board-cv）固定在畫面上，不跟白板縮放，手機才讀得到 */
.studio-dot {
  position: relative; display: inline-block; vertical-align: baseline;
  width: .2em; height: .2em; margin-left: .05em; padding: 0; border: 0; border-radius: 50%;
  background: var(--accent); cursor: pointer; font: inherit;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
/* 點本身很小，手機上另外撐大可以點的範圍 */
.studio-dot::before { content: ''; position: absolute; inset: -.2em; border-radius: 50%; }
.studio-dot .ring {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  border: .012em solid var(--accent); animation: dotRipple 4.5s cubic-bezier(.2,.6,.3,1) infinite;
}
/* 擴散只佔前 40% 的時間，其餘時間靜止，看起來是偶爾動一下 */
@keyframes dotRipple { 0% { transform: scale(1); opacity: .35; } 40%, 100% { transform: scale(2.2); opacity: 0; } }
.studio-dot:hover, .studio-dot:focus-visible, .studio-dot[aria-expanded="true"] { transform: scale(1.3); outline: none; }
.studio-dot:hover .ring, .studio-dot[aria-expanded="true"] .ring { animation-play-state: paused; opacity: 0; }

/* 開場的向下箭頭：淡入淡出往下飄，提示可以捲動；一開始捲就收起 */
.scroll-cue {
  position: absolute; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); z-index: 5;
  transform: translateX(-50%); color: var(--blog-text-muted); pointer-events: none;
  transition: opacity .6s ease;
}
.scroll-cue svg { display: block; animation: cueFloat 2.2s ease-in-out infinite; }
@keyframes cueFloat {
  0% { opacity: 0; transform: translateY(-8px); }
  40% { opacity: 1; }
  80%, 100% { opacity: 0; transform: translateY(10px); }
}
.scroll-cue.gone { opacity: 0; }

.board-cv {
  position: fixed; z-index: 95; left: 0; top: 0;
  width: min(380px, calc(100vw - 24px)); max-height: min(72vh, 580px); overflow: auto;
  background: var(--blog-surface); color: var(--blog-text);
  border: 1px solid var(--blog-border); border-radius: 14px;
  padding: 20px 22px; font-size: 13.5px; line-height: 1.8;
  box-shadow: 0 22px 60px rgba(0,0,0,.16);
  opacity: 0; transform: translateY(8px) scale(.94); transform-origin: var(--ox, 0) var(--oy, 0);
  pointer-events: none; visibility: hidden;
  transition: opacity .3s ease, transform .5s cubic-bezier(.2,.8,.2,1), visibility 0s .5s;
}
.board-cv.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .3s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.board-cv h2 { font-family: 'Doto', monospace; font-size: 12px; letter-spacing: .14em; color: var(--blog-text-muted); margin: 14px 0 4px; font-weight: 700; }
.board-cv h2:first-child { margin-top: 0; }
.board-cv ul { list-style: none; margin: 0; padding: 0; }
.board-cv .y { color: var(--blog-text-muted); display: inline-block; width: 44px; font-variant-numeric: tabular-nums; }
.board-cv .sub { color: var(--blog-text-muted); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .board-grain, .studio-dot .ring, .scroll-cue svg { animation: none; }
  .board-item { transition: none; }
}