/* =================================================================
   HERO OPENING ANIMATION（2026-05-29 / ライブCSS+JSアニメに刷新）
   - CEO新方針: いろはの葉シンボルが徐々に浮き出る + 花びらがひらひら舞い落ちる
   - ブランド: 緑単軸（メイン #5B8C57 / 深緑 #3F6B3D / 淡緑 #E8F0E0 / 明緑 #8FB571）
     花びらは 緑〜クリーム白〜明緑 の自然トーン（桜のピンクは使わない）
   - 旧 mp4/webm 録画方式を廃止。軽量・調整容易・録画静止画バグを回避
   - prefers-reduced-motion: モーション全停止（葉は浮き出た最終状態で静止表示）
   ================================================================= */

/* ----------------------------------------------------------------
   配置方針（2026-05-29 レイアウト調整）
   HEROは2カラム（左=白い理念パネル / 右=不透明スライダー画像）で
   ほぼ全面が前景に覆われる。そのため:
   ① 葉エンブレム → 左の理念パネル(.hero-fixed)内に配置し、理念キャッチの
      背後でやさしく浮き出す（ブランドの場＝白パネルが最も自然な居場所）
   ② 花びら → HERO全体の最前面オーバーレイ(pointer-events:none)として降らせ、
      白パネル・スライダー画像の両方の上をひらひら横断させる
   ---------------------------------------------------------------- */

/* アニメ地レイヤー（左の理念パネルに朝の光をやわらかく敷く） */
.hero-fixed {
  /* 朝の光がやわらかく差し込む: ごく薄い淡緑グラデ + 上部の光だまり。
     style.css の .hero-fixed{background:#fff} を後勝ちで上書き */
  background:
    radial-gradient(110% 70% at 50% 8%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #FBFDF8 0%, #F2F7EC 55%, #ECF3E2 100%) !important;
}

/* ① 葉シンボル: 左の理念パネル内に絶対配置（テキストの背後） */
.hero-fixed__emblem {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(220px, 70%, 360px);
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 1;          /* hero-fixed 内のテキスト(z:2)より背面 */
  pointer-events: none;
  opacity: 0.9;        /* テキストと干渉しないよう少し透ける */
}
/* いろは実物ロゴ画像: ふわっと1モーションで浮き出る fade-in
   （旧: 左葉/右葉/点を時間差で灯す多パーツSVG → 1枚画像なので gentle fade-in に統合） */
.hero__emblem-logo {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  transform-origin: center bottom;
  /* blur 7px → くっきり / scale 0.86 → 1 / translateY 14px → 0 */
  animation: emblemEmerge 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s forwards;
  will-change: opacity, transform, filter;
}

@keyframes emblemEmerge {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.86);
    filter: blur(7px);
  }
  60% {
    opacity: 1;
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* 浮き出た後の、ごくゆっくりとした呼吸（生命感）。JSで付与
   ※ emblemEmerge(forwards)から emblemBreath へ差し替わる際、
     breath側は opacity を持たないため base の opacity:0 に戻ってしまう。
     settled時は明示的に opacity:1 を保持してロゴを消さない。 */
.hero-fixed__emblem.is-settled .hero__emblem-logo {
  opacity: 1;
  animation: emblemBreath 7s ease-in-out 0.4s infinite;
}
@keyframes emblemBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.018); }
}

/* ----------------------------------------------------------------
   花びらがひらひら舞い落ちる（落ち葉/花びら）
   - JSで生成。緑〜クリーム白〜明緑の自然トーン
   - 異なる速度・揺れ(sway)・回転でリアルな落下
   ---------------------------------------------------------------- */
