/* ===== ТОЧКА — стили фильма ===== */
:root {
  --gold: #d4af37;
  --gold-light: #ffe89a;
  --bg: #050505;
  --text: #eae7e0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  cursor: default;
}

/* ===== Кнопка назад ===== */
.film-back {
  position: fixed;
  top: 14px; left: 14px;
  z-index: 40;
  color: rgba(212,175,55,.7);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 6px 12px;
  border: 1px solid rgba(212,175,55,.3);
  border-radius: 40px;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
  transition: all .2s;
  opacity: 0;
  transform: translateY(-8px);
}
.film-ready .film-back { opacity: 1; transform: translateY(0); }
.film-back:hover {
  color: var(--gold-light);
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(212,175,55,.3);
}

/* ===== Слои ===== */
#filmFx {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
#filmScenes {
  position: fixed;
  inset: 0;
  z-index: 5;
}
.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
}
.scene.active { opacity: 1; }
.scene svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ===== Виньетка ===== */
.film-vignette {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%);
}

/* ===== Тексты (титры) ===== */
#filmCaptions {
  position: fixed;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  z-index: 20;
  max-width: 80vw;
  text-align: center;
  font-size: clamp(16px, 2.4vw, 26px);
  font-weight: 300;
  letter-spacing: 2px;
  line-height: 1.5;
  color: var(--gold-light);
  text-shadow: 0 0 20px rgba(212,175,55,.5), 0 2px 8px rgba(0,0,0,.8);
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
  min-height: 2em;
}
#filmCaptions.show { opacity: 1; }
#filmCaptions.boot-hint {
  font-size: clamp(14px, 1.8vw, 18px);
  letter-spacing: 4px;
  color: rgba(212,175,55,.6);
  animation: bootPulse 2.5s ease-in-out infinite;
}
@keyframes bootPulse {
  0%,100% { opacity: .3; }
  50% { opacity: .9; }
}

/* ===== UI ===== */
.film-ui {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  gap: 12px;
}
.film-ui button {
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(212,175,55,.4);
  color: var(--gold-light);
  font: 300 13px Inter, system-ui, sans-serif;
  letter-spacing: 1px;
  padding: 8px 18px;
  border-radius: 40px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: all .2s;
}
.film-ui button:hover {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(212,175,55,.35);
  color: #fff;
}
.film-ui button[hidden] { display: none; }

