/* =========================================================================
   アプリを開いたときの演出（保護者アプリ・スタッフアプリ共通）
   2026-09-11 遼様の決定「案B 朝のひかり」 → 同日、実機でのご指摘を受けて改定

   下から光がゆっくりのぼり、白かったロゴが色づいて、時間帯に合った挨拶が出る。
   **読み込むたびに毎回、同じ長さ（2.5秒）で出す**（以前あった「最初は長く・2回目から
   短く」の出し分けは、短いほうが思ったより短く感じるとのご指摘で廃止した）。
   光・ロゴ・挨拶が出るタイミングは、挨拶が消え始める前に1秒前後は読める配分にしてある。
   2.5秒たったら、**0.5秒かけてふわっと消え**、下の画面（ログイン画面／カレンダー）が透けて
   見えてくる。全体で3.0秒（2026-09-12 遼様のご要望「終わりもふわっと。0.5秒伸びてok」）。

   【ここに書く理由】
   2つのアプリで1文字も違わない同じ演出にするため、CSSもJSも1本にして両方から読む。
   アプリごとの色（--mah-* / --tea-*）には一切ぶら下がらない。ログイン前から出るものなので、
   アプリ本体のCSSが何であっても、この1枚だけで完成している必要がある。

   【消えないと詰む】
   JSが何かで動かなくても、演出が画面を覆ったままになってはいけない。
   下の splash-safety が、5.7秒で必ず消えるようにしている（JSは普通それより早く消す）。
   ========================================================================= */

#app-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 端末が出す起動画面（マニフェストの background_color）と同じ色から始める。
     ここが違うと、端末の画面からこの演出に切り替わる瞬間に色が跳ねる */
  background: #f5f3e7;
  /* 保険：JSが動かなくても必ず消える。JSは普通これより早く消す */
  animation: splash-safety 5.7s linear forwards;
  /* iPhone の丸い角・ノッチを避ける */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* 時間帯の色。JSが #app-splash に付ける。
   背景は「クリーム色から、その時間帯の色へ」ゆっくり変わる（端末の起動画面からの繋ぎ） */
#app-splash::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: splash-tint .8s ease-out .05s forwards;
}
#app-splash.t-morning::before { background: linear-gradient(#e9f3fb 0%, #f4f8fa 55%, #f8fafa 100%); }
#app-splash.t-noon::before    { background: linear-gradient(#dfeffa 0%, #edf5f5 55%, #f2f7f1 100%); }
#app-splash.t-evening::before { background: linear-gradient(#1d2f4e 0%, #27395c 55%, #2f4467 100%); }
#app-splash.t-night::before   { background: linear-gradient(#0e1729 0%, #16233c 55%, #1d2c48 100%); }

/* 下からのぼる光 */
.splash-glow {
  position: absolute;
  left: 50%;
  bottom: -78%;
  width: 250%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  opacity: 0;
  animation: splash-rise 1.9s cubic-bezier(.22, .55, .25, 1) 0s forwards;
}
.t-morning .splash-glow { background: radial-gradient(circle, rgba(243,196,86,.95) 0%, rgba(243,203,110,.5) 38%, rgba(243,203,110,0) 66%); }
.t-noon    .splash-glow { background: radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(178,220,245,.55) 36%, rgba(178,220,245,0) 64%); }
.t-evening .splash-glow { background: radial-gradient(circle, rgba(232,238,252,.62) 0%, rgba(155,180,225,.24) 38%, rgba(155,180,225,0) 66%); }
.t-night   .splash-glow { background: radial-gradient(circle, rgba(224,233,250,.5) 0%, rgba(140,166,214,.2) 38%, rgba(140,166,214,0) 66%); }

/* ロゴ。白っぽい状態から、ゆっくり色が戻る */
.splash-logo {
  position: relative;
  width: clamp(104px, 30vw, 148px);
  height: auto;
  opacity: 0;
  filter: saturate(.1) brightness(1.35);
  transform: translateY(8px);
  animation: splash-logo 1.4s cubic-bezier(.3, .7, .3, 1) .4s forwards;
}

/* 挨拶。2行目が途中で折り返して読みづらくならないよう、
   1行に収まる大きさに抑える（iPhone SE の横320pxでも収まることを実機で確認）。
   はみ出したときは折り返さず、まれに末尾が切れる（読めないより良い）ため
   white-space: nowrap は付けず、代わりに文字を小さくして収める */
