:root {
  --bg-900:#fbfdff;
  --bg-850:#f7fafc;
  --bg-800:#f8f8fc;
  --bg-750:#faf9fc;
  --bg-indigo:#f7f6fc;
  --bg-violet-soft:#faf8fc;
  --surface-1:rgba(255,255,255,.78);
  --surface-2:rgba(244,248,255,.84);
  --surface-border:rgba(255,255,255,.78);
  --line-main:rgba(54,116,202,.58);
  --line-soft:rgba(74,132,202,.42);
  --line-bright:rgba(57,143,230,.62);
  --line-violet:rgba(104,83,211,.48);
  --band-blue:rgba(91,149,207,.16);
  --band-violet:rgba(125,104,211,.13);
  --glow-blue:rgba(67,137,216,.22);
  --glow-violet:rgba(104,84,210,.16);
  --text-primary:rgba(16,34,72,.94);
  --text-secondary:rgba(64,88,135,.66);
  --scene-accent-left:rgba(151,184,210,.1);
  --scene-accent-left-mid:rgba(151,184,210,.04);
  --scene-accent-right:rgba(176,168,211,.1);
  --scene-accent-right-mid:rgba(176,168,211,.04);
}

html.theme-night {
  --bg-900:#07142d;
  --bg-850:#0a1b3c;
  --bg-800:#0e2450;
  --bg-750:#142c61;
  --bg-indigo:#1d2263;
  --bg-violet-soft:#2a2e78;
  --surface-1:rgba(20,42,92,.72);
  --surface-2:rgba(16,34,78,.82);
  --surface-border:rgba(95,140,255,.18);
  --line-main:rgba(120,158,255,.16);
  --line-soft:rgba(164,194,255,.1);
  --line-bright:rgba(186,210,255,.22);
  --line-violet:rgba(122,126,255,.14);
  --band-blue:rgba(52,126,255,.14);
  --band-violet:rgba(92,75,232,.12);
  --glow-blue:rgba(85,130,255,.1);
  --glow-violet:rgba(110,95,255,.1);
  --text-primary:rgba(255,255,255,.92);
  --text-secondary:rgba(199,214,248,.62);
  --scene-accent-left:rgba(20,67,145,.3);
  --scene-accent-left-mid:rgba(20,67,145,.1);
  --scene-accent-right:rgba(91,74,205,.26);
  --scene-accent-right-mid:rgba(91,74,205,.08);
}

body {
  background:var(--bg-900);
}

body::before,
body::after {
  content:none;
  display:none;
}

.site-scene {
  position:fixed;
  z-index:0;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  isolation:isolate;
  contain:strict;
}

.site-scene__bg,
.site-scene__lines {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.site-scene__bg {
  z-index:0;
  background:
    radial-gradient(circle at 18% 12%,var(--scene-accent-left) 0%,var(--scene-accent-left-mid) 18%,transparent 42%),
    radial-gradient(circle at 92% 8%,var(--scene-accent-right) 0%,var(--scene-accent-right-mid) 24%,transparent 48%),
    radial-gradient(ellipse at 52% 86%,var(--glow-blue),transparent 46%),
    linear-gradient(135deg,var(--bg-900) 0%,var(--bg-850) 28%,var(--bg-800) 62%,var(--bg-indigo) 100%);
}

.site-scene__lines {
  z-index:1;
  overflow:visible;
  fill:none;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  transform-origin:50% 65%;
}

.site-scene__lines--desktop {
  display:block;
  animation:siteSceneDriftDesktop 30s ease-in-out infinite alternate;
}

.site-scene__lines--mobile {
  display:none;
}

.site-scene__lines path {
  vector-effect:non-scaling-stroke;
}

.avatar-shell .avatar-stage {
  isolation:isolate;
  background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(252,253,255,.62) 58%,rgba(248,247,253,.58));
  box-shadow:0 28px 90px rgba(74,104,153,.12),inset 0 0 72px rgba(255,255,255,.68);
}

