/* ===== Шрифты ===== */
/* Unbounded — статические начертания с объединёнными контурами (иначе обводка показывает перекрытия) */
@font-face {
  font-family: 'Unbounded';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/Unbounded-ExtraLight.woff2') format('woff2');
}
@font-face {
  font-family: 'Unbounded';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/Unbounded-Light.woff2') format('woff2');
}

/* ===== База ===== */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { background: #000; }
html, body { overflow-x: clip; }
body {
  background: #000;
  color: #f2f2f2;
  font-family: 'JetBrains Mono', monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
button, textarea { font: inherit; color: inherit; background: none; border: 0; outline: 0; }
h1, h2, h3 { font-weight: inherit; }

.page { position: relative; width: 1440px; margin: 0 auto; }
section { position: relative; z-index: 1; }

/* Вертикальное центрирование текста внутри блока (как в Figma) */
.fc { display: flex; flex-direction: column; justify-content: center; }
.fc > span { display: block; }

.mono-l { font-family: 'JetBrains Mono', monospace; font-weight: 300; }

/* ===== Прогресс-бар и шапка ===== */
.progress {
  position: fixed; top: 0; left: 0; z-index: 100;
  height: 2px; width: 0;
  background: #f2f2f2;
}
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  height: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.hdr.is-hidden { opacity: 0; }
.hdr__brand,
.hdr__clock {
  position: absolute; top: 52px; height: 14px;
  font-family: 'Unbounded', sans-serif; font-weight: 300;
  font-size: 20px; line-height: 15.4px;
  text-transform: uppercase; color: #f2f2f2; white-space: nowrap;
}
.hdr__brand { left: 79px; width: 316px; }
.hdr__clock { left: 1304px; width: 61px; letter-spacing: 0.88px; transition: opacity 1s ease; }
.hdr__clock.is-off { opacity: 0; }

/* ===== Фон ===== */
.bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; will-change: transform; }
.grain { position: absolute; inset: 0; background-repeat: repeat; background-size: 256px 256px; }
.blob__in { position: absolute; left: 50%; top: 50%; }
.blob img { position: absolute; display: block; max-width: none; }

.b1 { left: -415px; width: 1350px; height: 1135px; animation: drift1 26s ease-in-out infinite alternate; }
.b1 .blob__in { width: 1350px; height: 1135px; transform: translate(-50%, -50%); }
.b1 img { inset: -35.5% -29.84%; width: 159.68%; height: 171%; }

.b2, .b4, .b8, .b7 { width: 3906.004px; height: 3425.047px; }
.b2 .blob__in, .b4 .blob__in, .b8 .blob__in, .b7 .blob__in { width: 3255px; height: 2264px; }
.b2 img, .b4 img, .b8 img, .b7 img { inset: -17.83% -12.4%; width: 124.8%; height: 135.66%; }
.b2 { left: -1512px; animation: drift2 34s ease-in-out infinite alternate; }
.b2 .blob__in { transform: translate(-50%, -50%) rotate(-24.93deg); }
.b4 { left: -1512px; animation: drift3 38s ease-in-out infinite alternate; }
.b8 { left: -1307px; animation: drift2 31s ease-in-out infinite alternate-reverse; }
.b7 { left: -680.08px; animation: drift1 36s ease-in-out infinite alternate-reverse; }
.b4 .blob__in, .b8 .blob__in, .b7 .blob__in { transform: translate(-50%, -50%) rotate(155.07deg); }

.b3 { left: -415px; width: 2583px; height: 2172px; animation: drift3 30s ease-in-out infinite alternate-reverse; }
.b3 .blob__in { width: 2583px; height: 2172px; transform: translate(-50%, -50%) rotate(180deg); }
.b3 img { inset: -22.07% -18.56%; width: 137.12%; height: 144.14%; }

.b5, .b6 { left: -213px; width: 1308px; height: 1100px; }
.b5 { animation: drift1 24s ease-in-out infinite alternate; }
.b6 { animation: drift3 29s ease-in-out infinite alternate-reverse; }
.b5 .blob__in, .b6 .blob__in { width: 1308px; height: 1100px; transform: translate(-50%, -50%) scaleY(-1); }
.b5 img, .b6 img { inset: -43.57% -36.64%; width: 173.28%; height: 187.14%; }

.blob img { animation: breathe 17s ease-in-out infinite alternate; }
.b2 img, .b8 img { animation-duration: 23s; animation-delay: -6s; }
.b3 img, .b6 img { animation-duration: 19s; animation-delay: -11s; }

@keyframes drift1 {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(70px, -50px, 0) rotate(2.5deg); }
  100% { transform: translate3d(-40px, 60px, 0) rotate(-2deg); }
}
@keyframes drift2 {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(-90px, 40px, 0) rotate(-1.5deg); }
  100% { transform: translate3d(60px, -70px, 0) rotate(1.5deg); }
}
@keyframes drift3 {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(50px, 80px, 0) rotate(-2deg); }
  100% { transform: translate3d(-70px, -30px, 0) rotate(2deg); }
}
@keyframes breathe {
  from { opacity: 1; }
  to   { opacity: 0.7; }
}

