/* Hallmark · component: gradient-theme · genre: atmospheric · scope: redesign
 * Deepened-coral animated mesh gradient as a BACKDROP only. Content surfaces
 * (search box, result cards) are left to SearXNG's native theme so text
 * contrast is correct in light/dark/auto. No surface background overrides.
 *
 * Layer stack (back -> front): mesh -4 · grain -3 · veil -2 · cursor-glow -1 · content 0
 */

:root {
  --sxng-base:        #0a0a14;
  --sxng-violet:      #4603ff;
  --sxng-violet-fade: rgba(70, 3, 255, 0);
  --sxng-coral:       #CB4A33;             /* deepened peach */
  --sxng-coral-fade:  rgba(203, 74, 51, 0);
  --sxng-veil:        rgba(8, 8, 16, 0.40);
  --ease-out:         cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  background: var(--sxng-base) !important;
  background-color: var(--sxng-base) !important;
}

body {
  position: relative;
  background: transparent !important;
}

/* ---- Layer 1: animated mesh gradient (backdrop) ---- */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 28%, var(--sxng-violet) 0%, var(--sxng-violet-fade) 42%),
    radial-gradient(circle at 78% 68%, var(--sxng-coral)  0%, var(--sxng-coral-fade)  42%),
    radial-gradient(circle at 46% 88%, var(--sxng-violet) 0%, var(--sxng-violet-fade) 38%),
    radial-gradient(circle at 88% 18%, var(--sxng-coral)  0%, var(--sxng-coral-fade)  35%),
    var(--sxng-base);
  filter: blur(60px) saturate(130%);
  animation: sxng-gradient-flow 32s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes sxng-gradient-flow {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg)   scale(1);    }
  33%  { transform: translate3d(-4%, 3%, 0) rotate(60deg) scale(1.08); }
  66%  { transform: translate3d(3%, -4%, 0) rotate(140deg) scale(1.04); }
  100% { transform: translate3d(2%, 2%, 0) rotate(220deg) scale(1.1); }
}

/* ---- Layer 2: film grain (inline SVG noise, no network request) ---- */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: soft-light;
}

/* ---- Layer 3: legibility veil (vivid center, calm edges) ---- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 60%, var(--sxng-veil) 100%);
}

/* ---- Layer 4: cursor-reactive glow (div injected by custom.js) ---- */
#sxng-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(203, 74, 51, 0.26) 0%,
    rgba(70, 3, 255, 0.16) 45%,
    transparent 70%);
  filter: blur(34px);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: transform;
}

/* ---- Surface polish: NO background overrides, just shape + interaction ---- */
.search_box {
  border-radius: 16px !important;
  transition: box-shadow 0.3s ease;
}
.search_box:focus-within {
  box-shadow: 0 0 0 3px rgba(203, 74, 51, 0.40);
}

article.result {
  border-radius: 12px !important;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease;
}
article.result:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.45);
}

/* Logo left untouched per user request. */

/* ---- Light mode: soften the backdrop so it doesn't fight dark UI text ---- */
html.theme-light body::before,
html.theme-auto body::before {
  filter: blur(60px) saturate(105%) brightness(1.08);
  opacity: 0.7;
}
html.theme-light body::after,
html.theme-auto body::after {
  background: radial-gradient(ellipse at center, transparent 60%, rgba(255, 255, 255, 0.30) 100%);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  #sxng-cursor-glow { display: none; }
  article.result { transition: none; }
}

/* ---- Touch: no cursor glow ---- */
@media (pointer: coarse) {
  #sxng-cursor-glow { display: none; }
}