/* ============================================================
   Depth field — scroll-driven 3D parallax background
   ============================================================ */
.depth-field{
  position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  perspective:1100px;perspective-origin:50% 38%;
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(47,107,246,.06), transparent 55%),
    radial-gradient(90% 80% at 0% 10%, rgba(162,59,190,.045), transparent 55%),
    var(--paper);
}
.sh{position:absolute;transform-style:preserve-3d;will-change:transform;}
.shi{
  width:100%;height:100%;border-radius:50%;
  animation:floaty 16s ease-in-out infinite;
  will-change:transform;
}
@keyframes floaty{
  0%{transform:translate3d(0,0,0) rotate(0deg);}
  25%{transform:translate3d(10px,-14px,0) rotate(4deg);}
  50%{transform:translate3d(-8px,-22px,0) rotate(-3deg);}
  75%{transform:translate3d(-12px,-8px,0) rotate(2deg);}
  100%{transform:translate3d(0,0,0) rotate(0deg);}
}

/* shape skins */
.shi.orb{filter:blur(9px);opacity:.7;}
.shi.orb.b{background:radial-gradient(circle at 40% 36%, rgba(47,107,246,.72), rgba(47,107,246,0) 66%);}
.shi.orb.v{background:radial-gradient(circle at 40% 36%, rgba(123,72,224,.66), rgba(123,72,224,0) 66%);}
.shi.orb.g{background:radial-gradient(circle at 40% 36%, rgba(194,162,78,.66), rgba(194,162,78,0) 66%);}

.shi.ring{border:3px solid rgba(47,107,246,.7);background:transparent;opacity:.95;}
.shi.ring.v{border-color:rgba(123,72,224,.6);}
.shi.ring.g{border-color:rgba(194,162,78,.7);}

.shi.dot{opacity:.9;}
.shi.dot.b{background:rgba(47,107,246,.82);}
.shi.dot.v{background:rgba(123,72,224,.78);}
.shi.dot.g{background:rgba(194,162,78,.85);}

.shi.sq{border-radius:24%;border:3px solid rgba(47,107,246,.6);background:transparent;opacity:.9;}
.shi.sq.g{border-color:rgba(194,162,78,.66);}
.shi.sq.v{border-color:rgba(123,72,224,.56);}

.shi.disc{opacity:.34;filter:blur(1px);}
.shi.disc.b{background:radial-gradient(circle at 40% 36%, rgba(47,107,246,.55), rgba(47,107,246,.08) 72%);}
.shi.disc.g{background:radial-gradient(circle at 40% 36%, rgba(194,162,78,.55), rgba(194,162,78,.08) 72%);}

@media(prefers-reduced-motion:reduce){
  .shi{animation:none;}
}