/* ============================================================
   寵物彩虹橋 · 立體感（2026-11-09 起為預設）
   不改 bridge.css；只疊在上面。四件事：
   1. 背景景深：三層星空（遠／中／近）＋淡光暈＋四周暗角，捲動時各層速度不同（JS 移動）
   2. 卡片像實體：多層陰影、細亮邊、照片上緣內凹
   3. 互動回饋：桌機滑鼠傾斜＋光澤＋照片微錯位；按鈕按下去會下沉
   4. 進場與轉場：桌機卡片從遠處浮上來、大視窗從卡片位置放大；手機前一張縮小往後退
   減少動態效果：只保留第 2 項（靜態陰影與亮邊），其餘由 JS 不啟用
   ============================================================ */

/* ── 頂部列：半透明＋模糊，內容垂直置中（站長 2026-11-09） ──
   置中：原本上方留 max(12px, 瀏海) 下方 0，內容整排偏下 6px；改成上方只留瀏海高度，其餘高度讓 flex 置中（總高度 --br-header-h 不變）。
   半透明：只有頂部列本身；瀏海／狀態列那一段維持實色，iOS 狀態列底色才接得上（/pwa 規則 2）。 */
.br-header { padding-top: env(safe-area-inset-top, 0px); }
/* 2026-11-10 站長：往下捲後的底改成「漸層透明覆蓋」—— 上緣深、往下淡到全透明，
   不要硬邊、底線與模糊（模糊會在漸層末端切出一條線）。往下多延伸 1.5rem 讓淡出更柔。
   瀏海／狀態列那一段仍是實色 --br-bg-top（/pwa 規則 2）。 */
/* 2026-11-10 站長指定的漸層（在正式機開發者工具調出來的，延伸距離維持當時的 1.5rem） */
.br-header::before {
  bottom: -1.5rem;
  background: linear-gradient(to bottom,
    #070d1fba 0,
    var(--br-bg-top) env(safe-area-inset-top, 0px),
    rgb(7 13 31 / 73%) env(safe-area-inset-top, 0px),
    rgb(7 13 31 / 33%) 60%,
    rgb(7 13 31 / 0%) 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
/* 在頂端時完全透明，星空延伸到最上面（與全站表頭疊加模式一致）；
   往下捲 bridge-header.js 加上 .is-scrolled 才淡入上面那層漸層 */
.br-header:not(.is-scrolled)::before { opacity: 0; }

/* 頂部列不再顯示「寵物彩虹橋」（下方大標題已有，站長 2026-11-10）。
   用 visibility 保留它在 flex 裡的寬度，右邊點燈數才不會跑位；螢幕閱讀器也不會重複唸 */
.br-header-title { visibility: hidden; }

/* ── 1. 背景景深 ── */
.br-stars { opacity: 0; }   /* 原本那層 7 顆固定星點不會動，會破壞視差，藏起來 */

.brd-sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.brd-glow {
  position: absolute; inset: -15%;
  background:
    radial-gradient(38% 30% at 18% 22%, rgba(120, 100, 210, 0.16), transparent 70%),
    radial-gradient(30% 24% at 84% 14%, rgba(212, 175, 122, 0.10), transparent 70%),
    radial-gradient(50% 36% at 55% 96%, rgba(60, 110, 200, 0.16), transparent 70%);
  animation: brd-drift 60s ease-in-out infinite alternate;
}
@keyframes brd-drift { from { translate: 0 0; } to { translate: 2% -1.5%; } }
.brd-layer { position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 512px); background-repeat: repeat; background-size: 512px 512px; will-change: transform; }
.brd-layer.is-near { animation: brd-twinkle 7s ease-in-out infinite; }
@keyframes brd-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }
.brd-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 55%, rgba(2, 4, 12, 0.55) 100%); }

.br-h1 {
  text-shadow:
    0 1px 0 rgba(150, 115, 60, 0.55),
    0 2px 0 rgba(110, 82, 40, 0.45),
    0 3px 0 rgba(70, 52, 25, 0.35),
    0 8px 18px rgba(0, 0, 0, 0.55),
    0 0 1.6rem rgba(212, 175, 122, 0.45);
}
.brd-float { will-change: translate; transition: translate 0.6s cubic-bezier(.2, .7, .2, 1); }

