/* The throne hall: one fixed layer behind the whole page. It takes no clicks, and everything readable sits above it. */
html { background: var(--ink); }
body { background: transparent; }
.amb { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; contain: strict; }
@supports (height: 100lvh) { .amb { bottom: auto; height: 100lvh; } }  /* a phone's collapsing address bar doesn't make it jump */
@media print { .amb { display: none; } }
.amb > * { position: absolute; }
.amb canvas { inset: 0; width: 100%; height: 100%; }
.amb-veil { inset: 0; background: linear-gradient(180deg, rgba(11, 13, 18, 0.22), rgba(11, 13, 18, 0.05) 45%, rgba(11, 13, 18, 0.15)); }

/* Bands that used to be solid let the hall through a little. Cards stay solid, so nothing inside them changes. */
.stats { background: rgba(16, 19, 26, 0.74); }
.court { background: rgba(13, 12, 9, 0.68); }
.knight-detail { background: linear-gradient(180deg, rgba(14, 17, 23, 0.62), rgba(11, 13, 18, 0.62)); }

.a-scene { inset: -3%; animation: amb-breathe 60s ease-in-out infinite alternate; will-change: transform; }
.a-hall, .a-candle { position: absolute; inset: 0; background: url(bg/a-hall-wide.webp) center 72% / cover no-repeat; }
.a-candle { background-image: url(bg/a-candle.webp); will-change: opacity; }
.a-candle.a-left { -webkit-mask-image: linear-gradient(90deg, #000 49%, transparent 51%); mask-image: linear-gradient(90deg, #000 49%, transparent 51%); animation: amb-flicker 5.3s ease-in-out infinite; }
.a-candle.a-right { -webkit-mask-image: linear-gradient(90deg, transparent 49%, #000 51%); mask-image: linear-gradient(90deg, transparent 49%, #000 51%); animation: amb-flicker 7.1s ease-in-out infinite -2s; }
@keyframes amb-breathe { from { transform: scale(1.04); } to { transform: scale(1); } }
@keyframes amb-flicker {
  0%, 100% { opacity: 0.82; } 7% { opacity: 0.68; } 12% { opacity: 0.9; } 21% { opacity: 0.74; } 29% { opacity: 1; } 37% { opacity: 0.8; }
  44% { opacity: 0.62; } 49% { opacity: 0.86; } 58% { opacity: 0.72; } 66% { opacity: 0.95; } 74% { opacity: 0.78; } 83% { opacity: 0.66; } 91% { opacity: 0.9; }
}
/* Phones get a taller, brighter painting, because the wide one would be cropped down to its middle. */
@media (max-aspect-ratio: 3/4) {
  .a-hall { background-image: url(bg/a-hall-tall.webp); background-position: center bottom; }
  .a-candle { background-image: url(bg/a-candle-tall.webp); background-position: center bottom; }
}
@media (prefers-reduced-motion: reduce) {
  .amb * { animation: none !important; }
}