.avatar-shell .avatar-stage::before {
  content:""!important;
  display:block!important;
  position:absolute;
  z-index:0;
  inset:2% 10% -8%;
  width:auto;
  aspect-ratio:auto;
  border:0;
  border-radius:50%;
  transform:none;
  background:
    radial-gradient(ellipse 35% 58% at 50% 55%,#fff 0 38%,rgba(255,255,255,.96) 60%,rgba(255,255,255,.64) 80%,transparent 100%),
    radial-gradient(ellipse 56% 34% at 50% 76%,rgba(255,255,255,.92) 0%,rgba(255,255,255,.55) 56%,transparent 100%);
  box-shadow:0 0 86px rgba(255,255,255,.82);
  filter:blur(18px);
  pointer-events:none;
  animation:avatarAuraBreath 28s ease-in-out infinite alternate;
}

.avatar-shell .avatar-stage::after { content:none!important; display:none!important; }
.avatar-stage > .renderer-host { z-index:1; }
.avatar-shell .renderer-host canvas {
  will-change:filter;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.98))
    drop-shadow(0 0 12px rgba(255,255,255,.88))
    drop-shadow(0 10px 28px rgba(255,255,255,.46));
}

.theme-night .avatar-shell .avatar-stage {
  background:linear-gradient(145deg,rgba(8,24,57,.76),rgba(17,31,76,.72));
}

.theme-night .avatar-shell .avatar-stage::before {
  background:
    radial-gradient(ellipse 42% 58% at 50% 57%,rgba(83,142,255,.28) 0%,rgba(66,111,224,.2) 42%,rgba(40,69,160,.1) 68%,transparent 100%),
    radial-gradient(ellipse 64% 32% at 50% 76%,rgba(80,137,255,.22) 0%,rgba(65,91,200,.12) 55%,transparent 100%);
  box-shadow:none;
  filter:blur(30px);
}

.theme-night .avatar-shell .renderer-host canvas {
  filter:none;
}

.site-scene__band {
  stroke-width:52;
  opacity:.88;
  filter:blur(8px);
}

.site-scene__band--blue { stroke:var(--band-blue); }
.site-scene__band--violet { stroke:var(--band-violet); }

.site-scene__arc {
  stroke:var(--line-soft);
  stroke-width:1.2;
}

.site-scene__arc--soft {
  opacity:.72;
  stroke-width:1;
}

.site-scene__wave {
  stroke:var(--line-main);
  stroke-width:1.45;
}

.site-scene__wave--soft {
  stroke:var(--line-soft);
  stroke-width:1.1;
}

.site-scene__wave--violet {
  stroke:var(--line-violet);
  stroke-width:1.35;
}

.site-scene__wave--bright {
  stroke:var(--line-bright);
  stroke-width:1.65;
  filter:drop-shadow(0 0 10px var(--glow-blue));
}

html:not(.theme-night) .site-scene__arc { stroke-width:1.4; }
html:not(.theme-night) .site-scene__arc--soft { stroke-width:1.2; }
html:not(.theme-night) .site-scene__wave { stroke-width:1.7; }
html:not(.theme-night) .site-scene__wave--soft { stroke-width:1.35; }
html:not(.theme-night) .site-scene__wave--violet { stroke-width:1.6; }
html:not(.theme-night) .site-scene__wave--bright { stroke-width:1.95; }

.theme-night .create-card,
.theme-night .catalog {
  border-color:var(--surface-border);
  background:linear-gradient(145deg,var(--surface-1),var(--surface-2));
}

@keyframes siteSceneDriftDesktop {
  from { transform:translate3d(-6px,2px,0) scale(1); opacity:.84; }
  to { transform:translate3d(10px,-6px,0) scale(1.01); opacity:1; }
}

@keyframes siteSceneDriftMobile {
  from { transform:translate3d(-4px,3px,0) scale(1); opacity:.86; }
  to { transform:translate3d(7px,-5px,0) scale(1.01); opacity:1; }
}

@keyframes avatarAuraBreath {
  from { transform:scale(.985); opacity:.72; }
  to { transform:scale(1.01); opacity:1; }
}

@media(max-width:700px) {
  .site-scene__lines--desktop { display:none; }
  .site-scene__lines--mobile { display:block; animation:siteSceneDriftMobile 34s ease-in-out infinite alternate; }
  .site-scene__wave--bright { stroke-width:1.8; filter:drop-shadow(0 0 8px var(--glow-blue)); }
  .site-scene__wave { stroke-width:1.55; }
  .site-scene__arc { stroke-width:1.35; }
  .site-scene__band { stroke-width:38; filter:blur(6px); }
  .avatar-shell .avatar-stage::before { inset:8% -8% -6%; }
}

@media(prefers-reduced-motion:reduce) {
  .site-scene__lines--desktop,
  .site-scene__lines--mobile,
  .avatar-shell .avatar-stage::before { animation:none; }
}
