/* ─────────────────────────────────────────────
   ASCEND HUB — flywheel landing
   Brand palette mirrors ascend-academy
   ───────────────────────────────────────────── */

:root {
  --crimson: #BC1E2D;
  --crimson-light: #d42a3a;
  --crimson-deep: #8e1622;
  --crimson-soft: rgba(188, 30, 45, 0.08);
  --black: #0a0a0a;
  --ink: #1a1a1a;
  --ink-muted: #555;
  --cream: #F1F1F1;
  --white: #ffffff;
  --border: rgba(0, 0, 0, 0.08);
  --shadow-card: 0 18px 50px rgba(20, 20, 20, 0.08), 0 4px 12px rgba(20, 20, 20, 0.04);
  --shadow-card-hover: 0 32px 80px rgba(188, 30, 45, 0.22), 0 10px 28px rgba(188, 30, 45, 0.12);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 60%, #f4f4f4 100%);
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  z-index: 1;
}

/* ── ANIMATED GRADIENT MESH BACKGROUND ── */
.mesh-bg {
  position: fixed; inset: -10%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0;
  will-change: transform;
  animation-fill-mode: forwards;
}
.mesh-blob-1, .mesh-blob-2, .mesh-blob-3 { animation-fill-mode: forwards; }
.mesh-blob-1 {
  width: 60vmax; height: 60vmax;
  top: -10%; left: -15%;
  background: radial-gradient(circle, rgba(188, 30, 45, 0.18) 0%, rgba(188, 30, 45, 0) 70%);
  animation: meshIn 1.4s ease-out 0.0s forwards, drift1 32s ease-in-out 1.4s infinite;
}
.mesh-blob-2 {
  width: 55vmax; height: 55vmax;
  bottom: -15%; right: -10%;
  background: radial-gradient(circle, rgba(188, 30, 45, 0.14) 0%, rgba(188, 30, 45, 0) 70%);
  animation: meshIn 1.4s ease-out 0.2s forwards, drift2 38s ease-in-out 1.6s infinite;
}
.mesh-blob-3 {
  width: 45vmax; height: 45vmax;
  top: 30%; left: 60%;
  background: radial-gradient(circle, rgba(255, 200, 200, 0.18) 0%, rgba(255, 200, 200, 0) 70%);
  animation: meshIn 1.4s ease-out 0.4s forwards, drift3 44s ease-in-out 1.8s infinite;
}
@keyframes meshIn {
  from { opacity: 0; }
  to   { opacity: 0.55; }
}
@keyframes drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(8%, 6%) scale(1.08); }
  66%      { transform: translate(-4%, 10%) scale(0.96); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-6%, -8%) scale(1.05); }
  66%      { transform: translate(8%, -4%) scale(0.98); }
}
@keyframes drift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-12%, -6%) scale(1.10); }
}

/* hidden on desktop, shown in mobile media query */
.hub-tagline { display: none; }

/* ── SPIN HINT (floating below the center seal, outside the logo) ── */
.spin-hint {
  --hint-y: calc(var(--logo, 200px) * 0.92 + 14px);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + var(--hint-y)));
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  animation: hintFade 1s var(--ease) 2.4s forwards, hintFloat 4s ease-in-out 2.4s infinite;
}
.spin-hint.dismissed { animation: hintOut 0.4s var(--ease) forwards; }
.spin-hint-arrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  animation: hintRotate 3s linear infinite;
  transform-origin: center;
}
@keyframes hintFade { from { opacity: 0; } to { opacity: 0.6; } }
@keyframes hintOut  { to   { opacity: 0; transform: translate(-50%, calc(-50% + var(--hint-y) + 12px)); } }
@keyframes hintFloat {
  0%, 100% { transform: translate(-50%, calc(-50% + var(--hint-y))); }
  50%      { transform: translate(-50%, calc(-50% + var(--hint-y) + 6px)); }
}
@keyframes hintRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── FOOTER ── */
.hub-footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 3;
  display: flex; justify-content: flex-end;
  padding: 0 32px 22px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0;
  pointer-events: none;
  animation: fadeUp 1.2s var(--ease) 2.0s forwards;
}

