/**
 * Quiz Highlight block — template-parts/blocks/block-quiz-highlight.php,
 * driven by assets/js/conditional/blocks/quizHighlight.js.
 *
 * A full-bleed band: the background (spiral + falling candy) spans the
 * viewport, the copy and pumpkin sit in the boxed content width.
 *
 * Entrance: everything marked .qh-anim is hidden until scroll-effects.js
 * adds .is-in-view to the section, then comes in on the timeline below
 * (spiral draw-in 0s → pumpkin .25s → label .7s → headline lines from .9s →
 * host 1.5s → bubble 1.65s → button 2.1s, wiggling from 2.8s; candy starts
 * falling at 2.4s, from the JS). Colours are the title slide's
 * (title-halloween.css).
 */

.quiz-highlight {
	--qh-light: #a25ede;  /* spiral background */
	--qh-dark: #632f91;   /* spiral stripes */
	--qh-ink: #1f1925;
	--qh-pumpkin: #ef7424;
	--qh-spin: 60s;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	padding: clamp(64px, 9vw, 112px) 0;
	margin-top: calc(var(--defaultInterval, 20px) * 3);
	margin-bottom: calc(var(--defaultInterval, 20px) * 3);
	background: var(--qh-light);
	color: var(--qh-ink);
}

/* Full bleed out of .entry-content, whatever the page's width tier.
   Outranks page-width-control.css's #SD.width-full child rule. */
body#SD .entry-content > section.quiz-highlight.alignfull {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-right: 0;
}

/* ---------- Background: spiral + falling candy ---------- */

.qh-backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}

.qh-spiral {
	position: absolute;
	left: 0;
	top: 0;
	overflow: visible;
	will-change: transform;
	animation: qh-spin var(--qh-spin) linear infinite;
	transition: opacity 0.3s ease-out;
}

.qh-spiral path {
	fill: var(--qh-dark);
}

.qh-spiral .qh-cover {
	fill: none;
	stroke: var(--qh-light);
}

@keyframes qh-spin {
	to { transform: rotate(360deg); }
}

/* Same size and look as the title slide's falling candy (.qt-drops img in
   title-halloween.css). */
.qh-drops img {
	position: absolute;
	top: 0;
	width: clamp(180px, 33vw, 640px);
	max-width: none;
	height: auto;
	filter: grayscale(1) contrast(1.05) drop-shadow(6px 10px 0 rgba(0, 0, 0, 0.18));
	animation: qh-fall var(--qh-fall, 12s) linear forwards;
	will-change: transform;
}

@keyframes qh-fall {
	0%   { transform: translateY(calc(-100% - 40px)) rotate(var(--qh-r0, 0deg)); opacity: 0; }
	6%   { opacity: 1; }
	100% { transform: translateY(var(--qh-fall-to, 900px)) rotate(var(--qh-r1, 60deg)); opacity: 1; }
}

/* ---------- Content: boxed width (--boxedWidth), whatever the page's tier ---------- */

#SD .quiz-highlight .qh-inner {
	position: relative;
	box-sizing: border-box;
	width: calc(100% - var(--defaultInterval, 20px) * 2);
	max-width: var(--boxedWidth, 1080px);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap-reverse; /* phones: pumpkin above the copy */
	align-items: center;
	gap: clamp(28px, 4vw, 56px);
}

/* ---------- Copy ---------- */

.qh-copy {
	flex: 1 1 400px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
}

#SD .quiz-highlight .qh-label {
	margin: 0;
	padding: 9px 15px 8px;
	border-radius: 999px;
	background: var(--qh-ink);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

#SD .quiz-highlight .qh-title {
	margin: 0;
	padding: 0;
	font-family: var(--quiz-font-headline, var(--primaryFontFamily, "trade gothic"));
	font-weight: 700;
	font-size: clamp(56px, 7vw, 100px);
	line-height: 0.92;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0.06em 0.07em 0 var(--qh-ink);
}

.qh-line {
	display: block;
}

.qh-pitch {
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: 100%;
}

.qh-host {
	flex: 0 0 auto;
	margin: 0;
}

.qh-host__photo {
	display: block;
	width: clamp(56px, 6vw, 76px);
	height: clamp(56px, 6vw, 76px);
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Bubble: the quiz's Pitch Bubble tokens when they're set, else white. */
.qh-bubble {
	position: relative;
	min-width: 0;
	max-width: 24em;
	padding: var(--qt-bubble-padding, 0.75em 1em);
	border-radius: var(--qt-bubble-radius, 18px);
	background: var(--qt-bubble-bg, #fff);
	box-shadow: var(--qt-bubble-shadow, 0 6px 18px rgba(0, 0, 0, 0.28));
	color: var(--qt-bubble-text, var(--qh-ink));
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.35;
	text-wrap: pretty;
}

.quiz-highlight.has-host .qh-bubble::before {
	content: "";
	position: absolute;
	left: -11px;
	top: 50%;
	margin-top: -9px;
	border-style: solid;
	border-width: 9px 12px 9px 0;
	border-color: transparent var(--qt-bubble-bg, #fff) transparent transparent;
}

#SD .quiz-highlight .qh-bubble > * {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

#SD .quiz-highlight .qh-bubble > * + * {
	margin-top: 0.4em;
}

/* In the pumpkin's mouth, like the title slide's Get Started. The art box
   is exactly the SVG's viewBox (1532 553 551 768), so the mouth's centre
   (art 1799, 1006) is a fixed percentage of it, and the label scales with
   the pumpkin's width (cqw) to fit the mouth (352 of 551 art units). Centred
   with the translate property so the entrance scale and the wiggle pivot on
   the button's own centre. */
#SD .quiz-highlight a.qh-cta {
	position: absolute;
	left: 48.46%;
	top: 58.98%;
	translate: -50% -50%;
	z-index: 1;
	display: inline-block;
	margin: 0;
	padding: 0.55em 1.1em 0.5em;
	border-radius: 999px;
	background: var(--qh-pumpkin);
	color: var(--qh-ink);
	font-family: var(--quiz-font-headline, var(--primaryFontFamily, "trade gothic"));
	font-size: max(14px, 6cqw);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 0 0 6px rgba(239, 116, 36, 0.2), 0 0 34px rgba(239, 116, 36, 0.6);
}

#SD .quiz-highlight a.qh-cta:hover,
#SD .quiz-highlight a.qh-cta:focus {
	background: #ff8a3a;
	color: var(--qh-ink);
}

#SD .quiz-highlight a.qh-cta:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* ---------- Pumpkin ---------- */

.qh-figure {
	flex: 1 1 300px;
	min-width: 0;
	max-width: 440px;
	margin: 0 auto;
	transform-origin: 50% 100%;
}

.qh-art-box {
	position: relative;
	container-type: inline-size; /* the mouth button's size (cqw) */
}

.qh-art {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 551 / 768;
	overflow: visible;
	filter: drop-shadow(10px 14px 0 rgba(31, 25, 37, 0.3));
}

/* Only the pumpkin shows: the spiral moves to .qh-spiral (JS), the title
   lettering and stray type stay hidden. Stripes are visibility:hidden, not
   display:none, so the JS can still measure them. */
.qh-art [data-name="spiral-bg"],
.qh-art [data-name="title"],
.qh-art [data-name="uspertitle"],
.qh-art [data-name="supertitle"],
.qh-art > g:not([data-name]),
.qh-art > text {
	display: none;
}

.qh-art [data-name="spiral-stripes"] {
	visibility: hidden;
}

.qh-art [data-name="pumpkin-mouth"] {
	fill: var(--quiz-bg, var(--qh-ink));
}

/* ---------- Entrance ---------- */

.qh-anim {
	transition-property: opacity, transform;
}

