@import url('https://fonts.googleapis.com/css2?family=Ruslan+Display&family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --wine: #6E1414;
  --wine-dark: #3A0A0A;
  --bordo: #891010;
  --gold: #C9A24B;
  --gold-deep: #C0870F;
  --cream: #F3ECD8;
  --charcoal: #1A1512;
  --red-accent: #C41E2A;
  --font: 'Old Standard TT', 'Georgia', serif;
  --font-gothic: 'Ruslan Display', 'Old Standard TT', serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  font-family: var(--font);
  overflow: hidden;
}

#deck {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* ---------------------------------------------------------------- slide -- */
.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.99);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s;
  color: var(--cream);
  text-align: center;
  padding: 0;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0s;
  z-index: 5;
}

.slide.bg-cover   { background-image: url('assets/bulgakov_titul_3.png'); }
.slide.bg-divider { background-image: url('assets/bulgakov_backdrop_divider.png'); }
.slide.bg-content { background-image: url('assets/bulgakov_backdrop_content.png'); }

/* ------------------------------------------------------- interactive title -- */
.interactive-title {
  font-family: var(--font-gothic);
  font-weight: 400;
  color: var(--cream);
  font-size: 5vw;
  line-height: 1.25;
  max-width: 82%;
  letter-spacing: 0.01em;
  text-shadow: 0 0 28px rgba(201,162,75,0.35);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s ease 0.15s, transform 0.9s ease 0.15s;
}
.slide.active .interactive-title { opacity: 1; transform: translateY(0); }

.title-rule {
  width: 0; height: 3px;
  background: var(--gold);
  margin: 2.6vh auto 0;
  transition: width 0.9s cubic-bezier(.2,.8,.2,1) 0.5s;
}
.slide.active .title-rule { width: 7vw; }

/* -------------------------------------------------------------- slot badge -- */
.slot-badge {
  position: absolute;
  top: 4vh; left: 4vw;
  width: 2.6vw; height: 2.6vw;
  min-width: 34px; min-height: 34px;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-style: italic;
  color: var(--gold-deep);
  font-size: 0.9vw;
  opacity: 0.6;
}

/* ---------------------------------------------------------- placeholder frame -- */
.placeholder-frame {
  border: 2.5px dashed var(--gold-deep);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2vh 1.5vw;
  color: var(--gold-deep);
  text-align: center;
}
.placeholder-frame .ph-label {
  font-style: italic;
  font-size: 1.1vw;
  margin-bottom: 0.8vh;
}
.placeholder-frame .ph-sub {
  font-size: 0.8vw;
  opacity: 0.85;
}

/* -------------------------------------------------------------- reveal fragment -- */
.reveal-frag {
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.reveal-frag.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.reveal-box {
  border: 2px solid var(--wine);
  background: var(--cream);
  color: var(--wine);
  border-radius: 4px;
  padding: 1.4vh 1.6vw;
  font-size: 1.15vw;
}
.reveal-box.gold-frame {
  border: 2.5px dashed var(--gold-deep);
  background: transparent;
  color: var(--gold-deep);
  font-style: italic;
}

/* --------------------------------------------------------- guest-slot layout -- */
.guest-photo-frame {
  width: 42vw;
  height: 56vh;
}
.guest-answer-wrap {
  position: absolute;
  bottom: 6vh; left: 25vw; right: 25vw;
}

/* ------------------------------------------------------------- word-card -- */
.word-card-word {
  font-family: var(--font-gothic);
  font-weight: 400;
  font-size: 4.6vw;
  color: var(--cream);
  margin-bottom: 4vh;
  text-shadow: 0 0 24px rgba(201,162,75,0.3);
}

/* ------------------------------------------------------ chbd layout -- */
.chbd-row {
  display: flex;
  gap: 2.4vw;
  width: 88%;
  align-items: center;
  justify-content: center;
}
.chbd-media {
  position: relative;
  width: 34vw;
  height: 46vh;
  flex-shrink: 0;
}
.chbd-photo, .chbd-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  transition: opacity 0.6s ease;
}
.chbd-video {
  opacity: 0;
  pointer-events: none;
  background: var(--charcoal);
}
.chbd-media.playing .chbd-photo { opacity: 0; pointer-events: none; }
.chbd-media.playing .chbd-video { opacity: 1; pointer-events: auto; }

.chbd-options {
  display: flex;
  flex-direction: column;
  gap: 2.2vh;
  width: 34vw;
}
.chbd-option {
  border: 2.5px solid var(--gold-deep);
  border-radius: 4px;
  padding: 2vh 2vw;
  color: var(--cream);
  font-size: 1.3vw;
  background: rgba(26,21,18,0.35);
  cursor: pointer;
  transition: opacity 0.5s ease, transform 0.5s ease, max-height 0.5s ease, padding 0.5s ease, margin 0.5s ease, border-color 0.2s ease;
  max-height: 12vh;
  overflow: hidden;
}
.chbd-option:hover { border-color: var(--gold); background: rgba(26,21,18,0.55); }
.chbd-option.gone {
  opacity: 0;
  transform: scale(0.85);
  max-height: 0;
  padding-top: 0; padding-bottom: 0;
  margin-top: 0; margin-bottom: 0;
  border-width: 0;
  pointer-events: none;
}
.chbd-option.shake { animation: shake 0.4s ease; border-color: var(--red-accent); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* -------------------------------------------------------------------- nav -- */
#nav-arrow-prev, #nav-arrow-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 3.2vw;
  height: 3.2vw;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--gold);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4vw;
  cursor: pointer;
  z-index: 50;
  transition: background 0.2s ease, opacity 0.2s ease;
  opacity: 0.55;
}
#nav-arrow-prev:hover, #nav-arrow-next:hover { background: rgba(0,0,0,0.6); opacity: 1; }
#nav-arrow-prev { left: 1.2vw; }
#nav-arrow-next { right: 1.2vw; }

#slide-counter {
  position: fixed;
  bottom: 1.4vh;
  right: 1.6vw;
  color: var(--gold);
  font-size: 0.85vw;
  letter-spacing: 0.05em;
  background: rgba(0,0,0,0.35);
  padding: 0.5vh 1vw;
  border-radius: 20px;
  border: 1px solid rgba(201,162,75,0.4);
  z-index: 50;
}

#fs-toggle {
  position: fixed;
  bottom: 1.4vh;
  left: 1.6vw;
  color: var(--gold);
  font-size: 0.85vw;
  background: rgba(0,0,0,0.35);
  padding: 0.5vh 1vw;
  border-radius: 20px;
  border: 1px solid rgba(201,162,75,0.4);
  z-index: 50;
  cursor: pointer;
}

#progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--gold);
  z-index: 50;
  transition: width 0.4s ease;
}

@media (max-width: 900px) {
  .interactive-title { font-size: 8vw; }
  .word-card-word { font-size: 8vw; }
  .chbd-row { flex-direction: column; }
  .chbd-media { width: 84vw; height: 30vh; }
  .chbd-options { width: 84vw; }
  .chbd-option { font-size: 3.6vw; }
  .guest-photo-frame { width: 84vw; height: 42vh; }
  .guest-answer-wrap { left: 8vw; right: 8vw; }
}