/* Combo hub — ported from app homepage (assets-gw-signature/glyphew).
   Animated combo carousel: radial disc, arc/chord path, flicking thumb cap.
   Cap keyframes use literal px tuned to the native 116px hub; the whole hub
   is scaled as a unit via .hp-hub-mount so geometry stays intact. */

/* Mount: fixes the layout footprint; the 116px hub is absolutely centered
   then scaled to fit. Absolute centering (top/left 50% + half-box margin)
   avoids the oversized-grid-item overflow that pushed the disc off-center. */
.hp-hub-mount {
  position: relative;
  width: 64px;
  height: 64px;
}
.hp-hub-mount .hub {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -58px 0 0 -58px;
  transform: scale(0.5517);   /* 116 → 64px, matches tile size */
  transform-origin: center;
}

/* Hub disc */
.hub {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--gw-surface-raised) 0%, var(--gw-surface) 70%);
  border: 1.5px solid var(--gw-border);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.hub::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid var(--gw-accent);
  opacity: 0.28;
  pointer-events: none;
}

/* Slide container — fades between slides */
.hub-inner {
  position: relative;
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  transition: opacity 200ms ease;
}

/* Brand glyph (logo slide) */
.hub-logo-svg {
  width: 68px;
  height: 76px;
  color: var(--gw-accent);
  display: block;
  filter: drop-shadow(0 0 6px rgba(253, 222, 10, 0.4));
}

/* Combo disc SVG */
.combo-disc-svg {
  position: absolute;
  inset: 0;
  width: 116px;
  height: 116px;
}

/* Animated thumb cap */
.hub-cap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff8cc, #fdde0a 45%, #c9a800 82%);
  box-shadow: 0 0 10px 4px rgba(253, 222, 10, 0.5), 0 2px 4px rgba(0, 0, 0, 0.5);
  z-index: 2;
}
.hub-cap::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(122, 104, 0, 0.55);
  margin: -1.5px 0 0 -1.5px;
}

/* Cap animations — one play per slide */
.hub-cap.to-n   { animation: capToN   2s ease; }
.hub-cap.to-s   { animation: capToS   2s ease; }
.hub-cap.to-w   { animation: capToW   2s ease; }
.hub-cap.to-e   { animation: capToE   2s ease; }
.hub-cap.to-n2  { animation: capToN2  2s ease; }
.hub-cap.to-s2  { animation: capToS2  2s ease; }
.hub-cap.to-w2  { animation: capToW2  2s ease; }
.hub-cap.to-e2  { animation: capToE2  2s ease; }
.hub-cap.to-ns  { animation: capToNS  2s ease; }
.hub-cap.to-we  { animation: capToWE  2s ease; }
.hub-cap.to-sn  { animation: capToSN  2s ease; }
.hub-cap.to-n3  { animation: capToN3  2s ease; }
.hub-cap.to-s3  { animation: capToS3  2s ease; }
.hub-cap.to-w3  { animation: capToW3  2s ease; }
.hub-cap.to-e3  { animation: capToE3  2s ease; }
.hub-cap.to-e4  { animation: capToE4  2.5s ease; }
.hub-cap.to-ne  { animation: capToNE  2s ease; }
.hub-cap.to-nw  { animation: capToNW  2s ease; }
.hub-cap.to-es  { animation: capToES  2s ease; }
.hub-cap.to-ws  { animation: capToWS  2s ease; }
.hub-cap.to-nes { animation: capToNES 2s ease; }
.hub-cap.to-ne1   { animation: capToNE1   2s ease; }
.hub-cap.to-nw1   { animation: capToNW1   2s ease; }
.hub-cap.to-se1   { animation: capToSE1   2s ease; }
.hub-cap.to-sw1   { animation: capToSW1   2s ease; }
.hub-cap.to-ne1-2 { animation: capToNE1D2 2s ease; }

