/* 開場動畫：左鎚 → 右鎚 → 螺絲分兩下打入、下方凸塊同步推出 → 字樣 → logo 移到頁面頂端。
   移植自用戶定案樣稿 intro-hammer-v6.html，時間軸不要改。
   座標單位是 logo SVG viewBox 的使用者單位。 */

#intro { display: none; }
html.intro #intro {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #F9B91B; cursor: pointer;
  animation: intro-bg .45s 3.5s ease-out forwards, intro-out 0s 4.0s forwards;
}
html.intro body { overflow: hidden; }
@keyframes intro-bg { to { background-color: rgba(249, 185, 27, 0); } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }

.intro-skip {
  position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); margin: 0;
  font-size: 13px; color: #1C1B1B; opacity: 0;
  animation: intro-skip .4s .6s ease-out forwards, intro-skip-out .3s 2.9s ease-out forwards;
}
@keyframes intro-skip { to { opacity: .6; } }
@keyframes intro-skip-out { to { opacity: 0; } }

/* --dx --dy --s 由 intro.js 量測頁面 logo 後設定，讓最後一格與頁面上的 logo 精確疊合 */
#intro .intro-logo {
  width: min(78vw, 360px); height: auto; overflow: visible;
  animation: intro-rise .6s 2.95s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes intro-rise { to { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(var(--s, 1)); } }

#intro .intro-logo * { transform-box: view-box; }
#intro .mv { animation: intro-center .6s 2.2s ease-out both; }
@keyframes intro-center { from { transform: translateX(80.19px); } to { transform: none; } }

#intro .hit {
  transform-origin: 217.445px 213.721px;
  animation: intro-shake .26s .55s linear, intro-shake .26s 1.15s linear, intro-tap .2s 1.49s linear, intro-shake .26s 1.85s linear;
}
@keyframes intro-shake { 0%, 100% { transform: none; } 20% { transform: translate(-3px, 2px) scale(1.04); } 45% { transform: translate(3px, -2px); } 70% { transform: translate(-2px, 1px); } }
@keyframes intro-tap { 0%, 100% { transform: none; } 35% { transform: translateY(2.5px) scale(1.015); } }

/* 左鎚先揮、右鎚再揮（支點在握把底端） */
#intro .ha { transform-origin: 294.13px 290.406px; animation: intro-swA .5s .05s cubic-bezier(.55, 0, .85, .35) both; }
#intro .hb { transform-origin: 140.759px 290.406px; animation: intro-swB .5s .65s cubic-bezier(.55, 0, .85, .35) both; }
@keyframes intro-swA { 0% { transform: rotate(-75deg); opacity: 0; } 30% { opacity: 1; } 100% { transform: none; } }
@keyframes intro-swB { 0% { transform: rotate(75deg); opacity: 0; } 30% { opacity: 1; } 100% { transform: none; } }

/* 螺絲由上往下分兩下打入，下方凸塊同步分兩下推出 */
#intro .sc { fill: #fff; animation: intro-drive 2.1s 0s linear both; }
@keyframes intro-drive {
  0%, 61% { transform: translateY(-60px); fill: #fff; }
  71% { transform: translateY(-30px); }
  78% { transform: translateY(-30px); }
  88% { transform: translateY(0); fill: #fff; }
  100% { transform: translateY(0); fill: #F9B91B; }
}
#intro .ft { animation: intro-foot 2.1s 0s linear both; }
@keyframes intro-foot { 0%, 61% { transform: translateY(-14.5px); } 71%, 78% { transform: translateY(-7px); } 88%, 100% { transform: none; } }

#intro .sp {
  stroke: #1C1B1B; stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 22 200; stroke-dashoffset: -60; opacity: 0;
  animation: intro-sp .4s .55s ease-out, intro-sp .4s 1.15s ease-out;
}
@keyframes intro-sp { 0% { opacity: 1; stroke-dashoffset: -85; } 100% { opacity: 0; stroke-dashoffset: -125; } }

#intro .tx { opacity: 0; animation: intro-tx .55s 2.35s ease-out forwards; }
@keyframes intro-tx { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }