/* ============================================================
   MiraStreet — заставка: 3D-комната с телевизором MIRA TV.
   Вся сцена рисуется на WebGL-канвасе (js/splash.js),
   здесь — только слои проявления и вспышки.
   ============================================================ */

#splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #050507;
  overflow: hidden;
}
#splash.fade-out {
  opacity: 0;
  transition: opacity 0.42s ease-out;
  pointer-events: none;
}

#splash-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* чёрная пелена: комната проявляется из темноты */
#splash-veil {
  position: absolute;
  inset: 0;
  background: #050507;
  opacity: 1;
  pointer-events: none;
}
#splash-veil.lift {
  opacity: 0;
  /* короче, чем раньше: комнату теперь проявляет разгорающаяся лампа,
     а пелена только снимает стартовую черноту */
  transition: opacity 0.75s ease-out;
}

/* Отблеск от включившегося кинескопа. Слабый нарочно: яркую вспышку
   во весь экран перебивает сам кинескоп — у него теперь своя
   разворачивающаяся строка, и белая заливка её просто съедала. */
#splash-flash {
  position: absolute;
  inset: 0;
  background: #dfe4ee;
  opacity: 0;
  pointer-events: none;
}
#splash-flash.on { animation: splash-flash-on 0.35s ease-out; }
@keyframes splash-flash-on {
  0% { opacity: 0; }
  25% { opacity: 0.16; }
  100% { opacity: 0; }
}

/* Подсказка: клик работал и раньше, но об этом никто не знал */
#splash-skip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(26px, env(safe-area-inset-bottom));
  text-align: center;
  font-family: var(--font-sys);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: rgba(201, 201, 204, 0.5);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
#splash-skip.on { opacity: 1; }

/* Выключение кинескопа: кадр схлопывается в полосу, полоса — в точку.
   Канвас к этому моменту занят одним экраном, поэтому сжимать можно
   его целиком; вокруг остаётся фон #splash, а не сайт. */
#splash-canvas.collapse {
  transform: scaleY(0.006);
  transition: transform 0.26s cubic-bezier(0.6, 0, 0.9, 0.35);
}
#splash-line {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: #eef2fb;
  box-shadow: 0 0 18px rgba(220, 232, 255, 0.85);
  opacity: 0;
  transform: scaleX(0);
  pointer-events: none;
}
#splash-line.on {
  animation: splash-collapse 0.42s cubic-bezier(0.5, 0, 0.9, 0.4) forwards;
}
@keyframes splash-collapse {
  0%   { opacity: 0;   transform: scaleX(0.2); }
  38%  { opacity: 0.9; transform: scaleX(1); }
  70%  { opacity: 1;   transform: scaleX(0.16); }
  100% { opacity: 0;   transform: scaleX(0.005); }
}

@media (prefers-reduced-motion: reduce) {
  #splash-canvas.collapse { transition: none; }
  #splash-line.on { animation: none; }
}

/* ============================================================
   Заставка на сгенерированной комнате (js/splash-photo.js).
   Картинка лежит как фон кадра, живым в ней остаётся только экран:
   холст поверх, вырезанный маской формы экрана.
   ============================================================ */
#splash-room {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
#splash-zoom {
  position: absolute;
  inset: 0;
  will-change: transform;
}
/* фотография и наши плакаты гаснут вместе: они в комнате, их освещает
   тот же телевизор. Экран в этот слой не входит — он сам источник. */
#splash-lit {
  position: absolute;
  inset: 0;
  filter: brightness(0.22);
}
/* Плакаты приглушены: наши обложки заметно ярче и чище того, что
   висит на этой стене, и без этого они читаются наклейками. */
.splash-poster {
  position: absolute;
  filter: brightness(0.58) saturate(0.88) contrast(1.06) sepia(0.16);
}

#splash-room-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#splash-screen {
  position: absolute;
  /* координаты ставит js: картинка растянута по cover, и место экрана
     на странице зависит от размера окна */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
#splash-room.collapse {
  transform: scaleY(0.006);
  transition: transform 0.26s cubic-bezier(0.6, 0, 0.9, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  #splash-room.collapse { transition: none; }
}

/* Тёплое свечение лампочки. Живёт вне #splash-lit: комната гаснет вместе
   с телевизором, а лампа — нет, иначе в темноте остаётся холодный склеп. */
#splash-warm {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 1;
}

/* ============================================================
   Плёнка поверх трёхмерной комнаты: зерно и виньетка.
   Ровный рендер без них читается как компьютерная картинка —
   зерно и затемнение к краям сразу превращают его в кадр.
   ============================================================ */
#splash-grain {
  position: absolute;
  inset: -120px;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
  animation: splash-grain 0.5s steps(1) infinite;
}
@keyframes splash-grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-42px, 26px); }
  50%  { transform: translate(38px, -34px); }
  75%  { transform: translate(-28px, -22px); }
  100% { transform: translate(0, 0); }
}
#splash-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 95% at 50% 46%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.62) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 18%);
}
@media (prefers-reduced-motion: reduce) {
  #splash-grain { animation: none; }
}