/**
 * Zere — Components
 * Primitivos visuais do estilo "premium mineral orgânico":
 * blobs decorativos, divisores de onda SVG e cards com raio generoso.
 */

/* -------------------------------------------------------------------
 * Blobs decorativos
 * Uso: <div class="zere-blob zere-blob--bronze zere-blob--lg"></div>
 * ----------------------------------------------------------------- */

.zere-blob {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	border-radius: var(--zere-blob-1);
	filter: blur(2px);
	opacity: 0.55;
}

.zere-blob--2 { border-radius: var(--zere-blob-2); }
.zere-blob--3 { border-radius: var(--zere-blob-3); }

.zere-blob--sand      { background-color: var(--zere-sand); }
.zere-blob--bronze    { background-color: var(--zere-bronze); }
.zere-blob--olive     { background-color: var(--zere-deep-olive); }
.zere-blob--travertino { background-color: var(--zere-travertino); }

.zere-blob--sm { width: 12rem; height: 12rem; }
.zere-blob--md { width: 20rem; height: 20rem; }
.zere-blob--lg { width: 32rem; height: 32rem; }
.zere-blob--xl { width: 44rem; height: 44rem; }

/* Anima suavemente para dar sensação orgânica/viva; respeita quem prefere menos movimento */
@media (prefers-reduced-motion: no-preference) {
	.zere-blob--animated {
		animation: zere-blob-morph 14s ease-in-out infinite alternate;
	}
}

@keyframes zere-blob-morph {
	0%   { border-radius: var(--zere-blob-1); transform: rotate(0deg) scale(1); }
	50%  { border-radius: var(--zere-blob-2); transform: rotate(8deg) scale(1.04); }
	100% { border-radius: var(--zere-blob-3); transform: rotate(-6deg) scale(0.98); }
}

/* Container relativo para posicionar blobs atrás do conteúdo de uma seção */
.zere-blob-field {
	position: relative;
	overflow: hidden;
}

.zere-blob-field > .zere-content {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------------
 * Divisores de seção em onda (SVG via mask, herdam a cor via currentColor)
 * Uso: ver função PHP zere_wave_divider() em inc/template-tags.php,
 * ou aplique a classe diretamente e defina --zere-divider-color.
 * ----------------------------------------------------------------- */

.zere-wave-divider {
	--zere-divider-color: var(--zere-color-bg);
	--zere-divider-height: 80px;
	display: block;
	width: 100%;
	height: var(--zere-divider-height);
	line-height: 0;
	color: var(--zere-divider-color);
}

.zere-wave-divider svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.zere-wave-divider.is-flipped {
	transform: scaleY(-1);
}

/*
 * A onda usa preserveAspectRatio="none" (esticando livremente); em telas
 * estreitas a mesma altura fica proporcionalmente maior em relação à
 * largura, deixando a curva mais íngreme/agressiva. Reduzimos a altura
 * no mobile para a curva ficar tão suave quanto no desktop.
 */
@media (max-width: 640px) {
	.zere-wave-divider {
		--zere-divider-height: 40px;
	}
}

/* -------------------------------------------------------------------
 * Cards — superfícies com raio generoso e sombra suave
 * ----------------------------------------------------------------- */

.zere-card {
	background-color: var(--zere-color-surface);
	border-radius: var(--zere-radius-lg);
	padding: var(--zere-space-lg);
	box-shadow: var(--zere-shadow-sm);
	transition: box-shadow var(--zere-transition-base), transform var(--zere-transition-base);
}

.zere-card:hover {
	box-shadow: var(--zere-shadow-md);
	transform: translateY(-4px);
}

.zere-card--sand { background-color: var(--zere-color-bg-secondary); }