/* ===== Анимации декораций (лёгкое движение) ===== */
.scene.active .dust circle,
.scene.active .dust-final circle {
  animation: dustFloat 8s ease-in-out infinite alternate;
}
@keyframes dustFloat {
  from { transform: translateY(0); opacity: .15; }
  to { transform: translateY(-14px); opacity: .35; }
}
.scene.active .map-compass { animation: compassSpin 30s linear infinite; transform-origin: center; }
@keyframes compassSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.scene.active .train { animation: trainBob 1.2s ease-in-out infinite; }
@keyframes trainBob {
  0%,100% { transform: translate(760px,380px) rotate(0); }
  50% { transform: translate(760px,380px) rotate(.4deg); }
}
.scene.active .passenger { animation: passengerSway 3s ease-in-out infinite; }
@keyframes passengerSway {
  0%,100% { transform: translate(165px,80px) rotate(0); }
  50% { transform: translate(165px,80px) rotate(1.5deg); }
}
.scene.active .cat-sit { animation: catTail 2.4s ease-in-out infinite; }
@keyframes catTail {
  0%,100% { transform: translate(300px,540px) rotate(0); }
  50% { transform: translate(300px,540px) rotate(2deg); }
}
.scene.active .pigeon { animation: pigeonPeck 3s ease-in-out infinite; }
@keyframes pigeonPeck {
  0%,100% { transform: translate(520px,520px) translateY(0); }
  50% { transform: translate(520px,520px) translateY(-4px); }
}
.scene.active .passing { animation: passingMove 6s linear infinite; }
@keyframes passingMove {
  from { transform: translateX(0); }
  to { transform: translateX(-200px); }
}
.scene.active .far-lights { animation: farLights 4s linear infinite; }
@keyframes farLights {
  from { transform: translateX(0); opacity: .3; }
  to { transform: translateX(-120px); opacity: .6; }
}
.scene.active .passenger-sit { animation: sitSway 2.5s ease-in-out infinite; }
@keyframes sitSway {
  0%,100% { transform: translate(700px,300px) rotate(0); }
  50% { transform: translate(700px,300px) rotate(1deg); }
}
.scene.active .birds { animation: birdsFly 12s linear infinite; }
@keyframes birdsFly {
  from { transform: translateX(0); }
  to { transform: translateX(60px); }
}
.scene.active .mar-lamps { animation: lampFlicker 3s ease-in-out infinite; }
@keyframes lampFlicker {
  0%,100% { opacity: .8; }
  50% { opacity: 1; }
}
.scene.active .spices { animation: spiceGlow 4s ease-in-out infinite; }
@keyframes spiceGlow {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}
.scene.active .walker { animation: walkerWalk 8s ease-in-out infinite; }
@keyframes walkerWalk {
  0%,100% { transform: translate(640px,560px) translateX(0); }
  50% { transform: translate(640px,560px) translateX(30px); }
}
.scene.active .flags { animation: flagWave 3s ease-in-out infinite; }
@keyframes flagWave {
  0%,100% { transform: rotate(0); }
  50% { transform: rotate(1.2deg); }
}
.scene.active .bells { animation: bellRing 2s ease-in-out infinite; }
@keyframes bellRing {
  0%,100% { transform: rotate(0); }
  25% { transform: rotate(-4deg); }
  75% { transform: rotate(4deg); }
}
.scene.active .meditator { animation: meditate 6s ease-in-out infinite; }
@keyframes meditate {
  0%,100% { transform: translate(640px,560px) scale(1); }
  50% { transform: translate(640px,560px) scale(1.02); }
}
.scene.active .palms { animation: palmSway 5s ease-in-out infinite; }
@keyframes palmSway {
  0%,100% { transform: rotate(0); }
  50% { transform: rotate(1deg); }
}
.scene.active .boat { animation: boatBob 4s ease-in-out infinite; }
@keyframes boatBob {
  0%,100% { transform: translate(700px,560px) rotate(0); }
  50% { transform: translate(700px,560px) rotate(2deg); }
}
.scene.active .gull { animation: gullFly 10s linear infinite; }
@keyframes gullFly {
  from { transform: translateX(0); }
  to { transform: translateX(80px); }
}
.scene.active .sitter { animation: sitterBreathe 5s ease-in-out infinite; }
@keyframes sitterBreathe {
  0%,100% { transform: translate(640px,470px) scale(1); }
  50% { transform: translate(640px,470px) scale(1.015); }
}
.scene.active .city-lights { animation: cityLights 5s linear infinite; }
@keyframes cityLights {
  from { transform: translateX(0); opacity: .4; }
  to { transform: translateX(-100px); opacity: .7; }
}
.scene.active .sleeper { animation: sleeperBreath 4s ease-in-out infinite; }
@keyframes sleeperBreath {
  0%,100% { transform: translate(700px,430px) scale(1); }
  50% { transform: translate(700px,430px) scale(1.01); }
}
.scene.active .arriver { animation: arriverWalk 6s ease-in-out infinite; }
@keyframes arriverWalk {
  0%,100% { transform: translate(500px,540px) translateX(0); }
  50% { transform: translate(500px,540px) translateX(20px); }
}
.scene.active .dog { animation: dogTail 2s ease-in-out infinite; }
@keyframes dogTail {
  0%,100% { transform: translate(760px,540px) rotate(0); }
  50% { transform: translate(760px,540px) rotate(2deg); }
}
.scene.active .flowers { animation: flowerSway 3s ease-in-out infinite; }
@keyframes flowerSway {
  0%,100% { transform: rotate(0); }
  50% { transform: rotate(2deg); }
}
.scene.active .cat-fence { animation: catFenceTail 2.5s ease-in-out infinite; }
@keyframes catFenceTail {
  0%,100% { transform: translate(120px,500px) rotate(0); }
  50% { transform: translate(120px,500px) rotate(2deg); }
}
.scene.active .fireflies { animation: fireflyGlow 3s ease-in-out infinite; }
@keyframes fireflyGlow {
  0%,100% { opacity: .4; }
  50% { opacity: 1; }
}
.scene.active .beholder { animation: beholderBreathe 5s ease-in-out infinite; }
@keyframes beholderBreathe {
  0%,100% { transform: translate(560px,540px) scale(1); }
  50% { transform: translate(560px,540px) scale(1.015); }
}
.scene.active .silence-halo,
.scene.active .final-halo { animation: haloBreathe 4s ease-in-out infinite; }
@keyframes haloBreathe {
  0%,100% { opacity: .6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* ===== Адаптив ===== */
@media (max-width: 860px) {
  #filmCaptions {
    bottom: 10%;
    font-size: clamp(14px, 3.6vw, 20px);
    letter-spacing: 1px;
    max-width: 90vw;
  }
  .film-back { top: 8px; left: 8px; font-size: 11px; padding: 4px 10px; }
  .film-ui { bottom: 16px; }
  .film-ui button { font-size: 11px; padding: 6px 14px; }
}

/* ===== prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
  .scene.active * { animation: none !important; }
  #filmCaptions { transition: none; }
}