/* ==========================================================================
   Support band (template-parts/support.php)
   A short chat on brand blue, across the full content container: two empty
   ghost bubbles as chat history, the page's paragraph as a message bubble
   flush left, the page's button as the reply bubble flush right.

   The finished state is the default. The chat timeline only runs under
   html.has-support-motion (set in the head by digiholic_support_motion_flag(),
   so never without JavaScript or with reduced motion) once
   assets/js/support-chat.js adds .is-playing as the band comes into view.
   Only opacity and the transform properties (translate, scale) animate.
   ========================================================================== */

.support {
	--focus-color: var(--on-blue);

	padding-block: clamp(2.75rem, 4.5vw, 4.5rem); /* 44px to 72px, so the band hugs its content */
	background-color: var(--brand-blue);
	overflow-x: clip;
}

.support__thread {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

/* Chat history: empty bubbles, decorative only, in the normal flow. */
.support__ghost {
	display: block;
	height: 22px;
	background-color: var(--brand-blue-600);
}

.support__ghost--reply {
	align-self: flex-end;
	width: 50%;
	border-radius: 14px 14px var(--radius-sm) 14px;
}

.support__ghost--message {
	width: 34%;
	border-radius: 14px 14px 14px var(--radius-sm);
}

/* Message: 24px corners, 4px bottom-left as the chat tail. The padding is
   shared with the dots through custom properties, so they sit at the text's
   top left at every width. */
.support__message {
	--bubble-pad-block: clamp(1.25rem, 2vw, 1.75rem);   /* 20px to 28px */
	--bubble-pad-inline: clamp(1.375rem, 2.2vw, 2rem);  /* 22px to 32px */

	position: relative;
	max-width: 100%;
	padding: var(--bubble-pad-block) var(--bubble-pad-inline);
	color: var(--ink-navy);
	background-color: var(--surface);
	border-radius: 24px 24px 24px var(--radius-sm);
}

.support__text {
	font-size: clamp(1.0625rem, 1.6vw, 1.5rem); /* 17px to 24px */
	font-weight: var(--weight-medium);
	line-height: 1.35;
}

/* Typing dots, at the top left of the text area. Out of the flow, so they
   never change the bubble's height. Hidden unless the timeline runs. */
.support__dots {
	position: absolute;
	top: var(--bubble-pad-block);
	left: var(--bubble-pad-inline);
	display: none;
	gap: 7px;
	padding-top: 6px; /* room for the 5px bob inside the text's first line */
}

.support__dot {
	width: 11px;
	height: 11px;
	background-color: var(--brand-blue);
	border-radius: 50%;
}

/* Reply: the page's button. 24px corners, 4px bottom-right as the chat tail.
   18px from the message: the 12px thread gap plus 6px. */
.support__reply {
	align-self: flex-end;
	margin-top: 6px;
	padding: 17px 34px;
	font-size: clamp(1rem, 1.2vw, 1.125rem); /* 16px to 18px */
	font-weight: var(--weight-extrabold);
	line-height: var(--leading-snug);
	color: var(--ink);
	text-decoration: none;
	background-color: var(--accent-yellow);
	border-radius: 24px 24px var(--radius-sm) 24px;
	transform-origin: bottom right;
	transition: translate 200ms ease;
}

.support__reply:hover {
	color: var(--ink);
	translate: 0 -3px;
}

.support__reply:focus-visible {
	outline: var(--focus-width) solid var(--on-blue);
	outline-offset: var(--focus-offset);
}

@media (min-width: 48em) {
	.support__ghost {
		height: 28px;
	}

	.support__ghost--reply {
		width: 34%;
	}

	.support__ghost--message {
		width: 22%;
	}

	.support__message {
		max-width: 78%;
	}
}

/* Chat timeline, once per band
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	/* Start state, until the band is 40% in view. The ghosts and the
	   message keep their space while hidden. The paragraph keeps its
	   space at opacity 0, so nothing shifts when it appears. The reply stays
	   a live link throughout; the pop-in is only visual. */
	.has-support-motion .support:not(.is-instant) .support__ghost {
		opacity: 0;
		translate: 0 10px;
	}

	.has-support-motion .support:not(.is-instant) .support__message {
		opacity: 0;
		translate: 0 14px;
	}

	.has-support-motion .support:not(.is-instant) .support__dots {
		display: flex;
	}

	.has-support-motion .support:not(.is-instant) .support__text {
		opacity: 0;
	}

	.has-support-motion .support:not(.is-instant) .support__reply {
		opacity: 0;
		scale: 0.4;
	}

	/* 100ms and 300ms: the ghosts fade in and rise 10px. */
	.has-support-motion .support.is-playing .support__ghost--reply {
		animation: support-ghost 500ms ease-out 100ms both;
	}

	.has-support-motion .support.is-playing .support__ghost--message {
		animation: support-ghost 500ms ease-out 300ms both;
	}

	/* 550ms: the message fades in and rises into place. */
	.has-support-motion .support.is-playing .support__message {
		animation: support-rise 350ms ease-out 550ms both;
	}

	.has-support-motion .support.is-playing .support__dot {
		animation: support-dot 1s ease-in-out 3 both;
	}

	.has-support-motion .support.is-playing .support__dot:nth-child(2) {
		animation-delay: 150ms;
	}

	.has-support-motion .support.is-playing .support__dot:nth-child(3) {
		animation-delay: 300ms;
	}

	/* 1900ms: the dots fade out and the paragraph fades in. */
	.has-support-motion .support.is-playing .support__dots {
		animation: support-fade-out 400ms ease 1900ms both;
	}

	.has-support-motion .support.is-playing .support__text {
		animation: support-fade-in 400ms ease 1900ms both;
	}

	/* 2700ms: the reply pops in. 3800ms: it starts pulsing every 3s. */
	.has-support-motion .support.is-playing .support__reply {
		animation:
			support-pop 450ms cubic-bezier(0.34, 1.56, 0.64, 1) 2700ms both,
			support-pulse 3s ease-in-out 3800ms infinite;
	}

	/* Keyboard focus before or during the timeline: show the finished chat
	   at once (support-chat.js adds .is-instant), keeping the pulse. */
	.has-support-motion .support.is-instant .support__reply {
		animation: support-pulse 3s ease-in-out infinite;
	}

	.has-support-motion .support .support__reply:hover,
	.has-support-motion .support .support__reply:focus-visible {
		animation-play-state: running, paused;
	}

	.has-support-motion .support.is-instant .support__reply:hover,
	.has-support-motion .support.is-instant .support__reply:focus-visible {
		animation-play-state: paused;
	}
}

@keyframes support-ghost {
	from {
		opacity: 0;
		translate: 0 10px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes support-rise {
	from {
		opacity: 0;
		translate: 0 14px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes support-dot {
	0%,
	100% {
		opacity: 0.35;
		translate: 0 0;
	}

	50% {
		opacity: 1;
		translate: 0 -5px;
	}
}

@keyframes support-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes support-fade-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes support-pop {
	from {
		opacity: 0;
		scale: 0.4;
	}

	to {
		opacity: 1;
		scale: 1;
	}
}

@keyframes support-pulse {
	0%,
	70% {
		scale: 1;
	}

	80% {
		scale: 1.07;
	}

	90% {
		scale: 0.99;
	}

	100% {
		scale: 1;
	}
}