/* Горизонтальный скролл: панели P1–P4 (лицо, обещание, цифры, DESIGN) */
/* ═══ HORIZONTAL SCROLL ═══ */
#hs-outer { position: relative; }
#hs-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
#hs-rail { display: flex; height: 100%; }
.hp { width: 100vw; height: 100vh; flex-shrink: 0; position: relative; overflow: hidden; background: var(--bg); }
.hp.dark { background: #0a0a0a; }
#p1 { width: 100vw; background: radial-gradient(ellipse 42% 60% at 72% 62%, #3a1a12 0%, #1a0d09 45%, #080808 100%); } /* Glühen hinter dem Foto, damit das schwarze Shirt sich vom Hintergrund löst */
#hs-bar { position: absolute; bottom: 0; left: 0; height: 2px; background: var(--red); width: 0%; z-index: 10; }

/* ─ P1 Hero-Foto (freigestellt), statisch — nur sanftes Einblenden beim Laden ─ */
.p1-photo {
  position: absolute; right: 4vw; bottom: 0; height: 92%; width: auto; max-width: 62vw; object-fit: contain; object-position: right bottom;
  animation: p1-in 1.4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes p1-in { from { opacity: 0; transform: translateY(40px); } }
#p1::after {
  content: ''; position: absolute; top: 0; left: 0; width: 60%; height: 100%;
  background: linear-gradient(to right, #080808 25%, rgba(8,8,8,0.55) 48%, transparent 65%);
  pointer-events: none; z-index: 2;
}
.p1-content {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 110px 52px 52px; z-index: 3; pointer-events: none;
}
.p1-tag {
  font-size: .6rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--red); font-weight: 700; margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.p1-tag::before { content: ''; width: 18px; height: 1px; background: var(--red); }
.p1-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; line-height: .84; letter-spacing: -.02em; text-transform: uppercase; }
.p1-name .first { font-size: min(10rem, 15.5vh); display: block; color: #fff; } /* an die Fensterhöhe gekoppelt, damit die Zeile darüber sichtbar bleibt */
.p1-name .last  { font-size: min(10rem, 15.5vh); display: block; color: var(--red); }
.p1-role { font-size: 1rem; color: rgba(255,255,255,.9); letter-spacing: .04em; margin-top: 20px; max-width: 420px; line-height: 1.65; }
.disc {
  position: absolute; bottom: 44px; right: 52px; z-index: 3;
  display: flex; align-items: center; gap: 14px;
  font-size: .65rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.25);
}
.dl { width: 42px; height: 1px; background: rgba(255,255,255,.2); position: relative; overflow: hidden; }
.dl::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--red); animation: dl 1.9s linear infinite; }
@keyframes dl { to { left: 100%; } }
#face-progress { display: none; /* früher Fortschritt der Gesichtsanimation */ position: absolute; bottom: 0; left: 0; height: 2px; background: var(--red); width: 0%; z-index: 10; transition: width .08s linear; }


/* ─ P2 ─ */
.p2 { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 88px 52px; }
.hp.dark .p2 { border-left: 1px solid rgba(255,255,255,0.08); }
.p2-label { font-size: .65rem; letter-spacing: .3em; text-transform: uppercase; color: var(--amber); font-weight: 700; margin-bottom: 32px; }
.p2-h { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 9vw; line-height: .88; letter-spacing: -.02em; color: #fff; margin-bottom: 52px; }
.p2-h em { color: var(--red); font-style: normal; }
.p2-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
.cl { font-size: .65rem; letter-spacing: .28em; text-transform: uppercase; color: var(--amber); font-weight: 700; margin-bottom: 10px; }
.cb { font-size: .95rem; color: var(--muted); line-height: 1.75; }

/* ─ P3: STATS (was P4) ─ */
.p3-stats { color: var(--amber); position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); padding: 88px 0 0; overflow: hidden; }
.p3-big { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 13vw; text-transform: uppercase; letter-spacing: -.02em; line-height: .86; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.p3l { display: block; padding-left: 52px; color: var(--red); }
.p3l.d { color: #fff; }
.p3-stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); flex-shrink: 0; }
.sb { background: rgba(212, 60, 32, 0.5); padding: 26px 30px;  }
.sn { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 3.2rem; color: var(--bg); line-height: 1; margin-bottom: 5px; }
.sl { font-size: .65rem; letter-spacing: .17em; text-transform: uppercase; color: var(--faint); }

/* ─ P4: VIDEO MASK transition panel ─ */
#p4-video-panel { background: #000; overflow: hidden; }
.p4-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* The giant masked text */
.p4-mask-wrap {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
#p4-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block;
}
/* Einleitung über den Buchstaben */
.p4-intro { position: absolute; left: 52px; top: 50%; transform: translateY(calc(-50% - 34vh)); z-index: 3; display: flex; gap: 12px; align-items: baseline; color: #fff; transition: opacity .5s, transform .6s; pointer-events: none; }
.p4-intro span { font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.55); font-weight: 700; }
.p4-intro b { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.4rem; text-transform: uppercase; color: var(--red); }
.p4-intro.hide { opacity: 0; transform: translateY(calc(-50% - 38vh)); }

/* Vision: Hinweis unter dem Video-Rahmen, dass es weitergeht */
.p4-next { position: absolute; left: 50%; bottom: 3.5vh; z-index: 4; transform: translate(-50%, 10px); opacity: 0; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.75); font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; transition: opacity .5s, transform .5s; pointer-events: none; }
.p4-next i { font-style: normal; color: var(--red); font-size: 1.1rem; animation: p4-bounce 1.4s ease-in-out infinite; }
.p4-next.show { opacity: 1; transform: translate(-50%, 0); }
@keyframes p4-bounce { 50% { transform: translateY(6px); } }

/* Vision: Ton-Schalter (rechts unten am Video-Rahmen) */
.p4-sound {
  position: absolute; right: var(--p4-r, 7vw); bottom: 3vh; z-index: 6; display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 18px; border: 1px solid rgba(255,255,255,.25); border-radius: 99px; background: rgba(8,8,8,.6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; cursor: pointer;
  font: 700 .64rem/1 'Barlow', sans-serif; letter-spacing: .24em; text-transform: uppercase; transition: background .25s, border-color .25s;
}
.p4-sound:hover { background: var(--red); border-color: var(--red); }
.p4-sound.is-on { border-color: var(--red); }
.p4-sound__eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.p4-sound__eq i { width: 3px; height: 4px; background: currentColor; border-radius: 1px; }
.p4-sound:not(.is-on) .p4-sound__eq i:nth-child(n+2) { opacity: .35; }
.p4-sound.is-on .p4-sound__eq i { background: var(--red); animation: p4-eq .9s ease-in-out infinite; }
.p4-sound.is-on:hover .p4-sound__eq i { background: #fff; }
.p4-sound.is-on .p4-sound__eq i:nth-child(2) { animation-delay: -.3s; } .p4-sound.is-on .p4-sound__eq i:nth-child(3) { animation-delay: -.6s; } .p4-sound.is-on .p4-sound__eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes p4-eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
/* „Ergebnisse“: Zeilen nie umbrechen; Russisch hat die längste Zeile („КОТОРЫЕ ВАЖНЫ.“) — kleinere Schrift */
@media (min-width: 1025px) {
  .p3l { white-space: nowrap; }
  html[lang="ru"] .p3-big, html[lang="uk"] .p3-big { font-size: min(11vw, 21vh); }
}