.splash-hello {
  position: relative;
  margin-top: clamp(18px, 5vw, 26px);
  text-align: center;
  opacity: 0;
  padding: 0 16px;
  max-width: 100%;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", system-ui, sans-serif;
  /* 消え始める2.5秒より1秒前後は読めるように配分する（2026-09-11 遼様のご指摘で、
     以前は出そろう瞬間に消え始めて読めなかった。ロゴが色づき始めたあとに出す） */
  animation: splash-hello .6s ease-out .85s forwards;
}
.splash-hello .g1 {
  display: block;
  font-size: clamp(17px, 4.8vw, 21px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
}
.splash-hello .g2 {
  display: block;
  margin-top: 6px;
  /* 15文字（今日もいい一日になりますように）が 320px でも1行に収まる大きさ */
  font-size: clamp(13px, 3.5vw, 15px);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.5;
  opacity: .9;
}
.t-morning .splash-hello { color: #7a5a2c; }
.t-noon    .splash-hello { color: #3e6e80; }
.t-evening .splash-hello,
.t-night   .splash-hello { color: #e6edf8; }

/* 夜だけ星を出す。2026-09-11 遼様のご指示で、以前より少しだけ目立たせてある
   （数は splash.js 側で6個に増やした。ここでは drop-shadow でわずかに光らせる。やりすぎない） */
.splash-star {
  position: absolute;
  opacity: 0;
  transform-origin: center;
  animation: splash-twinkle 1.9s ease-in-out infinite;
  filter: drop-shadow(0 0 3px rgba(240, 228, 184, .85));
}
.splash-star svg { width: 100%; height: 100%; display: block; }

/* ---- 終わり。JSが付ける ----
   is-leaving：0.5秒かけて不透明度を 1→0 にする。消え終わったら JS が要素ごと外す。
   消えていくあいだも覆いは下の画面の上にあるので、タップは下の画面に届かない
   （半分透けてよく見えないまま、カレンダーの日付などを押してしまうのを防ぐ。0.5秒だけ）。

   【以前ぷつっと切り替わっていた理由（2026-09-12）】
   以前は is-done で animation: none にして transition で薄くしていたが、
   保険の animation（splash-safety）が効いていた不透明度を切った瞬間は、transition の
   起点にならない端末があり、フェードせずに一瞬で消えていた。
   そこで transition ではなく、1 から始まる別の animation（splash-out）に差し替える。
   保険の animation も消え始める時点では不透明度1なので、見た目がつながる。
   ただし消し始めが遅れて（裏に回ってタイマーが止まっていた等）、保険でもう薄くなりかけている・
   消えているときは、JS が is-leaving を付けずにその場で外す。付けると不透明度1からやり直しになり、
   消えた覆いがもう一度出てしまうため（2026-09-12） */
#app-splash.is-leaving {
  animation: splash-out .5s ease-out forwards;
}
/* 要素を外せなかったときの念のため（普通は JS が要素ごと外す） */
#app-splash.is-done {
  animation: none;
  opacity: 0;
  visibility: hidden;
}

@keyframes splash-tint  { to { opacity: 1; } }
@keyframes splash-rise  { 0% { bottom: -78%; opacity: 0; } 30% { opacity: .75; } 100% { bottom: -22%; opacity: 1; } }
@keyframes splash-logo  { to { opacity: 1; filter: saturate(1) brightness(1); transform: translateY(0); } }
@keyframes splash-hello { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
/* 星が完全には消えきらないよう最小の明るさを 0→.05 にし、いちばん明るい瞬間もわずかに大きくした
   （2026-09-11 遼様のご指示「もう少しだけ目立たせたい」。やりすぎないよう変化は小さくとどめる） */
@keyframes splash-twinkle { 0%, 100% { opacity: .05; transform: scale(.5); } 45% { opacity: 1; transform: scale(1.05); } }
@keyframes splash-out { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
/* 保険：JSが動かなくても5.7秒で必ず消える。最後の約0.5秒（91%〜）でふわっと薄くなる */
@keyframes splash-safety { 0%, 91% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }

/* 動きを控える設定の方には、動かさずロゴと挨拶だけを出す（行き先は変えない） */
@media (prefers-reduced-motion: reduce) {
  #app-splash::before,
  .splash-glow,
  .splash-logo,
  .splash-hello,
  .splash-star {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .splash-glow { bottom: -22%; }
  /* 消えるときも一瞬では消さず、短く（0.2秒）薄くする。位置や大きさは動かさないので、
     動きを控える設定の方にも負担にならない */
  #app-splash.is-leaving { animation-duration: .2s; }
}

/* 横向き・背の低い画面では、ロゴを小さくして挨拶が画面外に出ないようにする */
@media (max-height: 520px) {
  .splash-logo { width: clamp(72px, 18vh, 104px); }
  .splash-hello { margin-top: 12px; }
}