/* ===== FLUID ANIMATIONS ===== */
/* 柔らかくてダイナミックな全画面アニメーション */

/* 基本的な背景の呼吸アニメーション */
body {
  animation: backgroundBreathe 8s ease-in-out infinite;
}

@keyframes backgroundBreathe {
  0%, 100% { 
    background-color: #ffffff; 
  }
  25% { 
    background-color: #fefefe; 
  }
  50% { 
    background-color: #fdfdfd; 
  }
  75% { 
    background-color: #fcfcfc; 
  }
}

/* コンテナの柔らかい浮遊 */
.container {
  animation: gentleFloat 12s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes gentleFloat {
  0%, 100% { 
    transform: translateY(0px) scale(1); 
  }
  33% { 
    transform: translateY(-3px) scale(1.005); 
  }
  66% { 
    transform: translateY(2px) scale(0.998); 
  }
}

/* ヘロセクションの流動的な動き */
.hero {
  animation: heroFlow 15s ease-in-out infinite;
}

@keyframes heroFlow {
  0%, 100% { 
    transform: translateX(0px) translateY(0px); 
  }
  25% { 
    transform: translateX(2px) translateY(-1px); 
  }
  50% { 
    transform: translateX(-1px) translateY(2px); 
  }
  75% { 
    transform: translateX(1px) translateY(-1px); 
  }
}

/* テキスト要素の微細な動き */
.hero__title,
.hero__subtitle {
  animation: textGentleWave 10s ease-in-out infinite;
}

.hero__title {
  animation-delay: 0s;
}

.hero__subtitle {
  animation-delay: 2s;
}

@keyframes textGentleWave {
  0%, 100% { 
    transform: translateY(0px);
    opacity: 1;
  }
  50% { 
    transform: translateY(-1px);
    opacity: 0.98;
  }
}

/* セクションの波状動作（強化版） */
.section {
  animation: sectionWave 18s ease-in-out infinite;
  transform-origin: center center;
  position: relative;
}

.section:nth-child(odd) {
  animation-delay: 0s;
}

.section:nth-child(even) {
  animation-delay: 6s;
}

/* セクション間の連続性を表現するオーバーレイ */
.section::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(to bottom, 
    rgba(250, 250, 250, 0.2) 0%, 
    transparent 50%, 
    rgba(250, 250, 250, 0.2) 100%
  );
  animation: sectionConnection 15s ease-in-out infinite;
  pointer-events: none;
}

.section:first-child::before {
  display: none; /* 最初のセクションには不要 */
}

@keyframes sectionWave {
  0%, 100% { 
    transform: scale(1) rotate(0deg); 
  }
  33% { 
    transform: scale(1.001) rotate(0.05deg); 
  }
  66% { 
    transform: scale(1.002) rotate(-0.05deg); 
  }
}

@keyframes sectionConnection {
  0%, 100% { 
    opacity: 0.3;
    transform: scaleY(1);
  }
  50% { 
    opacity: 0.6;
    transform: scaleY(1.2);
  }
}

/* Valuesセクションの特別なアニメーション */
.values {
  animation: valuesFlow 20s ease-in-out infinite;
}

@keyframes valuesFlow {
  0%, 100% { 
    transform: translateX(0px); 
  }
  20% { 
    transform: translateX(1px); 
  }
  40% { 
    transform: translateX(-2px); 
  }
  60% { 
    transform: translateX(1px); 
  }
  80% { 
    transform: translateX(-1px); 
  }
}

.values__item {
  animation: valueItemFloat 8s ease-in-out infinite;
}

.values__item:nth-child(1) { animation-delay: 0s; }
.values__item:nth-child(2) { animation-delay: 1.6s; }
.values__item:nth-child(3) { animation-delay: 3.2s; }
.values__item:nth-child(4) { animation-delay: 4.8s; }
.values__item:nth-child(5) { animation-delay: 6.4s; }

@keyframes valueItemFloat {
  0%, 100% { 
    transform: translateY(0px) scale(1); 
  }
  50% { 
    transform: translateY(-2px) scale(1.002); 
  }
}

/* コンタクトセクションのシンプルなアニメーション */
.contact {
  animation: contactSectionFlow 18s ease-in-out infinite;
}

@keyframes contactSectionFlow {
  0%, 100% { 
    transform: translateY(0px); 
  }
  33% { 
    transform: translateY(-1px); 
  }
  66% { 
    transform: translateY(0.5px); 
  }
}

/* フォーム要素のシンプルな動き */
.form__group {
  animation: formGroupBreath 6s ease-in-out infinite;
}

.form__group:nth-child(odd) {
  animation-delay: 0s;
}

.form__group:nth-child(even) {
  animation-delay: 1s;
}

@keyframes formGroupBreath {
  0%, 100% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.001); 
  }
}

/* ボタンの脈動 */
.btn, .form__submit {
  animation: buttonPulse 4s ease-in-out infinite;
}

@keyframes buttonPulse {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); 
  }
  50% { 
    transform: scale(1.005); 
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); 
  }
}

/* ナビゲーションの微細な動き */
.nav {
  animation: navGentleSway 14s ease-in-out infinite;
}

@keyframes navGentleSway {
  0%, 100% { 
    transform: translateY(0px); 
  }
  50% { 
    transform: translateY(-1px); 
  }
}

/* フッターのシンプルな波状動作 */
.footer {
  animation: footerWave 16s ease-in-out infinite;
}

@keyframes footerWave {
  0%, 100% { 
    transform: translateY(0px); 
  }
  50% { 
    transform: translateY(1px); 
  }
}

/* ホバーエフェクトの強化 */
.values__item:hover,
.btn:hover,
.nav__link:hover {
  animation-play-state: paused;
  transform: scale(1.02) translateY(-3px);
  transition: all 0.3s var(--ease-out-cubic);
}

/* スクロール時のパフォーマンス最適化 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* モバイル用の軽量化 */
@media (max-width: 768px) {
  .container,
  .section,
  .hero {
    animation-duration: 20s; /* より長い周期で負荷軽減 */
  }
  
  .values__item,
  .form__group {
    animation: none; /* モバイルでは無効化 */
  }
}

/* 高解像度ディスプレイでの最適化 */
@media (min-resolution: 2dppx) {
  body {
    will-change: background-color;
  }
  
  .container {
    will-change: transform;
  }
}