/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/* ==========================================================================
   耀揚企業社 — 按鈕草叢 Hover 效果
   貼在：wp-content/themes/bricks-child/style.css（接在 Theme Name 註解之後）
   對應 class：.c-tree-hero__btn--primary / .c-tree-hero__btn--outline

   ★ 想調整外觀，只要改「調整區」那一段的數字，其他都不用動。
   ★ 改完記得清 LiteSpeed Cache。
   ========================================================================== */


/* --------------------------------------------------------------------------
   [1] 草的圖形（不要改）
   這是一整行 SVG，中間不能斷行；%23 %3C %3E 是編碼過的符號，改了會壞。
   -------------------------------------------------------------------------- */
:root {
  --grass-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 48'><path fill='%23000' d='M0 43.5Q30 45.7 60 44.5Q90 42.7 120 44.0V48H0ZM10.9 48.0C11.1 40.9 6.3 33.7 1.1 31.0C7.3 35.1 14.4 41.5 15.1 48.0ZM14.0 48.0C14.7 37.1 12.6 26.3 9.7 22.2C13.8 28.4 18.5 38.2 19.0 48.0ZM16.6 48.0C17.8 33.7 18.4 19.4 17.8 14.0C19.7 22.2 22.0 35.1 22.4 48.0ZM19.9 48.0C21.4 36.0 25.2 24.0 27.6 19.4C26.3 26.3 25.0 37.1 25.1 48.0ZM23.8 48.0C25.5 40.0 32.4 32.0 37.9 29.0C33.4 33.5 28.5 40.8 28.2 48.0ZM38.9 48.0C39.0 38.1 33.2 28.3 27.0 24.5C34.1 30.1 42.3 39.1 43.1 48.0ZM42.0 48.0C42.6 33.0 40.0 18.0 36.5 12.3C41.1 20.9 46.4 34.4 47.0 48.0ZM44.6 48.0C45.8 28.3 46.3 8.5 45.5 1.0C47.6 12.3 50.0 30.1 50.4 48.0ZM47.9 48.0C49.4 31.4 53.7 14.8 56.5 8.5C54.8 18.0 53.1 33.0 53.1 48.0ZM51.8 48.0C53.6 36.9 61.6 25.9 68.0 21.7C62.6 28.0 56.5 38.0 56.2 48.0ZM67.9 48.0C68.1 40.0 63.0 32.0 57.4 29.0C63.9 33.6 71.4 40.8 72.1 48.0ZM71.0 48.0C71.7 35.9 69.4 23.7 66.3 19.1C70.5 26.1 75.5 37.0 76.0 48.0ZM73.6 48.0C74.8 32.0 75.4 16.1 74.7 10.0C76.7 19.1 79.0 33.6 79.4 48.0ZM76.9 48.0C78.4 34.6 82.3 21.2 84.9 16.1C83.5 23.7 82.1 35.9 82.1 48.0ZM80.8 48.0C82.5 39.1 89.8 30.1 95.6 26.7C90.8 31.8 85.5 39.9 85.2 48.0ZM89.9 48.0C90.0 39.0 84.5 29.9 78.6 26.5C85.5 31.7 93.4 39.8 94.1 48.0ZM93.0 48.0C93.7 34.3 91.2 20.5 87.8 15.3C92.3 23.2 97.4 35.6 98.0 48.0ZM95.6 48.0C96.8 29.9 97.3 11.9 96.6 5.0C98.6 15.3 101.0 31.7 101.4 48.0ZM98.9 48.0C100.4 32.8 104.5 17.7 107.2 11.9C105.7 20.5 104.1 34.3 104.1 48.0ZM102.8 48.0C104.6 37.9 112.3 27.8 118.4 23.9C113.2 29.7 107.5 38.8 107.2 48.0ZM32.1 48.0C32.6 41.7 30.6 35.4 28.0 33.0C31.5 36.6 35.5 42.3 35.9 48.0ZM61.0 48.0C62.3 40.9 66.8 33.7 70.0 31.0C67.6 35.1 65.1 41.5 65.0 48.0ZM90.2 48.0C90.7 42.5 89.2 37.1 87.0 35.0C90.0 38.1 93.4 43.1 93.8 48.0Z'/></svg>");
}


/* ==========================================================================
   [2] 調整區 ← 只要改這裡
   ========================================================================== */

/* ─── 綠色實心按鈕 ─────────────────────────────────────────────── */
.c-tree-hero__btn--primary {
  --grass-color:  #8FA82B;   /* 前排：比底色暗一階的橄欖綠 */
  --grass-back:   #6E8420;   /* 後排：再暗一階 */
  --grass-height: 22px;      /* 草高。建議 15–30px，別超過按鈕高度一半否則會壓到文字 */
  --grass-gap:    2.5;       /* 疏密。1.7=密 2.5=原始比例 3.6=疏 */
  --sway:         11deg;     /* 搖曳幅度。6=微風 11=預設 16=明顯 22=大風，填 0deg 就不搖 */
}

/* ─── 透明白框按鈕 ─────────────────────────────────────────────── */
.c-tree-hero__btn--outline {
  --grass-color:  rgba(169, 187, 51, .90);   /* 最後的 .60 是透明度，可調 .40–.80 */
  --grass-back:   rgba(169, 187, 51, .42);
  --grass-height: 22px;
  --grass-gap:    2.5;
  --sway:         11deg;
}

