/*
 * OrgTree — wheel.css
 * The shared CoSuite™ conditions wheel: a faithful SVG remake of Andy Barker's
 * green pinwheel, on OrgTree's dark/emerald brand. Consumed by inc/wheel.php ->
 * template-parts/components/cosuite-wheel.php.
 *
 * All motion (petal reveal, ring rotation, strongest glow) lives ONLY inside
 * `@media (prefers-reduced-motion: no-preference)`, so the default/base state is
 * the final, static wheel — reduced-motion users see everything, unanimated.
 *
 * Blade positioning: each blade's <path> carries an SVG `transform="rotate(a 50
 * 50)"` presentation attribute. A CSS `transform` would OVERRIDE that attribute,
 * so the reveal animation re-expresses the same rotation in CSS (rotate(--i *
 * 360/7)) — never a bare scale, which would collapse every blade to 12 o'clock.
 */

.wheel {
	/* Emerald ramp for the blades. Tuned for the polished-black background. */
	--wheel-blade-top: #17B872;
	--wheel-blade-bottom: #0C6B41;
	--wheel-gap: rgba(8, 12, 10, 0.55);
	--wheel-amber: #E7B24C; /* Most-strained accent — warm, never red/alarm. */
	--wheel-size: clamp(17rem, 46vw, 33rem);
	--wheel-step: calc(360deg / 7);

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	width: 100%;
}

/* ---------------------------------------------------------------------- */
/* Stage — a square that holds the SVG, the hub text and the HTML labels.  */
/* ---------------------------------------------------------------------- */

.wheel__stage {
	position: relative;
	width: var(--wheel-size);
	max-width: 100%;
	aspect-ratio: 1 / 1;
	margin-inline: auto;
}

.wheel__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* ---------------------------------------------------------------------- */
/* Blades                                                                  */
/* ---------------------------------------------------------------------- */

.wheel__petal {
	/* Base fill is set per-instance via an inline `fill="url(#<id>-blade)"`
	   attribute on each <path> (see the markup partial) so two wheels on one
	   page never collide on a shared gradient id. CSS fill overrides below
	   ([data-strongest]/[data-weakest]) still win over that attribute. */
	stroke: var(--wheel-gap);
	stroke-width: 0.7;
	stroke-linejoin: round;
}

/* ---------------------------------------------------------------------- */
/* Rotation arrows + decorative ring                                       */
/* ---------------------------------------------------------------------- */

.wheel__arrow-arc {
	fill: none;
	stroke: var(--green-glow);
	stroke-width: 2.4;
	stroke-linecap: round;
	opacity: 0.68;
}

.wheel__arrow-head {
	fill: var(--green-glow);
	opacity: 0.85;
}

.wheel__ring {
	fill: none;
	stroke: rgba(87, 224, 164, 0.26);
	stroke-width: 0.5;
	stroke-dasharray: 0.6 3.2;
	stroke-linecap: round;
	transform-box: view-box;
	transform-origin: 50px 50px;
}

/* ---------------------------------------------------------------------- */
/* Hub                                                                     */
/* ---------------------------------------------------------------------- */

.wheel__hub-bg {
	fill: #ffffff;
	filter: drop-shadow(0 0.6px 2.4px rgba(0, 0, 0, 0.35));
}

.wheel__hub {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 40%;
	text-align: center;
	pointer-events: none;
	line-height: 1.2;
}

.wheel__hub-title {
	display: block;
	font-family: var(--font-heading);
	font-size: clamp(0.72rem, 0.3rem + 1.7vw, 1.15rem);
	font-weight: 400;
	color: var(--ink-900);
}

.wheel__hub-sub {
	display: block;
	margin-top: 0.35em;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: clamp(0.5rem, 0.22rem + 1.05vw, 0.72rem);
	letter-spacing: 0.01em;
	color: var(--green-deep);
}

/* ---------------------------------------------------------------------- */
/* Labels — crisp HTML text orbiting the hub                               */
/* ---------------------------------------------------------------------- */

.wheel__labels {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
}

.wheel__label {
	position: absolute;
	transform: translate(-50%, -50%);
	width: max-content;
	max-width: 6.5rem;
	text-align: center;
}

.wheel__label-btn {
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	margin: 0 auto;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
}

.wheel__label-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(1.6rem, 5.4vw, 2.2rem);
	height: clamp(1.6rem, 5.4vw, 2.2rem);
	margin: 0 auto;
	color: var(--white);
}

/* The reused orgtree_icon() glyphs (solve/shift) ship their own `.icon`
   wrapper, which defaults to `color: var(--green)` (gold on dark). Re-tint it to
   the label colour and let it fill the wheel's icon box so it sizes exactly
   like the wheel-native glyphs. */
.wheel__label-icon .icon {
	width: 100%;
	height: 100%;
	color: inherit;
}

.wheel__label-text {
	display: block;
	margin-top: 0.25rem;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: clamp(0.62rem, 0.35rem + 1vw, 0.9rem);
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--white);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.wheel--interactive .wheel__label-btn:hover .wheel__label-icon,
.wheel--interactive .wheel__label-btn:focus-visible .wheel__label-icon {
	color: var(--green-glow);
}

