/*
 * Horizon Demo (N4). Everything is scoped under .horizon-demo; element rules are nested so they
 * outrank the global .ev-site-v4 / .font-sofia-sans element styles (h3, p, ul, a, button).
 * Animation (typing, reveals, blur, shimmer) is a separate ticket and is intentionally not styled here.
 */
.horizon-demo {
	--hd-font: "Sofia Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--hd-ink: #231f20;
	--hd-mist: #ebeff5;
	--hd-eyebrow: #7c9abf;
	--hd-green: #5bab84;
	--hd-grey: #c5cfdb;
	--hd-icon-tile: #3e649b;
	--hd-line: rgba(197, 207, 219, 0.28);
	--hd-overlay-bg: rgba(35, 31, 32, 0.86);
	--hd-pointer-x: 60px;
	--focus-color: #c5cfdb;

	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	color: #fff;
	font-family: var(--hd-font);
	text-align: left;

	/* Used on its own (outside the Centered Dark Hero) the block supplies its own dark surface. */
	&:not(.centered-dark-hero .horizon-demo) {
		padding: 24px;
		border-radius: 8px;
		background: var(--hd-ink);
	}

	& *,
	& *::before,
	& *::after {
		box-sizing: border-box;
	}

	& .horizon-demo__empty {
		margin: 0;
		padding: 24px;
		color: var(--hd-mist);
		font-size: 16px;
		line-height: 24px;
	}

	/* Prompt label */
	& .horizon-demo__label {
		margin: 8px 0 24px;
		color: var(--hd-green);
		font-size: 16px;
		font-weight: 700;
		line-height: 24px;
		letter-spacing: 1px;
		text-align: center;
		text-transform: uppercase;

		@media (width >= 768px) {
			margin: 24px 0 32px;
		}
	}

	/* Scenario controls */
	& .horizon-demo__tabs {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;

		@media (width >= 768px) {
			flex-flow: row wrap;
			align-items: stretch;
			justify-content: center;
			gap: 12px;
		}
	}

	& .horizon-demo__tab {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 8px 16px;
		border: 0;
		border-radius: 4px;
		background: transparent;
		box-shadow: inset 0 0 0 1px var(--hd-line);
		color: #fff;
		font-family: var(--hd-font);
		font-size: 18px;
		font-weight: 700;
		line-height: 1.15;
		text-align: center;
		text-transform: none;
		cursor: pointer;

		&:hover {
			background: color-mix(in oklab, var(--hd-ink) 88%, #fff);
			color: #fff;
		}

		&.is-active,
		&[aria-selected="true"] {
			background: var(--hd-grey);
			color: var(--hd-ink);
		}
	}

	/* Panels */
	& .horizon-demo__panel {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin-block-start: 20px;

		@media (width >= 768px) {
			gap: 24px;
			margin-block-start: 32px;
		}

		&[hidden] {
			display: none;
		}
	}

	/* Prompt bubble */
	& .horizon-demo__bubble {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 24px;
		border-radius: 8px;
		background: #fff;

		@media (width >= 768px) {
			flex-direction: row;
			align-items: center;
			gap: 24px;
			padding: 24px 24px 24px 32px;
		}
	}

	& .horizon-demo__prompt {
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
		color: var(--hd-ink);
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		overflow-wrap: anywhere;

		@media (width >= 768px) {
			font-size: 20px;
			line-height: 32px;
		}
	}

	& .horizon-demo__ask {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		height: 40px;
		padding: 8px 24px;
		border-radius: 4px;
		background: var(--eagleview--color--button-green, #1d6d4d);
		color: #fff;
		font-size: 18px;
		font-weight: 700;
		line-height: 24px;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;

		/* Label colour for hover/focus comes from the global .button rules (_focus.scss). */
		&:hover {
			background: var(--eagleview--color--button-green-hover, #5cab84);
		}

		@media (width < 768px) {
			width: 100%;
		}
	}

	& .horizon-demo__pointer {
		position: absolute;
		bottom: 100%;
		left: 50%;
		width: 0;
		height: 0;
		margin-left: -12px;
		border-right: 12px solid transparent;
		border-bottom: 12px solid #fff;
		border-left: 12px solid transparent;

		@media (width >= 768px) {
			left: var(--hd-pointer-x);
			margin-left: 0;
		}
	}

	/* Answer panel */
	& .horizon-demo__answer {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		overflow: hidden;
		border-radius: 8px;
		background: var(--hd-ink);
		box-shadow: inset 0 0 0 1px rgba(124, 154, 191, 0.45);
		scroll-margin-top: 16px;

		/* Above 1160px the site header is fixed (about 128px tall, plus the admin bar when logged in). */
		@media (width >= 1161px) {
			scroll-margin-top: 160px;
		}

		@media (width >= 1025px) {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		}
	}

	& .horizon-demo__copy {
		display: flex;
		flex-direction: column;
		gap: 16px;
		min-width: 0;
		padding: 24px;

		@media (width >= 1025px) {
			gap: 24px;
			padding: 40px;
		}
	}

	& .horizon-demo__meta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}

	& .horizon-demo__eyebrow {
		color: var(--hd-eyebrow);
		font-size: 16px;
		font-weight: 700;
		line-height: 24px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	& .horizon-demo__status {
		color: var(--hd-mist);
		font-size: 14px;
		font-weight: 300;
		line-height: 17px;
	}

	& .horizon-demo__heading {
		margin: 0;
		color: #fff;
		font-size: 24px;
		font-weight: 500;
		line-height: 1.2;
		text-wrap: pretty;
		overflow-wrap: anywhere;
	}

	& .horizon-demo__description {
		margin: 0;
		color: var(--hd-mist);
		font-size: 16px;
		font-weight: 300;
		line-height: 24px;
		overflow-wrap: anywhere;

		@media (width >= 1025px) {
			font-size: 20px;
			line-height: 32px;
		}
	}

	/* Evidence rows */
	& .horizon-demo__evidence {
		display: flex;
		flex-direction: column;
		margin-block-start: 8px;
	}

	& .horizon-demo__evidence-title {
		margin: 0;
		padding-block-end: 12px;
		color: var(--hd-eyebrow);
		font-size: 16px;
		font-weight: 700;
		line-height: 24px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	& .horizon-demo__rows {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	& .horizon-demo__row {
		display: flex;
		align-items: center;
		gap: 16px;
		margin: 0;
		padding: 12px 0;
		border-top: 1px solid rgba(197, 207, 219, 0.2);
		list-style: none;
	}

	& .horizon-demo__icon {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 33.5px;
		height: 33.5px;
		border-radius: 4px;
		background: var(--hd-icon-tile);
		color: #fff;

		& svg,
		& img {
			display: block;
			width: 24px;
			height: 24px;
			max-width: none;
			object-fit: contain;
		}
	}

	& .horizon-demo__row-label {
		flex: 1 1 auto;
		min-width: 0;
		color: var(--hd-mist);
		font-size: 16px;
		font-weight: 300;
		line-height: 24px;
		overflow-wrap: anywhere;
	}

	& .horizon-demo__row-value {
		flex: 0 1 auto;
		max-width: 50%;
		color: #fff;
		font-size: 16px;
		font-weight: 700;
		line-height: 24px;
		text-align: right;
		overflow-wrap: anywhere;
	}

	/* Map image and metadata (map graphics are part of the supplied images) */
	& .horizon-demo__map {
		position: relative;
		order: -1;
		min-width: 0;
		height: clamp(260px, 52vw, 420px);
		overflow: hidden;
		background: var(--hd-ink);

		@media (width >= 1025px) {
			order: 0;
			height: auto;
			min-height: 560px;
		}
	}

	& .horizon-demo__img,
	& .horizon-demo__video {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		margin: 0;
		object-fit: cover;
		object-position: center;
	}

	& .horizon-demo__shade {
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(35, 31, 32, 0) 55%, rgba(35, 31, 32, 0.8) 100%);
		pointer-events: none;
	}

	/* Pause / Play for the map video (the kit's autoplay rule): 30px, light on dark, top right. */
	& .horizon-demo__toggle {
		position: absolute;
		top: 16px;
		right: 16px;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		margin: 0;
		padding: 0;
		border: 1px solid rgba(197, 207, 219, 0.6);
		border-radius: 4px;
		background: var(--hd-overlay-bg);
		color: #c5cfdb;
		cursor: pointer;

		@media (width >= 1025px) {
			top: 24px;
			right: 24px;
		}

		&:hover {
			border-color: #fff;
			color: #fff;
		}

		&:focus-visible {
			outline: 2px solid #c5cfdb !important; /* stylelint-disable-line */
			outline-offset: 2px;
		}

		& svg {
			display: block;
			width: 12px;
			height: 12px;
			fill: currentcolor;
		}

		/* Shows the action it performs: Pause while playing, Play otherwise. */
		& .horizon-demo__toggle-play {
			display: block;
		}

		& .horizon-demo__toggle-pause {
			display: none;
		}

		&[data-state="playing"] {
			& .horizon-demo__toggle-play {
				display: none;
			}

			& .horizon-demo__toggle-pause {
				display: block;
			}
		}
	}

	& .horizon-demo__legend {
		position: absolute;
		bottom: 44px;
		left: 16px;
		display: flex;
		flex-flow: row wrap;
		align-items: flex-start;
		gap: 6px;
		max-width: calc(100% - 32px);

		@media (width >= 1025px) {
			bottom: 56px;
			flex-direction: column;
		}
	}

	& .horizon-demo__chip {
		padding: 6px 10px;
		border-left: 2px solid rgba(255, 255, 255, 0.8);
		background: var(--hd-overlay-bg);
		color: #fff;
		font-size: 12px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	& .horizon-demo__chip--accent {
		border-left-color: var(--hd-green);
	}

	& .horizon-demo__stamps {
		position: absolute;
		top: 16px;
		left: 16px;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		max-width: calc(100% - 32px);

		@media (width >= 1025px) {
			top: 24px;
			left: 24px;
		}
	}

	& .horizon-demo__stamp {
		padding: 6px 10px;
		border-radius: 4px;
		background: #fff;
		color: var(--hd-ink);
		font-size: 14px;
		font-weight: 400;
		line-height: 17px;
	}

	& .horizon-demo__caption {
		position: absolute;
		right: 16px;
		bottom: 16px;
		left: 16px;
		display: flex;
		justify-content: space-between;
		gap: 16px;
		color: #fff;
		font-size: 14px;
		line-height: 17px;

		@media (width >= 1025px) {
			right: 24px;
			bottom: 24px;
			left: 24px;
		}
	}

	& .horizon-demo__caption-text {
		min-width: 0;
		font-size: 14px;
		font-weight: 400;
		line-height: 17px;
	}

	& .horizon-demo__source {
		flex: 0 0 auto;
		font-size: 14px;
		font-weight: 300;
		line-height: 17px;
	}

	/*
	 * The global focus script picks the ring colour from the focused element's own background, but the ring
	 * is drawn outside it: the tabs sit on the dark hero. (The Ask button uses the global .button states.)
	 */
	& .horizon-demo__tab:focus-visible {
		outline-color: #c5cfdb !important; /* stylelint-disable-line */
		transition: none !important; /* stylelint-disable-line */
	}

	/*
	 * Animation (EVWM-1145). Everything below only applies while script.js has added .is-hd-anim, so the
	 * no-JS and editor renders stay complete. Panel [data-hd-phase] / answer [data-hd-step] describe how far
	 * the sequences have progressed; no attribute means "complete".
	 */
	& .horizon-demo__sr {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	& .horizon-demo__prompt[data-typing],
	& .horizon-demo__heading[data-typing] {
		position: relative;
	}

	/* The global .ev-site-v4 * rule would otherwise give these spans their own line-height and weight. */
	& .horizon-demo__ghost,
	& .horizon-demo__typed {
		font: inherit;
		letter-spacing: inherit;
		text-transform: inherit;
	}

	& .horizon-demo__ghost {
		visibility: hidden; /* keeps the final text's layout while the typed copy fills in */
	}

	& .horizon-demo__typed {
		position: absolute;
		inset: 0;
	}

	& .horizon-demo__caret {
		display: inline-block;
		width: 2px;
		height: 0.9em;
		margin-left: 2px;
		vertical-align: -0.1em;
		animation: horizon-demo-caret 1.1s steps(1) infinite;
	}

	& .horizon-demo__caret--prompt {
		background: #3c659b;
	}

	& .horizon-demo__caret--heading {
		background: var(--hd-eyebrow);
	}

	&.is-hd-anim {
		/* Scenario controls stagger in once the demo scrolls into view; hidden ones are not focusable. */
		& .horizon-demo__tab {
			opacity: 0;
			visibility: hidden;
			transform: translateY(10px);
		}

		&[data-hd-in] .horizon-demo__tab {
			--hd-d: calc(var(--hd-i, 0) * 330ms);

			opacity: 1;
			visibility: visible;
			transform: none;
			transition:
				opacity 300ms ease-out var(--hd-d),
				transform 300ms ease-out var(--hd-d),
				visibility 0s linear var(--hd-d),
				background-color 150ms linear;
		}

		/* Prompt bubble */
		& .horizon-demo__bubble {
			transition:
				opacity 350ms ease-out,
				transform 350ms ease-out;
		}

		& [data-hd-panel][data-hd-phase="0"] .horizon-demo__bubble {
			opacity: 0;
			visibility: hidden;
			transform: translateY(12px);
			transition: none;
		}

		& .horizon-demo__ask {
			position: relative;
			overflow: hidden;
			transition:
				opacity 250ms ease-out,
				transform 250ms ease-out,
				background-color 150ms linear;
		}

		& [data-hd-panel]:is([data-hd-phase="0"], [data-hd-phase="1"], [data-hd-phase="2"]) .horizon-demo__ask {
			opacity: 0;
			visibility: hidden;
			transform: translateY(6px);
			transition: none;
		}

		/* Shimmer: finite (about 5s) so it needs no pause control. */
		& [data-hd-panel][data-hd-phase="3"] .horizon-demo__ask::after {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			width: 45%;
			background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0));
			transform: translateX(-120%) skewX(-20deg);
			animation: horizon-demo-shimmer 2.2s ease-in-out 0.4s 2;
			pointer-events: none;
		}

		/* The answer stays in the layout, blurred while the prompt types */
		& .horizon-demo__answer {
			transition:
				filter 500ms ease-out,
				opacity 350ms ease-out;
		}

		/*
		 * Pre-entrance only (panel phase 0 with answer step 0, before the prompt sequence starts): the answer
		 * shell and heading are hidden but keep their layout space. The Ask replay also uses step 0 but at
		 * phase 3, so it is unaffected; the entrance reveals everything when the prompt sequence begins.
		 */
		& [data-hd-panel][data-hd-phase="0"] .horizon-demo__answer[data-hd-step="0"] {
			opacity: 0;
			transition: none;
		}

		& [data-hd-panel][data-hd-phase="0"] .horizon-demo__answer[data-hd-step="0"] .horizon-demo__heading {
			opacity: 0;
		}

		& .horizon-demo__answer.is-hd-blur {
			filter: blur(8px);
		}

		/* Answer reveal steps */
		& .horizon-demo__meta,
		& .horizon-demo__description,
		& .horizon-demo__evidence-title,
		& .horizon-demo__row {
			transition:
				opacity 350ms ease-out,
				transform 350ms ease-out;
		}

		& .horizon-demo__row {
			transition-delay: calc(120ms + var(--hd-i, 0) * 150ms);
		}

		& .horizon-demo__map > :not([data-hd-legend]) {
			transition: opacity 400ms ease-out;
		}

		& .horizon-demo__legend {
			transition: opacity 500ms ease-out;
		}

		& [data-hd-answer]:is([data-hd-step="0"]) :is(.horizon-demo__meta),
		& [data-hd-answer]:is([data-hd-step="0"], [data-hd-step="1"], [data-hd-step="2"]) .horizon-demo__description,
		& [data-hd-answer]:is([data-hd-step="0"], [data-hd-step="1"], [data-hd-step="2"], [data-hd-step="3"]) :is(.horizon-demo__evidence-title, .horizon-demo__row) {
			opacity: 0;
			transform: translateY(8px);
			transition: none;
		}

		& [data-hd-answer][data-hd-step="0"] .horizon-demo__map > :not([data-hd-legend]),
		& [data-hd-answer]:is([data-hd-step="0"], [data-hd-step="1"], [data-hd-step="2"], [data-hd-step="3"], [data-hd-step="4"]) .horizon-demo__legend {
			opacity: 0;
			transition: none;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		&.is-hd-anim,
		&.is-hd-anim * {
			transition: none !important; /* stylelint-disable-line */
			animation: none !important; /* stylelint-disable-line */
		}

		&.is-hd-anim .horizon-demo__answer.is-hd-blur {
			filter: none;
		}
	}
}

@keyframes horizon-demo-caret {
	0%,
	49% {
		opacity: 1;
	}

	50%,
	100% {
		opacity: 0;
	}
}

@keyframes horizon-demo-shimmer {
	0% {
		transform: translateX(-120%) skewX(-20deg);
	}

	55%,
	100% {
		transform: translateX(260%) skewX(-20deg);
	}
}

/* Before script.js has initialised the demo (it loads in <head>), keep it invisible instead of flashing. */
html.hd-pending .horizon-demo:not(.is-hd-anim) {
	visibility: hidden;
}