/* public/backdrop.css
   The brand background: a slow "breathing" red glow and faint print layer
   lines drifting upward. Shared by the landing page, the login page and the
   app. Markup on each page:
     <div class="backdrop" aria-hidden="true">
       <div class="glow"></div><div class="glow low"></div><div class="layers"></div>
     </div>
   Public pages always show the full effect. In the app, <html data-backdrop>
   (Settings > Appearance > Background) picks off / subtle / animated, and the
   app's own light/dark choice (html.dark) decides the colours rather than the
   operating system's. Visitors who ask for reduced motion get it still. */

:root {
  --bd-glow: rgba(212, 54, 43, 0.16);
  --bd-glow-soft: rgba(212, 54, 43, 0.06);
  --bd-line: rgba(31, 31, 29, 0.07);
}
@media (prefers-color-scheme: dark) {
  :root:not(.app-theme) { --bd-glow: rgba(212, 54, 43, 0.24); --bd-glow-soft: rgba(212, 54, 43, 0.08); --bd-line: rgba(255, 255, 255, 0.06); }
}
html.app-theme.dark { --bd-glow: rgba(212, 54, 43, 0.24); --bd-glow-soft: rgba(212, 54, 43, 0.08); --bd-line: rgba(255, 255, 255, 0.06); }

.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.backdrop .glow {
  position: absolute; width: 150vmax; height: 150vmax; left: 50%; top: -55vmax; margin-left: -60vmax;
  background: radial-gradient(closest-side, var(--bd-glow), var(--bd-glow-soft) 55%, transparent 72%);
  animation: bd-breathe 14s ease-in-out infinite; will-change: transform, opacity;
}
/* A second, softer glow low on the left, breathing out of step with the first. */
.backdrop .glow.low {
  width: 110vmax; height: 110vmax; top: auto; bottom: -60vmax; left: -30vmax; margin-left: 0;
  animation-duration: 19s; animation-delay: -7s; opacity: 0.7;
}
/* The lines drift by sliding a taller layer (a transform the GPU handles)
   rather than by moving the background, which repaints the screen every frame. */
.backdrop .layers {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 120% 95% at 55% 30%, #000 35%, transparent 85%);
          mask-image: radial-gradient(ellipse 120% 95% at 55% 30%, #000 35%, transparent 85%);
}
.backdrop .layers::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 96px);
  background-image: repeating-linear-gradient(to bottom, var(--bd-line) 0 1px, transparent 1px 8px);
  animation: bd-drift 24s linear infinite; will-change: transform;
}
@keyframes bd-breathe {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.75; }
  50% { transform: translate(60px, 40px) scale(1.12); opacity: 1; }
}
@keyframes bd-drift { from { transform: translateY(0); } to { transform: translateY(-96px); } }

/* ---- In the app ---- */
/* Off: nothing. */
html[data-backdrop="off"] .backdrop { display: none; }
/* Subtle (the default): one soft, still glow near the top; no lines. */
html[data-backdrop="subtle"] .backdrop .glow { animation: none; opacity: 0.55; transform: translate(40px, 0); }
html[data-backdrop="subtle"] .backdrop .glow.low,
html[data-backdrop="subtle"] .backdrop .layers { display: none; }
/* Animated: the full effect, a little quieter than on the public pages. */
html[data-backdrop="animated"] .backdrop { opacity: 0.75; }

@media (prefers-reduced-motion: reduce) {
  .backdrop .glow, .backdrop .layers::before { animation: none; }
}