/*  ============================================================
 *  BOOT — загрузочные экраны перехода на страницу игры
 *  ============================================================
 *  Разметку создаёт assets/js/boot.js. Каждая игра получает
 *  свой класс boot--<код> и своё оформление: общего тут только
 *  сам слой поверх страницы.
 *  ============================================================ */

.boot {
  position: fixed;
  inset: 0;
  z-index: 9000;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.boot.is-on  { opacity: 1; }
.boot.is-out { opacity: 0; transition: opacity 0.22s ease; }

.boot__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/*  ==========================================================
 *  CYBERPUNK 2077 — взлом сети
 *  ========================================================== */

.boot--cp { background: #07070a; }

/* Жёлтая развёртка пробегает сверху вниз. */
.boot-cp__sweep {
  position: absolute;
  inset: 0 0 auto;
  height: 34%;
  background: linear-gradient(180deg,
    transparent, rgba(252, 238, 10, 0.16) 60%, rgba(252, 238, 10, 0.5));
  animation: cpSweep 1.5s cubic-bezier(0.5, 0, 0.3, 1) forwards;
}

@keyframes cpSweep {
  from { transform: translateY(-120%); }
  to   { transform: translateY(420%); }
}

/* Глитч-полосы, рвущие экран. */
.boot-cp__bars {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 18%, rgba(0, 240, 255, 0.5) 18.4%, transparent 19%),
    linear-gradient(180deg, transparent 47%, rgba(255, 0, 85, 0.45) 47.5%, transparent 48.2%),
    linear-gradient(180deg, transparent 71%, rgba(252, 238, 10, 0.4) 71.4%, transparent 72%);
  animation: cpBars 0.26s steps(2) infinite;
}

@keyframes cpBars {
  0%   { transform: translateX(0);    opacity: 0.9; }
  50%  { transform: translateX(-9px); opacity: 0.4; }
  100% { transform: translateX(6px);  opacity: 0.85; }
}

.boot-cp__hud {
  position: absolute;
  left: clamp(20px, 7vw, 90px);
  bottom: clamp(50px, 16vh, 140px);
  font-family: 'Share Tech Mono', monospace;
  color: #fcee0a;
}

.boot-cp__line {
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  color: #00f0ff;
  animation: cpType 0.9s steps(22) forwards;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
}

@keyframes cpType { to { width: 24ch; } }

.boot-cp__target {
  margin-top: 0.4rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(2rem, 7vw, 4.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-shadow: 3px 0 rgba(255, 0, 85, 0.75), -3px 0 rgba(0, 240, 255, 0.75);
  animation: cpShift 0.34s steps(2) infinite;
}

@keyframes cpShift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-3px) skewX(-1.5deg); }
}

.boot-cp__pct {
  margin-top: 0.3rem;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  color: rgba(252, 238, 10, 0.75);
}

/*  ==========================================================
 *  ELDEN RING — руна зажигается
 *  ========================================================== */

.boot--er {
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(80, 48, 12, 0.5), transparent 70%),
    #060402;
}

.boot-er__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(60px, 18vh, 150px);
  text-align: center;
}

.boot-er__title span {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: clamp(1.1rem, 3.4vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  background: linear-gradient(176deg, #f3d99b 10%, #d4a44c 55%, #8a6420);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  animation: erTitle 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

@keyframes erTitle {
  from { opacity: 0; letter-spacing: 0.9em; filter: blur(7px); }
  to   { opacity: 1; letter-spacing: 0.42em; filter: none; }
}

/*  ==========================================================
 *  HOLLOW KNIGHT — спуск в глубину
 *  ========================================================== */

.boot--hk {
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(18, 38, 64, 0.85), transparent 72%),
    #02050c;
}

.boot-hk__mask {
  position: absolute;
  left: 50%;
  top: 44%;
  width: clamp(90px, 15vw, 150px);
  transform: translate(-50%, -50%) scale(0.75);
  opacity: 0;
  animation: hkMask 1.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.boot-hk__mask svg { width: 100%; height: auto; }

.boot-hk__mask path {
  fill: #e6f3f8;
  filter: drop-shadow(0 0 30px rgba(127, 212, 232, 0.8));
}

.boot-hk__mask .eye { fill: #02050c; }

@keyframes hkMask {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
  55%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0.9; transform: translate(-50%, -54%) scale(1.06); }
}

.boot-hk__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(60px, 18vh, 140px);
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.3rem, 4vw, 2.3rem);
  font-weight: 300;
  letter-spacing: 0.24em;
  color: #e6f3f8;
  opacity: 0;
  animation: hkName 1.4s ease 0.5s forwards;
}

@keyframes hkName {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 0.85; transform: none; }
}

