/* kimochi.css — きもちの花の紹介（product.css の上に、アプリの花の色だけを重ねる） */
.kf .product-tag,
.kf .pt-g,
.kf .kf-name {
  background: linear-gradient(90deg, #f0962e 0%, #3dbb6d 38%, #3f8fe0 70%, #9b6cf0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kf .product-tag { white-space: normal; letter-spacing: 0.06em; font-size: clamp(1.15rem, 4.8vw, 1.9rem); margin-top: 26px; }   /* 名前より一段控えめに */
.kf .product-tag span,
.kf .product-lead span,
.kf .product-note span { display: inline-block; }

/* アプリ名：白いカプセルの中に、花の色の文字 */
.kf .product-name.kf-name {
  /* 上の層：文字だけに花の色のグラデーション／下の層：白いカプセル */
  line-height: 1.2;
  background-image: linear-gradient(90deg, #f0962e 0%, #3dbb6d 38%, #3f8fe0 70%, #9b6cf0 100%), linear-gradient(#fff, #fff);
  -webkit-background-clip: text, border-box;
  background-clip: text, border-box;
  color: transparent;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: clamp(1.45rem, 6vw, 2.3rem);   /* 正式な名前なので、下のキャッチコピーより少しだけ大きく */
  letter-spacing: 0.16em;
  padding-right: calc(clamp(26px, 5vw, 48px) - 0.16em);
}
.kf .end-name.kf-name {
  display: inline-block;
  line-height: 1.3;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  letter-spacing: 0.16em;
}

/* 8つの気持ちの花：花びらが1枚ずつ、外へふわっとほどけて消え、少しして根もとからまた咲く
   （HEARTBEAT-16 の A〜H の点灯とは別の、ゆっくりした呼吸のような動き） */
.kf-flower { width: 92px; height: 92px; margin: -6px 0 22px; }
.kf-flower svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kf-flower .kp {
  opacity: 0.82;
  mix-blend-mode: multiply;          /* 重なったところの色が深くなる（アプリの花と同じ） */
  transform-box: fill-box;
  transform-origin: 50% 100%;        /* 花びらの根もと（花の中心）を軸に */
  animation: kfPetal 7.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.9s);
}
@keyframes kfPetal {
  /* 消えている時間を短くして、いつも6〜7枚が見えているように */
  0%, 6%    { opacity: 0.82; transform: translateY(0) scale(1); }
  18%       { opacity: 0;    transform: translateY(-16px) scale(0.86) rotate(10deg); }  /* ふわっと外へ、ほどけて消える */
  24%       { opacity: 0;    transform: translateY(0) scale(0.2); }
  36%, 100% { opacity: 0.82; transform: translateY(0) scale(1); }                     /* 根もとから、また咲く */
}
@media (max-width: 760px) { .kf-flower { margin-left: auto; margin-right: auto; } }
@media (prefers-reduced-motion: reduce) { .kf-flower .kp { animation: none; } }