/* ==========================================================================
   Base Styles & Overrides
   ========================================================================== */

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Noto Sans JP', sans-serif;
    color: #333333; /* Dark gray for high readability */
    background-color: #ffffff;
}

/* ==========================================================================
   Custom Utility Classes
   ========================================================================== */

/* 
   Image Placeholders 
   Used when images are missing or not yet set.
*/
.img-placeholder {
    background-color: #f3f4f6; /* Tailwind gray-100 */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af; /* Tailwind gray-400 */
}

/* Subtle pattern for placeholders to make them look intentional */
.img-placeholder::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(#d1d5db 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.3;
    pointer-events: none;
}

.img-placeholder i {
    z-index: 10;
}

/* ==========================================================================
   Components
   ========================================================================== */

/* Primary Button Style (Hover effect only, no flashy animations) */
.btn-primary {
    transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn-primary:active {
    transform: translateY(1px);
}

/* Section Headings */
.section-title {
    position: relative;
    padding-bottom: 0.75rem;
    margin-bottom: 2rem;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: #065f46; /* Tailwind emerald-800 - Accent color */
    border-radius: 2px;
}
.section-title.left-aligned::after {
    left: 0;
    transform: none;
}

/* Container limits for readability */
.text-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Ensure empty images fallback nicely */
img[src=""] {
    display: none;
}

/* Header transition */
#main-header {
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.scrolled-header {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    background-color: rgba(255, 255, 255, 0.98);
}

/* ==========================================================================
   Scroll Animations
   ========================================================================== */
.animate-fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.animate-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Delays */
.delay-50 { transition-delay: 0.05s; }
.delay-100 { transition-delay: 0.1s; }
.delay-150 { transition-delay: 0.15s; }
.delay-200 { transition-delay: 0.2s; }

/* Hero Zoom Animation */
@keyframes heroZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}
.animate-hero-zoom {
    animation: heroZoom 4s ease-out forwards;
}