/* p5: P13 close (p5.js). Scoped by #slide-p5 and p5- ids. Revision 1: the line of the pitch is the hero, centred on
   the sky as P11's headline (p4.css #p4-headline); the lock-up (P0's look, smaller), the box line and a small «Thank you»
   under it on the left; the QR on its own white square (quiet zone inside the SVG) on a white card at the right, never
   under a veil or a blur. Grid: left 96 / right 120; the bottom 180 px stay clear for the visitors' caption plate. */
#p5-veil { position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(100deg, rgba(var(--veil), 0.74) 0%, rgba(var(--veil), 0.46) 38%, rgba(var(--veil), 0) 66%); }
/* the sky band under the key line (the snow of the Alatau sits at y 200-320 on the right) */
#p5-top { position: absolute; left: 0; right: 0; top: 0; height: 520px; opacity: 0;
  background: linear-gradient(180deg, rgba(var(--veil), 0.8) 0%, rgba(var(--veil), 0.66) 46%, rgba(var(--veil), 0) 100%); }
#p5-glow { position: absolute; left: -200px; top: 520px; width: 1300px; height: 520px; opacity: 0;
  background: radial-gradient(closest-side, rgba(var(--veil), 0.7), rgba(var(--veil), 0)); }

/* the hero: P11's headline, held */
#p5-key { position: absolute; left: 0; right: 0; top: 78px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; white-space: nowrap; pointer-events: none;
  font: 640 80px/1.1 'Onest', sans-serif; letter-spacing: -0.028em; color: #f4f3ef; text-shadow: 0 2px 40px rgba(6, 9, 24, 0.9); }
#p5-key span { display: block; opacity: 0; }
#p5-key2 { color: #ffd892; }

#p5-lock { position: absolute; left: 96px; top: 392px; display: flex; align-items: stretch; gap: 26px; }
#p5-bar { display: block; flex: none; width: 7px; border-radius: 4px; transform-origin: 50% 0;
  background: linear-gradient(180deg, #6c5cff, #3e86ff 55%, #1fc3f2); }
#p5-col { display: flex; flex-direction: column; }
.p5-mask { overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.p5-l, .p5-t { display: inline-block; will-change: transform; }
#p5-name { font: 720 96px/1 'Onest', sans-serif; letter-spacing: -0.045em; white-space: nowrap; color: var(--title); padding-top: 0.04em; }
#p5-team { margin-top: 14px; font: 520 36px/1 'Onest', sans-serif; letter-spacing: 0.06em; color: var(--sub); opacity: 0; }
#p5-line { position: absolute; left: 129px; top: 610px; width: 1180px; opacity: 0;
  font: 460 40px/1.25 'Onest', sans-serif; letter-spacing: -0.015em; color: #dcdbe8; text-shadow: 0 2px 28px rgba(12, 16, 36, 0.9); }
#p5-line b { font-weight: 700; color: #ffffff; }
#p5-thanks { position: absolute; left: 122px; top: 750px; font: 740 64px/1 'Onest', sans-serif; letter-spacing: -0.035em; padding: 0.02em 0.06em 0.1em; white-space: nowrap; }
#p5-thanks .p5-t { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, #6c5cff 0%, #3e86ff 50%, #1fc3f2 100%); background-repeat: no-repeat; }
#p5-qr { position: absolute; right: 120px; top: 380px; width: 360px; box-sizing: border-box; padding: 20px 20px 22px; border-radius: 24px; opacity: 0;
  background: #ffffff; box-shadow: 0 30px 60px -24px rgba(6, 8, 24, 0.75); display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; }
#p5-qr-img { display: block; width: 320px; height: 320px; image-rendering: pixelated; image-rendering: crisp-edges; }
#p5-url { margin-top: 6px; font: 500 28px/1 'IBM Plex Mono', monospace; letter-spacing: 0.01em; color: #1d2240; }
#p5-what { margin-top: 10px; font: 500 22px/1 'Onest', sans-serif; letter-spacing: 0.02em; color: #59607f; }