.wheel--interactive .wheel__label-btn:focus-visible {
	outline: 2px solid var(--green-glow);
	outline-offset: 3px;
	border-radius: var(--radius);
}

/* ---------------------------------------------------------------------- */
/* Highlight states (result context)                                       */
/* ---------------------------------------------------------------------- */

/* Strongest — brighter emerald + soft glow (a "+" marker is drawn in SVG). */
.wheel__petal[data-strongest] {
	fill: var(--green-glow);
	stroke: rgba(87, 224, 164, 0.6);
	filter: drop-shadow(0 0 3px rgba(87, 224, 164, 0.85));
}

.wheel__marker circle {
	fill: rgba(9, 20, 15, 0.72);
	stroke: var(--green-glow);
	stroke-width: 0.8;
}

.wheel__marker path {
	stroke: var(--green-glow);
	stroke-width: 1.1;
	stroke-linecap: round;
}

.wheel__label[data-strongest] .wheel__label-text {
	color: var(--green-glow);
}

/* A highlighted label sits over a lit (strongest) or amber-outlined (weakest)
   petal, where its coloured text can lose contrast against the brighter fill.
   Back the text with a dark chip so the emerald / amber stays AA-legible no
   matter how bright the petal behind it is, and give the (decorative) icon a
   dark shadow so it reads too. */
.wheel__label[data-strongest] .wheel__label-text,
.wheel__label[data-weakest] .wheel__label-text {
	padding: 0.06rem 0.42rem;
	border-radius: 999px;
	background: rgba(7, 12, 10, 0.85);
	text-shadow: none;
}

.wheel__label[data-strongest] .wheel__label-icon,
.wheel__label[data-weakest] .wheel__label-icon {
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

/* Most strained — neutral amber outline + slightly dimmed fill (never red). */
.wheel__petal[data-weakest] {
	fill: #0B5636;
	stroke: var(--wheel-amber);
	stroke-width: 1.4;
	opacity: 0.92;
}

.wheel__label[data-weakest] .wheel__label-text {
	color: var(--wheel-amber);
}

/* When a highlight is active, mute every other blade so the two stand out. */
.wheel--highlighted .wheel__petal:not([data-strongest]):not([data-weakest]) {
	opacity: 0.8;
}

/* ---------------------------------------------------------------------- */
/* CTA                                                                     */
/* ---------------------------------------------------------------------- */

.wheel__cta {
	text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Responsive — reflow labels a touch tighter on small screens.            */
/* ---------------------------------------------------------------------- */

@media (max-width: 600px) {
	.wheel {
		--wheel-size: min(88vw, 22rem);
	}

	.wheel__label {
		max-width: 5rem;
	}

	.wheel__label-text {
		font-size: 0.66rem;
	}
}

/* ---------------------------------------------------------------------- */
/* MOTION — opt-in via no-preference. The base state above is already the   */
/* final, static wheel, so reduced-motion users get everything, unanimated. */
/* ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	/* State changes (petal fill/glow/opacity toggled client-side in the result
	   flow) ease only when motion is allowed — gated here so reduced-motion
	   stays instant/static. */
	.wheel__petal {
		transition: fill var(--transition-base), filter var(--transition-base), opacity var(--transition-base);
	}

	/* Blades fan in, staggered. The rotation that positions each blade is
	   re-expressed here because a CSS transform overrides the SVG attribute. */
	.wheel__petal {
		transform-box: view-box;
		transform-origin: 50px 50px;
		opacity: 0;
		animation: wheel-petal-in 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
		animation-delay: calc(var(--i) * 90ms);
	}

	/* Strongest keeps its reveal AND gains a gentle infinite breath. */
	.wheel__petal[data-strongest] {
		animation:
			wheel-petal-in 640ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 90ms) both,
			wheel-glow 3.2s ease-in-out 1.2s infinite;
	}

	.wheel__labels .wheel__label {
		opacity: 0;
		animation: wheel-label-in 520ms ease both;
		animation-delay: calc(340ms + var(--i) * 90ms);
	}

	.wheel__ring {
		animation: wheel-turn 90s linear infinite;
	}

	@keyframes wheel-petal-in {
		from {
			opacity: 0;
			transform: rotate(calc(var(--i) * var(--wheel-step))) scale(0.55);
		}
		to {
			opacity: 1;
			transform: rotate(calc(var(--i) * var(--wheel-step))) scale(1);
		}
	}

	@keyframes wheel-label-in {
		from {
			opacity: 0;
			transform: translate(-50%, calc(-50% + 6px));
		}
		to {
			opacity: 1;
			transform: translate(-50%, -50%);
		}
	}

	@keyframes wheel-turn {
		to {
			transform: rotate(360deg);
		}
	}

	@keyframes wheel-glow {
		0%,
		100% {
			filter: drop-shadow(0 0 2px rgba(87, 224, 164, 0.6));
		}
		50% {
			filter: drop-shadow(0 0 5px rgba(87, 224, 164, 0.95));
		}
	}
}