/* ── FLYWHEEL STAGE ── */
.flywheel-stage {
  /* cap radius by both vmin (horizontal fit) AND vh (vertical fit)
     so top/bottom cards never clip on shorter laptop viewports */
  --r: clamp(180px, min(40vmin, 24vh), 380px);
  --logo: clamp(140px, 20vmin, 210px);
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  z-index: 2;
  padding: 72px 16px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.flywheel-stage.dragging { cursor: grabbing; }

/* SVG wheel (rings + spokes + particles) */
.flywheel-svg {
  position: absolute;
  top: 50%; left: 50%;
  width: min(96vmin, 1100px);
  height: min(96vmin, 1100px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
}
.ring { fill: none; stroke: rgba(0, 0, 0, 0.10); stroke-width: 1; }
.ring-outer  { stroke: rgba(188, 30, 45, 0.16); stroke-width: 1.4; animation: spin 120s linear infinite; transform-origin: 0 0; }
.ring-dashed { stroke: rgba(0, 0, 0, 0.10); stroke-dasharray: 2 8; stroke-width: 1; animation: spinReverse 60s linear infinite; transform-origin: 0 0; }
.ring-mid    { stroke: rgba(0, 0, 0, 0.07); }
.ring-inner  { stroke: rgba(188, 30, 45, 0.22); stroke-width: 1.4; }

/* the user-controlled wheel — JS sets transform: rotate() */
.user-wheel  { transform-origin: 0 0; will-change: transform; }
.auto-spin   { transform-origin: 0 0; }

.spokes .spoke {
  stroke: url(#spokeGrad);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  opacity: 0;
  animation: drawSpoke 1.2s var(--ease) forwards;
}
.spokes .spoke:nth-child(1) { animation-delay: 0.85s; }
.spokes .spoke:nth-child(2) { animation-delay: 1.00s; }
.spokes .spoke:nth-child(3) { animation-delay: 1.15s; }
.spokes .spoke:nth-child(4) { animation-delay: 1.30s; }

.ticks line {
  stroke: rgba(188, 30, 45, 0.35);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0;
  animation: tickIn 0.6s var(--ease) forwards;
  /* per-line delay set inline by JS, with a 2s base offset for cinematic reveal */
}

/* ── ENERGY PARTICLES ── */
.particles {
  opacity: 0;
  animation: fadeIn 1s var(--ease) 1.9s forwards;
}
.particle {
  opacity: 0;
  transform-origin: 0 0;
  animation-timing-function: cubic-bezier(0.55, 0.05, 0.6, 1);
  animation-iteration-count: infinite;
}
.p-top    { animation-name: travelTop;    animation-duration: 3.4s; }
.p-right  { animation-name: travelRight;  animation-duration: 3.4s; }
.p-bottom { animation-name: travelBottom; animation-duration: 3.4s; }
.p-left   { animation-name: travelLeft;   animation-duration: 3.4s; }

.p-top.p-1    { animation-delay: 0s; }
.p-top.p-2    { animation-delay: 1.7s; }
.p-right.p-1  { animation-delay: 0.85s; }
.p-right.p-2  { animation-delay: 2.55s; }
.p-bottom.p-1 { animation-delay: 0.4s; }
.p-bottom.p-2 { animation-delay: 2.1s; }
.p-left.p-1   { animation-delay: 1.25s; }
.p-left.p-2   { animation-delay: 2.95s; }

@keyframes travelTop {
  0%   { transform: translate(0, -180px) scale(0.6); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(0, -300px) scale(0.4); opacity: 0; }
}
@keyframes travelRight {
  0%   { transform: translate(180px, 0) scale(0.6); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(300px, 0) scale(0.4); opacity: 0; }
}
@keyframes travelBottom {
  0%   { transform: translate(0, 180px) scale(0.6); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(0, 300px) scale(0.4); opacity: 0; }
}
@keyframes travelLeft {
  0%   { transform: translate(-180px, 0) scale(0.6); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(-300px, 0) scale(0.4); opacity: 0; }
}

/* ── CENTER HUB ── */
.hub-center {
  position: relative;
  width: var(--logo);
  height: var(--logo);
  display: grid;
  place-items: center;
  z-index: 5;
  pointer-events: none; /* let drag pass through to stage */
}

.hub-glow {
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(188, 30, 45, 0.30) 0%, rgba(188, 30, 45, 0.08) 35%, transparent 65%);
  filter: blur(8px);
  z-index: -2;
  opacity: 0;
  animation: glowIn 1.2s var(--ease) 0.2s forwards, glowPulse 5s ease-in-out 1.4s infinite;
}
@keyframes glowIn {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 0.85; transform: scale(1); }
}
@keyframes glowPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.10); opacity: 1; }
}

.hub-curved {
  position: absolute;
  width: calc(var(--logo) * 1.55);
  height: calc(var(--logo) * 1.55);
  top: 50%; left: 50%;
  margin-top: calc(var(--logo) * -0.775);
  margin-left: calc(var(--logo) * -0.775);
  pointer-events: none;
  z-index: 4;
  animation: spin 70s linear infinite, fadeIn 1.2s var(--ease) 0.6s backwards;
}
.hub-curved svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hub-curved text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px;
  font-weight: 600;
  fill: var(--crimson);
  letter-spacing: 0.04em;
  opacity: 0.78;
  text-transform: uppercase;
}

