:root {
  color-scheme: dark;
  --bg: #030405;
  --text: #e8eaed;
  --muted: #777d86;
  --active: #f5f7fa;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: transparent; /* иначе фон body закроет видео */
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; }

.scene {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 38px 22px;
  isolation: isolate;
}

.cover {
  width: min(100%, 720px);
  min-height: min(680px, 82svh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity .9s ease, transform 1s ease, filter 1s ease;
}
.cover.is-leaving { opacity: 0; transform: translateY(-8px); filter: blur(12px); }
.eyebrow {
  color: #737982;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .32em;
}
.cover-mark { display: none; }
h1 {
  margin: 0;
  color: #f0f1f3;
  font-family: var(--sans);
  font-size: clamp(48px, 8vw, 82px);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -.065em;
}
.title-dot { color: #f0f1f3; }
.cover-subtitle {
  margin: 22px 0 0;
  color: #858a92;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .025em;
}
.open-button {
  margin-top: 54px;
  padding: 15px 22px;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  border: 1px solid #343941;
  border-radius: 2px;
  background: transparent;
  color: #d9dde2;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease;
}
.open-button:hover {
  border-color: #858c96;
  background: #0a0c0f;
  color: #fff;
  box-shadow: 0 0 32px rgba(210,220,235,.055);
}
.open-button:focus-visible, .sound-button:focus-visible, .replay-button:focus-visible { outline: 1px solid #cbd1d9; outline-offset: 5px; }
.button-arrow { color: #aeb5bf; font-size: 14px; }
.cover-footnote { position: absolute; bottom: 31px; color: #41464e; font-size: 8px; letter-spacing: .22em; }

.letter {
  width: min(100%, 780px);
  min-height: min(760px, 88svh);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(12px);
  filter: blur(12px);
  transition: opacity 1.5s ease, transform 1.6s cubic-bezier(.2,.7,.2,1), filter 1.5s ease;
}
.letter.hidden { display: none; }
.letter.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.letter-header, .letter-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.sound-button, .replay-button {
  border: 0;
  background: transparent;
  color: #666d76;
  cursor: pointer;
  font-size: 8px;
  letter-spacing: .16em;
  transition: color .25s ease;
}
.sound-button:hover, .replay-button:hover { color: #dce1e8; }
.sound-button { display: inline-flex; align-items: center; gap: 9px; }
.sound-icon { color: #aeb5bf; font-size: 16px; }
.sound-button.is-playing .sound-icon { text-shadow: 0 0 14px rgba(225,235,248,.42); }
.poem-wrap { width: min(100%, 650px); margin: 48px auto 40px; }
.poem-heading { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-bottom: 38px; }
.small-rule { display: none; }
h2 {
  margin: 0;
  color: #737b85;
  font: 400 10px/1.4 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
}
.poem {
  max-height: 58svh;
  overflow-y: auto;
  padding: 8px 14px 20px;
  scrollbar-width: none;
  text-align: center;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scroll-padding-block: 42%;
}
.poem::-webkit-scrollbar { display: none; }






.signature { min-height: 22px; margin: 30px 0 0; color: #7c838d; text-align: center; font: 300 13px var(--sans); letter-spacing: .08em; }
.letter-footer { padding-top: 18px; border-top: 1px solid #171a1f; color: #454b54; font-size: 8px; letter-spacing: .2em; }
.replay-button { color: #666d76; }
.replay-button span { margin-left: 7px; color: #aeb5bf; font-size: 14px; }

@media (max-width: 600px) {
  .scene { padding: 27px 20px; }
  .cover { min-height: 78svh; }
  .cover-subtitle { font-size: 13px; }
  .cover-footnote { bottom: 22px; font-size: 7px; }
  .letter { min-height: 84svh; }
  .letter-header .eyebrow { font-size: 7px; letter-spacing: .17em; }
  .sound-button { gap: 5px; font-size: 7px; letter-spacing: .1em; }
  .poem-wrap { margin: 34px auto 25px; }
  .poem-heading { margin-bottom: 25px; }
  
  .letter-footer { font-size: 7px; }
}


/* --- One coordinated, smooth transition for the poem --- */
.poem {
  max-height: 58svh;
  overflow-y: auto;
  scroll-behavior: auto; /* scrolling is animated in JavaScript */
  scroll-padding-block: 45%;
  overscroll-behavior: contain;
}

.verse-line {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 15px;
  padding: 3px 10px 5px;
  border-radius: 2px;
  color: #737982;
  font-family: var(--serif);
  font-size: clamp(19px, 3.2vw, 27px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .005em;

  opacity: 0;
  transform: translate3d(0, 42px, 0) scale(.94);
  transform-origin: center center;
  filter: blur(8px);
  text-shadow: none;
  will-change: transform, opacity, filter;

  transition:
    transform 1.25s cubic-bezier(.22, .75, .25, 1),
    opacity 1.25s ease-in-out,
    filter 1.25s ease-in-out,
    color 1.25s ease-in-out,
    text-shadow 1.25s ease-in-out;
}

.verse-line.verse-stanza-start {
  margin-top: 34px;
}

/* A line becomes visible only when its reveal timer fires. */
.verse-line.is-visible {
  opacity: .34;
  transform: translate3d(0, 0, 0) scale(.97);
  filter: blur(1.5px);
}

/* The active line rises into the reading focus and receives a soft glow. */
.verse-line.is-visible.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  color: #fff;
  text-shadow:
    0 0 9px rgba(245,248,255,.38),
    0 0 22px rgba(235,242,252,.22),
    0 0 42px rgba(220,232,248,.10);
}

/* Earlier lines gently contract and drift upward as the poem advances. */
.verse-line.is-visible.is-past {
  opacity: .19;
  transform: translate3d(0, -16px, 0) scale(.84);
  filter: blur(1.2px);
  color: #9299a3;
  text-shadow: none;
}

/* Future lines stay hidden below until their turn. */
.verse-line.is-future {
  opacity: 0;
  transform: translate3d(0, 42px, 0) scale(.94);
  filter: blur(8px);
}


/* --- Cinematic finale: the theater lights rise from bottom to top --- */
.letter.is-finale {
  min-height: auto;
  justify-content: flex-start;
}

.letter.is-finale .poem {
  max-height: none;
  overflow: visible;
  padding-top: 18px;
  padding-bottom: 34px;
}

.letter.is-finale .verse-line {
  opacity: .08;
  transform: translate3d(0, 12px, 0) scale(.985);
  filter: blur(3px);
  color: #fff;
  text-shadow: none;
  transition:
    opacity 1.65s ease,
    transform 1.9s cubic-bezier(.2, .7, .2, 1),
    filter 1.65s ease,
    text-shadow 1.8s ease;
}

.letter.is-finale .verse-line.finale-lit {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  text-shadow:
    0 0 8px rgba(255,255,255,.28),
    0 0 20px rgba(245,248,255,.16);
}

.letter.is-finale .poem-title,
.letter.is-finale h2 {
  color: #dfe3e9;
  transition: color 2.2s ease;
}

.letter.is-finale .signature {
  color: #e5e8ed;
  text-shadow: 0 0 16px rgba(255,255,255,.16);
  transition: color 2s ease, text-shadow 2s ease;
}


/* --- Page layout: keep the letter correctly placed from the first screen --- */
html, body {
  min-height: 100%;
  height: auto;
}

.scene {
  display: block;
  min-height: 100svh;
  padding: clamp(24px, 4vh, 48px) 22px 40px;
}

.letter {
  width: min(100%, 780px);
  min-height: 0;
  margin: 0 auto;
  justify-content: flex-start;
}

.letter-header {
  width: 100%;
  min-height: 28px;
}

.poem-wrap {
  width: min(100%, 650px);
  margin: clamp(38px, 7vh, 72px) auto 36px;
}

.poem {
  width: 100%;
  max-height: none;
  height: auto;
  overflow: visible;
  padding: 8px 14px 28px;
  scroll-padding-block: 0;
  text-align: center;
}

.signature {
  margin-top: 34px;
}

/* Cinematic final state: no collapsing container or layout jump. */
.letter.is-finale .poem {
  max-height: none;
  overflow: visible;
  height: auto;
}

.letter.is-finale .verse-line {
  opacity: .12;
  transform: translate3d(0, 8px, 0) scale(.99);
  filter: blur(2.5px);
  color: #fff;
  text-shadow: none;
  transition:
    opacity 1.7s ease,
    transform 1.9s cubic-bezier(.2, .7, .2, 1),
    filter 1.7s ease,
    text-shadow 1.8s ease;
}

.letter.is-finale .verse-line.finale-lit {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  text-shadow:
    0 0 8px rgba(255,255,255,.30),
    0 0 20px rgba(245,248,255,.18);
}

/* Give the last full-poem view enough breathing room on narrow screens too. */
@media (max-width: 600px) {
  .scene { padding: 22px 16px 32px; }
  .poem-wrap { margin-top: 36px; }
  .verse-line { font-size: clamp(18px, 5vw, 23px); }
}


/* --- Final spacing and alignment refinements --- */
.cover {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.verse-line {
  margin-bottom: 11px;
}

.verse-line.verse-stanza-start {
  margin-top: 42px;
}

@media (max-width: 600px) {
  .cover {
    margin-left: auto;
    margin-right: auto;
  }
  .verse-line {
    margin-bottom: 10px;
  }
  .verse-line.verse-stanza-start {
    margin-top: 38px;
  }
}


/* --- Фоновое видео (loop) --- */
.bg-video {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--bg);
  pointer-events: none;
}
.bg-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* заполняет экран без искажений */
}
/* Затемнение, чтобы текст оставался читаемым. 0 = без затемнения, 1 = чёрный */
.bg-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(3,4,5,.35) 0%, rgba(3,4,5,.7) 100%),
    rgba(3,4,5,.35);
}

/* Начальная тьма: после «Открыть» плавно рассеивается, и видео как бы выходит из тени */
.bg-dark {
  position: absolute;
  inset: 0;
  background: #030405;
  opacity: 1;
  transition: opacity 7s cubic-bezier(.35, .1, .25, 1); /* 7s = длительность проявления */
}
.bg-video.is-lit .bg-dark { opacity: 0; }