/* Halesnax look B, "Pick a flavour": eleven colours, one for every flavour. Loaded only when B is the shown look (the page's e2Styles).
   The shared base is e2-halesnax.css (palette tokens, bands, --hs-display, --hs-spring, .hs-eyebrow). Markup: e2/halesnax/hero-b.njk and sig-b.njk; behaviour: e2-halesnax-b.js.
   Animations are gated: the script adds .is-armed (the hidden start) and .is-play (the run) only when motion is allowed, so no JS or reduced motion shows the finished state.
   On her red field cream text is 4.4:1, just under AA, so words on it sit on maroon or cream plates; the field itself carries her logo and art. */

/* ================= Hero: the old logo becomes the new one ================= */
.hsbh { --s: .6; min-height: 0; background: var(--bx-red); color: var(--bx-cream); font-family: var(--bx-font); overflow: hidden; padding: clamp(48px, 6vw, 88px) var(--pad) 0; }
.hsbh__in { align-items: center; text-align: center; gap: clamp(20px, 2.6vw, 34px); padding-bottom: calc(clamp(36px, 5vw, 64px) + 66px * var(--s)); }
.hsbh .hs-eyebrow { padding: 8px 16px; border-radius: 999px; background: var(--bx-maroon); color: var(--bx-cream); }
.hsbh .hs-eyebrow::before { background: var(--bx-yellow); }

.hsbh__logo { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; width: min(100%, 800px); height: clamp(130px, 18vw, 240px); margin-bottom: 22px; }
.hsbh__old { grid-area: 1 / 1; height: 100%; width: auto; max-width: 100%; min-height: 0; border-radius: 14px; box-shadow: 0 30px 50px -28px rgba(50, 8, 4, .75); opacity: 0; }
.hsbh__new { grid-area: 1 / 1; position: relative; width: 100%; aspect-ratio: 785 / 123; }
.hsbh__new img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hsbh__leaf { clip-path: var(--clip); transform-origin: 5.1% 60.2%; }
.hsbh__cap { position: absolute; left: 50%; top: calc(100% + 12px); translate: -50% 0; display: grid; font: 700 11px/1 var(--bx-font); letter-spacing: .2em; text-transform: uppercase; }
.hsbh__cap b { grid-area: 1 / 1; padding: 5px 12px; border-radius: 999px; background: var(--bx-maroon); color: var(--bx-cream); white-space: nowrap; }
.hsbh__cap-a { opacity: 0; }
.hsbh__line { margin: 0; max-width: 46ch; padding: 10px 20px; border-radius: 14px; background: var(--bx-maroon); color: var(--bx-cream); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.55; }

.hsbh__snacks { position: relative; width: min(100%, 1100px); aspect-ratio: var(--ar); }
.hsbh__snack { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: var(--clip); transform-origin: var(--ox) var(--oy); }

.hsbh__replay { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--bx-cream); border-radius: 50%; background: transparent; color: var(--bx-cream); cursor: pointer; transition: background-color .2s ease, transform .25s var(--ease-out); }
.hsbh__replay svg { width: 20px; height: 20px; }
.hsbh__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hsbh__replay:hover { background: rgba(238, 231, 218, .16); }
.hsbh__replay:active { transform: scale(.94); }
.hsbh__replay:focus-visible, .hsb__sw:focus-visible { outline: 3px solid var(--bx-yellow); outline-offset: 3px; }

/* her tagline ticker: the strip repeats every 433.3px but was cut 0.23 degrees tilted; turned back, a tile of four repeats (1733.25px) joins itself, so the loop has no seam.
   Only rows 26 to 92 of her 101px strip show: they hold all the text and none of the 3 rows of cut edge along its bottom (the tilt moves those up by up to 3px at the tile's end). --s scales it. */
.hsbh__ticker { position: absolute; left: 0; right: 0; bottom: 0; height: calc(66px * var(--s)); overflow: hidden; }
.hsbh__track { display: flex; width: max-content; animation: hsbh-run 28s linear infinite; }
.hsbh__tile { flex: none; display: block; width: calc(1733.25px * var(--s)); height: calc(66px * var(--s)); overflow: hidden; background: var(--bx-red); }
.hsbh__tile img { display: block; width: calc(2090px * var(--s)); max-width: none; height: auto; margin-top: calc(-26px * var(--s)); rotate: -.23deg; }
@keyframes hsbh-run { to { transform: translateX(calc(-1733.25px * var(--s))); } }

/* The run: the old logo holds, scales up and fades as the new wordmark settles, the sprig grows leaf by leaf, the snacks roll in. */
.hsbh.is-armed .hsbh__word, .hsbh.is-armed .hsbh__leaf, .hsbh.is-armed .hsbh__snack { opacity: 0; }
.hsbh.is-play .hsbh__old { animation: hsbh-old 2.5s linear both; }
.hsbh.is-play .hsbh__word { animation: hsbh-word 1s var(--hs-spring) 1.55s both; }
.hsbh.is-play .hsbh__leaf { animation: hsbh-leaf .75s var(--hs-spring) calc(2.45s + var(--i) * .17s) both; }
.hsbh.is-play .hsbh__snack { animation: hsbh-roll 1s var(--hs-spring) calc(3.0s + var(--i) * .09s) both; }
.hsbh.is-play .hsbh__cap-a { animation: hsbh-cap-a 2.5s ease both; }
.hsbh.is-play .hsbh__cap-b { animation: hsbh-cap-b 2.5s ease both; }
@keyframes hsbh-old { 0% { opacity: 0; scale: .9; } 20% { opacity: 1; scale: 1; filter: blur(0); } 58% { opacity: 1; scale: 1; filter: blur(0); } 100% { opacity: 0; scale: 1.22; filter: blur(8px); } }
@keyframes hsbh-word { from { opacity: 0; scale: .8; filter: blur(10px); } to { opacity: 1; scale: 1; filter: blur(0); } }
@keyframes hsbh-leaf { from { opacity: 0; scale: 0; } to { opacity: 1; scale: 1; } }
@keyframes hsbh-roll { from { opacity: 0; translate: calc(var(--dir) * 9%) 0; rotate: calc(var(--dir) * 170deg); scale: .6; } to { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } }
@keyframes hsbh-cap-a { 0%, 14% { opacity: 0; } 24%, 54% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes hsbh-cap-b { 0%, 66% { opacity: 0; } 84%, 100% { opacity: 1; } }

@media (max-width: 760px) {
  .hsbh { --s: .48; }
  .hsbh__logo { height: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .hsbh *, .hsbh *::before { animation: none !important; }
  .hsbh__replay { display: none; }
  .hsbh__cap { display: none; }
}

/* ================= Signature: the flavour wheel ================= */
/* The band's colour and ink are written by the script (--hsb-bg, --hsb-ink; the server writes the default's), so every flavour tints the whole band. */
.hsb { --hsb-bg: #da9885; --hsb-ink: var(--bx-maroon); background-color: var(--hsb-bg); color: var(--hsb-ink); font-family: var(--bx-font); overflow: hidden; transition: background-color .75s ease, color .5s ease; }
.hsb .hs-eyebrow::before { background: currentColor; }
.hsb__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "head wheel" "copy wheel"; gap: 22px clamp(28px, 5vw, 88px); align-items: center; }
.hsb__head { grid-area: head; align-self: end; display: grid; justify-items: start; gap: 14px; }
.hsb__title { margin: 0; font-family: var(--hs-display); font-weight: 400; font-size: clamp(44px, 6.4vw, 92px); line-height: .94; letter-spacing: .01em; text-transform: uppercase; }
.hsb__copy { grid-area: copy; align-self: start; display: grid; gap: 12px; justify-items: start; }
.hsb__fam { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1.2 var(--bx-font); letter-spacing: .16em; text-transform: uppercase; }
.hsb__famdot { width: 14px; height: 14px; border-radius: 50%; background: var(--sku); box-shadow: 0 0 0 2px var(--bx-cream), 0 0 0 3.5px var(--hsb-ink); transition: background-color .5s ease; }
.hsb__name { margin: 0; min-height: 2.05em; font-family: var(--hs-display); font-size: clamp(30px, 3.6vw, 52px); line-height: 1.02; letter-spacing: .01em; text-transform: uppercase; }
.hsb__ing { margin: 0; display: grid; gap: 4px; }
.hsb__ingt { font: 600 12px/1.2 var(--bx-font); letter-spacing: .16em; text-transform: uppercase; }
.hsb__ingl { font-size: 16px; line-height: 1.55; font-variant-caps: all-small-caps; letter-spacing: .1em; }
.hsb__note { margin: 6px 0 0; max-width: 44ch; font-size: 15px; line-height: 1.6; }

.hsb__wheel { grid-area: wheel; position: relative; width: 100%; max-width: 620px; aspect-ratio: 1; margin-inline: auto; container-type: inline-size; }
.hsb__arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--hsb-ink); pointer-events: none; }
.hsb__arc { fill: none; stroke: currentColor; stroke-opacity: .5; stroke-width: .5; stroke-linecap: round; }
.hsb__arct { fill: currentColor; font: 600 2.75px var(--bx-font); letter-spacing: .5px; }

