/**
 * Matsuri Base Styles
 *
 * Foundation styles for the matsuri-themed design:
 * - Google Fonts loading
 * - Base element styling for WAM components
 * - CSS-only Japanese patterns (seigaiha, asanoha, ichimatsu)
 * - Lantern glow animation
 * - Gold divider
 *
 * @since 1.0.0
 * @package WAM_Matsuri
 */

/* === Google Fonts === */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@400;600;700&display=swap');

/* === Base WAM Element Styles === */
.wam-lantern-selector,
.wam-lantern-widget,
.wam-section-header,
.wam-field-group,
.accordion-container,
.wam-table-wrapper,
.wam-reorder-button-wrapper {
	font-family: var(--wam-font-body);
	font-size: var(--wam-font-size-base);
	line-height: var(--wam-line-height);
	color: var(--wam-text-primary);
}

/* === Japanese Pattern: Seigaiha (青海波) === */
.wam-pattern-seigaiha {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Cpath d='M0 40 C20 40 20 20 40 20 C60 20 60 40 80 40' fill='none' stroke='%23223A70' stroke-width='0.5' opacity='0.05'/%3E%3Cpath d='M0 30 C15 30 15 15 30 15 C45 15 45 30 60 30' fill='none' stroke='%23223A70' stroke-width='0.5' opacity='0.04'/%3E%3Cpath d='M20 40 C35 40 35 25 50 25 C65 25 65 40 80 40' fill='none' stroke='%23223A70' stroke-width='0.5' opacity='0.03'/%3E%3C/svg%3E");
	background-repeat: repeat;
}

/* === Japanese Pattern: Asanoha (麻の葉) === */
.wam-pattern-asanoha {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 0 L30 30 M0 15 L30 30 L60 15 M0 45 L30 30 L60 45 M30 60 L30 30' fill='none' stroke='%23C53D2D' stroke-width='0.3' opacity='0.04'/%3E%3C/svg%3E");
	background-repeat: repeat;
}

/* === Japanese Pattern: Ichimatsu (市松) === */
.wam-pattern-ichimatsu {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='20' height='20' fill='%23223A70' opacity='0.03'/%3E%3Crect x='20' y='20' width='20' height='20' fill='%23223A70' opacity='0.03'/%3E%3C/svg%3E");
	background-repeat: repeat;
}

/* === Lantern Swing Animation === */
@keyframes wam-lantern-swing {
	0%, 100% {
		transform: rotate(-2deg);
	}
	50% {
		transform: rotate(2deg);
	}
}

@keyframes wam-lantern-glow {
	0%, 100% {
		box-shadow: 0 3px 10px rgba(236, 104, 0, 0.3);
	}
	50% {
		box-shadow: 0 3px 15px rgba(236, 104, 0, 0.5);
	}
}

@media (prefers-reduced-motion: reduce) {
	[style*="animation"],
	.wam-lantern-body {
		animation: none !important;
	}
}

/* === Gold Divider === */
.wam-divider-gold {
	border: none;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--wam-accent-gold) 20%,
		var(--wam-accent-gold) 80%,
		transparent
	);
	margin: 20px 0;
}