/*  ==========================================================
 *  STARFIELD — выход на орбиту
 *  ========================================================== */

.boot--sf {
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(22, 30, 44, 0.9), transparent 70%),
    #06080c;
}

.boot-sf__hud {
  position: absolute;
  left: 50%;
  bottom: clamp(50px, 16vh, 130px);
  transform: translateX(-50%);
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
}

.boot-sf__id {
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  color: #9fb4c7;
  opacity: 0;
  animation: sfIn 0.8s ease 0.25s forwards;
}

.boot-sf__readout {
  margin-top: 0.45rem;
  font-size: 2.1rem;
  font-weight: 500;
  color: #ff7a3d;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  animation: sfIn 0.8s ease 0.45s forwards;
}

.boot-sf__readout span {
  font-size: 0.32em;
  letter-spacing: 0.3em;
  color: #47535f;
}

@keyframes sfIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/*  ==========================================================
 *  FIRE EMBLEM — полотно ткётся (единственная светлая сцена)
 *  ========================================================== */

.boot--fe {
  background:
    radial-gradient(70% 60% at 50% 40%, rgba(143, 111, 214, 0.22), transparent 70%),
    #f4efe4;
}

.boot-fe__sigil {
  position: absolute;
  left: 50%;
  top: 46%;
  width: clamp(80px, 12vw, 130px);
  transform: translate(-50%, -50%);
}

.boot-fe__sigil svg { width: 100%; height: auto; overflow: visible; }

.boot-fe__sigil rect {
  fill: none;
  stroke: #5b4a9e;
  stroke-width: 2;
  stroke-dasharray: 224;
  stroke-dashoffset: 224;
  animation: feDraw 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

.boot-fe__sigil circle {
  fill: #e0b457;
  opacity: 0;
  animation: feGem 0.9s cubic-bezier(0.34, 1.6, 0.64, 1) 1s forwards;
}

@keyframes feDraw { to { stroke-dashoffset: 0; } }

@keyframes feGem {
  from { opacity: 0; transform-origin: center; }
  to   { opacity: 1; }
}

.boot-fe__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(60px, 18vh, 140px);
  text-align: center;
  font-family: 'Marcellus SC', serif;
  font-size: clamp(1.1rem, 3.4vw, 1.9rem);
  letter-spacing: 0.2em;
  color: #2a2140;
  opacity: 0;
  animation: feName 1.1s ease 0.75s forwards;
}

@keyframes feName {
  from { opacity: 0; letter-spacing: 0.5em; }
  to   { opacity: 1; letter-spacing: 0.2em; }
}

/*  ==========================================================
 *  Запасной вариант
 *  ========================================================== */

.boot--plain {
  display: grid;
  place-items: center;
  background: #06070d;
}

.boot-plain__name {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(1.4rem, 5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent, #fff);
  animation: hkName 0.7s ease forwards;
}

/*  ==========================================================
 *  Прибытие: страница игры проявляется, а не возникает резко
 *  ========================================================== */

@media (prefers-reduced-motion: no-preference) {
  body.arrive {
    animation: arrive 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@keyframes arrive {
  from { opacity: 0; transform: scale(1.015); }
  to   { opacity: 1; transform: none; }
}