/*------------------------
  1) HERO BACKGROUND
-------------------------*/
.hub-hero {
  background: url("https://your-domain.com/path/to/hero.jpg") center/cover no-repeat;
  padding: clamp(4rem, 15vw, 8rem) 0;
}

/*------------------------
  2) DYNAMIC SIZING
-------------------------*/
.hub-nav {
  --radius: clamp(100px, 15vw, 200px);
  --size:   clamp(60px, 10vw, 120px);
  position: relative;
  width:  calc(var(--radius)*2 + var(--size)*2);
  height: calc(var(--radius)*2 + var(--size)*2);
  margin: 0 auto;
}

/*------------------------
  3) CENTER IMAGE
-------------------------*/
.hub-center {
  position: absolute;
  top: 50%; left: 50%;
  width: 100px; height: 100px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.hub-center img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/*------------------------
  4) NODES: STYLE + LINES
-------------------------*/
.hub-node {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--size); height: var(--size);
  margin: calc(var(--size)/-2) 0 0 calc(var(--size)/-2);
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  padding: 0.5em;
  font-size: calc(var(--size) * 0.22);
  line-height: 1;
  color: #333;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  pointer-events: auto;
  transition: transform 0.3s ease, background 0.3s ease;
  /* initial position & scale for animation */
  opacity: 0;
  transform:
    rotate(var(--angle))
    translate(0)
    rotate(calc(-1 * var(--angle)))
    scale(0);
}
/* the “spoke” lines */
.hub-node::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: calc(var(--radius) - var(--size)/2);
  height: 2px;
  background: #ccc;
  transform-origin: left center;
  transform: rotate(var(--angle));
  z-index: -1;
}

/*------------------------
  5) ON-LOAD ANIMATION
-------------------------*/
@keyframes hub-appear {
  to {
    opacity: 1;
    transform:
      rotate(var(--angle))
      translate(var(--radius))
      rotate(calc(-1 * var(--angle)))
      scale(1);
  }
}
/* stagger delays */
.hub-nav .hub-node:nth-child(2) { animation: hub-appear 0.6s ease-out 0.1s forwards; }
.hub-nav .hub-node:nth-child(3) { animation: hub-appear 0.6s ease-out 0.2s forwards; }
.hub-nav .hub-node:nth-child(4) { animation: hub-appear 0.6s ease-out 0.3s forwards; }
.hub-nav .hub-node:nth-child(5) { animation: hub-appear 0.6s ease-out 0.4s forwards; }
.hub-nav .hub-node:nth-child(6) { animation: hub-appear 0.6s ease-out 0.5s forwards; }
.hub-nav .hub-node:nth-child(7) { animation: hub-appear 0.6s ease-out 0.6s forwards; }
.hub-nav .hub-node:nth-child(8) { animation: hub-appear 0.6s ease-out 0.7s forwards; }

/*------------------------
  6) HOVER & CLICK STATES
-------------------------*/
.hub-node:hover {
  background: #f0f0f0;
  transform:
    rotate(var(--angle))
    translate(calc(var(--radius) + 10px))
    rotate(calc(-1 * var(--angle)))
    scale(1.1);
}
.hub-node:active {
  transform:
    rotate(var(--angle))
    translate(var(--radius))
    rotate(calc(-1 * var(--angle)))
    scale(0.9);
  transition: transform 0.1s ease-out;
}

/*------------------------
  7) FALLBACKS
-------------------------*/
/* hide on mobile */
@media (max-width: 768px) {
  .hub-nav, .hub-hero { display: none !important; }
}
/* hide on all non-home pages */
body:not(.home) .hub-nav,
body:not(.home) .hub-hero {
  display: none !important;
}
/* remove default page title gap on home */
body.home .entry-header {
  display: none !important;
}