/* ─── 後排草的細節（兩顆按鈕共用）───────────────────────────────── */
.c-tree-hero__btn--primary,
.c-tree-hero__btn--outline {
  --back-scale:  1.35;   /* 後排比前排高幾倍。覺得草太高壓到文字就降到 1.2 */
  --back-gap:    2.9;    /* 後排疏密。比前排大一點才有遠近感 */
  --back-shift:  23px;   /* 後排水平錯開多少，避免兩層草完全重疊。10–40px 都可試 */
}

/* ─── 速度（想調再動）────────────────────────────────────────────
   前排長出來    .55s   ↓ 在 [4] 區的 transition
   前排搖一輪    2.6s   ↓ 在 [5] 區的 animation
   後排長出來    .70s
   後排搖一輪    3.4s   ← 後排比前排慢，看起來才自然
   ------------------------------------------------------------------ */


/* ==========================================================================
   [3] 以下都不用改
   ========================================================================== */

/* ─── 按鈕本體：建立堆疊環境並把草裁切成藥丸形 ─────────────────── */
.c-tree-hero__btn--primary,
.c-tree-hero__btn--outline {
  position: relative;
  isolation: isolate;   /* 讓 z-index:-1 / -2 只在按鈕內生效 */
  overflow: hidden;     /* 草被裁成按鈕的圓角形狀 */
}

/* ─── [4] 前排草 ─────────────────────────────────────────────────── */
.c-tree-hero__btn--primary::before,
.c-tree-hero__btn--outline::before {
  content: '';
  position: absolute;
  inset: auto 0 -1px 0;
  height: var(--grass-height);
  z-index: -1;          /* 在按鈕底色之上、文字之下 */
  pointer-events: none;
  background-color: var(--grass-color);

  -webkit-mask-image: var(--grass-svg);
          mask-image: var(--grass-svg);
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-position: bottom left;
          mask-position: bottom left;
  -webkit-mask-size: calc(var(--grass-height) * var(--grass-gap)) 100%;
          mask-size: calc(var(--grass-height) * var(--grass-gap)) 100%;

  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform .55s cubic-bezier(.22, .9, .28, 1.18);
}

/* ─── 後排草 ─────────────────────────────────────────────────────── */
.c-tree-hero__btn--primary::after,
.c-tree-hero__btn--outline::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px 0;
  height: calc(var(--grass-height) * var(--back-scale));
  z-index: -2;          /* 在前排草後面 */
  pointer-events: none;
  background-color: var(--grass-back);

  -webkit-mask-image: var(--grass-svg);
          mask-image: var(--grass-svg);
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-position: bottom left var(--back-shift);
          mask-position: bottom left var(--back-shift);
  -webkit-mask-size: calc(var(--grass-height) * var(--back-gap)) 100%;
          mask-size: calc(var(--grass-height) * var(--back-gap)) 100%;

  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform .7s cubic-bezier(.22, .9, .28, 1.12);
}

/* ─── [5] 滑鼠移入：長出來 + 搖曳 ───────────────────────────────── */
@media (hover: hover) {
  .c-tree-hero__btn--primary:hover::before,
  .c-tree-hero__btn--outline:hover::before,
  .c-tree-hero__btn--primary:focus-visible::before,
  .c-tree-hero__btn--outline:focus-visible::before {
    transform: scaleY(1);
    animation: grass-sway 2.6s ease-in-out .5s infinite;
  }

  .c-tree-hero__btn--primary:hover::after,
  .c-tree-hero__btn--outline:hover::after,
  .c-tree-hero__btn--primary:focus-visible::after,
  .c-tree-hero__btn--outline:focus-visible::after {
    transform: scaleY(1);
    animation: grass-sway-back 3.4s ease-in-out .65s infinite;
  }
}

/* 前排：陣風式，先大幅倒、回擺、再倒、甩回 */
@keyframes grass-sway {
  0%,  100% { transform: scaleY(1)    skewX(0deg); }
  14%       { transform: scaleY(1.08) skewX(calc(var(--sway) * -1)); }
  33%       { transform: scaleY(1.01) skewX(calc(var(--sway) * .45)); }
  54%       { transform: scaleY(1.06) skewX(calc(var(--sway) * -.7)); }
  78%       { transform: scaleY(.96)  skewX(calc(var(--sway) * .85)); }
}

/* 後排：幅度較小、節奏錯開，避免兩層同步擺動 */
@keyframes grass-sway-back {
  0%,  100% { transform: scaleY(1)    skewX(0deg); }
  20%       { transform: scaleY(1.06) skewX(calc(var(--sway) * .7)); }
  48%       { transform: scaleY(1.01) skewX(calc(var(--sway) * -.5)); }
  75%       { transform: scaleY(.97)  skewX(calc(var(--sway) * .6)); }
}

/* ─── [6] 無障礙：使用者系統設定「減少動態效果」時關閉動畫 ──────── */
@media (prefers-reduced-motion: reduce) {
  .c-tree-hero__btn--primary::before,
  .c-tree-hero__btn--outline::before,
  .c-tree-hero__btn--primary::after,
  .c-tree-hero__btn--outline::after { transition: none; }

  .c-tree-hero__btn--primary:hover::before,
  .c-tree-hero__btn--outline:hover::before,
  .c-tree-hero__btn--primary:hover::after,
  .c-tree-hero__btn--outline:hover::after { animation: none; }
}
/* ═══ 兩顆按鈕共用按鈕HOVER效果 ═══ */