:root { --ink: #f2efe9; }

html, body {
  margin: 0;
  height: 100%;
  background: #0b0b0c;
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  overflow: hidden;
}

.scene {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.85);
  transition: opacity 2.5s ease;
  opacity: 0;
}
.scene.ready { opacity: 1; }

/* Mood tint: a colour layer blended over the street image to
   simulate a time of day. Sits above the scenes, below the
   veil and text, so legibility is preserved. */
#tint {
  position: fixed;
  inset: 0;
  opacity: 0;
  transition: opacity 2.5s ease, background-color 2.5s ease;
  pointer-events: none;
}
#tint.morning   { mix-blend-mode: soft-light; background-color: #7fa8d0; opacity: 0.6; }
#tint.afternoon { mix-blend-mode: soft-light; background-color: #fff4e0; opacity: 0.3; }
#tint.evening   { mix-blend-mode: multiply;   background-color: #e79a5c; opacity: 0.55; }
#tint.night     { mix-blend-mode: multiply;   background-color: #1e2b52; opacity: 0.7; }

#veil {
  position: fixed;
  inset: 0;
  background: linear-gradient(rgba(5,5,6,0.55), rgba(5,5,6,0.25) 40%, rgba(5,5,6,0.7));
}

#poem {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8vmin;
  font-size: clamp(1.1rem, 2.6vmin, 1.7rem);
  line-height: 1.9;
  text-shadow: 0 1px 14px rgba(0,0,0,0.8);
}
/* All lines are in the DOM from first paint (only opacity
   animates) and the button sits in a reserved slot below, so
   nothing recentres or shifts. The block shrinks to its widest
   line and is centred on screen; lines and button stay left
   aligned to the block's left edge. */
#poem .block {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 34em;
}
#poem .lines { display: flex; flex-direction: column; align-items: flex-start; }
#poem span.line {
  opacity: 0;
  transition: opacity 1.8s ease;
}
#poem span.line.on { opacity: 1; }

/* Forward button, below the text with breathing room. It always
   occupies its slot (only opacity toggles), so revealing it never
   shifts the lines above. */
#next {
  margin-top: 2.2em;
  width: 2.4em;
  height: 2.4em;
  border: 2px solid #000;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font: inherit;
  font-weight: bold;
  font-size: clamp(1rem, 2.4vmin, 1.5rem);
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
  transition: opacity 1.2s ease, transform 0.2s ease;
}
#next.on { opacity: 1; visibility: visible; }
#next:hover, #next:focus-visible { transform: scale(1.08); }

/* Info button, bottom right, same key */
#info-btn {
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  border: 2px solid #000;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: clamp(0.95rem, 2.2vmin, 1.35rem);
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  opacity: 0.85;
  will-change: transform, opacity;
  transition: opacity 0.3s ease, transform 0.2s ease;
}
#info-btn:hover, #info-btn:focus-visible { opacity: 1; transform: scale(1.08); }

/* Modal */
#info-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(3,3,4,0.82);
  z-index: 10;
}
#info-modal.open { display: flex; }
#info-box {
  position: relative;
  max-width: 30em;
  margin: 6vmin;
  padding: 3em 2.6em;
  background: #0f0f11;
  border: 1px solid rgba(242,239,233,0.18);
}
#info-close {
  position: absolute;
  top: 1em; right: 1em;
  width: 26px; height: 26px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
#info-close:hover { opacity: 1; }
#info-close::before, #info-close::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 1px;
  background: var(--ink);
}
#info-close::before { transform: translate(-50%,-50%) rotate(45deg); }
#info-close::after  { transform: translate(-50%,-50%) rotate(-45deg); }
#info-box h2 { margin: 0 0 0.3em; font-size: 1.5rem; font-weight: 400; }
#info-box .sub { font-style: italic; color: rgba(242,239,233,0.65); margin-bottom: 1.4em; }
#info-box p { font-size: 0.95rem; line-height: 1.7; color: rgba(242,239,233,0.9); margin: 0 0 1em; }
#info-box a { color: #8fb8e0; text-decoration: none; }
#info-box a:hover { text-decoration: underline; }

#replay {
  position: fixed;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  padding: 0.7em 1.6em;
  border: 2px solid #000;
  border-radius:100em;
  background: #fff;
  color: #000;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1rem, 2.2vmin, 1.3rem);
  letter-spacing: 0.02em;
  cursor: pointer;
  display: none;
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 1.5s ease, transform 0.2s ease;
  z-index: 5;
}
#replay.show { display: block; }
#replay.on { opacity: 1; }
#replay:hover, #replay:focus-visible { transform: translateX(-50%) scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .scene, #tint, #poem span.line, #next, #info-btn { transition: none; }
}