:root {
  --bg: #000000;
  --paper: #f5f1e8;
  --ink: rgba(245, 241, 232, 0.92);
  --muted: rgba(245, 241, 232, 0.62);
  --hairline: rgba(245, 241, 232, 0.12);

  --maxw: 44rem;
  --gutter: clamp(18px, 5vw, 44px);
  --radius: 18px;

  --serif: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --transition-fast: 220ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-med: 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
}

/* полноэкранный чёрный интро-экран */
.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.intro-inner {
  width: min(var(--maxw), 100%);
  text-align: left;
}

.intro-title {
  margin: 0 0 28px;
  font-family: var(--serif);
  font-size: clamp(28px, 4.3vw, 40px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.intro-text {
  margin: 0;
  margin-top: 0;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
}

.intro-controls {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.intro-audio-button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(245, 241, 232, 0.28);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  pointer-events: auto;
  transition: transform var(--transition-fast), border-color var(--transition-fast),
    opacity var(--transition-fast), box-shadow var(--transition-fast);
}

/* play больше не зависит от печати интро */

.intro-next-button {
  display: none;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  transition: border-color var(--transition-fast), transform var(--transition-fast),
    opacity var(--transition-fast);
}

/* кнопка «дальше» появляется только после старта музыки */
body.intro-next-ready .intro-next-button {
  display: inline-flex;
  opacity: 0;
  transform: translateY(6px);
  animation: intro-next-reveal 520ms cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes intro-next-reveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* подчёркиваем, что плей — главный CTA: лёгкий пульс до нажатия */
@keyframes intro-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  70% {
    transform: scale(1.06);
    opacity: 0.82;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.intro-audio-button {
  animation: intro-pulse 1.6s ease-out infinite;
}

.intro-audio-button.intro-audio-button--active {
  animation: none;
}

.intro-audio-button:not(.intro-audio-button--active) {
  border-color: rgba(245, 241, 232, 0.38);
}

/* когда интро активно, основную оболочку не показываем */
body.intro-active .app-shell {
  visibility: hidden;
}

/* уважение к настройке ОС "уменьшить анимации" */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

.app-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  flex: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.app-footer {
  display: none;
}

/* убраны логотип/глава/кнопка звука во имя максимального погружения */

.stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: calc(env(safe-area-inset-top) + 14px) var(--gutter)
    calc(env(safe-area-inset-bottom) + 18px);
}

.slide-card {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  min-height: calc(100svh - (env(safe-area-inset-top) + env(safe-area-inset-bottom) + 32px));
  border-radius: 0;
  background: transparent;
  overflow: visible;
  display: flex;
  flex-direction: column;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: opacity var(--transition-med), transform var(--transition-med);
}

.slide-media {
  position: relative;
  overflow: hidden;
  margin-top: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition-med), transform var(--transition-med);
}

.slide-media[hidden] {
  display: none !important;
}

.slide-media.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.slide-media::before {
  display: none;
}

.slide-media__inner {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(44vh, 320px);
  position: relative;
  overflow: hidden;
}

.slide-media__video,
.slide-media__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slide-media__overlay {
  display: none;
}

.slide-content {
  position: relative;
  padding: clamp(9vh, 13vh, 16vh) 0 clamp(3vh, 4.5vh, 6vh);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 18px;
}

.slide-meta {
  display: none;
}

.slide-index {
  font-family: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
  font-size: 18px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245, 245, 255, 0.8);
}

.slide-divider {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0)
  );
}

.slide-count {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 245, 255, 0.6);
}

.slide-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(26px, 5.6vw, 40px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  max-width: 18ch;
  transition: opacity var(--transition-med), transform var(--transition-med);
}

.slide-text {
  margin: 0;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.9;
  color: var(--muted);
  max-width: 40em;
  white-space: pre-wrap;
  transition: opacity var(--transition-med), transform var(--transition-med);
}

