/* ==========================================================
   品芯 — 首頁主視覺：緩慢拉遠
   ----------------------------------------------------------
   背景圖以 1.14 倍開場，12 秒內緩緩縮回原尺寸。
   曲線刻意壓平（y1 = 0.20），前段接近等速慢慢推進，
   最後幾秒才收住，避免一開場就把大部分位移用完。

   做法說明：
   區塊的 ::before 已被暗色漸層遮罩佔用，不能改，
   所以縮放層放在 ::after，用 background-image: inherit
   自動沿用 Bricks 設定的主視覺圖，換圖不用改這裡。

   z-index: -1 讓它壓在區塊自身背景之上、遮罩與文字之下；
   isolation: isolate 建立堆疊脈絡，避免它跑到祖先背景後面。
   ========================================================== */

@keyframes pinxin-hero-zoom {
  from { transform: scale(var(--hero-zoom-from)); }
  to   { transform: scale(1); }
}

.c-tree-hero__l-wrap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.c-tree-hero__l-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;

  /* 開場放大倍率，手機另外覆寫 */
  --hero-zoom-from: 1.14;

  /* 沿用區塊自身的背景圖設定 */
  background-image: inherit;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;

  /* 動畫開始前先停在放大狀態，避免圖載入瞬間閃一下原尺寸 */
  transform: scale(var(--hero-zoom-from));
  transform-origin: 50% 50%;
}

/* Bricks 圖片延遲載入完成後才會移除 bricks-lazy-hidden，
   以此為起點播放，使用者不會錯過開頭。 */
.c-tree-hero__l-wrap:not(.bricks-lazy-hidden)::after {
  animation: pinxin-hero-zoom 12s cubic-bezier(0.30, 0.20, 0.30, 1) forwards;
}

/* ----------------------------------------------------------
   手機：幅度與時間收斂
   長時間持續重繪在手機上不划算，縮放幅度也不需要那麼大。
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .c-tree-hero__l-wrap::after { --hero-zoom-from: 1.08; }

  .c-tree-hero__l-wrap:not(.bricks-lazy-hidden)::after {
    animation-duration: 9s;
  }
}

/* ----------------------------------------------------------
   使用者關閉動態效果時，直接停在原尺寸
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .c-tree-hero__l-wrap::after,
  .c-tree-hero__l-wrap:not(.bricks-lazy-hidden)::after {
    transform: none;
    animation: none;
  }
}