/* Shared backdrop for the destination-page scenes (the forge, the hire
   chamber, the Home of Daedalus hall). Same fixed-canvas trick as .hero:
   a WebGL canvas pinned behind the page rendering the keyed room + live
   nebula, with the page's own content scrolling over it.

   Everything ABOUT a given page other than this backdrop is bespoke — see
   the per-page css. This file is only the frame the scene hangs in. */

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: var(--void);
  /* A faint painted-nebula glow so the static fallback's transparent
     apertures never show flat void while WebGL loads or if it never does. */
  background-image:
    radial-gradient(58% 44% at 68% 32%, rgba(122, 72, 168, 0.28), transparent 72%),
    radial-gradient(46% 38% at 40% 62%, rgba(150, 54, 96, 0.14), transparent 76%);
  background-color: #060309;
}

.scene__plate,
.scene__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.scene__plate {
  object-fit: cover;
  z-index: 0;
  transition: opacity 900ms ease;
}
.scene__canvas {
  z-index: 1;
  opacity: 0;
  transition: opacity 1100ms cubic-bezier(0.4, 0, 0.2, 1);
}
.scene[data-mode='live'] .scene__canvas { opacity: 1; }
.scene[data-mode='live'] .scene__plate  { opacity: 0; }

/* A legibility scrim over the whole scene, tuned per page via --scene-scrim
   (destination content is dark-on-dark by default and needs help). */
.scene-scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--scene-scrim, rgba(6, 3, 9, 0.42));
}

/* All page content rides above the backdrop + scrim. */
.scene-content {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .scene__canvas { transition: none; }
  .scene__plate  { transition: none; }
}

/* Same fix as the hero (css/hero.css) and for the same reason: on a narrow
   phone a strict cover-crop shows only a tight vertical sliver of the
   room, so every interior page read too zoomed-in. Shrinking .scene's own
   box lets the existing cover math (WebGL, recomputed on resize; and the
   plain object-fit: cover poster) naturally reveal more of the room on
   both — no distortion, since the crop stays correct for whatever aspect
   ratio the box actually is. The sliver top and bottom is var(--void),
   already .scene's own background colour, so it reads as more of the
   dark room, not a gap. .scene-scrim stays full-bleed on purpose — it's
   the legibility layer for the copy on top of the scene, not the scene
   itself. */
@media (max-width: 700px) {
  .scene {
    top: 4svh;
    height: 92svh;
  }
}

/* lqip:begin — a ~700B blurred frame of each scene, baked in, so the
   loading beat AND a total asset failure both show the real image
   softened rather than flat void. */
.scene[data-scene="forge"] { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAASACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDj/LBXIPNNxzjFPVgKkixk5xmp2LSTIQpY4xSuhTg1ZjQHJyAajuEZG56etWtgaK46ipE/1lFFSwiCn95+NW7n/UGiirjsyo9T/9k="), radial-gradient(58% 44% at 68% 32%, rgba(122,72,168,0.28), transparent 72%), radial-gradient(46% 38% at 40% 62%, rgba(150,54,96,0.14), transparent 76%); background-size: cover; background-position: center; }
.scene[data-scene="hire"] { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAASACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDjwhZRgU3GDg05XbgChCN3zDNSWBUAA0IhY4FKeRxSHcntVN9iULD1FPg/1pooqGWughpJ+q/SiimJdT//2Q=="), radial-gradient(58% 44% at 68% 32%, rgba(122,72,168,0.28), transparent 72%), radial-gradient(46% 38% at 40% 62%, rgba(150,54,96,0.14), transparent 76%); background-size: cover; background-position: center; }
.scene[data-scene="daedalus"] { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAASACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDkGiIHSmqMNyKkVmbgmpbeISSgHkVF7bmiV9isw3NwKcISR0qxcRCOUgcCoWZl4zRe+wNW3Gt2qe0/1ooopS2KjuF3/rTUK/xUUUR2CW5//9k="), radial-gradient(58% 44% at 68% 32%, rgba(122,72,168,0.28), transparent 72%), radial-gradient(46% 38% at 40% 62%, rgba(150,54,96,0.14), transparent 76%); background-size: cover; background-position: center; }
.scene[data-scene="story"] { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAASACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDkYgc5XtUxcOeOCKijV8/KcUjIVPXmhSsV0FcYqI8U89KaapskmHQU1utFFQi2MNNNFFMg/9k="), radial-gradient(58% 44% at 68% 32%, rgba(122,72,168,0.28), transparent 72%), radial-gradient(46% 38% at 40% 62%, rgba(150,54,96,0.14), transparent 76%); background-size: cover; background-position: center; }
.scene[data-scene="bounty"] { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAASACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDkA2FIqW0tjcSbQcUxWUx9OfWrGn3CQSlm71Mm7GiSvqNubVrfAbvVU9a0dTukuGUp0AqkWTyyMc+tKLdtQklfQbH900L1ooqhDpOtNftRRSQM/9k="), radial-gradient(58% 44% at 68% 32%, rgba(122,72,168,0.28), transparent 72%), radial-gradient(46% 38% at 40% 62%, rgba(150,54,96,0.14), transparent 76%); background-size: cover; background-position: center; }
/* lqip:end */