/* =============================================================
   Chat Hero — v1.2.0
   Reveals modernes : clip-path séquencé par élément
   Chaque élément entre depuis sa propre direction.
   ============================================================= */

.beekom-chat-hero {
	position: relative;
	height: 520px;
	width: 100%;
	max-width: 560px;
}

/* ── Photo 1 — bureau, haut gauche ───────────────────────────
   Entre depuis le haut (clip-path bottom→0) + légère rotation */
.chat__photo--1 {
	position: absolute;
	top: 0; left: 0;
	width: 58%; height: 56%;
	border-radius: 18px;
	object-fit: cover;
	z-index: 1;

	animation: photo1Enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: 200ms;
}

/* ── Carte jaune — accent derrière photo 2 ───────────────────
   Pop avec légère rotation (donne du caractère) */
.chat__yellow-card {
	position: absolute;
	bottom: -14px; right: -12px;
	width: 54%; height: 70%;
	background: var(--chat-card-color, #F4B547);
	border-radius: 22px;
	z-index: 1;

	animation: cardPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	animation-delay: 500ms;
}

/* ── Photo 2 — portrait femme, bas droite ────────────────────
   Révélation depuis le bas (rideau qui monte) */
.chat__photo--2 {
	position: absolute;
	bottom: 0; right: 0;
	width: 52%; height: 68%;
	border-radius: 18px;
	object-fit: cover;
	object-position: center top;
	z-index: 2;

	animation: photo2Enter 1.0s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: 700ms;
}

/* ── Bulles — entrée depuis la gauche ────────────────────────*/
.chat__bubble {
	position: absolute;
	padding: 12px 16px;
	border-radius: 16px;
	font-size: .875rem;
	line-height: 1.55;
	max-width: 90%;
	box-shadow: 0 4px 16px rgba(26,11,77,.10);
	z-index: 3;

	animation: bubbleEnter 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chat__bubble--1 {
	background: #5A4DFF;
	color: #fff;
	top: 38%; left: 0;
	width: 48%;
	border-radius: 16px 16px 6px 16px;
	animation-delay: 900ms;
}

.chat__bubble--2 {
	background: #fff;
	color: #1A0B4D;
	top: 57%; left: 0;
	width: 52%;
	border-radius: 16px 16px 16px 6px;
	box-shadow: 0 4px 20px rgba(26,11,77,.08);
	animation-delay: 2000ms;
}

/* ── Typing dots ─────────────────────────────────────────────*/
.chat__typing {
	position: absolute;
	top: 76%; left: 12%;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 11px 18px;
	background: #5A4DFF;
	border-radius: 999px;
	z-index: 3;

	animation: bubbleEnter 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: 3200ms;
}

.chat__dot {
	width: 9px; height: 9px;
	border-radius: 50%;
	background: rgba(255,255,255,.9);
	animation: dotBounce 1.1s ease-in-out infinite 3700ms;
}
.chat__dot:nth-child(2) { animation-delay: 3880ms; }
.chat__dot:nth-child(3) { animation-delay: 4060ms; }

/* =============================================================
   KEYFRAMES — une direction unique par élément
   ============================================================= */

/* Photo 1 : tombe depuis le haut + légère rotation initiale */
@keyframes photo1Enter {
	0% {
		opacity: 0;
		clip-path: inset(0 0 100% 0 round 18px);
		transform: translateY(-8px) rotate(-1deg);
	}
	30% { opacity: 1; }
	100% {
		opacity: 1;
		clip-path: inset(0 0 0% 0 round 18px);
		transform: translateY(0) rotate(0deg);
	}
}

/* Carte jaune : pop avec overshoot (spring) */
@keyframes cardPop {
	0% {
		opacity: 0;
		transform: translate(12px, 12px) scale(0.82) rotate(3deg);
	}
	60% { opacity: 1; }
	100% {
		opacity: 1;
		transform: translate(0, 0) scale(1) rotate(0deg);
	}
}

/* Photo 2 : rideau qui monte depuis le bas */
@keyframes photo2Enter {
	0% {
		opacity: 0;
		clip-path: inset(100% 0 0 0 round 18px);
	}
	20% { opacity: 1; }
	100% {
		opacity: 1;
		clip-path: inset(0% 0 0 0 round 18px);
	}
}

/* Bulles : glisse depuis la gauche */
@keyframes bubbleEnter {
	from {
		opacity: 0;
		transform: translateX(-16px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Dots bounce */
@keyframes dotBounce {
	0%,60%,100% { transform: translateY(0); }
	30%          { transform: translateY(-7px); }
}

/* =============================================================
   REPLAY — reset propre pour rejouer l'animation
   ============================================================= */
.beekom-chat-hero.is-reset .chat__photo--1,
.beekom-chat-hero.is-reset .chat__yellow-card,
.beekom-chat-hero.is-reset .chat__photo--2,
.beekom-chat-hero.is-reset .chat__bubble,
.beekom-chat-hero.is-reset .chat__typing {
	animation: none !important;
	opacity: 0 !important;
	clip-path: none !important;
	transform: none !important;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 768px) {
	.beekom-chat-hero  { height: 420px; max-width: 100%; }
	.chat__photo--1    { width: 56%; height: 50%; }
	.chat__photo--2    { width: 55%; height: 64%; }
	.chat__yellow-card { width: 52%; height: 66%; }
	.chat__bubble--1   { width: 54%; font-size: .82rem; }
	.chat__bubble--2   { width: 58%; font-size: .82rem; }
}

@media (max-width: 480px) {
	.beekom-chat-hero  { height: 360px; }
	.chat__bubble      { font-size: .78rem; padding: 10px 13px; }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.chat__photo--1, .chat__yellow-card, .chat__photo--2,
	.chat__bubble, .chat__typing {
		animation: none !important;
		opacity: 1 !important;
		clip-path: none !important;
		transform: none !important;
	}
	.chat__dot { animation: none !important; }
}