:root { --sf-fx: rgba(129, 140, 248, .22); }

html, body { min-height: 100%; }
body { overflow-x: hidden; }

.sf-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.sf-orb {
  position: fixed !important;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0 !important;
  filter: blur(50px);
  opacity: .55;
  animation: sf-orb 16s ease-in-out infinite;
}

body > header,
body > main,
body > section,
body > footer,
body > .wrap {
  position: relative;
  z-index: 1;
}
.sf-orb-a {
  width: 380px; height: 380px; left: -80px; top: -60px;
  background: radial-gradient(circle, rgba(99, 102, 241, .35), transparent 68%);
}
.sf-orb-b {
  width: 320px; height: 320px; right: -60px; top: 20%;
  background: radial-gradient(circle, rgba(56, 189, 248, .22), transparent 68%);
  animation-delay: -6s;
}
.sf-orb-c {
  width: 280px; height: 280px; left: 30%; bottom: -80px;
  background: radial-gradient(circle, rgba(192, 132, 252, .18), transparent 68%);
  animation-delay: -11s;
}

@keyframes sf-orb {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(40px, -28px, 0) scale(1.12); }
}

.sf-ripple {
  position: fixed;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  border: 2px solid rgba(255,255,255,.55);
  animation: sf-ripple .7s ease-out forwards;
}

@keyframes sf-ripple {
  to { transform: scale(18); opacity: 0; }
}

button, .btn, .ghost, .btn-copy, .nav-dl, .card, .sf-turn {
  transition: transform .18s ease, filter .18s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
button:hover, .btn:hover, .nav-dl:hover, .btn-copy:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}
button:active, .btn:active, .ghost:active, .btn-copy:active, .nav-dl:active, .card:active, .sf-turn:active {
  transform: scale(.97);
}

.card {
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

#dlHint.is-on {
  animation: sf-hint .45s ease;
}
@keyframes sf-hint {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-orb, .sf-fx, .sf-ripple { display: none !important; }
  button, .btn, .card { transition: none; }
}