.audio-shell {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.audio-shell[hidden] {
  display: none !important;
}

/* экран 2: сначала только кнопка музыки, текст и медиа скрыты */
body.audio-gate .slide-title,
body.audio-gate .slide-text,
body.audio-gate .slide-media {
  display: none;
}

body.audio-gate .audio-shell {
  justify-content: center;
  margin-top: 0;
}

body.audio-gate.audio-gate-open .slide-title,
body.audio-gate.audio-gate-open .slide-text {
  display: block;
}

body.audio-gate.audio-gate-open .audio-shell {
  justify-content: flex-start;
  margin-top: 22px;
}

.audio-button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast),
    opacity var(--transition-fast), box-shadow var(--transition-fast);
}

.audio-icon {
  position: relative;
  width: 14px;
  height: 14px;
}

.audio-icon--play::before {
  content: "";
  position: absolute;
  inset: 2px 3px;
  border-radius: 4px;
  background: var(--paper);
  clip-path: polygon(20% 10%, 90% 50%, 20% 90%);
}

.audio-icon--pause::before,
.audio-icon--pause::after {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 999px;
  background: var(--paper);
}

.audio-icon--pause::before {
  left: 2px;
}

.audio-icon--pause::after {
  right: 2px;
}

.audio-meta {
  display: none;
}

.audio-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.audio-label:empty {
  display: none;
}

@keyframes audio-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  70% {
    transform: scale(1.06);
    opacity: 0.85;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.audio-button--hint {
  animation: audio-pulse 1.2s ease-out infinite;
  border-color: rgba(245, 241, 232, 0.9);
  box-shadow: 0 0 0 0 rgba(245, 241, 232, 0.55), 0 0 0 1px rgba(245, 241, 232, 0.18) inset;
  background: rgba(245, 241, 232, 0.04);
}

/* на втором экране подчёркиваем кнопку музыки ещё сильнее */
body.audio-gate .audio-button {
  animation: audio-pulse 1.1s ease-out infinite;
  box-shadow: 0 0 0 2px rgba(245, 241, 232, 0.35);
  border-color: rgba(245, 241, 232, 0.7);
}

body.has-video-playing .slide-title,
body.has-video-playing .slide-text {
  opacity: 0.84;
}

.slide-controls {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transition-med), transform var(--transition-med);
}

.nav-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  overflow: hidden;
  background: transparent;
  color: var(--ink);
  transition: transform var(--transition-fast), border-color var(--transition-fast),
    opacity var(--transition-fast);
}

.nav-button--primary {
  border-color: rgba(245, 241, 232, 0.24);
}

.nav-button--primary:hover {
  transform: translateY(-1px);
  border-color: rgba(245, 241, 232, 0.34);
}

.nav-button--primary:active {
  transform: translateY(0);
}

.nav-button--secondary {
  opacity: 0.88;
}

.nav-button--secondary:hover {
  transform: translateY(-1px);
  opacity: 1;
  border-color: rgba(245, 241, 232, 0.24);
}

.nav-button--secondary:active {
  transform: translateY(0);
}

.app-footer {
  display: none;
}

.type-serif {
  font-family: var(--serif);
}

.type-sans {
  font-family: var(--sans);
}

.typing {
  overflow: hidden;
  white-space: pre-wrap;
}

.slide-card {
  opacity: 0;
  transform: translateY(16px) scale(0.99);
  transition: opacity var(--transition-med), transform var(--transition-med);
}

.app[data-ready="true"] .slide-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.app[data-transition="true"] .slide-card {
  opacity: 0;
  transform: translateY(-10px) scale(0.99);
}

@media (max-width: 640px) {
  .intro-inner {
    padding-block: 14vh 10vh;
  }

  .slide-content {
    /* на маленьких экранах меньше "пустого воздуха", меньше риск обрезания текста */
    padding: clamp(7vh, 10vh, 13vh) 0 clamp(3vh, 4vh, 5vh);
  }

  .intro-controls {
    margin-top: 40px;
  }
}

@media (max-width: 900px) {
  .slide-media__inner {
    max-height: min(42vh, 280px);
  }
}

@media (max-width: 720px) {
  .slide-media {
    margin-top: 20px;
  }

  .slide-controls {
    margin-top: 24px;
  }
}

@media (max-width: 480px) {
  .slide-title {
    font-size: 24px;
    letter-spacing: 0.09em;
  }

  .slide-text {
    font-size: 14px;
  }

  .nav-button {
    padding-inline: 14px;
  }
}