/* ── 2. 卡片像實體 ── */
.br-card {
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.25),
    0 6px 12px -4px rgba(0, 0, 0, 0.35),
    0 22px 44px -18px rgba(0, 0, 0, 0.65);
}
.brd-edge {
  position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.br-pastel .brd-edge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.12); }
.br-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 12px 20px -12px rgba(0, 0, 0, 0.55);   /* 只做上緣；不要整圈框線，底部會在波浪下多一條線 */
}

/* 圓形浮動鈕（關注／分享／編輯）浮在照片上 */
.br-follow, .br-share, .br-edit { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12); }

/* ── 3. 互動回饋：按鈕有厚度，按下去會下沉 ── */
.br-light, .br-msg-open, .br-cta, .br-chip {
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28), 0 5px 12px -6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: background 0.2s, transform 0.1s ease, box-shadow 0.1s ease;
}
.br-pastel .br-light, .br-pastel .br-msg-open { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12), 0 5px 12px -6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.br-light:active:not(:disabled), .br-msg-open:active, .br-cta:active, .br-chip:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* 桌機：滑鼠傾斜＋光澤（transform 由 JS 寫在 style 上） */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .br-card { transition: transform 0.55s cubic-bezier(.2, .7, .2, 1), box-shadow 0.35s ease; transform-style: preserve-3d; }
  .br-card:hover { transform: none; }   /* 取代 bridge.css 的上浮 3px，改由 JS 傾斜 */
  .br-card.brd-tilting {
    transition: transform 0.12s ease-out, box-shadow 0.35s ease;
    box-shadow:
      0 2px 2px rgba(0, 0, 0, 0.25),
      0 14px 24px -8px rgba(0, 0, 0, 0.45),
      0 38px 70px -24px rgba(0, 0, 0, 0.75);
  }
  .brd-glare {
    position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 35%, transparent 60%);
    opacity: 0; transition: opacity 0.35s ease;
  }
  .br-card.brd-tilting .brd-glare { opacity: 1; }
  .br-photo img { transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(var(--ps, 1)); transition: transform 0.55s cubic-bezier(.2, .7, .2, 1); }
  .br-card.brd-tilting .br-photo img { transition: transform 0.12s ease-out; }
}

/* ── 4. 進場（桌機）：從遠一點、淡一點的地方浮上來。用 translate／scale 個別屬性，不跟傾斜的 transform 打架 ── */
.br-card.brd-wait { opacity: 0; translate: 0 2rem; scale: 0.95; }
.br-card.brd-wait.brd-in {
  opacity: 1; translate: 0 0; scale: 1;
  transition: opacity 0.6s ease, translate 0.75s cubic-bezier(.2, .7, .2, 1), scale 0.75s cubic-bezier(.2, .7, .2, 1),
              transform 0.55s cubic-bezier(.2, .7, .2, 1), box-shadow 0.35s ease;
  transition-delay: var(--brd-delay, 0ms);
}

/* 手機：一屏一張。下一張蓋上來時，前一張往後退（JS 寫 transform 與 --brd-dim） */
@media (max-width: 767px) {
  .br-card { box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.5); }
  .br-card::before {
    content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
    background: #02040c; opacity: var(--brd-dim, 0);
  }
  .brd-edge { display: none; }   /* 滿版卡片沒有邊緣可亮 */

  /* 卡片鋪到螢幕最頂端（站長 2026-11-10：手機不要頂部那條深色帶）。
     原本 bridge.css 的牆從頂部列下緣開始（top: var(--br-header-h)），照片上方永遠空一條；
     改成從 0 開始，返回鍵與點燈數浮在照片上，靠頂部列的漸層（.is-scrolled）壓暗看得清楚。
     卡片高度 --br-vh 是 bridge.js 依容器實際高度量的，會自動變成整個螢幕高。
     照片上的收藏／分享／編輯鈕與示範標章往下讓出頂部列的高度，免得撞到點燈數與返回鍵。
     寫在這裡而不改 bridge.css：bridge.css 有尚未上線的改動 */
  .br-main { top: 0; }
  .br-follow { top: calc(var(--br-header-h) + 0.4rem); }
  .br-share  { top: calc(var(--br-header-h) + 3.45rem); }
  .br-edit   { top: calc(var(--br-header-h) + 6.5rem); }
  .br-demo-badge { top: calc(var(--br-header-h) + 0.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .brd-glow, .brd-layer.is-near { animation: none; }
  .br-light, .br-msg-open, .br-cta, .br-chip { transition: background 0.2s; }
}