/* style.css */

/* -----------------------------------------------------------------
   Base Styles & Typography
----------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  /* 日本語フォントを美しく表示するためのカーニング設定 */
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 選択範囲の色をブランドカラーに合わせる */
::selection {
  background-color: rgba(255, 116, 125, 0.2);
  color: #e05a63;
}

/* -----------------------------------------------------------------
   Character Animations (ISE-Ebi)
   エビのキャラクターに「可愛さ」と「生きている感じ」を与えるアニメーション
----------------------------------------------------------------- */

/* 全体の浮遊感 */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}

/* きほん: 3秒に一度ぴょこっと動く（左右反転込み） */
@keyframes anim-basic {
  0% { transform: scaleX(-1) scale(1) translateY(0); }
  10% { transform: scaleX(-1) scale(1.08) translateY(-5px); }
  20% { transform: scaleX(-1) scale(1) translateY(0); }
  100% { transform: scaleX(-1) scale(1) translateY(0); }
}

/* あいさつ: ぺこりとお辞儀 */
@keyframes anim-greet {
  0%, 100% { transform: scaleX(-1) rotate(0); }
  20% { transform: scaleX(-1) rotate(10deg); }
  50% { transform: scaleX(-1) rotate(-45deg); }
  80% { transform: scaleX(-1) rotate(0); }
}

/* キラキラ: ポーズを決める */
@keyframes anim-sparkle {
  0% { transform: scaleX(-1) scale(1) rotate(0); }
  50% { transform: scaleX(-1) scale(1.2) rotate(10deg); filter: brightness(1.2); }
  100% { transform: scaleX(-1) scale(1) rotate(0); }
}

/* はてな: 首をかしげる */
@keyframes anim-question {
  0%, 100% { transform: scaleX(-1) rotate(0); }
  20%, 80% { transform: scaleX(-1) rotate(-20deg); }
}

/* --- エビクラスへのアニメーション適用 --- */

/* ヒーロー: 浮遊 + 呼吸 */
.animate-float {
  animation: float-gentle 6s ease-in-out infinite !important;
}
.ebi-basic {
  animation: anim-basic 3s ease-in-out infinite;
}

/* 各セクション用エビ */
.ebi-greet {
  animation: anim-greet 1.5s ease-in-out infinite;
  transform-origin: bottom center;
}
.ebi-sparkle {
  animation: anim-sparkle 1.5s ease-in-out infinite;
}
.ebi-question {
  animation: anim-question 2s ease-in-out infinite;
}

/* -----------------------------------------------------------------
   Component Styling
   スタイリッシュさを演出するUIパーツの調整
----------------------------------------------------------------- */

/* ガラスモーフィズムの洗練 */
.glass-morphism {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02);
}

/* ナビゲーションリンクのホバーエフェクト */
nav a.text-slate-600 {
  position: relative;
}
nav a.text-slate-600::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: #ff747d;
  transition: width 0.3s ease;
}
nav a.text-slate-600:hover::after {
  width: 100%;
}

/* グラデーションテキストに動きをつける */
.text-gradient {
  background: linear-gradient(135deg, #ff747d 0%, #ff9aa0 50%, #ff747d 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 6s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

/* 機能紹介カードのホバー時の挙動 */
#features .group {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
}

#features .group:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -5px rgba(200, 200, 200, 0.3);
  border-color: rgba(255, 116, 125, 0.2);
}

/* アイコン背景の動き */
#features .group:hover .w-14 {
  transform: scale(1.1) rotate(5deg);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* プライシングカード（注目プラン） */
#pricing .border-brand-red {
  background: linear-gradient(to bottom, #fff, #fff);
  position: relative;
  z-index: 1;
  box-shadow: 0 25px 50px -12px rgba(255, 116, 125, 0.25);
}

#pricing .border-brand-red::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: linear-gradient(45deg, #ff747d, #ff9aa0);
  border-radius: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#pricing .border-brand-red:hover::before {
  opacity: 0.1;
}

/* CTAボタンの光沢アニメーション */
a[href="#contact"].bg-slate-900,
button.bg-slate-900,
a.bg-brand-red {
  position: relative;
  overflow: hidden;
}

a[href="#contact"].bg-slate-900::after,
button.bg-slate-900::after,
a.bg-brand-red::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: skewX(-20deg);
  transition: 0.5s;
}

a[href="#contact"].bg-slate-900:hover::after,
button.bg-slate-900:hover::after,
a.bg-brand-red:hover::after {
  left: 150%;
  transition: 0.7s ease-in-out;
}

/* -----------------------------------------------------------------
   Background & Decorations
   白ベースのデザインを損なわない繊細な装飾
----------------------------------------------------------------- */

/* ヒーローパターンのフェードアウト */
.hero-pattern {
  mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
}

/* 背景のブラー円のゆっくりとした鼓動 */
.animate-pulse-slow {
  animation: pulse-slow 8s ease-in-out infinite alternate;
}

@keyframes pulse-slow {
  0% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
}

/* ヒーロー背景のゆっくりズームアニメーション */
@keyframes hero-zoom {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.hero-bg-animate {
  animation: hero-zoom 30s ease-in-out infinite;
}

/* ヒーローメイン画像のささやかな揺れアニメーション */
@keyframes hero-main-bounce {
  0%, 80%, 100% { transform: translateY(0) rotate(0); }
  85% { transform: translateY(-8px) rotate(-1deg); }
  92% { transform: translateY(2px) rotate(0.5deg); }
  96% { transform: translateY(-2px) rotate(0); }
}

.hero-main-anim {
  animation: hero-main-bounce 3s ease-in-out infinite;
}