/* ========================================================================
   透かしロゴ版の追加分（index-anime2.html）
   top-anime.css のあとに読み込みます。

   ヒーローの文字の背景に、ロゴを大きく薄く置きます。
   描かれ方（扇形12枚＋円周をなぞる線）は強め版と同じです。

   ■ 濃さを変えたいとき
     下の --wm-opacity の数字を変えてください。
     0.11 で、最も濃く重なるところでも
       見出し 7.2:1 ／ 本文 9.5:1（基準は4.5:1）
     の読みやすさを保てます。0.16 くらいまでは基準内です。
   ======================================================================== */

:root {
  --wm-opacity: .11;
}

/* ■ 置く層について（大事なところ）
   もとのCSSには、文字の箱に不透明な背景を敷く指定があります。

     .hero-grid > div:first-child { background: var(--paper); border-radius:18px }

   葉や波が文字に重なっても読みにくくならないための指定です
   （資料8「本文背後に不透明の白／クリーム色を確保する」）。
   透かしをこの面より下に置くと、文字の帯の部分だけ隠れてしまいます。

   そこで、透かしは**この面より上・文字より下**に入れています。
   文字の箱に isolation:isolate を付けて層を独立させ、
   その中で 透かし=0、文字=1 の順に重ねます。
   葉と波に対する保護はそのまま残ります。 */
.hero-grid > div:first-child {
  position: relative;
  isolation: isolate;
}
.hero-grid > div:first-child > h1,
.hero-grid > div:first-child > p {
  position: relative;
  z-index: 1;
}

.hero-watermark {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: var(--wm-opacity);

  /* スマホ・タブレット：文字の中央に重ねます */
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: clamp(220px, 56vw, 360px);
  aspect-ratio: 481 / 488;
}

/* パソコン：文章の中央に大きく置きます */
@media (min-width: 1024px) {
  .hero-watermark {
    width: clamp(320px, 30vw, 470px);
  }
}

.hero-watermark .logo-draw { width: 100%; height: 100%; }

/* なぞる線は、透かしの上ではさらに控えめにします。
   （線の色そのものを半透明にしています。
     opacity を下げるとアニメーションの指定と衝突するためです） */
.hero-watermark .logo-trace {
  stroke: rgba(190, 64, 116, .55);
  stroke-width: 4;
}

/* 透かしを使う版では、見出しの上の小さいロゴは置きません。
   同じロゴが1画面に2つ出ると、かえって印象が散るためです。
   ヘッダーのロゴはそのまま残ります。 */