/* =========================
   THINGS PAGE STYLES (page-specific)
   ========================= */

/* Let the animation breathe; allow scrolling if needed */
body { overflow-x: hidden; }

.things-card {
  padding: 26px;
}

.header {
  text-align: center;
  margin-bottom: 24px;
}

.stage {
  display: grid;
  place-items: center;
  min-height: 360px;
}

.line-slot {
  width: min(600px, 92vw);
  position: relative;
  min-height: 6.5em;
  text-align: center;
}

.line {
  position: absolute;
  inset: 0;
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 300;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 800ms ease, transform 800ms ease;
}

.word { display: inline-block; white-space: nowrap; }

.letter {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.letter.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.letter.fade-out {
  opacity: 0;
  transform: translateY(-10px);
}


/* Wrap long lines nicely inside the card */
.line-slot { max-width: 100%; }
.line { max-width: 100%; padding: 0 6px; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }