/* Services wheel (src/pages/test/services-wheel.astro, src/scripts/vacc-wheel.js). */
.vw-section { background: radial-gradient(120% 80% at 50% 0%, #fff 0%, #f4f6f9 70%); }
.vw-section .vw-heading { max-width: 760px; margin: 0 auto 18px; text-align: center; }
.vw-section .vw-intro { max-width: 620px; margin: 0 auto clamp(40px, 6vw, 72px); color: var(--vr-text); font-size: 18px; line-height: 1.6; text-align: center; }

.vw { --vw-cycle: 4200ms; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); align-items: center; gap: clamp(32px, 6vw, 88px); max-width: 1120px; margin: 0 auto; }
.vw__stage { position: relative; width: 100%; max-width: 620px; justify-self: center; aspect-ratio: 1; }
.vw__svg { display: block; width: 100%; height: auto; overflow: visible; font-family: Roboto, sans-serif; }

/* Dial */
.vw__ticks { fill: none; stroke: #c9d3df; stroke-width: 1.2; stroke-linecap: round; }
.vw__track { fill: none; stroke: #e3e8ef; stroke-width: 3; }
.vw__progress { fill: none; stroke: var(--vr-red); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 100; transform: rotate(-90deg); transform-origin: 300px 300px; }
.vw__progress--over { stroke: #ff9a9e; }

/* Segments: navy family from deep to steel; the active stage turns red and lifts out. */
.vw__seg { cursor: pointer; outline: none; transform-box: view-box; transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .6s ease; }
.vw__shape { fill: var(--vw-fill); stroke: #fff; stroke-width: 1; transition: fill .6s ease; }
.vw__seg:nth-child(1) { --vw-fill: #0f3561; }
.vw__seg:nth-child(2) { --vw-fill: #164271; }
.vw__seg:nth-child(3) { --vw-fill: #1f5287; }
.vw__seg:nth-child(4) { --vw-fill: #2a6097; }
.vw__seg:nth-child(5) { --vw-fill: #3a6fa5; }
.vw__seg:nth-child(6) { --vw-fill: #5280af; }
.vw__seg:nth-child(7) { --vw-fill: #6c93bd; }
.vw__seg.is-active { transform: translate(var(--dx), var(--dy)); filter: drop-shadow(0 14px 22px rgba(227, 20, 28, .32)); }
.vw__seg.is-active .vw__shape { fill: var(--vr-red); }
.vw__seg:not(.is-active):hover .vw__shape { fill: color-mix(in srgb, var(--vw-fill) 82%, #fff); }
.vw__seg:focus-visible .vw__shape { stroke: #fff; stroke-width: 3; }
.vw__num { fill: rgba(255, 255, 255, .62); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-anchor: middle; }
.vw__label { fill: #fff; font-size: 15px; font-weight: 700; letter-spacing: .01em; text-anchor: middle; }
.vw__seg.is-active .vw__num { fill: #fff; }

/* Hub */
.vw__bim { fill: var(--vr-navy); font-family: Roboto, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .14em; text-anchor: middle; }
.vw__halo { fill: #fff; filter: drop-shadow(0 18px 30px rgba(11, 37, 71, .22)); }
.vw__hub { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.vw__centre { position: absolute; inset: 37.5%; display: grid; place-items: center; text-align: center; pointer-events: none; }
.vw .vw__title { margin: 0; color: #fff; font-family: Roboto, sans-serif; font-size: clamp(11px, 1.55vw, 16px); font-weight: 700; line-height: 1.3; letter-spacing: .01em; }

/* Stage list */
.vw__list { margin: 0; padding: 0; list-style: none; counter-reset: none; border-top: 1px solid var(--vr-line); }
.vw__list li { border-bottom: 1px solid var(--vr-line); }
.vw__item { position: relative; display: flex; align-items: center; gap: 18px; width: 100%; padding: 16px 4px 16px 18px; border: 0; background: none; color: var(--vr-ink); font: 600 17px/1.3 Roboto, sans-serif; text-align: left; cursor: pointer; transition: color .3s, padding .4s cubic-bezier(.2, .8, .2, 1); }
.vw__item::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--vr-red); transform: scaleY(0); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.vw__item-num { color: var(--vr-muted); font-size: 13px; letter-spacing: .1em; }
.vw__item:hover, .vw__item[aria-pressed="true"] { color: var(--vr-navy); padding-left: 26px; }
.vw__item[aria-pressed="true"]::before { transform: scaleY(1); }
.vw__item[aria-pressed="true"] .vw__item-num { color: var(--vr-red); }
.vw__item:focus-visible { outline: 2px solid var(--vr-navy); outline-offset: 2px; }
/* The site theme gives buttons a coloured hover background; not here. */
.vw__item:hover, .vw__item:focus { background: none; box-shadow: none; }

/* Entrance: segments sweep in clockwise, then the hub and dial appear. */
.vw.is-ready .vw__seg { animation: vw-in .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 90ms); }
.vw.is-ready .vw__hub, .vw.is-ready .vw__halo { animation: vw-hub .8s cubic-bezier(.2, .8, .2, 1) both .2s; transform-origin: 300px 300px; }
.vw.is-ready .vw__centre, .vw.is-ready .vw__bim { animation: vw-fade .6s ease both .75s; }
.vw.is-ready .vw__ticks, .vw.is-ready .vw__track { animation: vw-fade 1s ease both .3s; }
.vw:not(.is-ready) .vw__seg, .vw:not(.is-ready) .vw__hub, .vw:not(.is-ready) .vw__halo, .vw:not(.is-ready) .vw__centre, .vw:not(.is-ready) .vw__bim { opacity: 0; }
.vw.is-running .vw__progress { animation: vw-progress var(--vw-cycle) linear infinite; }
.vw.is-paused .vw__progress { animation-play-state: paused; }
@keyframes vw-in { from { opacity: 0; transform: scale(.86) rotate(-8deg); transform-origin: 300px 300px; } to { opacity: 1; } }
@keyframes vw-hub { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes vw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vw-progress { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 100 0; } }

@media (max-width: 900px) {
  .vw { grid-template-columns: 1fr; }
  .vw__list { max-width: 560px; width: 100%; justify-self: center; }
}
@media (max-width: 520px) {
  .vw__label { font-size: 17px; }
  .vw__num { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .vw *, .vw.is-ready * { animation: none !important; transition: none !important; }
  .vw:not(.is-ready) .vw__seg, .vw:not(.is-ready) .vw__hub, .vw:not(.is-ready) .vw__halo, .vw:not(.is-ready) .vw__centre, .vw:not(.is-ready) .vw__bim { opacity: 1; }
}