:root {
  --concert-brick: #87382d;
  --concert-cream: #f5efe5;
}

/* Mosaic pieces that drift off the poster once (js/concert-poster-flutter.js). */
.concert-poster-flutter-host {
  position: relative;
}

.concert-flutter-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.concert-flutter-tile {
  position: absolute;
  border-radius: 2px;
  background-size: 900% auto;
  box-shadow: 0 2px 4px rgb(74 45 33 / 22%);
  opacity: 0;
}

/* Opening animation (js/concert-intro.js). The inline script in <head> adds .concert-intro-active. */
html.concert-intro-active {
  overflow: hidden;
}

html.concert-intro-active::after {
  position: fixed;
  z-index: 9998;
  inset: 0;
  content: "";
  background: var(--concert-brick);
  animation: concert-intro-failsafe 0s linear 10s forwards;
}

html.concert-intro-ready::after {
  display: none;
}

@keyframes concert-intro-failsafe {
  to { visibility: hidden; }
}

.concert-intro {
  position: fixed;
  z-index: 9999;
  inset: 0;
  cursor: pointer;
  touch-action: none;
  will-change: transform;
}

.concert-intro__canvas {
  display: block;
  width: 100%;
  height: 100%;
}