/* EverydayHub ambient layer — fixed behind page chrome */
.hub-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(11, 17, 33, 0.95) 0%, transparent 55%),
    radial-gradient(ellipse 90% 60% at 0% 0%, rgba(30, 27, 75, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 100% 20%, rgba(8, 47, 73, 0.32) 0%, transparent 45%),
    radial-gradient(ellipse 50% 40% at 60% 70%, rgba(6, 78, 59, 0.15) 0%, transparent 50%),
    #0b1121;
}

.hub-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.58;
  will-change: transform;
}

.hub-bg__orb--indigo {
  width: min(52vw, 440px);
  height: min(52vw, 440px);
  top: 6%;
  left: -8%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.5) 0%, transparent 70%);
  animation: hubDriftA 28s ease-in-out infinite alternate;
}

.hub-bg__orb--cyan {
  width: min(46vw, 380px);
  height: min(46vw, 380px);
  top: 40%;
  right: -6%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.38) 0%, transparent 70%);
  animation: hubDriftB 34s ease-in-out infinite alternate;
}

.hub-bg__orb--emerald {
  width: min(38vw, 300px);
  height: min(38vw, 300px);
  bottom: 14%;
  left: 26%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.32) 0%, transparent 70%);
  animation: hubDriftC 24s ease-in-out infinite alternate;
}

.hub-bg__orb--teal {
  width: min(30vw, 240px);
  height: min(30vw, 240px);
  top: 22%;
  right: 22%;
  background: radial-gradient(circle, rgba(103, 232, 249, 0.22) 0%, transparent 70%);
  animation: hubDriftD 20s ease-in-out infinite alternate;
}

.hub-bg__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(99, 102, 241, 0.09);
  box-shadow: inset 0 0 48px rgba(6, 182, 212, 0.05);
}

.hub-bg__ring--one {
  width: min(92vw, 740px);
  height: min(92vw, 740px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: hubSpin 110s linear infinite;
}

.hub-bg__ring--two {
  width: min(62vw, 500px);
  height: min(62vw, 500px);
  top: 16%;
  right: -10%;
  border-color: rgba(16, 185, 129, 0.1);
  animation: hubSpinReverse 85s linear infinite;
}

.hub-bg__grid {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.55) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, black 15%, transparent 72%);
}

.hub-bg__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(103, 232, 249, 0.01) 3px,
    rgba(103, 232, 249, 0.01) 4px
  );
  opacity: 0.55;
}

.hub-bg__stars {
  position: absolute;
  inset: 0;
}

.hub-bg__star {
  position: absolute;
  border-radius: 50%;
  background: #e2e8f0;
  box-shadow: 0 0 6px rgba(199, 210, 254, 0.75);
  animation: hubTwinkle ease-in-out infinite;
}

.hub-bg__star--dust {
  width: 1px;
  height: 1px;
  background: rgba(103, 232, 249, 0.65);
  box-shadow: none;
}