/* ② 花びら: HERO全体の最前面オーバーレイ（白パネル・スライダー画像の上を横断） */
.hero__petals {
  position: absolute;
  inset: 0;
  z-index: 9;          /* hero-fixed/slider(z:4) より前面。ボタン等はないので最前でOK */
  pointer-events: none;
  overflow: hidden;
}
.hero-petal {
  position: absolute;
  top: -8%;
  left: var(--p-x);
  width: var(--p-size);
  height: calc(var(--p-size) * 1.35);
  color: var(--p-color);
  opacity: 0;
  animation: petalFall var(--p-duration) linear var(--p-delay) infinite;
  will-change: transform, opacity;
}
.hero-petal svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(63, 107, 61, 0.10));
}
@keyframes petalFall {
  0% {
    transform: translate(0, 0) rotate(0deg) rotateY(0deg);
    opacity: 0;
  }
  8% {
    opacity: var(--p-opacity, 0.85);
  }
  25% {
    transform: translate(calc(var(--p-sway) * 0.6), 25vh) rotate(calc(var(--p-rot) * 0.25)) rotateY(160deg);
  }
  50% {
    transform: translate(calc(var(--p-sway) * -0.8), 50vh) rotate(calc(var(--p-rot) * 0.5)) rotateY(20deg);
  }
  75% {
    transform: translate(calc(var(--p-sway) * 0.4), 75vh) rotate(calc(var(--p-rot) * 0.78)) rotateY(200deg);
  }
  92% {
    opacity: var(--p-opacity, 0.85);
  }
  100% {
    transform: translate(0, 108vh) rotate(var(--p-rot)) rotateY(360deg);
    opacity: 0;
  }
}

/* ----------------------------------------------------------------
   レイヤー前後関係: 理念/スライダーをアニメ地レイヤーの上に
   （style.css の .hero-split > .hero-fixed { z-index:2 } と整合）
   ---------------------------------------------------------------- */
.hero-split > .hero-fixed,
.hero-split > .hero-slider__track {
  position: relative;
  z-index: 4;
}
/* hero-fixed 内の理念テキストはエンブレム(z:1)より前面に */
.hero-fixed__brand,
.hero-fixed__catch,
.hero-fixed__sub {
  position: relative;
  z-index: 2;
}

/* ----------------------------------------------------------------
   PC: ロゴとキャッチの重なり回避（2026-05-29 CCO監修 must-fix / CEO決定=位置調整）
   旧: top:50%/left:50% で中央配置 → 縦書きキャッチ「笑顔と安心を届ける。」と
       約半分重なり、不透明ロゴで「届ける。」付近が読みにくかった。
   CEO決定: 透かし化(opacity下げ)はせず「位置調整」で回避。実物ロゴの
       浮き出る鮮明さ・存在感は保つ（opacityは下げない / 0.9維持）。
   対応: 縦書きキャッチはパネルの横中央やや左に縦長で立つ。エンブレムを
       中央(left:50%)からパネル右側(right:20px)へ寄せ、キャッチの「横」へ
       左右に住み分けて重なりを断つ。上下はキャッチと同じ縦中央。
   実測(1280px): 旧=キャッチと約51%重なり → 新=横方向の重なり0px。
   ---------------------------------------------------------------- */
@media (min-width: 769px) {
  .hero-fixed__emblem {
    /* 縦書きキャッチはパネルの横中央やや左（幅約112px）に縦長で立つ。
       エンブレムをパネル右側へ寄せ、キャッチの「横」に住み分けて重なりを断つ。
       上下はキャッチと同じく縦中央に揃え、左右でクリアに分離する。
       実測(1280px): キャッチ右端との間に約11pxの余白、パネル右端から約21px内側。 */
    top: 50%;
    left: auto;
    right: 20px;
    transform: translateY(-50%);
    width: clamp(150px, 33%, 180px);       /* 右側余白に収める。鮮明さは保つ */
    opacity: 0.9;                          /* CEO決定: 下げない（鮮明さ・存在感を維持） */
  }
}

/* ----------------------------------------------------------------
   レスポンシブ: モバイルは花びら枚数をJS側で抑制。エンブレムは小さめ
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  /* 2026-05-29 HERO重なり修正（CEO FB）:
     モバイルは理念パネルが縦に詰まり、中央配置の葉エンブレムが
     縦書き→横書きに切り替わった縦書きキャッチ「笑顔と安心を届ける。」と
     ど真ん中で重なり、コーラルの葉が文字を横切っていた。
     エンブレムを小さくし、パネル上部（ブランドロゴ帯の背後）へ退避させて
     キャッチと重ならないようにする。文言・画像・アニメ自体は変更しない。 */
  .hero-fixed__emblem {
    width: clamp(120px, 42%, 168px);
    top: 26%;                 /* 中央(50%)→上方へ。ブランド帯の背後に退避 */
    opacity: 0.55;            /* 背景ウォーターマーク的に薄める（文字との競合を回避） */
  }
}
@media (max-width: 480px) {
  .hero-fixed__emblem {
    width: clamp(108px, 38%, 150px);
    top: 24%;
    opacity: 0.5;
  }
}