.hub-logo {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--white);
  box-shadow:
    0 0 0 1px rgba(188, 30, 45, 0.18),
    0 0 0 6px var(--white),
    0 0 0 7px rgba(188, 30, 45, 0.22),
    0 30px 90px rgba(188, 30, 45, 0.28),
    0 12px 30px rgba(20, 20, 20, 0.12);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.6);
  animation: logoIn 1.0s var(--ease) 0.3s forwards, breathe 6s ease-in-out 1.3s infinite;
  z-index: 5;
}
.hub-logo img {
  width: 70%; height: 70%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.hub-pulse {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(188, 30, 45, 0.25) 0%, transparent 60%);
  filter: blur(14px);
  z-index: -1;
  animation: pulseHalo 4.5s ease-in-out infinite;
}

/* ── CATEGORY CARDS ── */
.category {
  position: absolute;
  top: 50%; left: 50%;
  width: min(280px, 86vw);
  text-align: center;
  perspective: 600px;
  opacity: 0;
  transform: translate(-50%, -50%); /* JS replaces with compass position */
  animation: cardFadeIn 1s var(--ease) calc(0.3s + var(--delay, 0s)) forwards;
  z-index: 4;
}
@keyframes cardFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* INNER card — gets the visual styling and the 3D tilt */
.category-inner {
  position: relative;
  padding: 18px 20px 16px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg) translateZ(0);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s var(--ease);
  will-change: transform;
}
.category:hover .category-inner {
  box-shadow: var(--shadow-card-hover);
  background: rgba(255, 255, 255, 0.94);
}

.category-num {
  position: absolute;
  top: 12px; right: 16px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--crimson);
  opacity: 0.55;
  transform: translateZ(45px);
}

.category-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 6px;
  transform: translateZ(40px);
}
.category-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(19px, 2.1vmin, 25px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 6px;
  background: linear-gradient(135deg, #0a0a0a 0%, #BC1E2D 130%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transform: translateZ(70px);
}
.category-rule {
  width: 30px; height: 2px;
  background: var(--crimson);
  margin: 0 auto 10px;
  border-radius: 2px;
  opacity: 0.85;
  transform: translateZ(50px);
  transition: width 0.4s var(--ease);
}
.category:hover .category-rule { width: 52px; }

.category-tagline {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-bottom: 12px;
  min-height: 38px;
  transform: translateZ(30px);
}

/* ── CHIPS ── */
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  transform: translateZ(50px);
}
.chip {
  --chip-bg: rgba(255, 255, 255, 0.9);
  --chip-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
  color: var(--chip-fg);
  background: var(--chip-bg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 100px;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  white-space: nowrap;
  min-width: 0;
  cursor: pointer;
}
.chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--crimson);
  box-shadow: 0 0 0 3px rgba(188, 30, 45, 0.12);
  flex-shrink: 0;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.chip:hover {
  background: var(--crimson);
  color: var(--white);
  border-color: var(--crimson);
  box-shadow: 0 8px 22px rgba(188, 30, 45, 0.30);
  transform: translateY(-2px);
}
.chip:hover .chip-dot {
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
  transform: scale(1.2);
}
.chip-paid { background: linear-gradient(135deg, #fff 0%, #fbeef0 100%); }
.chip-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(188, 30, 45, 0.12);
  color: var(--crimson);
}
.chip-tag-free { background: rgba(0, 0, 0, 0.06); color: var(--ink); }
.chip:hover .chip-tag { background: rgba(255, 255, 255, 0.22); color: var(--white); }

/* ── ANIMATIONS ── */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 0.85; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes spinReverse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@keyframes drawSpoke {
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes tickIn {
  to { opacity: 1; }
}
@keyframes logoIn {
  to { opacity: 1; transform: scale(1); }
}
@keyframes breathe {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(188, 30, 45, 0.18),
      0 0 0 6px var(--white),
      0 0 0 7px rgba(188, 30, 45, 0.22),
      0 30px 90px rgba(188, 30, 45, 0.28),
      0 12px 30px rgba(20, 20, 20, 0.12);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(188, 30, 45, 0.28),
      0 0 0 6px var(--white),
      0 0 0 7px rgba(188, 30, 45, 0.32),
      0 40px 110px rgba(188, 30, 45, 0.40),
      0 14px 36px rgba(20, 20, 20, 0.14);
  }
}
@keyframes pulseHalo {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.18); opacity: 1; }
}

