/* SLIDE 16 · Close — Archilochus quote + thanks + LinkedIn QR (on advance) */

.slide-16 { flex-direction: column; }

.slide-16 .stage-16 {
  display: flex; flex-direction: column;
  align-items: center;
  max-width: 1100px; width: 100%;
  gap: 5vh;
  transition: gap 600ms var(--ease-out-quart);
}

.slide-16 .final-quote {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 400;
  font-size: clamp(1.8rem, 4.5vw, 4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--paper);
  text-align: center;
  transition: font-size 600ms var(--ease-out-quart),
              opacity 500ms ease;
}

.slide-16 .q-line {
  opacity: 0;
  transform: translateY(12px);
}
.slide-16.started .q-1 { animation: s16-rise 1000ms var(--ease-out-quart) 500ms forwards; }
.slide-16.started .q-2 { animation: s16-rise 1000ms var(--ease-out-quart) 1400ms forwards; }

.slide-16 .thanks {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 700;
  font-variation-settings: "opsz" 144, "wght" 700;
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  letter-spacing: -0.03em;
  color: var(--accent);
  margin-top: 4vh;
  opacity: 0;
  transform: translateY(12px);
  transition: font-size 600ms var(--ease-out-quart),
              margin-top 600ms var(--ease-out-quart);
}
.slide-16.started .thanks { animation: s16-rise 1100ms var(--ease-out-quart) 3300ms forwards; }

/* On reveal: shrink the quote/thanks to make room for the QR */
.slide-16.revealed .final-quote {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--paper-dim);
}
.slide-16.revealed .thanks {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-top: 1.5vh;
}

/* contact block (LinkedIn QR) — collapses in stage 0 so the quote/Дякую center properly */
.slide-16 .contact-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 700ms var(--ease-out-quart),
              transform 700ms var(--ease-out-quart),
              max-height 900ms var(--ease-out-quart);
}
.slide-16.revealed .contact-block {
  opacity: 1;
  max-height: 500px;
  transform: translateY(0);
  transition-delay: 300ms;
  pointer-events: auto;
}

.slide-16 .qr-card {
  padding: 16px;
  background: var(--paper);
  border-radius: 4px;
  position: relative;
}
.slide-16 .qr-card::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px solid var(--paper-ghost);
  border-radius: 6px;
  pointer-events: none;
  opacity: 0.3;
}
.slide-16 .qr {
  width: clamp(170px, 18vw, 220px);
  height: clamp(170px, 18vw, 220px);
  display: block;
}

.slide-16 .contact-url {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--paper);
  margin-top: 4px;
}

@keyframes s16-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes s16-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}