/* ============================================================
   BACKDROPS — the ground behind everything
   ============================================================
   Variations on the .aura layer that already exists in styles.css,
   which is two soft radial gradients plus a masked grid. Because
   both are drawn from tokens, every style here inherits whatever
   palette the page is wearing without naming a single colour.

   Motion is transform and opacity only. The deck runs live iframes
   and moves a hundred cards with transforms; animating
   background-position on a full-screen element repaints the whole
   viewport every frame and would fight all of it.

   prefers-reduced-motion is already handled globally in styles.css,
   which flattens every animation here to nothing.
   ============================================================ */

/* ---------- drift: the default, slowly breathing ---------- */

html[data-backdrop="drift"] .aura { background: none; }

html[data-backdrop="drift"] .aura::before {
  content: "";
  position: absolute;
  /* oversized so the moving edges never enter the viewport */
  inset: -35%;
  background:
    radial-gradient(38vw 38vh at 32% 28%, var(--glow), transparent 68%),
    radial-gradient(44vw 42vh at 68% 74%, var(--glow-soft), transparent 70%);
  animation: drift 34s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes drift {
  from { transform: translate3d(-3.5%, -2.5%, 0) scale(1); }
  to   { transform: translate3d(3.5%, 2.5%, 0) scale(1.09); }
}

/* ---------- grid: the structure foregrounded ---------- */

html[data-backdrop="grid"] .aura { background: none; }
html[data-backdrop="grid"] .aura::after {
  opacity: 1;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(90vw 80vh at 50% 45%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(90vw 80vh at 50% 45%, #000 30%, transparent 85%);
}

/* ---------- scan: the terminal's own texture, over everything ---------- */

html[data-backdrop="scan"] .aura::after {
  opacity: 1;
  background-image: repeating-linear-gradient(
    180deg,
    var(--line-soft) 0 1px,
    transparent 1px 3px
  );
  background-size: auto;
  mask-image: none;
  -webkit-mask-image: none;
}

/* ---------- plain: nothing but the ground ---------- */

html[data-backdrop="plain"] .aura { background: none; }
html[data-backdrop="plain"] .aura::after { display: none; }

/* ---------- poster: the author's own image ---------- */

/* An image behind a timeline is a readability problem before it is a design
   decision, so the ground is laid over it twice: a flat wash for the whole
   frame, and a stronger pull toward the edges where the cards actually sit. */
html[data-backdrop="poster"] .aura {
  background-image: var(--poster, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

html[data-backdrop="poster"] .aura::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--panel-solid), var(--panel-soft) 40%, var(--panel-solid)),
    radial-gradient(80vw 70vh at 50% 45%, transparent 20%, var(--bg) 92%);
}

html[data-backdrop="poster"] .aura::after { opacity: .25; }

/* ---------- the picker ---------- */

.paint {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
}

.swatchy {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px 8px 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
  font: 600 9.5px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* the native picker, made to look like it belongs */
.swatchy input[type="color"] {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.swatchy input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.swatchy input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 6px; }
.swatchy input[type="color"]::-moz-color-swatch { border: 0; border-radius: 6px; }

.reset {
  align-self: stretch;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: transparent;
  color: var(--ink-faint);
  padding: 0 14px;
  cursor: pointer;
  font: 700 9px/1 var(--mono);
  letter-spacing: .13em;
  transition: all 200ms var(--ease);
}
.reset:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.backdrops {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.backdrop {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  padding: 9px 12px;
  cursor: pointer;
  font: 700 9px/1 var(--mono);
  letter-spacing: .13em;
  color: var(--ink-faint);
  transition: all 200ms var(--ease);
}
.backdrop:hover { color: var(--ink-dim); }
.backdrop[aria-checked="true"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 22px -10px var(--glow);
}
.backdrop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* said out loud when a chosen colour had to be moved to stay readable */
.fixed {
  margin: 10px 0 0;
  font: 500 11px/1.55 var(--mono);
  letter-spacing: .03em;
  color: var(--ink-faint);
}
.fixed b { color: var(--accent); font-weight: 700; }