/* =============================================
   Automata Room — メインCSS（エントリーポイント）
   ============================================= */

@import url('./variables.css');
@import url('./reset.css');
@import url('./layout.css');
@import url('./header.css');
@import url('./footer.css');
@import url('./hero.css');
@import url('./news-hero.css');
@import url('./cards.css');
@import url('./article.css');
@import url('./expression-adjustments.css');
@import url('./responsive.css');

/* =============================================
   スクロールアニメーション
   ============================================= */

[data-animate] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

/* 遅延アニメーション */
[data-animate-delay="1"] { transition-delay: 0.1s; }
[data-animate-delay="2"] { transition-delay: 0.2s; }
[data-animate-delay="3"] { transition-delay: 0.3s; }
[data-animate-delay="4"] { transition-delay: 0.4s; }

/* =============================================
   About紹介セクション
   ============================================= */

.about-preview {
  display: flex;
  align-items: center;
  gap: 48px;
}

.about-preview-character {
  flex: 0 0 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-secondary));
  border: 2px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  animation: placeholderBreathe 4s ease-in-out infinite;
}

.about-preview-text {
  flex: 1;
}

.about-preview-text h2 {
  font-size: 1.5rem;
  color: var(--accent-primary);
  margin-bottom: 12px;
}

.about-preview-text p {
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.8;
}