/* Экран «Финал» (.p0-stage--finale). Подключается после frontend-demo/styles/presentation0.css.
   Базовые стили — законченный бит 2 «Финал», ранние биты — [data-beat].
   Сфера двигается свойствами translate/scale: transform остаётся эстафете. */

.p0-finale-floor { --floor-y: calc(var(--frame-top) + 36 * var(--su)); }

.p0-stage--finale .p0-sphere {
  z-index: 3;
  scale: .62;
  opacity: .35;
  transition: translate 1.4s var(--ease-out), scale 1.4s var(--ease-out), opacity 1.2s var(--ease);
}
.p0-stage--finale[data-beat="0"] .p0-sphere { scale: 1; opacity: 1; }
.p0-stage--finale[data-beat="1"] .p0-sphere { translate: calc(-16 * var(--su)) 0; scale: .86; opacity: 1; }
.p0-stage--finale[data-reduced="true"] .p0-sphere { translate: calc(-16 * var(--su)) 0; scale: .86; opacity: .3; }

/* --- Ясность -------------------------------------------------------------------- */

.p0-finale-numbers {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  top: calc(3.4 * var(--su));
  display: flex;
  justify-content: center;
  gap: calc(5 * var(--su));
  margin: 0;
}
.p0-finale-number {
  display: grid;
  justify-items: center;
  opacity: 0;
  transform: translateY(calc(1 * var(--su)));
  transition: opacity .8s var(--ease) calc(.6s + var(--k) * .3s), transform .8s var(--ease-out) calc(.6s + var(--k) * .3s);
}
.p0-finale-number dt { font: 500 calc(.8 * var(--su)) var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #bfae8a; }
.p0-finale-number dd { margin: 0; font-size: calc(3 * var(--su)); font-weight: 560; line-height: 1.05; color: #f5e6c4; }
.p0-stage--finale:is([data-beat="0"], [data-beat="1"]) .p0-finale-number { opacity: 1; transform: none; }
.p0-finale-protected {
  position: absolute;
  z-index: 6;
  left: calc(75 * var(--su));
  width: calc(22 * var(--su));
  top: calc(42.6 * var(--su));
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(.4 * var(--su));
  font-size: calc(.85 * var(--su));
  opacity: 0;
  transition: opacity .8s var(--ease) 1.2s;
}
.p0-finale-protected__title { flex-basis: 100%; display: flex; justify-content: flex-end; align-items: center; gap: .4em; font: 500 calc(.75 * var(--su)) var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #a8ecd6; }
.p0-finale-protected__title .ui-icon { width: 1.2em; height: 1.2em; }
.p0-finale-protected__block {
  padding: .2em .7em;
  border-radius: calc(.4 * var(--su));
  border: 1px solid #95c0b2aa;
  background: repeating-linear-gradient(135deg, #95c0b238 0 4px, #95c0b21a 4px 8px);
  color: #e6f2ee;
}
.p0-stage--finale:is([data-beat="0"], [data-beat="1"]) .p0-finale-protected { opacity: 1; }

/* --- Принципы ------------------------------------------------------------------- */

.p0-finale-principles {
  position: absolute;
  z-index: 6;
  left: calc(62 * var(--su));
  top: calc(8.5 * var(--su));
  width: calc(35 * var(--su));
  display: grid;
  gap: calc(1.1 * var(--su));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: principle;
}
.p0-finale-principle {
  counter-increment: principle;
  position: relative;
  display: grid;
  gap: calc(.4 * var(--su));
  padding: calc(1.2 * var(--su)) calc(1.4 * var(--su)) calc(1.2 * var(--su)) calc(4.2 * var(--su));
  border: 1px solid #e6cd9a4d;
  border-radius: calc(1.1 * var(--su));
  background: linear-gradient(135deg, #243231f2, #121a19f5 60%);
  box-shadow: inset 0 1px #f3e6c91f, 0 0 calc(3 * var(--su)) #e6cd9a12;
  opacity: 0;
  transform: translateX(calc(6 * var(--su)));
  transition: opacity .8s var(--ease) calc(var(--k) * .5s), transform .9s var(--ease-out) calc(var(--k) * .5s);
}
.p0-finale-principle::before {
  content: "0" counter(principle);
  position: absolute;
  left: calc(1.3 * var(--su));
  top: calc(1.2 * var(--su));
  font: 600 calc(1.2 * var(--su)) var(--mono);
  color: #e6cd9a;
}
.p0-finale-principle b { font-size: calc(1.55 * var(--su)); font-weight: 580; color: #f7f2e8; }
.p0-finale-principle span { font-size: calc(1.2 * var(--su)); color: #c9d0cd; line-height: 1.3; }
.p0-stage--finale[data-beat="1"] .p0-finale-principle,
.p0-stage--finale[data-reduced="true"] .p0-finale-principle { opacity: 1; transform: none; }

/* --- Финальный знак ------------------------------------------------------------- */

.p0-finale-final {
  position: absolute;
  z-index: 7;
  left: calc(20 * var(--su));
  width: calc(60 * var(--su));
  top: calc(3 * var(--su));
  display: grid;
  justify-items: center;
  gap: calc(.8 * var(--su));
  text-align: center;
  transition: opacity 1s var(--ease) .5s, transform 1.2s var(--ease-out) .5s, visibility 0s;
}
.p0-stage--finale:not([data-beat="2"]) .p0-finale-final { opacity: 0; visibility: hidden; transform: scale(.9); transition: opacity .6s, transform .6s, visibility 0s .6s; }
/* Без движения финал стоит слева, справа — принципы. */
.p0-stage--finale[data-reduced="true"] .p0-finale-final { left: calc(6 * var(--su)); width: calc(50 * var(--su)); }
.p0-finale-mark { width: calc(11.5 * var(--su)); height: calc(11.5 * var(--su)); }
.p0-finale-mark svg { width: 100%; height: 100%; overflow: visible; }
.p0-finale-mark__glow { fill: #e6cd9a14; stroke: #e6cd9a33; stroke-width: .6; }
.p0-finale-mark__icon { stroke: #f1d9a3; stroke-width: 1.2; filter: drop-shadow(0 0 4px #e6cd9a); }
.p0-finale-final__name { margin: 0; font-size: calc(5.6 * var(--su)); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: #f7f2e8; }
.p0-finale-final__slogan { margin: 0; white-space: nowrap; font-size: calc(2.3 * var(--su)); color: #f1d9a3; }
.p0-finale-cta {
  margin-top: calc(.6 * var(--su));
  padding: calc(.9 * var(--su)) calc(2.6 * var(--su));
  border-radius: 999px;
  border: 1px solid #efe0c1;
  background: linear-gradient(135deg, #eddbb8, #e0c184);
  color: #1c2a29;
  font-size: max(14px, calc(1.6 * var(--su)));
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 0 calc(3 * var(--su)) #e6cd9a55;
}
.p0-finale-cta:hover,
.p0-finale-cta:focus-visible { background: linear-gradient(135deg, #f5ead3, #e8cf9b); outline: 2px solid #f5ead3; outline-offset: 3px; }
.p0-finale-final__note { margin: 0; font: 500 calc(.85 * var(--su)) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #9aa7a3; }