/* Nature backdrops (js/backdrop.js): a fixed layer between the canvas #bg and the app, under .grain and .shade. */
.qbd { position: fixed; inset: 0; pointer-events: none; overflow: hidden; contain: strict; }
.qbd-l { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.qbd-l.on { opacity: 1; }
.qbd-l > img, .qbd-l > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.74) saturate(1.05); }
.qbd-l.kb > img { transform-origin: 50% 45%; animation: qbd-drift 40s ease-in-out infinite alternate; will-change: transform; }
@keyframes qbd-drift { from { transform: scale(1.08) translate3d(0, -1.2%, 0); } to { transform: scale(1) translate3d(0, 1.2%, 0); } }
/* Scrim: keeps the verse cards, caption and rail at WCAG AA over any photo. Strongest at the top (header) and the
   bottom (caption, tab bar), lighter in the middle where the glass card already carries the text. */
.qbd::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, transparent 35%, rgba(0,0,0,.5) 100%),
    linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.26) 24%, rgba(0,0,0,.22) 55%, rgba(0,0,0,.7) 88%); }
/* Photos are busier than the canvas scenes: the verse card gets a slightly denser glass while one is showing. */
html.qbd-on #v-flow .slab.glass { background-color: color-mix(in srgb, var(--glass) 45%, var(--glass-strong)); }
html[data-skin="pearl"] .qbd-l > img, html[data-skin="pearl"] .qbd-l > video { filter: brightness(1.06) saturate(.85); }
html[data-skin="pearl"] .qbd::after { background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(236,242,240,.45) 100%),
  linear-gradient(180deg, rgba(236,242,240,.66), rgba(236,242,240,.4) 24%, rgba(236,242,240,.36) 55%, rgba(236,242,240,.8) 88%); }
html.qbd-on #bg { visibility: hidden; animation: none; }
html[data-contrast="1"] .qbd, html[data-simple="1"] .qbd { display: none; }
@media (prefers-reduced-motion: reduce) { .qbd-l.kb > img { animation: none; } .qbd-l { transition: opacity .2s linear; } }
@media print { .qbd { display: none !important; } }
.qbd-credits { margin: 6px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; font-size: 13px; color: var(--ink2); }
.qbd-credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }