/* IEB Dynamics — styles des effets */

/* Conteneur d'effet : ne capte aucun clic, ne déborde pas */
.ieb-fx-host { overflow: hidden; }
.ieb-fx-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	overflow: hidden;
	border-radius: inherit;
}

/* ---- Fissure ---- */
.ieb-fissure-svg {
	width: 100%;
	height: 100%;
	opacity: 1;
	transition: opacity .4s ease;
}
.ieb-fissure-svg.ieb-fx-sortie { opacity: 0; }
.ieb-fissure-trait {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 600;
	stroke-dashoffset: 600;
	filter: drop-shadow(0.5px 1px 0.5px rgba(255, 255, 255, .35));
	animation: ieb-fissure-trace .55s cubic-bezier(.6, 0, .3, 1) forwards;
}
@keyframes ieb-fissure-trace { to { stroke-dashoffset: 0; } }

/* ---- Infiltration d'eau ---- */
.ieb-eau-nappe {
	display: flex;
	align-items: flex-end;
}
.ieb-eau-vague {
	position: relative;
	width: 100%;
	height: 0;
	background: linear-gradient(to top,
		color-mix(in srgb, var(--ieb-eau, #2f81b7) 45%, transparent),
		color-mix(in srgb, var(--ieb-eau, #2f81b7) 18%, transparent));
	transition: height .8s cubic-bezier(.3, .8, .3, 1);
}
.ieb-eau-vague::before,
.ieb-eau-vague::after {
	content: "";
	position: absolute;
	top: -14px;
	left: -50%;
	width: 200%;
	height: 28px;
	border-radius: 45%;
	background: color-mix(in srgb, var(--ieb-eau, #2f81b7) 30%, transparent);
	animation: ieb-eau-roule 5s linear infinite;
}
.ieb-eau-vague::after {
	border-radius: 42%;
	opacity: .6;
	animation-duration: 7s;
	animation-direction: reverse;
}
.ieb-eau-monte .ieb-eau-vague { height: 34%; }
@keyframes ieb-eau-roule { to { transform: rotate(360deg); } }

/* ---- Gouttes / ondulations ---- */
.ieb-goutte-onde {
	position: absolute;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border: 2px solid;
	border-radius: 50%;
	opacity: .7;
	animation: ieb-onde .9s ease-out forwards;
}
@keyframes ieb-onde {
	to {
		width: 70px;
		height: 70px;
		margin: -35px 0 0 -35px;
		opacity: 0;
		border-width: 1px;
	}
}

/* ---- Apparition au scroll ---- */
.ieb-cache {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}
.ieb-cache[data-ieb-sens="gauche"] { transform: translateX(-32px); }
.ieb-cache[data-ieb-sens="droite"] { transform: translateX(32px); }
.ieb-cache[data-ieb-sens="bas"] { transform: translateY(-26px); }
.ieb-vu {
	opacity: 1 !important;
	transform: none !important;
}

/* ---- Inclinaison 3D ---- */
.ieb-tilt-actif {
	transition: transform .25s ease, box-shadow .25s ease;
	will-change: transform;
}
.ieb-tilt-actif:hover {
	box-shadow: 0 14px 34px rgba(15, 30, 50, .18);
}

@media (prefers-reduced-motion: reduce) {
	.ieb-cache { opacity: 1; transform: none; transition: none; }
	.ieb-tilt-actif { transition: none; }
}