#top.hero { background-image: var(--home-hero-image); }

/* 桌機只推近照片；標題與快捷入口維持在原位，手機直接使用原背景取景。 */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  #top.hero { overflow: hidden; background-image: none; }
  #top.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--home-hero-image);
    background-position: inherit;
    background-size: cover;
    animation: home-hero-push 4s ease-out both;
  }
}
@keyframes home-hero-push {
  from { transform: scale(1); }
  to { transform: scale(1.03); }
}

/* 沿用同一張已確認領口的橫幅；手機移動背景取景，不拉伸人物。 */
@media (max-width: 767px) {
  #top.hero { background-position: 22% center; }
}
/* 最窄手機稍多留出右側文字空間，維持臉部與橘子完整。 */
@media (max-width: 359px) {
  #top.hero { background-position: 24% center; }
}