/* /launcher-update/ — .menu-reel и .rd-body берутся из ../hud-update/hud-update.css.
   Здесь только хиро: скриншот лаунчера как стеклянная призма (prism/prism-scene.js). */

.lp-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  /* nav — sticky и занимает 84px в потоке: хиро уходит под него */
  margin-top: -84px;
  overflow: hidden;
  isolation: isolate;
  /* сцена со светом — тёмная в обеих темах, как тёмная комната с призмой */
  background: #050505;
}
/* студийный фон референса: тёмно-серый, светлее у стекла, с виньеткой */
.lp-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 55% at 50% 52%, #1c1c1e 0%, #121213 45%, transparent 80%),
    radial-gradient(120% 90% at 50% 50%, #0b0b0c 40%, #030303 100%);
}

.lp-stage {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  /* заглушка стоит ровно там, где сцена (prism-scene.js) рисует стекло: по центру хиро,
     иначе при подмене на канвас лаунчер «переезжает» */
}
.lp-glass {
  /* скриншот 1427×870: влезает и по ширине, и по высоте */
  width: min(50vw, 860px, (100svh - 260px) * 1.64);
  aspect-ratio: 1427 / 870;
  border-radius: calc(min(50vw, 860px, (100svh - 260px) * 1.64) / 1427 * 16);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9);
  animation: lp-rise 1.2s cubic-bezier(.2, .8, .2, 1) .1s backwards;
}
.lp-glass img { display: block; width: 100%; height: 100%; border-radius: inherit; }

/* сцена v-prism (prism/prism-scene.js): свой канвас на весь хиро; скриншот-заглушка
   остаётся, пока WebGL не поднялся или недоступен */
.lp-prism { position: absolute; inset: 0; z-index: 1; }
.lp-prism canvas { display: block; opacity: 0; transition: opacity .6s ease-out; }
.lp-hero.has-gl .lp-prism canvas { opacity: 1; }
.lp-hero.has-gl .lp-stage { visibility: hidden; transition: visibility 0s .6s; }
@keyframes lp-rise { from { opacity: 0; } to { opacity: 1; } }

/* на узких экранах сцена опускает стекло на 0.5 ед. × 50 px */
@media (max-width: 600px) { .lp-stage { padding-top: 50px; } }
@media (max-width: 767px) {
  .lp-glass {
    width: min(90vw, (100svh - 220px) * 1.64);
    border-radius: calc(min(90vw, (100svh - 220px) * 1.64) / 1427 * 16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-glass { animation: none; }
}


/* логотип HolyWorld перед заголовком «Играем на HolyWorld» */
.lp-hw-title { display: flex; align-items: center; gap: .4em; }
.lp-hw-logo { width: 1.5em; height: auto; flex: none; }