/* ==========================================================================
   Tasting wheel
   --------------------------------------------------------------------------
   The artwork holds all thirty segments, six axes by five levels, and every
   one is hidden here. vd_render_flavour_wheel() puts one class per filled
   level on the wrapper - is-sweet-1 is-sweet-2 is-sweet-3 for a score of 3 -
   and the rule below reveals the matching segments. Nothing is calculated at
   render time, and a product with no scores renders no wheel at all.

   Colours come from the SVG itself, which declares them as custom properties
   with the brand values as fallbacks, so they are overridable from here:

       --vd-wheel-savoury  --vd-wheel-spice   --vd-wheel-peaty
       --vd-wheel-floral   --vd-wheel-fruity  --vd-wheel-sweet
       --vd-wheel-spoke    --vd-wheel-ground

   --vd-wheel-ground is the disc behind the wheel. The back-label artwork has
   it white, which keeps the coloured axis labels legible; V8 shows the wheel
   on the page background instead, with a softer palette chosen to stay
   readable on dark green. Set it to transparent for the V8 treatment.
   ========================================================================== */

.vd-wheel {
	--vd-wheel-size: 100%;
	--vd-wheel-max: 420px;

	/* V8 palette, sampled from Images V8/...Whisky Bottling.jpg. The SVG's own
	   fallbacks are the vivid back-label print colours, which are right on white
	   and far too hot on the page green - which is why the design restates them. */
	--vd-wheel-peaty: #3c84d6;
	--vd-wheel-sweet: #ffd963;
	--vd-wheel-floral: #5fa281;
	--vd-wheel-fruity: #5e96b9;
	--vd-wheel-spice: #888abd;
	--vd-wheel-savoury: #cc3449;

	/* No disc: the wheel sits straight on the page. */
	--vd-wheel-ground: transparent;
	--vd-wheel-spoke: #ffffff;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--at-space--s);
	width: var(--vd-wheel-size);
	max-width: var(--vd-wheel-max);
	margin: 0;
}

.vd-wheel .vd-wheel__svg,
.vd-wheel > svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* --- the reveal --------------------------------------------------------- */

/* Every segment, hidden. Scoped to the groups so the curved axis labels,
   which are direct children of the svg, are untouched. */
.vd-wheel g[id] > path {
	visibility: hidden;
}

.vd-wheel.is-peaty-1 #peaty-1,
.vd-wheel.is-peaty-2 #peaty-2,
.vd-wheel.is-peaty-3 #peaty-3,
.vd-wheel.is-peaty-4 #peaty-4,
.vd-wheel.is-peaty-5 #peaty-5,
.vd-wheel.is-sweet-1 #sweet-1,
.vd-wheel.is-sweet-2 #sweet-2,
.vd-wheel.is-sweet-3 #sweet-3,
.vd-wheel.is-sweet-4 #sweet-4,
.vd-wheel.is-sweet-5 #sweet-5,
.vd-wheel.is-floral-1 #floral-1,
.vd-wheel.is-floral-2 #floral-2,
.vd-wheel.is-floral-3 #floral-3,
.vd-wheel.is-floral-4 #floral-4,
.vd-wheel.is-floral-5 #floral-5,
.vd-wheel.is-fruity-1 #fruity-1,
.vd-wheel.is-fruity-2 #fruity-2,
.vd-wheel.is-fruity-3 #fruity-3,
.vd-wheel.is-fruity-4 #fruity-4,
.vd-wheel.is-fruity-5 #fruity-5,
.vd-wheel.is-spice-1 #spice-1,
.vd-wheel.is-spice-2 #spice-2,
.vd-wheel.is-spice-3 #spice-3,
.vd-wheel.is-spice-4 #spice-4,
.vd-wheel.is-spice-5 #spice-5,
.vd-wheel.is-savoury-1 #savoury-1,
.vd-wheel.is-savoury-2 #savoury-2,
.vd-wheel.is-savoury-3 #savoury-3,
.vd-wheel.is-savoury-4 #savoury-4,
.vd-wheel.is-savoury-5 #savoury-5 {
	visibility: visible;
}

/* --- filling outward ---------------------------------------------------- */

/* Revealed segments fade in level by level, so the wheel fills from the
   centre out rather than appearing at once. */
@media (prefers-reduced-motion: no-preference) {
	.vd-wheel g[id] > path {
		opacity: 0;
		animation: vd-wheel-fill 0.5s ease forwards;
	}

.vd-wheel #peaty-1,
.vd-wheel #sweet-1,
.vd-wheel #floral-1,
.vd-wheel #fruity-1,
.vd-wheel #spice-1,
.vd-wheel #savoury-1 {
	animation-delay: 0.1s;
}

.vd-wheel #peaty-2,
.vd-wheel #sweet-2,
.vd-wheel #floral-2,
.vd-wheel #fruity-2,
.vd-wheel #spice-2,
.vd-wheel #savoury-2 {
	animation-delay: 0.2s;
}

.vd-wheel #peaty-3,
.vd-wheel #sweet-3,
.vd-wheel #floral-3,
.vd-wheel #fruity-3,
.vd-wheel #spice-3,
.vd-wheel #savoury-3 {
	animation-delay: 0.4s;
}

.vd-wheel #peaty-4,
.vd-wheel #sweet-4,
.vd-wheel #floral-4,
.vd-wheel #fruity-4,
.vd-wheel #spice-4,
.vd-wheel #savoury-4 {
	animation-delay: 0.5s;
}

.vd-wheel #peaty-5,
.vd-wheel #sweet-5,
.vd-wheel #floral-5,
.vd-wheel #fruity-5,
.vd-wheel #spice-5,
.vd-wheel #savoury-5 {
	animation-delay: 0.6s;
}
}

@keyframes vd-wheel-fill {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* --- optional legend ---------------------------------------------------- */

.vd-wheel__legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--at-space--2xs) var(--at-space--s);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--at-text--xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.vd-wheel__legend-item {
	display: flex;
	align-items: baseline;
	gap: 0.4em;
	color: var(--primary-l-5);
}

.vd-wheel__legend-score {
	font-weight: 600;
	color: var(--at-white);
}

.vd-wheel__legend-item--peaty   .vd-wheel__legend-score { color: var(--vd-wheel-peaty); }
.vd-wheel__legend-item--sweet   .vd-wheel__legend-score { color: var(--vd-wheel-sweet); }
.vd-wheel__legend-item--floral  .vd-wheel__legend-score { color: var(--vd-wheel-floral); }
.vd-wheel__legend-item--fruity  .vd-wheel__legend-score { color: var(--vd-wheel-fruity); }
.vd-wheel__legend-item--spice   .vd-wheel__legend-score { color: var(--vd-wheel-spice); }
.vd-wheel__legend-item--savoury .vd-wheel__legend-score { color: var(--vd-wheel-savoury); }