/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

:root {
	/* Opacités */
	--orphic-wp-block-opacity-hover: 0.8;
	--orphic-wp-block-opacity-disabled: 0.5;
	--orphic-wp-block-opacity-overlay: 0.4;

	/* Typographie */
	--orphic-wp-block-font-size-xs: 12px;
	--orphic-wp-block-font-size-sm: 14px;
	--orphic-wp-block-font-size-md: 16px;
	--orphic-wp-block-font-size-lg: 18px;
	--orphic-wp-block-font-size-xl: 24px;
	--orphic-wp-block-font-size-2xl: 32px;

	/* Poids de police */
	--orphic-wp-block-font-weight-regular: 400;
	--orphic-wp-block-font-weight-medium: 500;
	--orphic-wp-block-font-weight-semibold: 600;
	--orphic-wp-block-font-weight-bold: 700;

	/* Espacement */
	--orphic-wp-block-spacing-xs: 4px;
	--orphic-wp-block-spacing-sm: 8px;
	--orphic-wp-block-spacing-md: 16px;
	--orphic-wp-block-spacing-lg: 24px;
	--orphic-wp-block-spacing-xl: 32px;
	--orphic-wp-block-spacing-2xl: 48px;

	/* Animations */
	--orphic-wp-block-duration-fast: 0.2s;
	--orphic-wp-block-duration-normal: 0.3s;
	--orphic-wp-block-duration-slow: 0.5s;

	/* Courbes d'animation */
	--orphic-wp-block-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
	--orphic-wp-block-ease-in: cubic-bezier(0.4, 0, 1, 1);
	--orphic-wp-block-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--orphic-wp-block-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

	/* Ombres */
	--orphic-wp-block-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
	--orphic-wp-block-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
	--orphic-wp-block-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

	/* Bordures et Arrondis */
	--orphic-wp-block-border-radius-sm: 4px;
	--orphic-wp-block-border-radius-md: 8px;
	--orphic-wp-block-border-radius-lg: 16px;
	--orphic-wp-block-border-radius-full: 9999px;
	--orphic-wp-block-border-width-thin: 1px;
	--orphic-wp-block-border-width-medium: 2px;
	--orphic-wp-block-border-width-thick: 4px;
}

/* Classes utilitaires communes */
.orphic-wp-block-wrapper__add-button {
	position: absolute !important;
	bottom: 0 !important;
	right: var(--orphic-wp-block-spacing-md) !important;
	z-index: 1000 !important;
	background: var(--orphic-wp-block-color-primary) !important;
	color: var(--orphic-wp-block-color-background) !important;
	border: none !important;
	border-radius: var(--orphic-wp-block-border-radius-full);
	padding: var(--orphic-wp-block-spacing-sm) var(--orphic-wp-block-spacing-lg);
	box-shadow: var(--orphic-wp-block-shadow-md);
	display: flex;
	align-items: center;
	gap: var(--orphic-wp-block-spacing-sm);
	transition: all var(--orphic-wp-block-duration-fast)
		var(--orphic-wp-block-ease-default);
	font-size: var(--orphic-wp-block-font-size-sm);
}

.orphic-wp-block-wrapper__add-button:hover {
	transform: translateY(-2px);
	background: var(--orphic-wp-block-color-primary-dark) !important;
}

.orphic-wp-block-wrapper__add-button:focus {
	box-shadow:
		0 0 0 2px var(--orphic-wp-block-color-background),
		0 0 0 4px var(--orphic-wp-block-color-primary);
	outline: none;
}

.orphic-motion-animation {
	visibility: hidden; /* Hide initially */
	will-change: transform, opacity; /* Optimize performance */
}

.orphic-motion-animation[data-animation-type="fadeIn"] {
	transform: none !important; /* Prevent transform for simple fade */
}

/* Always show in admin */
.wp-admin .orphic-motion-animation {
	visibility: visible;
}