/*
 * Seven's テーマ custom.css
 * readdy.ai版 src/index.css のスクロールフェードインCSSと、
 * 各コンポーネントにscoped styleとして書かれていたアニメーション
 * （HeroSectionのタイトルフライイン、WorriesSectionの画像スクロール）を
 * 1ファイルにまとめたもの。
 */

/* ==== Scroll fade-in animations（元: src/index.css） ==== */
.fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
  will-change: opacity, transform;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-up-delay-1 {
  transition-delay: 0.1s;
}

.fade-in-up-delay-2 {
  transition-delay: 0.2s;
}

.fade-in-up-delay-3 {
  transition-delay: 0.3s;
}

.fade-in-up-delay-4 {
  transition-delay: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
  .fade-in-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==== Hero title fly-in（元: home/components/HeroSection.tsx のscoped style） ==== */
@keyframes heroTitleFlyIn {
  0% {
    opacity: 0;
    transform: translateX(110vw);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero-title {
  animation: heroTitleFlyIn 0.3s ease-out forwards;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .hero-title {
    animation: none;
  }
}

/* ==== 汎用固定ページ・投稿本文のスタイル（index.php / page.php の the_content() 用） ====
   Tailwind CDNはPreflightで見出し・リスト等のブラウザ標準スタイルを打ち消すため、
   固定ページエディタ（ブロックエディタ）で書かれた本文が素のHTMLのまま出力された際に
   最低限読みやすくなるよう、ここで補っている。 */
.sevens-content h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  font-weight: 900;
  color: #1e293b;
}

.sevens-content h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: 900;
  color: #1e293b;
}

.sevens-content p {
  margin-bottom: 1rem;
}

.sevens-content ul,
.sevens-content ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.sevens-content ul {
  list-style: disc;
}

.sevens-content ol {
  list-style: decimal;
}

.sevens-content a {
  color: #0ea5e9;
  text-decoration: underline;
}

.sevens-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

/* ==== Worries images infinite scroll（元: home/components/WorriesSection.tsx のscoped style） ==== */
@keyframes imageScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.image-track {
  animation: imageScroll 18s linear infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .image-track {
    animation: none;
  }
}