.qh-figure {
	transition-duration: 0.3s, 0.8s;
	transition-timing-function: ease-out, cubic-bezier(0.2, 0.9, 0.3, 1.35);
	transition-delay: 0.25s;
}

.qh-label {
	transition-duration: 0.5s;
	transition-timing-function: ease-out;
	transition-delay: 0.7s;
}

.qh-line {
	transition-duration: 0.25s, 0.6s;
	transition-timing-function: ease-out, cubic-bezier(0.2, 0.9, 0.3, 1.5);
	transition-delay: calc(0.9s + var(--qh-i, 0) * 0.2s);
}

.qh-host {
	transition-duration: 0.35s, 0.5s;
	transition-timing-function: ease-out, cubic-bezier(0.2, 0.9, 0.3, 1.3);
	transition-delay: 1.5s;
}

.qh-bubble {
	transform-origin: left center;
	transition-duration: 0.6s;
	transition-timing-function: ease-out, cubic-bezier(0.2, 0.8, 0.3, 1);
	transition-delay: 1.65s;
}

/* Full selector + shorthand: the theme's own link transition (all 500ms,
   no delay) otherwise wins and the button arrives first. */
#SD .quiz-highlight a.qh-cta {
	transition:
		opacity 0.3s ease-out 2.1s,
		transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.6) 2.1s,
		background-color 0.2s ease;
}

#SD .quiz-highlight:not(.is-in-view) a.qh-cta {
	transition: none;
}

.quiz-highlight:not(.is-in-view) .qh-anim {
	opacity: 0;
}

.quiz-highlight:not(.is-in-view) .qh-figure { transform: translateY(120px) scale(0.55); }
.quiz-highlight:not(.is-in-view) .qh-label  { transform: translateX(-24px); }
.quiz-highlight:not(.is-in-view) .qh-line   { transform: translateY(-60px) rotate(-5deg); }
.quiz-highlight:not(.is-in-view) .qh-host   { transform: scale(0.6); }
.quiz-highlight:not(.is-in-view) .qh-bubble { transform: translateX(-10px) scale(0.96); }
.quiz-highlight:not(.is-in-view) .qh-cta    { transform: scale(0.4); }
.quiz-highlight:not(.is-in-view) .qh-spiral { opacity: 0; }

/* Leaving (Replay Entrance on): reset instantly, offscreen. */
.quiz-highlight:not(.is-in-view) .qh-anim {
	transition: none;
}

/* Once in, the button wiggles once a second or so (title-halloween.css's
   qt-wiggle), using the rotate property so it stacks on the entrance. */
.quiz-highlight.is-in-view a.qh-cta {
	animation: qh-wiggle 1.6s ease-in-out 2.8s infinite;
}

@keyframes qh-wiggle {
	0%, 50%, 100% { rotate: 0deg; }
	10% { rotate: -8deg; }
	20% { rotate: 7deg; }
	30% { rotate: -5deg; }
	40% { rotate: 3deg; }
}

/* ---------- Phones: centred stack under the pumpkin ---------- */

@media (max-width: 699px) {
	/* --boxedWidth is 70vw here (273px on a 390px phone):
	   too narrow for the bubble, so the band uses the standard gutters. */
	#SD .quiz-highlight .qh-inner {
		width: calc(100% - var(--defaultInterval, 20px) * 2);
		max-width: none;
		margin-left: auto;
		margin-right: auto;
	}

	.qh-copy {
		align-items: center;
		text-align: center;
		gap: 20px;
	}

	.qh-figure {
		max-width: min(62vw, 300px);
	}

	.qh-pitch {
		gap: 12px;
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qh-spiral,
	.quiz-highlight.is-in-view a.qh-cta {
		animation: none;
	}

	.qh-anim,
	.qh-spiral {
		transition: none !important;
	}

	.quiz-highlight:not(.is-in-view) .qh-anim,
	.quiz-highlight:not(.is-in-view) .qh-spiral {
		opacity: 1;
		transform: none;
	}
}