/* ═══════════════════════════════════════════
   BACKGROUND
═══════════════════════════════════════════ */
#bg {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden;
  background-color: var(--bg);
  transition: background-color var(--t);
  pointer-events: none;
}
/* Top gradient overlay — anchored at top of page, scrolls with content */
#bgt {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60vh;
  pointer-events: none;
  z-index: -2;
}
[data-theme="light"] #bgt {
  background: linear-gradient(to bottom,
    rgba(40,140,235,0.88)  0%,
    rgba(60,160,240,0.76)  10%,
    rgba(90,180,245,0.62)  22%,
    rgba(130,200,248,0.46) 38%,
    rgba(170,215,250,0.30) 56%,
    rgba(200,228,252,0.16) 75%,
    rgba(220,238,255,0.05) 90%,
    transparent 100%
  );
}
[data-theme="dark"] #bgt {
  background: linear-gradient(to bottom,
    rgba(0,110,230,0.55)  0%,
    rgba(10,82,210,0.40)  15%,
    rgba(0,90,200,0.28)   32%,
    rgba(10,52,180,0.14)  55%,
    rgba(10,52,180,0.05)  80%,
    transparent 100%
  );
}
/* Organic "pool" gradient blobs — irregular shapes, not circles */
.orb {
  position:absolute;
  filter:blur(80px);
  pointer-events:none;
  will-change: transform, border-radius;
  /* irregular organic shape via border-radius */
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
}
/* LIGHT MODE — much stronger pool gradients */
[data-theme="light"] .oa{
  width:720px; height:640px;
  background:radial-gradient(ellipse at 30% 40%, rgba(0,120,235,0.55), rgba(0,160,240,0.30) 45%, transparent 75%);
  top:-180px; right:-140px;
  animation: morphA 18s ease-in-out infinite, driftA 22s ease-in-out infinite;
}
[data-theme="light"] .ob{
  width:600px; height:540px;
  background:radial-gradient(ellipse at 60% 50%, rgba(10,82,204,0.45), rgba(0,140,230,0.22) 50%, transparent 80%);
  bottom:-120px; left:-100px;
  animation: morphB 20s ease-in-out infinite, driftB 26s ease-in-out infinite;
}
[data-theme="light"] .oc{
  width:520px; height:460px;
  background:radial-gradient(ellipse at 45% 55%, rgba(0,170,240,0.32), rgba(10,82,204,0.16) 55%, transparent 80%);
  top:38%; left:18%;
  animation: morphC 24s ease-in-out infinite, driftC 28s ease-in-out infinite;
}
[data-theme="light"] .od{
  width:440px; height:400px;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,130,220,0.26), rgba(0,170,240,0.12) 50%, transparent 80%);
  top:78vh; right:-5%;
  animation: morphA 22s ease-in-out infinite, driftB 24s ease-in-out infinite;
}
[data-theme="light"] .oe{
  width:520px; height:460px;
  background:radial-gradient(ellipse at 40% 50%, rgba(10,82,204,0.22), rgba(0,150,230,0.11) 55%, transparent 80%);
  top:160vh; left:-2%;
  animation: morphB 26s ease-in-out infinite, driftA 30s ease-in-out infinite;
}

/* DARK MODE — keeps similar feel as before */
[data-theme="dark"] .oa{
  width:720px; height:640px;
  background:radial-gradient(ellipse at 30% 40%, rgba(10,82,204,0.50), rgba(0,170,238,0.26) 50%, transparent 80%);
  top:-180px; right:-140px;
  animation: morphA 18s ease-in-out infinite, driftA 22s ease-in-out infinite;
}
[data-theme="dark"] .ob{
  width:600px; height:540px;
  background:radial-gradient(ellipse at 60% 50%, rgba(0,170,238,0.30), rgba(10,82,204,0.16) 55%, transparent 80%);
  bottom:-120px; left:-100px;
  animation: morphB 20s ease-in-out infinite, driftB 26s ease-in-out infinite;
}
[data-theme="dark"] .oc{
  width:520px; height:460px;
  background:radial-gradient(ellipse at 45% 55%, rgba(10,82,204,0.24), rgba(0,170,238,0.12) 60%, transparent 85%);
  top:38%; left:18%;
  animation: morphC 24s ease-in-out infinite, driftC 28s ease-in-out infinite;
}
[data-theme="dark"] .od{
  width:440px; height:400px;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,170,238,0.18), rgba(10,82,204,0.10) 55%, transparent 80%);
  top:78vh; right:-5%;
  animation: morphA 22s ease-in-out infinite, driftB 24s ease-in-out infinite;
}
[data-theme="dark"] .oe{
  width:520px; height:460px;
  background:radial-gradient(ellipse at 40% 50%, rgba(10,82,204,0.22), rgba(0,170,238,0.11) 55%, transparent 80%);
  top:160vh; left:-2%;
  animation: morphB 26s ease-in-out infinite, driftA 30s ease-in-out infinite;
}

/* Morph keyframes — shape changes (not circle) */
@keyframes morphA {
  0%,100% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
  33%      { border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%; }
  66%      { border-radius: 55% 45% 60% 40% / 45% 55% 50% 50%; }
}
@keyframes morphB {
  0%,100% { border-radius: 50% 50% 40% 60% / 55% 45% 55% 45%; }
  40%      { border-radius: 60% 40% 50% 50% / 40% 60% 45% 55%; }
  75%      { border-radius: 40% 60% 55% 45% / 50% 50% 60% 40%; }
}
@keyframes morphC {
  0%,100% { border-radius: 55% 45% 50% 50% / 45% 55% 50% 50%; }
  50%      { border-radius: 40% 60% 45% 55% / 55% 45% 60% 40%; }
}
/* Drift keyframes — subtle movement */
@keyframes driftA {
  0%,100% { transform: translate(0,0) scale(1) rotate(0deg); }
  40%      { transform: translate(-40px,30px) scale(1.06) rotate(3deg); }
  70%      { transform: translate(28px,-22px) scale(0.96) rotate(-2deg); }
}
@keyframes driftB {
  0%,100% { transform: translate(0,0) scale(1) rotate(0deg); }
  45%      { transform: translate(48px,-36px) scale(1.08) rotate(-3deg); }
  80%      { transform: translate(-20px,18px) scale(0.94) rotate(2deg); }
}
@keyframes driftC {
  0%,100% { transform: translate(0,0) scale(1) rotate(0deg); }
  55%      { transform: translate(-46px,38px) scale(1.07) rotate(2deg); }
}

/* ═══════════════════════════════════════════
   GLOBAL ENTRY GRADIENT — same on ALL pages
   Dark blue at top → bright cyan peak → fast fade.
   Sits behind header AND entry zone; eliminates the
   "barrier" between header bottom and content top.
═══════════════════════════════════════════ */
body::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 360px;
  pointer-events: none;
  z-index: -1;
}
[data-theme="dark"] body::before {
  background: linear-gradient(180deg,
    #02091e   0%,
    #062952  20%,
    #0a52cc  50%,
    #00aaee  78%,
    rgba(0,170,238,0) 100%
  );
}
[data-theme="light"] body::before {
  background: linear-gradient(180deg,
    #b8dcfa   0%,
    #6cc4f5  25%,
    #1ea8ec  60%,
    #00aaee  82%,
    rgba(0,170,238,0) 100%
  );
}