/* CSS 變數定義在 loader 根上（scoped 內 SVG 的 fill="var(--…)" 由祖先繼承） */
.kerry-loader[data-v-0325dab5] {
  --w: 280px;
  --kerry-orange: #EE6A20;
  --kerry-orange-d: #CF520C;
  --kerry-orange-l: #FB8A3C;
  --body-gray: #5A6169;
  --glass: #BFE3F2;
  --tire: #2B2B2E;
  --hub: #C9CDD2;
  --road: #3a4654;
  --ink: #22303f;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/* 行內使用（fullscreen）：整頁置中的遮罩，貨車上下左右置中、蓋滿視窗 */
.kerry-loader.kl-fullscreen[data-v-0325dab5] {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #F7F7F5;
}

/* 場景：整體縮小一半（scale 0.5）；負 margin 收掉縮放後的空白，讓字幕貼齊貨車 */
.scene[data-v-0325dab5] { position: relative; width: var(--w); height: 200px; transform: scale(0.5); transform-origin: center; margin: -50px 0;
}

/* 路面（含虛線位移） */
.road[data-v-0325dab5] {
  position: absolute; left: 50%; bottom: 38px;
  transform: translateX(-50%);
  width: 240px; height: 6px; border-radius: 6px;
  background: var(--road); overflow: hidden;
}
.road[data-v-0325dab5]::after {
  content: ""; position: absolute; top: 50%; left: 0;
  transform: translateY(-50%);
  width: 200%; height: 2px;
  background: repeating-linear-gradient(90deg, #fff 0 18px, transparent 18px 40px);
  opacity: .85;
  -webkit-animation: ktDash-0325dab5 .55s linear infinite;
          animation: ktDash-0325dab5 .55s linear infinite;
}
@-webkit-keyframes ktDash-0325dab5 {
to { transform: translate(-40px, -50%);
}
}
@keyframes ktDash-0325dab5 {
to { transform: translate(-40px, -50%);
}
}

/* 車底陰影 */
.shadow[data-v-0325dab5] {
  position: absolute; left: 50%; bottom: 30px;
  width: 188px; height: 16px; border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(34,48,63,.28), transparent 70%);
  -webkit-animation: ktShadow-0325dab5 .5s ease-in-out infinite;
          animation: ktShadow-0325dab5 .5s ease-in-out infinite;
}
@-webkit-keyframes ktShadow-0325dab5 {
50% { transform: translateX(-50%) scale(.9); opacity: .78;
}
}
@keyframes ktShadow-0325dab5 {
50% { transform: translateX(-50%) scale(.9); opacity: .78;
}
}

/* 彈跳貨車 */
.truck[data-v-0325dab5] {
  position: absolute; left: 50%; bottom: 34px;
  width: 230px;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  -webkit-animation: ktHop-0325dab5 .5s ease-in-out infinite;
          animation: ktHop-0325dab5 .5s ease-in-out infinite;
}
@-webkit-keyframes ktHop-0325dab5 {
0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg);
}
25% { transform: translateX(-50%) translateY(-7px) rotate(-.6deg);
}
50% { transform: translateX(-50%) translateY(0) rotate(0deg);
}
75% { transform: translateX(-50%) translateY(-4px) rotate(.5deg);
}
}
@keyframes ktHop-0325dab5 {
0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg);
}
25% { transform: translateX(-50%) translateY(-7px) rotate(-.6deg);
}
50% { transform: translateX(-50%) translateY(0) rotate(0deg);
}
75% { transform: translateX(-50%) translateY(-4px) rotate(.5deg);
}
}

/* 滾動輪子 */
.wheel[data-v-0325dab5] { transform-box: fill-box; transform-origin: 50% 50%; -webkit-animation: ktRoll-0325dab5 .55s linear infinite; animation: ktRoll-0325dab5 .55s linear infinite;
}
@-webkit-keyframes ktRoll-0325dab5 {
to { transform: rotate(360deg);
}
}
@keyframes ktRoll-0325dab5 {
to { transform: rotate(360deg);
}
}

/* 速度線 */
.speed[data-v-0325dab5] { position: absolute; bottom: 74px; left: -6px; width: 60px; height: 54px;
}
.speed span[data-v-0325dab5] {
  position: absolute; left: 0; height: 4px; border-radius: 4px;
  background: var(--kerry-orange-l); opacity: 0;
  -webkit-animation: ktZoom-0325dab5 1.1s ease-in infinite;
          animation: ktZoom-0325dab5 1.1s ease-in infinite;
}
.speed span[data-v-0325dab5]:nth-child(1) { top: 6px; width: 34px; -webkit-animation-delay: 0s; animation-delay: 0s;
}
.speed span[data-v-0325dab5]:nth-child(2) { top: 24px; width: 50px; -webkit-animation-delay: .25s; animation-delay: .25s; background: var(--kerry-orange);
}
.speed span[data-v-0325dab5]:nth-child(3) { top: 42px; width: 26px; -webkit-animation-delay: .5s; animation-delay: .5s;
}
@-webkit-keyframes ktZoom-0325dab5 {
0% { transform: translateX(40px); opacity: 0;
}
35% { opacity: .9;
}
100% { transform: translateX(-26px); opacity: 0;
}
}
@keyframes ktZoom-0325dab5 {
0% { transform: translateX(40px); opacity: 0;
}
35% { opacity: .9;
}
100% { transform: translateX(-26px); opacity: 0;
}
}

/* 排氣煙 */
.puff[data-v-0325dab5] { position: absolute; bottom: 58px; left: -2px;
}
.puff i[data-v-0325dab5] {
  position: absolute; display: block;
  width: 13px; height: 13px; border-radius: 50%;
  background: rgba(150,160,170,.55);
  -webkit-animation: ktPuff-0325dab5 1.4s ease-out infinite;
          animation: ktPuff-0325dab5 1.4s ease-out infinite;
}
.puff i[data-v-0325dab5]:nth-child(2) { -webkit-animation-delay: .45s; animation-delay: .45s;
}
.puff i[data-v-0325dab5]:nth-child(3) { -webkit-animation-delay: .9s; animation-delay: .9s;
}
@-webkit-keyframes ktPuff-0325dab5 {
0% { transform: translate(0,0) scale(.5); opacity: .6;
}
100% { transform: translate(-34px,-26px) scale(1.7); opacity: 0;
}
}
@keyframes ktPuff-0325dab5 {
0% { transform: translate(0,0) scale(.5); opacity: .6;
}
100% { transform: translate(-34px,-26px) scale(1.7); opacity: 0;
}
}

/* 文字（沿用各頁傳入的 label） */
.kt-caption[data-v-0325dab5] {
  text-align: center;
  font-size: 14px; font-weight: 600; letter-spacing: .08em;
  color: #9aa6b2;
}
@media (prefers-reduced-motion: reduce) {
.road[data-v-0325dab5]::after, .shadow[data-v-0325dab5], .truck[data-v-0325dab5], .wheel[data-v-0325dab5], .speed span[data-v-0325dab5], .puff i[data-v-0325dab5] { -webkit-animation-duration: 2s !important; animation-duration: 2s !important;
}
}