/* アニメーション: 弾む(バネ)動きを中心に、やさしく短く。「動きを減らす」設定の端末では、すべて止まります。 */
:root {
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* 少し行き過ぎて戻る(弾力) */
  --spring-strong: cubic-bezier(0.3, 1.9, 0.5, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- キーフレーム ---- */
@keyframes rise { from { opacity: 0; transform: translateY(22px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.6); } 100% { opacity: 1; transform: scale(1); } }
@keyframes dayPop { 0% { transform: scale(0.82); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes barRise { from { opacity: 0; transform: translateY(110%); } to { opacity: 1; transform: none; } }
@keyframes bannerDrop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes modalIn { 0% { opacity: 0; transform: scale(0.82) translateY(16px); } 100% { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastIn { 0% { opacity: 0; transform: translateX(-50%) translateY(28px) scale(0.92); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes slideFromRight { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes slideFromLeft { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes chipNew { 0% { transform: scale(0.2); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }
@keyframes softPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 160, 120, 0.45); } 50% { box-shadow: 0 0 0 8px rgba(0, 160, 120, 0); } }
@keyframes dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } }
@keyframes fabBounce { 0% { transform: translateY(40px) scale(0.8); opacity: 0; } 60% { transform: translateY(-6px) scale(1.06); opacity: 1; } 100% { transform: none; } }
@keyframes spin360 { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes confetti {
  0% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.6); opacity: 0; }
}

/* ---- 出てくる動き ---- */
.card { animation: rise 0.6s var(--ease-out) backwards; }
.card:nth-child(2) { animation-delay: 0.06s; }
.card:nth-child(3) { animation-delay: 0.12s; }
.card:nth-child(4) { animation-delay: 0.18s; }
.card:nth-child(5) { animation-delay: 0.24s; }
.card:nth-child(n+6) { animation-delay: 0.3s; }
.now-banner, .install-banner, .whoami-bar { animation: bannerDrop 0.55s var(--spring) backwards; }
.offline-banner { animation: bannerDrop 0.45s var(--spring) backwards; }
.list-item, .msg-row, .log-item { animation: fadeSlide 0.4s var(--ease-out) backwards; }
.list-item:nth-child(2), .msg-row:nth-child(2), .log-item:nth-child(2) { animation-delay: 0.04s; }
.list-item:nth-child(3), .msg-row:nth-child(3), .log-item:nth-child(3) { animation-delay: 0.08s; }
.list-item:nth-child(n+4), .msg-row:nth-child(n+4), .log-item:nth-child(n+4) { animation-delay: 0.12s; }

/* ---- ボタン: 押すとへこみ、離すとぷるんと戻る ---- */
button, .cal-day, .admin-link, .help-fab, .pw-toggle, #theme-toggle {
  transition: transform 0.45s var(--spring-strong), box-shadow 0.2s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.2s ease;
}
button:active, .help-fab:active, .pw-toggle:active, #theme-toggle:active, .admin-link:active { transform: scale(0.92) !important; transition-duration: 0.08s; }
@media (hover: hover) {
  button:hover { transform: translateY(-2px) scale(1.02); }
  .help-fab:hover { transform: translateY(-3px) scale(1.06); }
}

/* ---- カレンダー ---- */
.cal-day:not(.empty):not(.is-past):not(.is-booked):active { transform: scale(0.88); transition-duration: 0.08s; }
.cal-day.just-tapped { animation: dayPop 0.5s var(--spring); }
.cal-day.is-selected { transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.cal-chip.chip-new { animation: chipNew 0.7s var(--spring) backwards; }
.cal-grid.slide-next { animation: slideFromRight 0.4s var(--ease-out); }
.cal-grid.slide-prev { animation: slideFromLeft 0.4s var(--ease-out); }
.day-info { animation: popIn 0.4s var(--spring) backwards; transform-origin: top center; }
.cal-day.is-today .cal-day-num { display: block; width: fit-content; animation: todayPulse 2.6s ease-in-out infinite; }
@keyframes todayPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }

/* ---- 上部の「利用中」帯: やさしく脈打つ点 ---- */
.now-banner.is-now::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--sage, #2f8f6a); vertical-align: middle; animation: dot 1.6s ease-in-out infinite; }

/* ---- 固定バー・ボタン・案内 ---- */
.sticky-bar { animation: barRise 0.5s var(--spring); }
.help-fab { animation: fabBounce 0.8s var(--spring) 0.6s backwards; }
.sticky-bar #sticky-go { animation: softPulse 2.4s ease-in-out 0.6s infinite; }
.admin-link { animation: fadeIn 1.2s ease 0.8s backwards; }

/* ---- モーダル・通知 ---- */
.ui-overlay, .modal-back { animation: fadeIn 0.22s ease backwards; }
.ui-modal, .modal-box { animation: modalIn 0.5s var(--spring) backwards; }
#ui-toast.show { animation: toastIn 0.55s var(--spring) backwards; }
.chat-bubble { animation: popIn 0.4s var(--spring) backwards; transform-origin: bottom left; }
.chat-bubble.me { transform-origin: bottom right; }
.chat-yesno { animation: fadeSlide 0.35s var(--spring) backwards; }
.err:not(:empty) { animation: shake 0.45s ease; }

/* ---- テーマ切替ボタンはくるっと回る ---- */
#theme-toggle.spin { animation: spin360 0.6s var(--spring); }

/* ---- 予約できた!の紙ふぶき ---- */
.confetti-piece { position: fixed; z-index: 9999; width: 10px; height: 14px; border-radius: 2px; pointer-events: none; animation: confetti 1s var(--ease-out) forwards; }

/* ---- 「動きを減らす」設定の端末では、すべての動きを止める ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}