/* Intro overlay, white "boom" flash, and the page states around them. */

.intro {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(24px, 6vh, 56px);
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 8px 24px;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
}
.intro.is-hidden { opacity: 0; transform: translateY(16px); visibility: hidden; }

.intro__logo {
  grid-column: 1 / -1;
  width: clamp(96px, 12vw, 150px);
  height: auto;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(59, 33, 74, 0.35);
  animation: logo-drop 0.9s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
@keyframes logo-drop { 0% { opacity: 0; transform: translateY(-40px) scale(0.85); } 100% { opacity: 1; transform: none; } }
.intro__label {
  grid-column: 1 / -1;
  margin: 0;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--yellow);
  font-family: var(--display);
  font-weight: 400;
  text-shadow: 0 2px 10px rgba(20, 8, 40, 0.6);
}

.intro__count {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(54px, 10vw, 120px);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 6px 0 rgba(20, 8, 40, 0.35), 0 0 40px rgba(255, 46, 136, 0.45);
}
.intro__total {
  display: block;
  margin-top: 8px;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-shadow: none;
  color: var(--muted);
}

.intro__bar {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.intro__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--pink), var(--orange), var(--yellow));
  transform: scaleX(0);
  transform-origin: left;
}

.intro__skip {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  pointer-events: auto;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(20, 8, 40, 0.45);
  color: var(--text);
  font-weight: 700;
  backdrop-filter: blur(6px);
}
.intro__skip:hover { background: rgba(20, 8, 40, 0.7); }

/* White "boom" flash when the last brick lands */
.flash {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, #fff 0%, #ffe9f4 45%, #ffd2a8 100%);
  opacity: 0;
}
.flash.is-flashing { animation: boom-flash 0.9s ease-out; }
@keyframes boom-flash { 0% { opacity: 0.95; } 100% { opacity: 0; } }

/* During the intro only the city and the counter are visible */
body.is-intro { overflow: hidden; }
body.is-intro .site,
body.is-intro .footer { opacity: 0; visibility: hidden; }
body.is-intro .topbar { opacity: 0; transform: translateY(-20px); pointer-events: none; }