/* =================================================================
   2026-05-31 CEO新方針: HERO自然演出（葉エンブレム撤去後の左パネル）
   - 葉エンブレム削除でロゴの重複が解消 → 左パネルの空間に「自然を感じる動き」3層
     ① さんざめき光（上から斜めに差し込む）
     ② 葉の影（大きなシルエットがふわふわ揺れる）
     ③ 水彩じみ（下からじわっと滲み上がる）
   - 縦書きキャッチコピーが2行ずつ立ち上がる
   - スライダー切替に軽いKen Burns + 長めクロスフェード
   ================================================================= */

/* hero-fixed を positioning ベースに */
.hero-fixed { position: relative; overflow: hidden; }

/* ① さんざめき光: 左パネル上部から斜めに差し込む光のシャワー */
.hero-fixed::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(140deg,
      rgba(255, 252, 230, 0.70) 0%,
      rgba(255, 252, 230, 0.40) 18%,
      rgba(255, 252, 230, 0)    48%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  animation:
    lightShine 4.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s forwards,
    lightDrift 22s ease-in-out 5s infinite;
  will-change: opacity, transform;
}
@keyframes lightShine {
  0%   { opacity: 0; transform: translateX(-14%); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes lightDrift {
  0%, 100% { transform: translateX(0)    scale(1); }
  50%      { transform: translateX(6%)   scale(1.04); }
}

/* ③ 水彩じみ: 左パネル下部から上に向かってふわっと滲む薄緑のシミ */
.hero-fixed::after {
  content: '';
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -28%;
  height: 62%;
  background:
    radial-gradient(ellipse at 50% 100%,
      rgba(143, 181, 113, 0.32) 0%,
      rgba(143, 181, 113, 0.18) 35%,
      rgba(143, 181, 113, 0)    75%);
  opacity: 0;
  filter: blur(22px);
  pointer-events: none;
  z-index: 1;
  animation:
    watercolorEmerge 4.2s ease-out 0.6s forwards,
    watercolorBreath 12s ease-in-out 5.5s infinite;
  will-change: opacity, transform;
}
@keyframes watercolorEmerge {
  0%   { opacity: 0; transform: translateY(40%) scale(0.92); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes watercolorBreath {
  0%, 100% { transform: translateY(0)  scale(1); }
  50%      { transform: translateY(-3%) scale(1.06); }
}

/* ② ロゴウォーターマーク（2026-05-31 CEO決定: 葉SVG → 実物ロゴをグレースケール透かしに）
   - 完全グレースケール（色なし）+ 低opacityで存在感を抑える
   - 中央寄り配置でキャッチコピーと重ねず、輪郭のうっすらした気配だけ感じる
   - swayは継続：呼吸する生命感を残す */
.hero-leaf-shadow {
  position: absolute;
  top: 50%;
  right: 6%;
  width: 52%;
  max-width: 340px;
  opacity: 0;
  pointer-events: none;
  z-index: 1;          /* キャッチ(z:2)より背面 */
  transform: translateY(-50%);
  animation:
    leafShadowFade 3.8s ease-out 0.9s forwards,
    leafShadowSway 11s ease-in-out 4.8s infinite;
  will-change: opacity, transform;
}
.hero-leaf-shadow__img {
  width: 100%;
  height: auto;
  display: block;
  /* 完全グレースケール + わずかにブラー = うっすら透かし
     mix-blend-modeを外し、シンプルに opacity で存在感を制御（背景クリームに対して灰の透かしが見える） */
  filter: grayscale(1) brightness(0.7) contrast(1.1) blur(0.3px);
}
@keyframes leafShadowFade {
  0%   { opacity: 0; transform: translate(12px, calc(-50% - 18px)) rotate(-3deg) scale(0.96); }
  /* 最終 opacity: うっすら見える程度（0.18 前後）。キャッチを邪魔しない */
  100% { opacity: 0.18; transform: translate(0, -50%) rotate(0deg) scale(1); }
}
@keyframes leafShadowSway {
  0%, 100% { transform: translate(0, -50%)        rotate(0deg); }
  25%      { transform: translate(0, calc(-50% - 4px)) rotate(-1.4deg); }
  50%      { transform: translate(0, calc(-50% + 3px)) rotate(0deg); }
  75%      { transform: translate(0, calc(-50% - 2px)) rotate(1.4deg); }
}

/* スマホでも確実に出す（旧 emblem 用のモバイル退避ルールが残っていたため明示） */
@media (max-width: 768px) {
  .hero-leaf-shadow {
    top: 50%;
    right: 6%;
    width: 56%;
    max-width: 240px;
  }
  /* sway の calc(-50% ± Npx) の -50% を相対値で維持するため translate を再宣言は不要 */
}

/* 縦書きキャッチコピー: 2行を時間差で立ち上がり（自然演出のあとに） */
.hero-fixed__catch { position: relative; z-index: 2; }
.hero-fixed__catch-line {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  animation: catchEmerge 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  will-change: opacity, transform;
}
.hero-fixed__catch-line:nth-child(1) { animation-delay: 1.2s; }
.hero-fixed__catch-line:nth-child(2) { animation-delay: 1.8s; }
@keyframes catchEmerge {
  0%   { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* サブテキスト: キャッチ完了後にやわらかく */
.hero-fixed__sub {
  position: relative;
  z-index: 2;
  opacity: 0;
  animation: catchEmerge 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) 2.7s forwards;
}

/* スライダー画像: 軽いKen Burns（1.06→1.0）+ クロスフェード長め */
.hero-slide--image .hero-slide__image {
  transform: scale(1.06);
  transition: transform 7s ease-out, opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-slide--image.is-active .hero-slide__image {
  transform: scale(1.0);
}

/* ----------------------------------------------------------------
   prefers-reduced-motion: モーション全停止
   - 葉は「浮き出た最終状態」で静止表示（opacity:1）
   - 花びらは非表示
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__emblem-logo {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .hero-fixed__emblem.is-settled .hero__emblem-logo { animation: none !important; }
  .hero__petals { display: none !important; }
  .hero-fixed::before, .hero-fixed::after, .hero-leaf-shadow {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .hero-fixed__catch-line, .hero-fixed__sub {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .hero-slide--image .hero-slide__image { transform: none !important; transition: opacity 0.5s; }
}

/* =================================================================
   2026-06-01 HERO左パネル リッチアニメ（CCO設計指示書 2026-06-01.md）
   既存5層（さんざめき光/水彩じみ/葉ロゴ透かし/キャッチ立ち上がり/花びら）
   に、別軸・別モチーフ・別周期の4要素を追加：
   N1 縦の光柱 / N2 光の粒（3粒） / N3 下からの草影 / N4 キャッチ呼吸ハロー
   - 緑単軸（青/橘/暖色クリーム不使用）
   - GPU加速プロパティ（transform/opacity）のみ
   - prefers-reduced-motion 全対応
   ================================================================= */

.hero-rich {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1; /* キャッチ(z:2)より背面、地レイヤー扱い */
}

/* N1. 縦の光柱（朝陽のシャフト） ----------------------------- */
.hero-rich__pillar {
  position: absolute;
  top: -6%;
  left: 58%;
  width: 110px;
  height: 112%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 30%,
    rgba(255, 255, 255, 0.55) 70%,
    rgba(255, 255, 255, 0) 100%);
  filter: blur(18px);
  opacity: 0;
  transform-origin: 50% 50%;
  animation:
    lightPillarFade 5s ease-out 1.2s forwards,
    lightPillarBreath 9s ease-in-out 6.2s infinite;
  will-change: opacity, transform;
}
@keyframes lightPillarFade {
  0%   { opacity: 0; transform: scaleY(0.92); }
  100% { opacity: 0.55; transform: scaleY(1); }
}
@keyframes lightPillarBreath {
  0%, 100% { opacity: 0.50; transform: scaleY(1)    translateX(0); }
  50%      { opacity: 0.70; transform: scaleY(1.04) translateX(-3%); }
}

/* N2. 光の粒（3粒・ホタル風） -------------------------------- */
.hero-rich__spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 240, 0.9) 0%,
    rgba(255, 255, 240, 0.4) 40%,
    rgba(255, 255, 240, 0)   70%);
  filter: blur(0.5px);
  opacity: 0;
  will-change: opacity, transform;
}
.hero-rich__spark--1 { top: 28%; left: 22%; animation: sparkDrift 7s ease-in-out 2.0s infinite; }
.hero-rich__spark--2 { top: 64%; left: 48%; animation: sparkDrift 9s ease-in-out 3.4s infinite; }
.hero-rich__spark--3 { top: 18%; left: 76%; animation: sparkDrift 11s ease-in-out 4.6s infinite; }
@keyframes sparkDrift {
  0%       { opacity: 0;    transform: translate(0, 0)     scale(0.85); }
  20%      { opacity: 0.55; transform: translate(6px, -10px) scale(1); }
  50%      { opacity: 0.75; transform: translate(-4px, -22px) scale(1.1); }
  80%      { opacity: 0.50; transform: translate(8px, -14px) scale(0.95); }
  100%     { opacity: 0;    transform: translate(0, 0)     scale(0.85); }
}

/* N3. 下からの草影（左右で揺れる） --------------------------- */
.hero-rich__grass {
  position: absolute;
  bottom: 0;
  width: 120px;
  height: 60px;
  color: var(--c-primary-light);
  opacity: 0.10;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.hero-rich__grass--left  {
  left: -10px;
  animation: grassFade 4.5s ease-out 1.6s forwards, grassSwayLeft 13s ease-in-out 6.5s infinite;
}
.hero-rich__grass--right {
  right: -10px;
  animation: grassFade 4.5s ease-out 1.9s forwards, grassSwayRight 14s ease-in-out 6.9s infinite;
}
@keyframes grassFade {
  0%   { opacity: 0;    transform: translateY(14px) rotate(0deg); }
  100% { opacity: 0.10; transform: translateY(0)    rotate(0deg); }
}
@keyframes grassSwayLeft {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(0) rotate(2deg); }
}
@keyframes grassSwayRight {
  0%, 100% { transform: translateY(0) rotate(1.5deg); }
  50%      { transform: translateY(0) rotate(-2deg); }
}

/* N4. キャッチコピー呼吸ハロー ------------------------------- */
.hero-fixed__catch::before {
  content: '';
  position: absolute;
  inset: -8% -22%;
  background: radial-gradient(ellipse 50% 70% at 50% 50%,
    rgba(143, 181, 113, 0.22) 0%,
    rgba(143, 181, 113, 0.10) 45%,
    rgba(143, 181, 113, 0)    78%);
  filter: blur(28px);
  z-index: -1;          /* キャッチ文字の背面 */
  opacity: 0;
  pointer-events: none;
  animation: catchHaloBreath 6.5s ease-in-out 3.0s infinite;
  will-change: opacity, transform;
}
@keyframes catchHaloBreath {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.65; transform: scale(1.04); }
}

/* レスポンシブ: モバイル（粒は1つに / 草は縮小 / 光柱は中央寄せ） */
@media (max-width: 768px) {
  .hero-rich__pillar {
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 100%;
  }
  /* 粒は中央の1つだけ表示。負荷削減 */
  .hero-rich__spark--1,
  .hero-rich__spark--3 { display: none; }
  .hero-rich__spark--2 {
    top: 55%;
    left: 50%;
    transform: translateX(-50%);
  }
  .hero-rich__grass {
    width: 90px;
    height: 48px;
    opacity: 0.08;
  }
  .hero-fixed__catch::before {
    inset: -6% -8%;
    filter: blur(20px);
  }
}

/* prefers-reduced-motion 全対応 */
@media (prefers-reduced-motion: reduce) {
  .hero-rich__pillar {
    opacity: 0.45 !important;
    animation: none !important;
    transform: none !important;
  }
  .hero-rich__spark { display: none !important; }
  .hero-rich__grass {
    opacity: 0.10 !important;
    animation: none !important;
    transform: none !important;
  }
  .hero-fixed__catch::before {
    opacity: 0.45 !important;
    animation: none !important;
    transform: none !important;
  }
}