/* RemotePanel background layer.
   Owns #aurora (WebGL field), #cute-pattern (drifting contour glyphs) and
   #theme-character. Themes come from html[data-theme], the accent from
   html[data-accent], motion from html[data-motion]; none are written here.
   background.js writes --rp-bg-gutter from hit testing, so the artwork is sized
   to the free margin that actually exists at runtime. */

#aurora,
#cute-pattern,
#theme-character {
  position: fixed;
  z-index: var(--z-bg, 0);
  pointer-events: none;
  user-select: none;
}

/* Слой авроры. Пока WebGL не поднялся (или его нет), виден этот CSS-градиент
   из цвета акцента — тот же тон, что и у шейдера, без мигания чёрным. */
#aurora {
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 72% 26%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 68%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 94%, var(--text)), var(--bg));
}
html[data-theme="cute"] #aurora { display: none; }
.aurora-fallback { position: absolute; inset: 0; background: radial-gradient(120% 90% at 72% 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }

/* Тач-устройства: GL-слой живёт, но кадры реже и разрешение ниже (см. aurora.js).
   Канвас не скрываем — иначе фон становится статичной заливкой. */

/* --- drifting glyphs: Anime Cute only ---------------------------------- */
/* Two depth tiers: a slow, dim far field and a faster, brighter near field. */
#cute-pattern { inset: 0; display: none; overflow: hidden; }
html[data-theme="cute"] #cute-pattern { display: block; }

#cute-pattern span {
  position: absolute;
  display: block;
  animation-name: glyph-far;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

#cute-pattern span.cute-back { color: #d94b8b; opacity: .22; }
#cute-pattern span.cute-front { color: #ff70ad; opacity: .46; animation-name: glyph-near; }

#cute-pattern svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#cute-pattern span.cute-back svg { stroke-width: 2.2; }

/* Parallax travel: the far tier covers less ground than the near tier. */
@keyframes glyph-far {
  from { transform: translate3d(-22vw, -26vh, 0) rotate(-8deg); }
  to   { transform: translate3d(22vw, 26vh, 0) rotate(13deg); }
}
@keyframes glyph-near {
  from { transform: translate3d(-34vw, -38vh, 0) rotate(-14deg); }
  to   { transform: translate3d(34vw, 38vh, 0) rotate(22deg); }
}

@media (max-width: 760px) {
  #cute-pattern span.cute-back { opacity: .18; }
  #cute-pattern span.cute-front { opacity: .38; }
}

/* --- character: Anime Cute only ---------------------------------------- */
/* Width is capped by the free margin measured at runtime (--rp-bg-gutter), so the
   whole figure stays beside the content column instead of being sliced by it; the
   left and bottom masks turn any residual contact into a fade. Without the
   measurement the centred-shell margin is assumed. */
#theme-character {
  right: 0;
  bottom: -2vh;
  height: auto;
  width: min(calc(clamp(230px, 30vh, 330px) * 0.7308), var(--rp-bg-gutter, calc((100vw - var(--shell, 1120px)) / 2 - 6px)));
  z-index: var(--z-art, 1);
  opacity: .97;
  filter: drop-shadow(0 18px 42px rgb(155 44 94 / 16%));
  -webkit-mask-image: linear-gradient(to bottom, #000 0 64%, transparent 95%), linear-gradient(to right, transparent 0, #000 16%);
  mask-image: linear-gradient(to bottom, #000 0 64%, transparent 95%), linear-gradient(to right, transparent 0, #000 16%);
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
}

html:not([data-theme="cute"]) #theme-character { display: none; }
#theme-character:not([src]) { display: none; }
#theme-character.rp-bg-art-off { display: none !important; }

/* Motion switches: manual off wins, the system preference wins over manual on. */
html[data-motion="off"] #cute-pattern span { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  #cute-pattern * { animation: none !important; }
}