/* ── RESPONSIVE: collapse flywheel to vertical stack on phones ── */
@media (max-width: 760px) {
  .flywheel-stage {
    --logo: clamp(130px, 36vw, 170px);
    --r: 0px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    place-items: center;
    gap: 22px;
    padding: 84px 18px 88px;
    min-height: auto;
    cursor: default;
    touch-action: auto;
  }
  .flywheel-svg, .spin-hint { display: none; }

  .hub-center {
    position: relative;
    grid-row: 1;
    margin-bottom: 10px;
    width: var(--logo);
    height: var(--logo);
  }

  .hub-curved {
    width: calc(var(--logo) * 1.34);
    height: calc(var(--logo) * 1.34);
    margin-top: calc(var(--logo) * -0.67);
    margin-left: calc(var(--logo) * -0.67);
  }
  .hub-curved text { font-size: 12.5px; letter-spacing: 0.02em; }
  .hub-glow { inset: -35%; }

  .hub-tagline {
    display: block;
    grid-row: 2;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 17px;
    color: var(--ink-muted);
    text-align: center;
    margin: -2px 0 8px;
    opacity: 0;
    animation: fadeUp 1s var(--ease) 1.2s forwards;
  }

  .category {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    max-width: 460px;
    perspective: none;
    transform: none;
    animation: cardInMobile 0.8s var(--ease) calc(0.6s + var(--delay, 0s)) forwards;
  }
  .category-inner {
    transform: none !important;
    padding: 26px 22px 22px;
  }
  @keyframes cardInMobile {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* dashed spine connector between stacked cards */
  .category::before {
    content: '';
    position: absolute;
    top: -22px;
    left: 50%;
    width: 1px;
    height: 22px;
    background-image: linear-gradient(to bottom, rgba(188, 30, 45, 0.55) 50%, transparent 50%);
    background-size: 1px 6px;
    background-repeat: repeat-y;
    pointer-events: none;
  }
  .category-top::before { display: none; }

  .category-num {
    top: 16px;
    left: 18px;
    right: auto;
    font-size: 13px;
    letter-spacing: 0.20em;
    opacity: 0.65;
  }

  .category-title { font-size: 24px; }
  .category-tagline { min-height: 0; font-size: 13px; padding: 0 4px; }

  .chip {
    padding: 10px 14px;
    font-size: 12px;
    min-height: 38px;
  }
  .chips { gap: 7px; }

  .hub-footer { padding: 0 20px 16px; font-size: 10px; letter-spacing: 0.16em; }

  .mesh-blob { opacity: 0.42; }
}

@media (max-width: 380px) {
  .flywheel-stage { padding: 76px 14px 80px; gap: 20px; }
  .chip { padding: 9px 12px; font-size: 11.5px; }
  .chips { gap: 6px; }
  .category-title { font-size: 22px; }
  .hub-tagline { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .auto-spin, .ring-outer, .ring-dashed, .hub-curved { animation: none !important; }
  .hub-logo { animation: logoIn 0.4s var(--ease) forwards !important; }
  .hub-pulse, .hub-glow { animation: none !important; opacity: 0.4; }
  .spokes .spoke { animation: drawSpoke 0.4s linear forwards !important; }
  .particle { animation: none !important; opacity: 0 !important; }
  .mesh-blob { animation: none !important; }
}

.chip:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 3px;
}

/* ── FAST-SPIN EASTER EGG ── */
/* When the user spins the wheel fast, the center glows hotter,
   the seal text pops, and the inner ring gets brighter. */
body.fast-spin .hub-glow {
  background:
    radial-gradient(circle, rgba(188, 30, 45, 0.55) 0%, rgba(188, 30, 45, 0.16) 35%, transparent 65%);
  transform: scale(1.18);
  transition: transform 0.6s var(--ease), background 0.4s var(--ease);
}
body.fast-spin .hub-pulse {
  background: radial-gradient(circle, rgba(188, 30, 45, 0.45) 0%, transparent 60%);
  transform: scale(1.15);
  transition: transform 0.6s var(--ease), background 0.4s var(--ease);
}
body.fast-spin .hub-curved text {
  fill: var(--crimson-light);
  opacity: 1;
  transition: fill 0.4s var(--ease), opacity 0.4s var(--ease);
}
body.fast-spin .ring-inner { stroke: rgba(188, 30, 45, 0.55); transition: stroke 0.4s var(--ease); }
body.fast-spin .ring-mid   { stroke: rgba(188, 30, 45, 0.20); transition: stroke 0.4s var(--ease); }
body.fast-spin .hub-logo {
  box-shadow:
    0 0 0 1px rgba(188, 30, 45, 0.45),
    0 0 0 6px var(--white),
    0 0 0 7px rgba(188, 30, 45, 0.55),
    0 50px 130px rgba(188, 30, 45, 0.55),
    0 14px 36px rgba(20, 20, 20, 0.20) !important;
  transition: box-shadow 0.5s var(--ease);
}

/* smooth return when fast-spin class is removed */
.hub-glow, .hub-pulse, .hub-curved text, .ring-inner, .ring-mid {
  transition: transform 0.8s var(--ease), background 0.6s var(--ease), fill 0.6s var(--ease), opacity 0.6s var(--ease), stroke 0.6s var(--ease);
}