:root { color-scheme: dark; }

html { scroll-behavior: smooth; }

body { -webkit-font-smoothing: antialiased; }

/* Animated purple glow background */
.glow-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(600px circle at 15% 10%, rgba(208,0,255,0.18), transparent 45%),
    radial-gradient(700px circle at 85% 30%, rgba(180,0,224,0.14), transparent 50%),
    radial-gradient(600px circle at 50% 100%, rgba(208,0,255,0.10), transparent 50%);
  animation: floatGlow 14s ease-in-out infinite alternate;
}
@keyframes floatGlow {
  0%   { transform: translateY(0) scale(1); }
  100% { transform: translateY(-30px) scale(1.05); }
}

.card { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-4px); }

/* Dropzone states */
.dropzone:hover { border-color: #d000ff; background: rgba(208,0,255,0.06); }
.dropzone.dragover {
  border-color: #d000ff;
  background: rgba(208,0,255,0.12);
  transform: scale(1.01);
  box-shadow: 0 0 40px rgba(208,0,255,0.25);
}

#origBox img, #origBox video,
#resBox img, #resBox video { max-width: 100%; height: auto; border-radius: .5rem; display: block; }

/* Range inputs */
input[type="range"] { height: 6px; border-radius: 999px; cursor: pointer; }

/* Spinner */
.spinner {
  width: 42px; height: 42px;
  border: 4px solid rgba(255,255,255,.15);
  border-top-color: #d000ff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }