/* ============================================
   Project: sakura-thanks (ありがとうの桜)
   Author: yachiyo8
   Version: 2.0.0
   Description: 情緒設計Webサイトのスタイル定義
   ============================================ */
/*
   1. Base & Reset Styles
   2. Sakura
   3. Message form
   4. Message List
   5. Message List View
   6. Background Styles
*/

/* ------------------------------
   1. Base & Reset Styles
   ------------------------------ */
/* 変数登録 */
   :root{
  --border-radius:4px;
  --primary-black:#3b3b3b;
}

/* 非表示用クラス */
.is-hidden {
  display: none !important;
}

body, p, h2 {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--primary-black, #3b3b3b);
  margin: 0;
  padding: 0;
  /* Safari / Chrome 向けのアンチエイリアス最適化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 描画精度の最適化:フォントの滲み解消用 */
  text-rendering: optimizeLegibility;
}

/* aタグのすべての状態に対して文字色を固定 */
a,
a:link,
a:visited,
a:hover,
a:active {
  color: var(--primary-black, #3b3b3b);
  text-decoration: none; /* 下線を消す場合 */
}

h1 {
  font-size: 1.45rem;
  text-align: center;
  margin: 24px 0;
  letter-spacing: 16px;

  @media (max-width: 375px), (max-height: 670px) {
    font-size: 1.25rem;
    margin: 24px 0 14px;
  }
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;/* iOS Safari用 */
  max-width: 430px;/* iPhone Pro Max等も収まる上限サイズ */
  margin: 0 auto;
  position: relative;/* 子要素（桜やボタン等）の絶対配置の基準点 */
}

.top-view-container{
  /*トップ画面エリア：余った縦スペースをすべて引き伸ばす */
  display: flex;
  flex-direction: column;
  flex: 1;
}

.btn {
  width: 100%;
  padding: 0.6rem;
  background: #ebebeb;
  border: 1px solid #3b3b3b;
  cursor: pointer;
  box-sizing: border-box;
  font-size: 1rem;
  border-radius: var(--border-radius);
  /* ★iOS Safari対策＆文字色・フォント固定 */
  color: var(--primary-black, #3b3b3b);
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  filter: drop-shadow(0 1px 3px #b3b3b3);

}

/* メッセージカウンター */
.counter {
  margin-top: auto; /* ★最重要：上の余白をすべて押し出して下へ配置 */
  padding-top: 24px;

  /* 画面幅が狭い、または縦幅が短い端末用の調整 */
  @media (max-width: 375px), (max-height: 670px) {
    padding-top: 12px;
  }

  .counter-label {
    font-size: 0.875rem;
    text-align: center;
    letter-spacing: 2px;

    @media (max-width: 375px), (max-height: 670px) {
      font-size: 0.75rem; /* ラベルを少し小さく */
    }
  }

  .counter-num {
    width: fit-content;
    font-size: 1.5rem;
    border: 1px solid #c3c3c3;
    margin: 4px auto 0;
    background: rgba(255 255 255 / 0.8);

    @media (max-width: 375px), (max-height: 670px) {
      font-size: 1.2rem; /* カウンター数字を小さく */
    }

    span {
      padding: 0 6px;
      border-right: 1px solid #c3c3c3; /* 数字と数字の間の仕切り線 */

      &:last-child {
        border-right: none; /* 一番右の仕切り線だけ消す */
      }
    }
  }
}

.message-text {
  /* 登録したメッセージ用 \n による改行をそのまま画面に反映させる設定 */
  white-space: pre-line;
}

.copy{
  color: #c3c3c3;
  font-size: 10px;
  text-align: center;
  margin: 8px 0;
  opacity: 0.4;
  margin-top: auto; /* ★最重要：余った縦スペースをすべて上に作って最下部へ押し出す */
}

/* ------------------------------
   2. Sakura
   ------------------------------ */
/* 描画エリア */
#sakura-container {
  position: fixed;
  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; と同じ（width/heightも不要） */
  pointer-events: none;
  z-index: -1; /* 背景に配置 */
}
/* 桜を包む枠・アニメーション設定 */
.sakura {
  position: absolute;
  width: 50px;
  height: 50px;
  display: inline-block;
  animation: float 3.2s ease infinite, petal-glow 6s ease-in infinite;
  overflow: visible;
  opacity: 0; /* JSで生成された直後は透明にしてチラつきを防止 */
}

/* SVG本体を親要素いっぱいに広げる */
.sakura-svg {
  width: 100%;
  height: 100%;
  stroke: #fff;
  stroke-width: 0.5px; /* 線の太さ設定 */
  overflow: visible; /* ★これが必要！SVG枠外の光や影を表示させる */
}

/* 浮遊アニメーション */
@keyframes float {
  0%,
  100% {
    opacity: 1;
    transform: scale(1) translate(0, 0) ;
  }

  50% {
    transform: scale(1.1) translate(0, -8px) ;
  }
}

/* 2. ★重要：色と光の往復アニメーション（glow & color change） */
@keyframes petal-glow {
  /* 0%, 100%: ペールピンク ＆ 強いネオン光彩 */
  0%, 100% {
    opacity: 1;
    fill: #ffcfe8; /* ペールピンク */
    /* 強いネオン効果 */
    filter: drop-shadow(0 0 6px #bfd7f9) drop-shadow(0 0 12px #bfd7f9);
  }

  /* 50%: 中間色 ＆ 少しぼかした淡い光彩（光のゆらめき） */
  33% {
    fill: #f6dcfc;
    filter: drop-shadow(0 0 6px #d9c1f1) drop-shadow(0 0 12px #d9c1f1);
  }
    66% {
    fill: #b8e2f9; /* ペールブルー */
    /* ネオン効果を少し弱く、ぼかし量を増やす（ゆらめき表現） */
    filter: drop-shadow(0 0 6px #fbcbf0) drop-shadow(0 0 12px #fbcbf0);
    opacity: 0.9; /* 光が淡くなるのを表現 */
  }
}

/* ------------------------------
   3. Message form
   ------------------------------ */
   /* 初期状態：透明 ＆ 少し下に配置 */
.fade-in-target {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 1s ease, transform 1s ease;
  pointer-events: none; /* 非表示時はクリック判定を無効化 */
}

/* 2秒後に付与されるクラス */
.fade-in-target.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto; /* 表示されたら操作可能に */
}

/* 使い方 */
.usage-card {
  background-color: #e5e5e5;
  padding: 12px;
  margin: 0 1rem 10px;
  letter-spacing: 1px;
  border-radius: var(--border-radius);
  border: thick double #bec9ce;

    @media (max-width: 375px), (max-height: 670px) {
    padding: 8px;
  }
}

.usage-title{
  font-size: 1.1rem;
  padding-bottom: 6px;

  @media (max-width: 375px), (max-height: 670px) {
    font-size: 1rem;
    padding-bottom: 2px;
  }
}

/* 入力フォーム */
.message-form{
  margin: 0 1rem;
}

/* iOS Safariの自動ズーム防止（font-sizeを16px以上にする） */
input[type="text"],
input[type="email"],
textarea {
  font-size: 16px !important; /* 16px以上にすることでズームが発生しなくなります */
}

.message-textarea {
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  padding: 0.5rem;
  border: 1px solid #333;
  border-radius: var(--border-radius);
}

.btn-submit{
  color: #fff;
  background: #303030;
}

/* ------------------------------
   4. Message List
   ------------------------------ */
.btn-list {
  width: calc(100% - 2rem); /* 左右の画面端に余白を作る */
  max-width: 430px; /* .containerの最大幅に合わせる */
  box-sizing: border-box;
  background: #dcd6ff;
  margin: 24px auto 10px;

  /* リンク状態・訪問済み状態の文字色を固定 */
  &:link,
  &:visited {
    color: #3b3b3b;
  }

   @media (max-width: 375px), (max-height: 670px) {
    margin: 20px auto 10px;
  }
}

/* ------------------------------
   5. Message List View
   ------------------------------ */
.list-view-container {
  padding: 0 1rem;
  box-sizing: border-box;
}

.list-title {
  font-size: 1.25rem;
  margin: 20px 0;
  letter-spacing: 2px;

  @media (max-width: 375px),
  (max-height: 670px) {
    font-size: 1.25rem;
    margin: 20px 0 14px;
  }
}

/* カードを並べるコンテナ（固定ボタンと被らないよう下部に余白） */
#message-card-container {
  padding-bottom: 60px;
}

/* メッセージカード */
.message-card {
  border: 1px solid #3b3b3b;
  background: rgba(255, 255, 255, 0.8);
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: var(--border-radius);
}

.card-id {
  font-size: 0.875rem;
  margin-bottom: 0.2rem;
  letter-spacing: 1px;
}

.card-text {
  font-size: 0.9375rem;
  line-height: 1.5;
  white-space: pre-line; /* 改行を有効化 */
}

/* 下部固定ボタンエリア */
.btn-back-wrapper {
  position: fixed;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  max-width: 430px;
  box-sizing: border-box;
  z-index: 2;
}

/* トップにもどるボタン */
.btn-top{
  background: #dcd6ff;
}

/* ------------------------------
   6. Background Styles
      Mesh Gradient move
   ------------------------------ */
.bg-move {
  position: fixed;
  inset: 0; /* top: 0; left: 0; right: 0; bottom: 0; と同義 */
  z-index: -2; /* 桜（-1）よりさらに奥に配置 */
  pointer-events: none;
  background-color: #f2f5f7; /* ベース：ペールグレー */
  overflow: hidden;
  /* ★重要：全体を強めにぼかすことで色の境目を液体のように溶かし合わせる */
  filter: blur(80px);
  /* パフォーマンス最適化 */
  transform: translateZ(0);
}

/* 左上を支点とする主体のスカイブルー */
.bg-move::before {
  content: "";
  position: absolute;
  top: -15vw;
  left: -15vw;
  width: 100vw;
  height: 100vh;
  border-radius: 50%;
  background: rgba(210, 228, 238, 0.5);
  transform-origin: top left; /* ★左上を支点に固定 */
  animation: blob-pivot-1 6s infinite ease-in-out alternate;
}

/* 支点（左上）から斜め下へ波及するニュアンスブルー */
.bg-move::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 110vw;
  height: 110vh;
  border-radius: 50%;
  background: rgba(240, 243, 246, 0.6);
  transform-origin: top left; /* ★左上を支点に固定 */
  animation: blob-pivot-2 6s infinite ease-in-out alternate;
}

/* 左上を基点とした波及・変形アニメーション */
@keyframes blob-pivot-1 {
  0% {
    transform: scale(1) rotate(0deg) translate(0, 0);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }
  50% {
    transform: scale(1.2) rotate(25deg) translate(4vw, 8vh);
    border-radius: 60% 40% 30% 70% / 50% 30% 70% 40%;
  }
  100% {
    transform: scale(0.95) rotate(45deg) translate(2vw, 4vh);
    border-radius: 30% 70% 50% 50% / 30% 60% 40% 70%;
  }
}

@keyframes blob-pivot-2 {
  0% {
    transform: scale(1) rotate(0deg) translate(0, 0);
    border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%;
  }
  50% {
    transform: scale(1.25) rotate(-20deg) translate(8vw, 6vh);
    border-radius: 30% 70% 70% 30% / 40% 60% 30% 70%;
  }
  100% {
    transform: scale(1.05) rotate(-35deg) translate(4vw, 12vh);
    border-radius: 60% 40% 40% 60% / 70% 30% 50% 50%;
  }
}