/* Slide styling shared by the wall and the admin preview.
   Sizes use container query units (cqw) so a slide looks identical at any size. */
.qw-stage { position: fixed; inset: 0; overflow: hidden; background: #0b0d1a; container-type: size; }
.qw-stage.preview { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; }

.qw-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 2s ease; }
.qw-slide.active { opacity: 1; }

.qw-bg { position: absolute; inset: 0; transform-origin: 35% 55%; }
.qw-slide.active .qw-bg { animation: qw-drift 70s linear forwards; }
@keyframes qw-drift { from { transform: scale(1); } to { transform: scale(1.07); } }

.qw-scrim { position: absolute; inset: 0; }
.qw-copy { position: absolute; inset: 0; padding: 7cqw 8cqw; display: flex; flex-direction: column; box-sizing: border-box; }

.qw-quote { margin: 0; white-space: pre-line; text-wrap: balance; opacity: 0; transition: opacity 1.6s ease 0.5s; }
.qw-by { margin: 2.2cqw 0 0; opacity: 0; transition: opacity 1.6s ease 1.1s; }
.qw-slide.active .qw-quote { opacity: 1; }
.qw-slide.active .qw-by { opacity: 0.82; }

.qw-code { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; opacity: 0; transition: opacity 1s ease; }
.qw-code.ready { opacity: 1; }

.qw-stage.preview .qw-slide { transition-duration: 0.25s; }
.qw-stage.preview .qw-quote, .qw-stage.preview .qw-by { transition-duration: 0.25s; transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .qw-slide.active .qw-bg { animation: none; }
  .qw-slide, .qw-quote, .qw-by { transition-duration: 0.01s; transition-delay: 0s; }
}