/* ============================================
   THE ROOT — The foundation of the archive.
   The bottom of everything. The truth.
   ============================================ */

/* --- Page --- */
.root-page {
  background: #050505;
  min-height: 100vh;
  color: #2a2a2a;
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 0.75rem;
  line-height: 2.6;
  letter-spacing: 0.02em;
  cursor: default;
}

.root-page ::selection {
  background: #0e0e0e;
  color: #2a2a2a;
}

/* --- Column --- */
.root-column {
  max-width: 440px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Opening --- */
.root-opening {
  text-align: center;
  padding-top: 35vh;
  padding-bottom: 30vh;
  opacity: 0;
  transition: opacity 5s ease;
}

.root-opening.is-visible {
  opacity: 1;
}

/* --- Text blocks --- */
.root-text {
  text-align: left;
  margin-bottom: 0;
  padding: 12vh 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 4s ease, transform 4s ease;
}

.root-text.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- The pause (long emptiness before "Thank you") --- */
.root-pause {
  height: 80vh;
}

/* --- Thank you --- */
.root-thankyou {
  text-align: center;
  padding: 10vh 0;
  font-size: 0.8rem;
  color: #2a2a2a;
  opacity: 0;
  transition: opacity 6s ease;
}

.root-thankyou.is-visible {
  opacity: 1;
}

/* --- Signature --- */
.root-signature {
  text-align: center;
  padding: 8vh 0 4vh;
  font-size: 0.55rem;
  color: #1a1a1a;
  letter-spacing: 0.15em;
  opacity: 0;
  transition: opacity 4s ease;
}

.root-signature.is-visible {
  opacity: 1;
}

/* --- All-visited message --- */
.root-allvisited {
  text-align: center;
  padding: 10vh 0;
  font-size: 0.65rem;
  color: #222;
  opacity: 0;
  transition: opacity 5s ease;
  display: none;
}

.root-allvisited.show {
  display: block;
}

.root-allvisited.is-visible {
  opacity: 1;
}

/* --- Return --- */
.root-return {
  text-align: center;
  padding: 12vh 0 10vh;
  opacity: 0;
  transition: opacity 3s ease;
}

.root-return.is-visible {
  opacity: 1;
}

.root-return a {
  color: #181818;
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: color 2s ease;
}

.root-return a:hover {
  color: #333;
}

/* --- Mobile --- */
@media (max-width: 768px) {
  .root-column {
    padding: 0 20px;
  }

  .root-opening {
    padding-top: 25vh;
    padding-bottom: 20vh;
  }

  .root-text {
    padding: 8vh 0;
  }

  .root-pause {
    height: 50vh;
  }
}