@keyframes capToN {
  0%   { transform: translate(0,0);     animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  30%  { transform: translate(0,-38px); animation-timing-function: steps(1,end); }
  60%  { transform: translate(0,-38px); animation-timing-function: ease-in; }
  100% { transform: translate(0,0); }
}
@keyframes capToS {
  0%   { transform: translate(0,0);    animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  30%  { transform: translate(0,38px); animation-timing-function: steps(1,end); }
  60%  { transform: translate(0,38px); animation-timing-function: ease-in; }
  100% { transform: translate(0,0); }
}
@keyframes capToW {
  0%   { transform: translate(0,0);      animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  30%  { transform: translate(-38px,0);  animation-timing-function: steps(1,end); }
  60%  { transform: translate(-38px,0);  animation-timing-function: ease-in; }
  100% { transform: translate(0,0); }
}
@keyframes capToE {
  0%   { transform: translate(0,0);     animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  30%  { transform: translate(38px,0);  animation-timing-function: steps(1,end); }
  60%  { transform: translate(38px,0);  animation-timing-function: ease-in; }
  100% { transform: translate(0,0); }
}
@keyframes capToN2 {
  0%   { transform: translate(0,0);     animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  18%  { transform: translate(0,-38px); animation-timing-function: ease-in; }
  30%  { transform: translate(0,0);     animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  48%  { transform: translate(0,-38px); animation-timing-function: ease-in; }
  65%  { transform: translate(0,0); }
  100% { transform: translate(0,0); }
}
@keyframes capToS2 {
  0%   { transform: translate(0,0);    animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  18%  { transform: translate(0,38px); animation-timing-function: ease-in; }
  30%  { transform: translate(0,0);    animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  48%  { transform: translate(0,38px); animation-timing-function: ease-in; }
  65%  { transform: translate(0,0); }
  100% { transform: translate(0,0); }
}
@keyframes capToW2 {
  0%   { transform: translate(0,0);      animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  18%  { transform: translate(-38px,0);  animation-timing-function: ease-in; }
  30%  { transform: translate(0,0);      animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  48%  { transform: translate(-38px,0);  animation-timing-function: ease-in; }
  65%  { transform: translate(0,0); }
  100% { transform: translate(0,0); }
}
@keyframes capToE2 {
  0%   { transform: translate(0,0);     animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  18%  { transform: translate(38px,0);  animation-timing-function: ease-in; }
  30%  { transform: translate(0,0);     animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  48%  { transform: translate(38px,0);  animation-timing-function: ease-in; }
  65%  { transform: translate(0,0); }
  100% { transform: translate(0,0); }
}
@keyframes capToNS {
  0%   { transform: translate(0,0);     animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  18%  { transform: translate(0,-38px); animation-timing-function: ease-in; }
  30%  { transform: translate(0,0);     animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  48%  { transform: translate(0,38px);  animation-timing-function: ease-in; }
  65%  { transform: translate(0,0); }
  100% { transform: translate(0,0); }
}
@keyframes capToSN {
  0%   { transform: translate(0,0);     animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  18%  { transform: translate(0,38px);  animation-timing-function: ease-in; }
  30%  { transform: translate(0,0);     animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  48%  { transform: translate(0,-38px); animation-timing-function: ease-in; }
  65%  { transform: translate(0,0); }
  100% { transform: translate(0,0); }
}
@keyframes capToWE {
  0%   { transform: translate(0,0);      animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  18%  { transform: translate(-38px,0);  animation-timing-function: ease-in; }
  30%  { transform: translate(0,0);      animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  48%  { transform: translate(38px,0);   animation-timing-function: ease-in; }
  65%  { transform: translate(0,0); }
  100% { transform: translate(0,0); }
}
@keyframes capToN3 {
  0%   { transform: translate(0,0);     animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  12%  { transform: translate(0,-38px); animation-timing-function: ease-in; }
  22%  { transform: translate(0,0);     animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  35%  { transform: translate(0,-38px); animation-timing-function: ease-in; }
  45%  { transform: translate(0,0);     animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  58%  { transform: translate(0,-38px); animation-timing-function: ease-in; }
  70%  { transform: translate(0,0); }
  100% { transform: translate(0,0); }
}
@keyframes capToS3 {
  0%   { transform: translate(0,0);    animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  12%  { transform: translate(0,38px); animation-timing-function: ease-in; }
  22%  { transform: translate(0,0);    animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  35%  { transform: translate(0,38px); animation-timing-function: ease-in; }
  45%  { transform: translate(0,0);    animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  58%  { transform: translate(0,38px); animation-timing-function: ease-in; }
  70%  { transform: translate(0,0); }
  100% { transform: translate(0,0); }
}
@keyframes capToW3 {
  0%   { transform: translate(0,0);     animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  12%  { transform: translate(-38px,0); animation-timing-function: ease-in; }
  22%  { transform: translate(0,0);     animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  35%  { transform: translate(-38px,0); animation-timing-function: ease-in; }
  45%  { transform: translate(0,0);     animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  58%  { transform: translate(-38px,0); animation-timing-function: ease-in; }
  70%  { transform: translate(0,0); }
  100% { transform: translate(0,0); }
}
@keyframes capToE3 {
  0%   { transform: translate(0,0);    animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  12%  { transform: translate(38px,0); animation-timing-function: ease-in; }
  22%  { transform: translate(0,0);    animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  35%  { transform: translate(38px,0); animation-timing-function: ease-in; }
  45%  { transform: translate(0,0);    animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  58%  { transform: translate(38px,0); animation-timing-function: ease-in; }
  70%  { transform: translate(0,0); }
  100% { transform: translate(0,0); }
}
@keyframes capToE4 {
  0%   { transform: translate(0,0);    animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  10%  { transform: translate(38px,0); animation-timing-function: ease-in; }
  18%  { transform: translate(0,0);    animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  28%  { transform: translate(38px,0); animation-timing-function: ease-in; }
  36%  { transform: translate(0,0);    animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  46%  { transform: translate(38px,0); animation-timing-function: ease-in; }
  54%  { transform: translate(0,0);    animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  64%  { transform: translate(38px,0); animation-timing-function: ease-in; }
  72%  { transform: translate(0,0); }
  100% { transform: translate(0,0); }
}
@keyframes capToNE {
  0%   { transform: translate(0,0);           animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  15%  { transform: translate(0,-38px);       animation-timing-function: cubic-bezier(0.4,0,0.6,1); }
  33%  { transform: translate(27px,-27px);    animation-timing-function: cubic-bezier(0.4,0,0.6,1); }
  50%  { transform: translate(38px,0);        animation-timing-function: ease-in; }
  66%  { transform: translate(0,0); }
  100% { transform: translate(0,0); }
}
@keyframes capToNW {
  0%   { transform: translate(0,0);           animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  15%  { transform: translate(0,-38px);       animation-timing-function: cubic-bezier(0.4,0,0.6,1); }
  33%  { transform: translate(-27px,-27px);   animation-timing-function: cubic-bezier(0.4,0,0.6,1); }
  50%  { transform: translate(-38px,0);       animation-timing-function: ease-in; }
  66%  { transform: translate(0,0); }
  100% { transform: translate(0,0); }
}
@keyframes capToES {
  0%   { transform: translate(0,0);           animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  15%  { transform: translate(38px,0);        animation-timing-function: cubic-bezier(0.4,0,0.6,1); }
  33%  { transform: translate(27px,27px);     animation-timing-function: cubic-bezier(0.4,0,0.6,1); }
  50%  { transform: translate(0,38px);        animation-timing-function: ease-in; }
  66%  { transform: translate(0,0); }
  100% { transform: translate(0,0); }
}
@keyframes capToWS {
  0%   { transform: translate(0,0);           animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  15%  { transform: translate(-38px,0);       animation-timing-function: cubic-bezier(0.4,0,0.6,1); }
  33%  { transform: translate(-27px,27px);    animation-timing-function: cubic-bezier(0.4,0,0.6,1); }
  50%  { transform: translate(0,38px);        animation-timing-function: ease-in; }
  66%  { transform: translate(0,0); }
  100% { transform: translate(0,0); }
}
@keyframes capToNES {
  0%   { transform: translate(0,0);           animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  12%  { transform: translate(0,-38px);       animation-timing-function: cubic-bezier(0.4,0,0.6,1); }
  25%  { transform: translate(27px,-27px);    animation-timing-function: cubic-bezier(0.4,0,0.6,1); }
  38%  { transform: translate(38px,0);        animation-timing-function: cubic-bezier(0.4,0,0.6,1); }
  51%  { transform: translate(27px,27px);     animation-timing-function: cubic-bezier(0.4,0,0.6,1); }
  64%  { transform: translate(0,38px);        animation-timing-function: ease-in; }
  78%  { transform: translate(0,0); }
  100% { transform: translate(0,0); }
}
@keyframes capToNE1 {
  0%   { transform: translate(0,0);           animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  35%  { transform: translate(27px,-27px);    animation-timing-function: steps(1,end); }
  60%  { transform: translate(27px,-27px);    animation-timing-function: ease-in; }
  100% { transform: translate(0,0); }
}
@keyframes capToNW1 {
  0%   { transform: translate(0,0);           animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  35%  { transform: translate(-27px,-27px);   animation-timing-function: steps(1,end); }
  60%  { transform: translate(-27px,-27px);   animation-timing-function: ease-in; }
  100% { transform: translate(0,0); }
}
@keyframes capToSE1 {
  0%   { transform: translate(0,0);           animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  35%  { transform: translate(27px,27px);     animation-timing-function: steps(1,end); }
  60%  { transform: translate(27px,27px);     animation-timing-function: ease-in; }
  100% { transform: translate(0,0); }
}
@keyframes capToSW1 {
  0%   { transform: translate(0,0);           animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  35%  { transform: translate(-27px,27px);    animation-timing-function: steps(1,end); }
  60%  { transform: translate(-27px,27px);    animation-timing-function: ease-in; }
  100% { transform: translate(0,0); }
}
@keyframes capToNE1D2 {
  0%   { transform: translate(0,0);           animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  20%  { transform: translate(27px,-27px);    animation-timing-function: ease-in; }
  36%  { transform: translate(0,0);           animation-timing-function: cubic-bezier(0.1,0.7,0.1,1); }
  56%  { transform: translate(27px,-27px);    animation-timing-function: ease-in; }
  72%  { transform: translate(0,0); }
  100% { transform: translate(0,0); }
}

/* Reduced motion — park the cap, no flicking */
@media (prefers-reduced-motion: reduce) {
  .hub-cap { animation: none !important; }
  .hub-inner { transition: none; }
}