/**
 * Base Styles
 * Variables, resets, and global styles
 */

:root {
  /* Colors */
  --primary-color: #5D9C59;
  /* Greenery */
  --secondary-color: #DF7861;
  /* Warmth/Sunset */
  --accent-color: #ECB390;
  /* Soft light */
  --text-color: #333333;
  --bg-color: #FCFDF5;
  --white: #ffffff;
  --gray-light: #f4f4f4;

  /* Typography */
  --font-base: 'Zen Kaku Gothic New', sans-serif;
  --font-serif: 'Shippori Mincho', serif;

  /* Spacing */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 40px;
  --spacing-xl: 60px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-base);
  color: var(--text-color);
  background-color: var(--bg-color);
  /* Subtle Japanese Pattern (Seigaiha-ish) */
  background-image:
    radial-gradient(circle at 100% 150%, var(--bg-color) 24%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 28%, var(--bg-color) 29%, var(--bg-color) 36%, rgba(255, 255, 255, 0) 37%, rgba(255, 255, 255, 0) 40%, var(--bg-color) 41%, var(--bg-color) 48%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 0) 52%, var(--bg-color) 53%, var(--bg-color) 60%, rgba(255, 255, 255, 0) 61%, rgba(255, 255, 255, 0) 64%, var(--bg-color) 65%, var(--bg-color) 72%, rgba(255, 255, 255, 0) 73%, rgba(255, 255, 255, 0) 76%, var(--bg-color) 77%),
    radial-gradient(circle at 0% 150%, var(--bg-color) 24%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 28%, var(--bg-color) 29%, var(--bg-color) 36%, rgba(255, 255, 255, 0) 37%, rgba(255, 255, 255, 0) 40%, var(--bg-color) 41%, var(--bg-color) 48%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 0) 52%, var(--bg-color) 53%, var(--bg-color) 60%, rgba(255, 255, 255, 0) 61%, rgba(255, 255, 255, 0) 64%, var(--bg-color) 65%, var(--bg-color) 72%, rgba(255, 255, 255, 0) 73%, rgba(255, 255, 255, 0) 76%, var(--bg-color) 77%),
    radial-gradient(circle at 50% 100%, rgba(236, 179, 144, 0.1) 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 23%, rgba(236, 179, 144, 0.05) 24%, rgba(236, 179, 144, 0.05) 30%, rgba(255, 255, 255, 0) 31%, rgba(255, 255, 255, 0) 43%, rgba(236, 179, 144, 0.05) 44%, rgba(236, 179, 144, 0.05) 50%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 63%, rgba(236, 179, 144, 0.05) 64%, rgba(236, 179, 144, 0.05) 71%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 0) 84%, rgba(236, 179, 144, 0.05) 85%);
  background-size: 50px 25px;
  background-position: 0 0, 25px 0, 25px -25px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html {
  scroll-padding-top: 100px;
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s, color 0.3s;
}

a:hover {
  opacity: 0.7;
}

/* Responsive Images */
img {
  max-width: 100%;
  height: auto;
}

/* Fix for WP Caption inline width on mobile */
.wp-caption {
  max-width: 100%;
  width: auto !important;
}

/* Utility Classes */
.pc-only {
  display: block;
}

.sp-only {
  display: none;
}

@media (max-width: 768px) {
  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }
}

.ib {
  display: inline-block;
}

/* Animations */
.scroll-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

.scroll-fade-in {
  opacity: 0;
  transition: opacity 1.5s ease-out;
}

.scroll-fade-in.visible {
  opacity: 1;
}

/* Stagger delays */
.delay-100 {
  transition-delay: 0.1s;
}

.delay-200 {
  transition-delay: 0.2s;
}

.delay-300 {
  transition-delay: 0.3s;
}

/* Section Common */
section {
  padding: var(--spacing-sm) var(--spacing-md);
}

.section-title {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 2rem;
  margin: 0 auto 50px;
  color: var(--primary-color);
  position: relative;
  width: fit-content;
}

.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background-color: var(--accent-color);
  margin: 15px auto 0;
}

.subsection-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--text-color);
  margin: 30px auto 25px;
  max-width: 1200px;
  padding-left: 15px;
  border-left: 4px solid var(--primary-color);
}