/* ===========================================================================
 * ambience.css — decoration ONLY.
 *
 * ---------------------------------------------------------------------------
 * HOW TO REMOVE THIS ENTIRELY (if anything at all looks wrong):
 *
 *   1. In index.html, delete the one line:
 *        <link rel="stylesheet" href="ambience.css?v=96">
 *   2. In index.html, delete the one block that begins:
 *        <div class="ambience" aria-hidden="true">
 *   3. Delete this file.
 *
 * Nothing else references either. No JavaScript imports this, no component
 * depends on these class names, and no existing rule was edited to make it
 * work. Removing it returns the app to exactly the v29 appearance.
 * ---------------------------------------------------------------------------
 *
 * Everything here is behind the app and cannot be clicked:
 *   position:fixed + pointer-events:none + z-index:0, while the app shell
 *   already sits above it. Nothing here changes layout, spacing, or scroll —
 *   the layer is taken out of flow entirely, so it cannot move a single
 *   existing pixel.
 *
 * The motion is deliberately slow (40s–70s). A background that you notice
 * moving is a background competing with the work; this should only register
 * if you stop and look at it.
 * ========================================================================= */

.ambience {
  position: fixed;
  inset: 0;
  z-index: 0;               /* behind the app shell, above the flat bg colour */
  pointer-events: none;     /* never intercepts a click, anywhere, ever */
  overflow: hidden;
  contain: strict;          /* isolates paint — cannot affect app layout */
}

/* Make sure real content always sits above the layer. These are the actual
   top-level wrappers the app uses (.apphead is the sticky header and already
   carries z-index:30 of its own, so it needs nothing from us). Giving these a
   stacking context is additive: position:relative with no offsets moves
   nothing, and z-index only orders them against the decoration behind. */
.body, .authwrap { position: relative; z-index: 1; }

/* --- the large fingerprint ------------------------------------------------
   Oversized and mostly off-canvas, bottom-right, so it reads as texture
   rather than as a picture of something. It drifts and turns very slightly. */
.amb-print {
  position: absolute;
  right: -18vmax;
  bottom: -22vmax;
  width: 78vmax;
  height: 78vmax;
  opacity: .05;
  color: var(--gold);
  animation: ambDrift 64s ease-in-out infinite;
  transform-origin: 55% 55%;
}
html[data-theme="dark"] .amb-print { opacity: .07; }

.amb-print svg { width: 100%; height: 100%; display: block; }

/* Ridges trace slowly, one after another, like a print being read — the same
   idea as the loader but at a tenth of the speed so it stays background. */
.amb-print .ar {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: ambTrace 46s linear infinite;
}
.amb-print .ar:nth-child(2)  { animation-duration: 53s; animation-delay: -6s; }
.amb-print .ar:nth-child(3)  { animation-duration: 41s; animation-delay: -13s; }
.amb-print .ar:nth-child(4)  { animation-duration: 58s; animation-delay: -21s; }
.amb-print .ar:nth-child(5)  { animation-duration: 47s; animation-delay: -29s; }
.amb-print .ar:nth-child(6)  { animation-duration: 61s; animation-delay: -35s; }
.amb-print .ar:nth-child(7)  { animation-duration: 44s; animation-delay: -42s; }

@keyframes ambTrace {
  0%   { stroke-dashoffset: 1200; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1200; }
}

@keyframes ambDrift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(-2.2vmax, -1.6vmax, 0) rotate(3.5deg); }
}

/* --- soft colour washes ---------------------------------------------------
   Two very diffuse radial blooms on slow, non-matching cycles, so they never
   line up into an obvious pulse. */
.amb-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.amb-glow-1 {
  top: -24vmax; left: -14vmax;
  width: 62vmax; height: 62vmax;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--gold) 26%, transparent), transparent 68%);
  opacity: .30;
  animation: ambFloat1 52s ease-in-out infinite;
}
.amb-glow-2 {
  bottom: -30vmax; right: -8vmax;
  width: 56vmax; height: 56vmax;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--amber) 20%, transparent), transparent 70%);
  opacity: .22;
  animation: ambFloat2 71s ease-in-out infinite;
}
html[data-theme="dark"] .amb-glow-1 { opacity: .22; }
html[data-theme="dark"] .amb-glow-2 { opacity: .16; }

@keyframes ambFloat1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(4vmax, 3vmax, 0) scale(1.07); }
}
@keyframes ambFloat2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-3.4vmax, -2.6vmax, 0) scale(1.1); }
}

/* A barely-there vertical wash, so the page has some depth top to bottom
   instead of one flat colour. */
.amb-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 4%, transparent) 0%,
    transparent 38%,
    transparent 72%,
    color-mix(in srgb, var(--amber) 3%, transparent) 100%);
}

/* --- respect the user's wishes and their battery ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .amb-print, .amb-glow-1, .amb-glow-2, .amb-print .ar { animation: none; }
  .amb-print .ar { stroke-dashoffset: 0; }
}

/* On small screens the blur is expensive and the decoration is mostly hidden
   behind content anyway, so lighten it considerably. */
@media (max-width: 640px) {
  .amb-glow { filter: blur(60px); }
  .amb-print { opacity: .035; }
  html[data-theme="dark"] .amb-print { opacity: .05; }
}

/* Printing a report should never carry the decoration onto paper. */
@media print { .ambience { display: none; } }