/* =========================================================
   MJ Wave Coverage v2
   目標：
   - 桌機：向右多一點 + 向下多一點，讓「歡迎文字」也進到波浪範圍
   - 手機：從「能量飾品」一路包到「歡迎文字」都在波浪中
   ========================================================= */

/* 1) 確保 canvas 不被父層裁切 */
.mj-hero-titlewrap{
  position: relative;
  overflow: visible !important; /* 很重要：避免波浪被切掉 */
}

/* 2) 讓 canvas 可以被放大與移動（同時支援你不同 id/class 命名） */
#mj-wave-canvas,
#mj-hero-wave,
.mj-hero-wave{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

/* =========================
   A) 桌機：覆蓋範圍變大 + 向右/向下
   ========================= */
@media (min-width: 769px){
  #mj-wave-canvas,
  #mj-hero-wave,
  .mj-hero-wave{
    /* 覆蓋範圍：加大 */
    width: min(860px, 92vw);
    height: min(520px, 62vh);

    /* 位置：向右、向下（關鍵） */
    left: 56%;   /* 原本 50%，往右加：54~60% 可調 */
    top: 56%;    /* 原本 50%，往下加：54~62% 可調 */

    opacity: .55;
  }
}

/* =========================
   B) 手機：從「能量飾品」包到「歡迎文字」
   ========================= */
@media (max-width: 768px){
  #mj-wave-canvas,
  #mj-hero-wave,
  .mj-hero-wave{
    /* 覆蓋範圍：變高（關鍵） */
    width: min(560px, 96vw);
    height: min(520px, 70vh);

    /* 位置：往下落在標題+歡迎文字中間 */
    left: 75%;   /* 微微往右即可 */
    top: 62%;    /* 往下推：58~70% 可調 */

    opacity: .48;
  }
}

/* 防止上層容器裁切波浪 */
#hero,
.mj-hero,
.mj-hero-inner{
  overflow: visible !important;
}

/* =========================================================
   Mobile: push the 2-line hero lead downward
   只影響手機，電腦不變
   ========================================================= */
@media (max-width: 768px){
  .mj-hero-lead{
    margin-top: 96px;   /* 往下移：48~96px 自己微調 */
  }
}