.hsb__base { position: absolute; left: 50%; top: 50%; width: 54%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--bx-cream); box-shadow: 0 0 0 1.2cqw var(--sku), 0 0 0 1.5cqw color-mix(in srgb, var(--hsb-ink) 35%, transparent), 0 28px 40px -26px rgba(60, 20, 10, .6); transition: box-shadow .6s ease; }
.hsb__basel { position: absolute; left: 0; right: 0; bottom: 4.5%; text-align: center; font: 600 max(9px, 1.55cqw)/1 var(--bx-font); letter-spacing: .18em; text-transform: uppercase; color: var(--bx-maroon); }
.hsb__pack { position: absolute; left: 50%; top: 50%; height: 40cqw; aspect-ratio: var(--ar); translate: -50% -50%; overflow: hidden; filter: drop-shadow(0 10px 8px rgba(60, 20, 10, .3)); }
.hsb__pack img { position: absolute; left: var(--il, 0); top: var(--it, 0); width: var(--iw, 100%); max-width: none; height: auto; display: block; }
.hsb__pack.is-pop { animation: hsb-pop .85s var(--hs-spring) both; }
@keyframes hsb-pop { from { opacity: 0; scale: .3; translate: -50% -38%; } to { opacity: 1; scale: 1; translate: -50% -50%; } }

/* three to five of the flavour's own ingredients orbit it slowly, and stay upright as they go */
.hsb__orbit { position: absolute; inset: 0; pointer-events: none; animation: hsb-spin 48s linear infinite; }
.hsb__orb { position: absolute; left: 50%; top: 50%; width: var(--w); margin: calc(var(--w) / -2) 0 0 calc(var(--w) / -2); transform: rotate(var(--a)) translateY(-22.5cqw); }
.hsb__orb img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 8px rgba(60, 20, 10, .35)); animation: hsb-up 48s linear infinite, hsb-in .7s var(--hs-spring) calc(var(--k) * .09s) both; }
@keyframes hsb-spin { to { rotate: 360deg; } }
@keyframes hsb-up { from { rotate: calc(var(--a) * -1); } to { rotate: calc(var(--a) * -1 - 360deg); } }
@keyframes hsb-in { from { scale: 0; opacity: 0; } to { scale: 1; opacity: 1; } }

/* the ring of swatches, each at least 44px */
.hsb__sw { position: absolute; left: var(--x); top: var(--y); width: max(44px, 9.2cqw); aspect-ratio: 1; translate: -50% -50%; padding: 0; border: max(3px, .6cqw) solid var(--bx-cream); border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: 0 8px 14px -8px rgba(60, 20, 10, .6); transition: scale .35s var(--hs-spring), box-shadow .25s ease; }
.hsb__sw:hover { scale: 1.12; }
.hsb__sw[aria-pressed="true"] { z-index: 2; scale: 1.26; box-shadow: 0 0 0 max(3px, .65cqw) var(--hsb-ink), 0 12px 18px -8px rgba(60, 20, 10, .6); }
.hsb__sw:focus-visible { outline-color: var(--hsb-ink); outline-offset: 5px; }
/* the picked swatch carries a dot, so it still reads as picked when its colour is the band's own */
.hsb__sw::after { content: ''; position: absolute; inset: 0; margin: auto; width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--bx-cream); box-shadow: 0 0 0 2px var(--bx-maroon); scale: 0; transition: scale .3s var(--hs-spring); }
.hsb__sw[aria-pressed="true"]::after { scale: 1; }

/* her phrase, stamped onto the wheel's corner */
.hsb__stamp { position: absolute; right: -1%; top: -2%; z-index: 3; width: max(82px, 21cqw); aspect-ratio: 1; rotate: -12deg; color: var(--hsb-ink); transition: color .5s ease; pointer-events: none; }
.hsb__stamp svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hsb__stamp-t { fill: currentColor; font: 400 11.4px var(--hs-display); }
.hsb__stamp-h { position: absolute; left: 33%; top: 37%; width: 34%; aspect-ratio: 370 / 220; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.hsb.is-armed .hsb__stamp { opacity: 0; }
.hsb__stamp.is-stamp { animation: hsb-stamp .7s var(--hs-spring) both; }
@keyframes hsb-stamp { 0% { opacity: 0; scale: 2.2; rotate: -40deg; } 40% { opacity: 1; } 100% { opacity: 1; scale: 1; rotate: -12deg; } }

@media (max-width: 860px) {
  .hsb__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "wheel" "copy"; }
  .hsb__wheel { max-width: 480px; }
  .hsb__name { min-height: 2.05em; }
}
@media (prefers-reduced-motion: reduce) {
  .hsb { transition: none; }
  .hsb__orbit, .hsb__orb img, .hsb__pack.is-pop, .hsb__stamp.is-stamp { animation: none !important; }
  .hsb__sw { transition: none; }
}