/**
 * Custom Front Page Styles
 * トップページ用カスタムスタイル
 */

/* ==========================================================================
   Base Styles
   ========================================================================== */

:root {
	--hero-min-height: 100vh;
	--section-padding: clamp(4rem, 8vw, 8rem);
	--container-padding: clamp(1.5rem, 5vw, 3rem);
	--card-radius: 16px;
	--button-radius: 50px;
	--transition-speed: 0.3s;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero-section {
	position: relative;
	overflow: hidden;
}

.hero-cover {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero-cover .wp-block-cover__inner-container {
	width: 100%;
	max-width: 1200px;
	padding: var(--container-padding);
}

/* Hero Animations */
.hero-section h1 {
	animation: fadeInUp 1s ease-out;
}

.hero-section p {
	animation: fadeInUp 1s ease-out 0.2s both;
}

.hero-section .wp-block-buttons {
	animation: fadeInUp 1s ease-out 0.4s both;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   Features Section
   ========================================================================== */

.wp-block-columns .wp-block-column {
	transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.wp-block-columns .wp-block-column:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   About Section
   ========================================================================== */

.wp-block-columns.are-vertically-aligned-center {
	align-items: center;
}

/* Image hover effect */
.wp-block-image img {
	transition: transform var(--transition-speed) ease;
}

.wp-block-image:hover img {
	transform: scale(1.05);
}

/* ==========================================================================
   Services Section
   ========================================================================== */

.has-accent-5-background-color .wp-block-group.has-base-background-color {
	transition: all var(--transition-speed) ease;
}

.has-accent-5-background-color .wp-block-group.has-base-background-color:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   CTA Section
   ========================================================================== */

.has-contrast-background-color {
	position: relative;
	overflow: hidden;
}

.has-contrast-background-color::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
	pointer-events: none;
}

/* Button hover effects */
.wp-block-button .wp-block-button__link {
	transition: all var(--transition-speed) ease;
	position: relative;
	overflow: hidden;
}

.wp-block-button .wp-block-button__link::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	transform: translate(-50%, -50%);
	transition: width var(--transition-speed) ease, height var(--transition-speed) ease;
}

.wp-block-button .wp-block-button__link:hover::before {
	width: 300px;
	height: 300px;
}

.wp-block-button .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
	:root {
		--hero-min-height: 80vh;
	}
	
	.hero-cover {
		min-height: 80vh !important;
	}
	
	.wp-block-columns {
		flex-direction: column;
	}
	
	.wp-block-column {
		flex-basis: 100% !important;
		margin-bottom: 2rem;
	}
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
	:root {
		--hero-min-height: 70vh;
		--section-padding: clamp(3rem, 6vw, 5rem);
	}
	
	.hero-cover {
		min-height: 70vh !important;
	}
	
	.hero-section h1 {
		font-size: clamp(2rem, 6vw, 3rem) !important;
	}
	
	.hero-section p {
		font-size: 1rem !important;
	}
	
	.wp-block-heading {
		font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
	}
	
	.wp-block-button .wp-block-button__link {
		font-size: 1rem !important;
		padding: 1rem 2rem !important;
	}
	
	.wp-block-columns .wp-block-column {
		margin-bottom: 1.5rem;
	}
	
	.wp-block-group {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
	:root {
		--hero-min-height: 60vh;
	}
	
	.hero-cover {
		min-height: 60vh !important;
	}
	
	.hero-section h1 {
		font-size: 2rem !important;
		line-height: 1.3 !important;
	}
	
	.wp-block-group {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}

/* ==========================================================================
   Accessibility & Performance
   ========================================================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

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

/* Focus styles for accessibility */
.wp-block-button .wp-block-button__link:focus,
a:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Loading performance optimization */
img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.hero-cover,
	.wp-block-button,
	.wp-block-buttons {
		display: none;
	}
	
	.wp-block-group {
		padding: 1rem !important;
		margin: 1rem 0 !important;
	}
}