.hub-bg__star:nth-child(1)  { left: 8%;  top: 12%; width: 2px; height: 2px; animation-duration: 3.2s; animation-delay: 0s; }
.hub-bg__star:nth-child(2)  { left: 18%; top: 28%; width: 1px; height: 1px; animation-duration: 4.1s; animation-delay: 0.6s; }
.hub-bg__star:nth-child(3)  { left: 32%; top: 8%;  width: 2px; height: 2px; animation-duration: 2.8s; animation-delay: 1.2s; }
.hub-bg__star:nth-child(4)  { left: 45%; top: 18%; width: 1px; height: 1px; animation-duration: 3.6s; animation-delay: 0.3s; }
.hub-bg__star:nth-child(5)  { left: 58%; top: 6%;  width: 3px; height: 3px; animation-duration: 4.4s; animation-delay: 1.8s; }
.hub-bg__star:nth-child(6)  { left: 72%; top: 14%; width: 1px; height: 1px; animation-duration: 3s;   animation-delay: 0.9s; }
.hub-bg__star:nth-child(7)  { left: 88%; top: 22%; width: 2px; height: 2px; animation-duration: 3.8s; animation-delay: 2.1s; }
.hub-bg__star:nth-child(8)  { left: 6%;  top: 48%; width: 1px; height: 1px; animation-duration: 4.2s; animation-delay: 0.4s; }
.hub-bg__star:nth-child(9)  { left: 22%; top: 55%; width: 2px; height: 2px; animation-duration: 2.6s; animation-delay: 1.5s; }
.hub-bg__star:nth-child(10) { left: 38%; top: 42%; width: 1px; height: 1px; animation-duration: 3.4s; animation-delay: 0.7s; }
.hub-bg__star:nth-child(11) { left: 52%; top: 58%; width: 2px; height: 2px; animation-duration: 4s;   animation-delay: 2.4s; }
.hub-bg__star:nth-child(12) { left: 66%; top: 46%; width: 1px; height: 1px; animation-duration: 3.1s; animation-delay: 1.1s; }
.hub-bg__star:nth-child(13) { left: 78%; top: 52%; width: 3px; height: 3px; animation-duration: 2.9s; animation-delay: 0.2s; }
.hub-bg__star:nth-child(14) { left: 92%; top: 38%; width: 1px; height: 1px; animation-duration: 4.3s; animation-delay: 1.7s; }
.hub-bg__star:nth-child(15) { left: 12%; top: 72%; width: 2px; height: 2px; animation-duration: 3.5s; animation-delay: 0.8s; }
.hub-bg__star:nth-child(16) { left: 28%; top: 82%; width: 1px; height: 1px; animation-duration: 4.6s; animation-delay: 2.2s; }
.hub-bg__star:nth-child(17) { left: 48%; top: 76%; width: 2px; height: 2px; animation-duration: 2.7s; animation-delay: 1.3s; }
.hub-bg__star:nth-child(18) { left: 62%; top: 88%; width: 1px; height: 1px; animation-duration: 3.9s; animation-delay: 0.5s; }
.hub-bg__star:nth-child(19) { left: 76%; top: 68%; width: 2px; height: 2px; animation-duration: 3.3s; animation-delay: 1.9s; }
.hub-bg__star:nth-child(20) { left: 86%; top: 78%; width: 1px; height: 1px; animation-duration: 4.5s; animation-delay: 2.6s; }

.hub-bg__star--dust:nth-child(21) { left: 14%; top: 35%; animation-duration: 5s; animation-delay: 0.1s; }
.hub-bg__star--dust:nth-child(22) { left: 42%; top: 62%; animation-duration: 4.8s; animation-delay: 1.4s; }
.hub-bg__star--dust:nth-child(23) { left: 68%; top: 30%; animation-duration: 5.2s; animation-delay: 2.3s; }
.hub-bg__star--dust:nth-child(24) { left: 84%; top: 58%; animation-duration: 4.6s; animation-delay: 0.9s; }

.hub-bg__pulse {
  position: absolute;
  width: min(70vw, 560px);
  height: min(70vw, 560px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 65%);
  animation: hubPulse 8s ease-in-out infinite;
}

@keyframes hubDriftA {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(8vw, 6vh) scale(1.08); }
}

@keyframes hubDriftB {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-7vw, -5vh) scale(1.06); }
}

@keyframes hubDriftC {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(5vw, -4vh) scale(1.1); }
}

@keyframes hubDriftD {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-4vw, 3vh) scale(1.05); }
}

@keyframes hubSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes hubSpinReverse {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes hubTwinkle {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes hubPulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.06); }
}

/* Light theme (manual toggle) */
[data-theme="light"] .hub-bg {
    background:
      radial-gradient(ellipse 120% 80% at 50% 100%, rgba(248, 250, 252, 0.96) 0%, transparent 55%),
      radial-gradient(ellipse 90% 60% at 0% 0%, rgba(224, 231, 255, 0.55) 0%, transparent 50%),
      radial-gradient(ellipse 70% 50% at 100% 20%, rgba(207, 250, 254, 0.45) 0%, transparent 45%),
      radial-gradient(ellipse 50% 40% at 60% 70%, rgba(209, 250, 229, 0.35) 0%, transparent 50%),
      #f8fafc;
  }

[data-theme="light"] .hub-bg__orb {
  opacity: 0.38;
}

[data-theme="light"] .hub-bg__star {
  background: #6366f1;
  box-shadow: 0 0 4px rgba(99, 102, 241, 0.45);
}

[data-theme="light"] .hub-bg__ring {
  border-color: rgba(99, 102, 241, 0.12);
}

[data-theme="light"] .hub-bg__grid {
  opacity: 0.035;
}

@media (prefers-reduced-motion: reduce) {
  .hub-bg__orb,
  .hub-bg__ring,
  .hub-bg__star,
  .hub-bg__pulse {
    animation: none !important;
  }
}