/* ===== Закреплённые (sticky) секции ===== */
.pin__sticky {
  position: sticky; top: 0;
  height: var(--vh, 100vh);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.frame {
  position: relative; flex: none;
  width: 1440px; height: 900px;
  transform: scale(var(--fs, 1));
}
.frame--clip { overflow: hidden; }

/* ===== 1. Первый экран ===== */
.s1 { height: 900px; overflow: hidden; }
.q {
  position: absolute; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; font-weight: 300;
  font-size: 21.6px; line-height: normal;
  color: #f2f2f2; opacity: 0.55;
  will-change: transform;
}
.q--big { font-size: 37.4px; opacity: 0.25; }

.s1__title {
  position: absolute; left: 55px; top: 259px; width: 1329px; height: 304px;
  font-family: 'Unbounded', sans-serif; font-weight: 200;
  font-size: 237px; line-height: normal;
  color: rgba(217, 217, 217, 0.6); white-space: nowrap;
}
.s1__stay {
  position: absolute; left: 86px; top: 562px; width: 669px; height: 48px;
  font-weight: 300; font-size: 43.2px; line-height: 47.52px;
  letter-spacing: -1.296px; color: #f2f2f2; white-space: nowrap;
}
.s1__line {
  position: absolute; left: 86.39px; top: 624.52px; width: 420px; height: 1px;
  background: #f2f2f2;
  transform: scaleX(0); transform-origin: 0 50%;
  animation: fillX 5s linear forwards;
}
.s1__hint {
  position: absolute; left: 86.39px; top: 640.31px; height: 17px;
  font-weight: 400; font-size: 15px; line-height: normal;
  text-transform: uppercase; color: #f2f2f2; white-space: nowrap;
  opacity: 0;
  animation: fadeIn 1.5s ease 5s forwards;
}
@keyframes fillX { to { transform: scaleX(1); } }
@keyframes fadeIn { to { opacity: 1; } }

/* ===== 2. Текст ===== */
.s2 { height: 2500px; }
.s2 .frame { transform: none; } /* текст не масштабируем — отступ слева всегда 86px */
.s2__text {
  position: absolute; left: 86.39px; top: 134.03px; width: 1023.7px; height: 630.38px;
  font-weight: 300; font-size: 48px; line-height: normal;
  color: #5e5e5e; white-space: nowrap;
}
.s2__text .ln { display: block; }
.s2__text .w {
  display: inline-block;
  transform: translateY(6px);
  transition: color 0.5s ease, transform 0.5s ease;
}
.s2__text .w.on { color: #fff; transform: translateY(0); }

/* ===== 3. Колесо ===== */
.s3 { height: 1088px; }
.s3__h {
  position: absolute; left: 83px; top: 111px; width: 1090px; height: 147px;
  font-family: 'Unbounded', sans-serif; font-weight: 300;
  font-size: 48px; line-height: 67.32px; color: #f2f2f2; white-space: nowrap;
}
.s3__arc { position: absolute; left: 1051px; top: 285px; width: 389.5px; height: 779px; }
.s3__arc-in {
  position: absolute; left: 50%; top: 50%; width: 779px; height: 389.5px;
  transform: translate(-50%, -50%) rotate(90deg);
}
.s3__arc-in img { position: absolute; left: 0; top: 0; width: 100%; height: 100.13%; display: block; }
.ww {
  position: absolute; left: 0; top: 0;
  font-weight: 300; font-size: 64px; line-height: normal;
  color: #f2f2f2; white-space: nowrap;
  will-change: transform, opacity;
}

/* ===== 4. Десять секунд ===== */
.s4 { height: 900px; }
.s4__label {
  position: absolute; left: 86px; top: 314px; width: 375px; height: 39px;
  font-weight: 400; font-size: 24px; line-height: normal;
  text-transform: uppercase; color: #8c8c8c; white-space: nowrap;
}
.s4__ring { position: absolute; left: 1313.61px; top: 313.5px; overflow: visible; }
.s4__ring circle { transition: stroke-dashoffset 10s linear; }
.s4__line {
  position: absolute; left: 86.39px; top: 367.38px; width: 1267.22px; height: 1px;
  background: #f2f2f2;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 10s linear;
}
.s4.is-run .s4__line { transform: scaleX(1); }
.s4__note {
  position: absolute; left: 86px; top: 382.38px; width: 578px; height: 64px;
  font-weight: 400; font-size: 24px; line-height: normal;
  text-transform: uppercase; color: #8c8c8c;
}
.s4__num {
  position: absolute; left: 1064.91px; top: 421.2px; width: 317.82px; height: 460.8px;
  align-items: flex-end;
  font-family: 'Unbounded', sans-serif; font-weight: 200;
  font-size: 460.8px; line-height: normal;
  color: transparent; -webkit-text-stroke: 2px #f2f2f2;
  opacity: 0.22; white-space: nowrap;
  transition: opacity 2s ease;
}
.s4__num.is-gone { opacity: 0; }
.s4__h {
  position: absolute; left: 86.39px; top: 464.36px; height: 115.87px;
  font-family: 'Unbounded', sans-serif; font-weight: 300;
  font-size: 51.8px; line-height: 52.88px; letter-spacing: -1.814px;
  color: #f2f2f2; white-space: nowrap;
}
.btn13 {
  position: absolute; top: 602.02px; height: 39.78px;
  border: 1px solid #f2f2f2;
  font-weight: 400; font-size: 13px; line-height: normal;
  text-transform: uppercase; color: #f2f2f2; text-align: center; white-space: nowrap;
  cursor: pointer;
}
.btn13.is-picked { background: #f2f2f2; color: #000; }
.s4-late { opacity: 0; pointer-events: none; transition: opacity 2s ease; }
.s4.is-done .s4-late { opacity: 1; pointer-events: auto; }
.s4__away {
  position: absolute; left: 86px; top: 672px; width: 900px;
  font-weight: 400; font-size: 24px; line-height: normal;
  text-transform: uppercase; color: #8c8c8c;
}

/* ===== 5. Карточки ===== */
.s5 { height: 2500px; }
.s5__h {
  position: absolute; left: 86.39px; top: 244.09px; width: 513.41px; height: 281.94px;
  font-family: 'Unbounded', sans-serif; font-weight: 300;
  font-size: 48px; line-height: normal; color: #f2f2f2; white-space: nowrap;
}
.s5__p {
  position: absolute; left: 86px; top: 560px; width: 360px; height: 108px;
  font-weight: 300; font-size: 24px; line-height: normal; color: #f2f2f2; white-space: nowrap;
}
.s5__clip { position: absolute; left: 703.98px; top: 216px; right: 0; height: 468px; overflow: hidden; }
.s5__track { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.card {
  position: absolute; top: 0; width: 604.8px; height: 468px;
  border-top: 1px solid #f2f2f2;
}
.card p {
  position: absolute; left: 0.02px; top: 19px; width: 586px;
  font-weight: 300; font-size: 24px; line-height: normal; color: #f2f2f2;
}

/* ===== 6. Цифра ===== */
.s6 { height: 892px; }
.s6__box { position: absolute; left: 86.39px; top: 118px; width: 1267.22px; height: 433px; }
.s6__left, .s6__right { position: absolute; inset: 0; opacity: 0; }
.s6__left { transition: opacity 0.8s ease; }
.s6__right { transition: opacity 1s ease 1.2s; }
.s6.is-in .s6__left, .s6.is-in .s6__right { opacity: 1; }
.s6__num {
  position: absolute; left: -0.39px; top: -16px; width: 400px; height: 429px;
  font-family: 'Unbounded', sans-serif; font-weight: 200;
  font-size: 345.6px; line-height: 311.04px; color: #f2f2f2; white-space: nowrap;
}
.s6__cap {
  position: absolute; left: 0; top: 356.47px; width: 312.34px; height: 17px;
  font-weight: 400; font-size: 13px; line-height: 22.1px;
  text-transform: uppercase; color: #fff; white-space: nowrap;
}
.s6__h {
  position: absolute; left: 676.61px; top: -48px; width: 556px; height: 240px;
  font-family: 'Unbounded', sans-serif; font-weight: 300;
  font-size: 48px; line-height: normal; color: #f2f2f2; white-space: pre;
}
.s6__line { position: absolute; left: 679.61px; top: 211px; width: 592.5px; height: 1px; display: block; }
.s6__p {
  position: absolute; left: 676.61px; top: 216px; width: 576px; height: 202px;
  font-weight: 300; font-size: 23px; line-height: normal; color: #f2f2f2;
}

/* ===== 7. Кривая ===== */
.s7 { height: 2700px; }
.s7__h {
  position: absolute; left: 86px; top: 45px; width: 882px; height: 109px;
  font-family: 'Unbounded', sans-serif; font-weight: 300;
  font-size: 48px; line-height: normal; color: #f2f2f2; white-space: nowrap;
}
.s7__img { position: absolute; left: 86px; top: 175px; width: 1273px; height: 675px; overflow: hidden; }
.s7__path { position: absolute; left: 86px; top: 216.98px; overflow: visible; }
.dot { position: absolute; width: 27px; height: 27px; display: block; }
.lbl {
  position: absolute; white-space: pre;
  font-weight: 300; font-size: 22.5px; line-height: normal; color: #f2f2f2;
}
.dot, .lbl { opacity: 0; transition: opacity 0.4s ease; }
.dot.on, .lbl.on { opacity: 1; }

/* ===== 8. Вкладки ===== */
.s8 { height: 1024px; margin-top: 23px; overflow: hidden; }
.s8__h {
  position: absolute; left: 80px; top: 222px; width: 914px;
  font-family: 'Unbounded', sans-serif; font-weight: 300;
  font-size: 48px; line-height: normal; color: #fff; white-space: nowrap;
}
.s8__h span { display: block; }
.tabs { position: absolute; left: 80px; top: 385px; display: flex; gap: 17px; }
.tab, .btn24 {
  height: 52px; padding: 9px 0;
  border: 1px solid #fff;
  font-weight: 400; font-size: 24px; line-height: normal;
  text-transform: uppercase; color: #fff; text-align: center; white-space: nowrap;
  cursor: pointer;
}
.tab.is-active { background: #fff; color: #000; }
.tabs__line {
  position: absolute; left: 77px; top: 456px; width: 961px; height: 4px;
  border-bottom: 1px solid #f2f2f2;
}
.panel { display: none; }
.panel.is-active { display: block; animation: fadeIn 0.3s ease; }
.panel__h {
  position: absolute; left: 80px; top: 479.79px; height: 46px;
  font-family: 'Unbounded', sans-serif; font-weight: 300;
  font-size: 38px; line-height: 45.6px; letter-spacing: -0.76px;
  color: #f2f2f2; white-space: nowrap;
}
.panel__t {
  position: absolute; left: 80px; top: 551.66px; width: 727px;
  font-weight: 300; font-size: 24px; line-height: 34.56px; color: #f2f2f2;
}
.panel__t span { display: block; white-space: nowrap; }

/* ===== 9. Бегущие строки ===== */
.mq__row { position: relative; overflow: hidden; border-bottom: 1px solid #f2f2f2; }
.mq__row--1 { height: 216.55px; border-top: 1px solid #f2f2f2; }
.mq__row--2 { height: 215.55px; }
.mq__text {
  position: absolute; left: 0; height: 161px;
  font-family: 'Unbounded', sans-serif; font-weight: 200;
  font-size: 128px; line-height: normal;
  color: transparent; -webkit-text-stroke: 1px #f2f2f2;
  white-space: nowrap;
}
.mq__row--1 .mq__text { top: 26px; }
.mq__row--2 .mq__text { top: 27.45px; }
.mq__run { display: inline-block; will-change: transform; }
.mq__run--l { animation: mqL 40s linear infinite; }
.mq__run--r { animation: mqR 55s linear infinite; }
@keyframes mqL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mqR { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ===== 10. Улика, источники, подвал ===== */
.s10 { height: 1506.9px; }
.s10__h {
  position: absolute; left: 80px; top: 283.9px; width: 805px; height: 186px;
  font-family: 'Unbounded', sans-serif; font-weight: 300;
  font-size: 48px; line-height: normal; color: #f2f2f2; white-space: nowrap;
}
.s10__ta {
  position: absolute; left: 80px; top: 499.9px; width: 640px; height: 83px;
  padding: 25.66px 0 0;
  border-bottom: 1px solid #f2f2f2;
  font-weight: 300; font-size: 24px; line-height: normal; color: #f2f2f2;
  resize: none; overflow: auto; caret-color: #f2f2f2;
}
.s10__ta::placeholder { color: #757575; opacity: 1; }
.s10__btn { position: absolute; left: 80px; top: 612.9px; width: 266px; }
.s10__btn:disabled { cursor: default; }
.s10__res {
  position: absolute; left: 80px; top: 694.9px; width: 900px;
  font-weight: 300; font-size: 24px; line-height: normal; color: #f2f2f2;
}
.s10__src-h {
  position: absolute; left: 80px; top: 907.9px; width: 415px; height: 81px;
  font-family: 'Unbounded', sans-serif; font-weight: 300;
  font-size: 48px; line-height: 67.32px; letter-spacing: -2.31px;
  color: #f2f2f2; white-space: nowrap;
}
.s10__src {
  position: absolute; left: 80px; top: 997.9px; width: 692px; height: 288px;
  font-weight: 200; font-size: 24px; line-height: normal; color: #fff;
}
.s10__rule { position: absolute; left: 80px; top: 1346.9px; width: 1280px; height: 2px; display: block; }
.s10__foot {
  position: absolute; top: 1422.9px; height: 14px;
  font-family: 'Unbounded', sans-serif; font-weight: 300;
  font-size: 20px; line-height: 15.4px;
  text-transform: uppercase; color: #f2f2f2; white-space: nowrap;
}