/* 河馬老師泳訓班 — 共用樣式
 * 大部分排版以 Tailwind utility classes 處理，這裡僅放置：
 *   - 字體變體微調
 *   - 設計系統內共用的特效 (浮力陰影、按鈕觸感、波浪 mask)
 *   - 動畫
 */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

.buoyant-shadow {
  box-shadow: 0 18px 38px -16px rgba(0, 101, 141, 0.25);
}
.soft-shadow {
  box-shadow: 0 8px 24px -10px rgba(0, 101, 141, 0.18);
}

/* 按鈕「實體按下」觸感 — 有顏色的下緣陰影 */
.cta-button-tactile {
  box-shadow: 0 4px 0 0 rgba(108, 30, 0, 0.85);
}
.cta-button-tactile:active {
  box-shadow: 0 0 0 0 rgba(108, 30, 0, 0.85);
  transform: translateY(4px);
}

.wave-divider {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23dcf1fb' d='M0,32 C240,96 480,128 720,96 C960,64 1200,16 1440,48 L1440,120 L0,120 Z'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
}

/* 飄浮動畫 — 用於英雄區的小飾物 */
@keyframes float-soft {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-10px); }
}
.float-soft {
  animation: float-soft 4s ease-in-out infinite;
}

@keyframes wave-pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50%      { transform: scale(1.05); opacity: 0.7; }
}
.wave-pulse {
  animation: wave-pulse 6s ease-in-out infinite;
}

/* 行內禁止 hover transform 在觸控裝置上閃爍 */
@media (hover: none) {
  .hover\:scale-105:hover { transform: none; }
}

/* Prose 區塊 — 給最新消息詳細頁的 markdown 風格 */
.prose-hippo {
  color: #091e25;
  line-height: 1.85;
  font-size: 17px;
}
.prose-hippo p {
  margin-bottom: 1.1em;
}
.prose-hippo h2 {
  font-family: Quicksand, 'Noto Sans TC', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #00658d;
  margin-top: 1.4em;
  margin-bottom: 0.5em;
}

/* 滾動條柔化 */
.scroll-soft::-webkit-scrollbar { height: 8px; }
.scroll-soft::-webkit-scrollbar-thumb {
  background: #bdc8d1;
  border-radius: 4px;
}