/* ---------- титры: фон ----------
   Слой лежит поверх канваса и повторяет область артборда: внутри него
   всё меряется в координатах макета 1920x1080, а наружу он ужимается
   одним scale. Rive рисует с Fit.Contain + Alignment.Center, тот же
   множитель min(w/1920, h/1080) — значит слой садится пиксель в пиксель.

   Три ступени светлости — это прозрачность связки «фото + градиенты»
   плюс виньетка по краям на второй ступени. Задаются переменными. */
#tt{
  position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;
  opacity:0;visibility:hidden;
  transition:opacity 1.2s ease,visibility 0s 1.2s;
}
#tt.on{opacity:1;visibility:visible;transition:opacity 1.2s ease}
#ttFrame{
  position:absolute;left:50%;top:50%;width:1920px;height:1080px;
  overflow:hidden;background:#000;
  transform:translate(-50%,-50%) scale(var(--tt-k,1));
  transform-origin:center center;
}
/* фото на весь кадр, поверх — два градиента из макета.
   Проценты стопов пересчитаны из userSpace-координат Figma в границы кадра:
   горизонтальный шёл от x=-467.75 до x=2413.28, вертикальный от y=-262 до y=1286. */
#ttPhoto{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right,
      rgba(0,0,0,.595) -4.95%,
      rgba(0,0,0,.358) 54.36%,
      rgba(0,0,0,.700) 94.81%),
    linear-gradient(to bottom,
      rgba(0,0,0,.0170) 2.45%,
      rgba(0,0,0,.0102) 45.78%,
      rgba(0,0,0,.0160) 96.50%),
    var(--tt-src,url('../assets/quiz-bg.png'));
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
  opacity:var(--tt-a,0);
  transition:opacity var(--tt-fade,3s) cubic-bezier(.45,0,.3,1);
}
/* виньетка: чёрный кант шириной 100 вокруг кадра, размытый дважды.
   В макете это обводка прямоугольника -14,14 1948x1052 — обводка идёт
   по 50 в каждую сторону от контура, поэтому рамка сдвинута на эти 50. */
#ttVign{
  position:absolute;inset:0;
  opacity:var(--tt-v,0);
  transition:opacity var(--tt-fade,3s) cubic-bezier(.45,0,.3,1);
}
#ttVign i{
  position:absolute;left:-64px;top:-36px;width:1848px;height:952px;
  box-sizing:content-box;border:100px solid #000;display:block;
}
#ttVign i.a{filter:blur(104.15px)}
#ttVign i.b{filter:blur(60.7px)}

/* ---------- титры: текст ----------
   Раскладка один в один из макета. Координаты те же 1920x1080, что и у фона,
   поэтому 50% — это центр кадра, а не окна. Текст проступает вместе с первой
   ступенью фото, на 150 мс позже: не следом за ней, а заодно с ней. */
#ttText{
  position:absolute;inset:0;
  /* колонка стоит не по центру кадра, а выше — на те же 70, на которые
     поднят текстовый блок финала в макете */
  transform:translateY(-70px);
  opacity:var(--tt-t,0);
  transition:opacity var(--tt-fade,3s) cubic-bezier(.45,0,.3,1) 150ms;
}
/* Строка живёт в слоте — её кегль, прозрачность и сдвиг зависят только
   от того, насколько она далеко от центра. Сама строка ничего не знает
   про соседей, поэтому колонка не переливается при пересчёте. */
.tt-line{
  position:absolute;left:50%;top:50%;
  width:1075px;
  /* сдвиг, кегль и прозрачность ставит ttPlace напрямую в style —
     не через переменные: так переход заводится гарантированно */
  transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;text-align:center;
  white-space:nowrap;
  font-family:'Inter Tight',Arial,sans-serif;
  font-weight:500;line-height:100%;letter-spacing:-0.02em;
  font-size:90px;
  opacity:0;
  transition:
    transform var(--tt-scroll,1600ms) cubic-bezier(.45,0,.3,1),
    font-size var(--tt-scroll,1600ms) cubic-bezier(.45,0,.3,1),
    opacity   var(--tt-scroll,1600ms) cubic-bezier(.45,0,.3,1);
}
/* Заливка градиентом по глифам живёт отдельным элементом внутри строки.
   Firefox не рисует background-clip:text, если на том же элементе стоит
   прозрачность меньше единицы: активная строка видна, все приглушённые
   исчезают. Поэтому прозрачность на строке, а заливка — здесь. */
.tt-line span{
  display:block;width:100%;
  background-image:linear-gradient(95.66deg, #FDFDFD 40.68%, rgba(90,90,90,0) 116.77%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- титры: финал ----------
   Человек долистал до конца и крутит ещё раз вниз: фото гаснет в чёрный,
   лесенка уходит, а на её месте собирается сплошной текст.
   Приходит с задержкой — фото успевает притухнуть, уходит быстрее. */
#ttFinal{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1400ms cubic-bezier(.45,0,.3,1);
}
#tt.final #ttFinal{
  opacity:1;
  transition:opacity 2000ms cubic-bezier(.45,0,.3,1) 900ms;
}
#ttFinal > div{
  position:absolute;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:'Inter Tight',Arial,sans-serif;
  letter-spacing:-0.02em;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
#ttFinalText{
  width:1250px;height:276px;
  left:calc(50% - 1250px/2);top:calc(50% - 276px/2 - 70px);
  font-weight:400;font-size:64px;line-height:108%;
  background-image:linear-gradient(96.11deg, #FDFDFD 59.44%, rgba(90,90,90,0) 118.81%);
}
#ttFinalQ{
  width:1002px;height:70px;
  left:calc(50% - 1002px/2);top:calc(50% - 70px/2 + 173px);
  font-weight:500;font-size:70px;line-height:100%;
  background-image:linear-gradient(90.35deg, #FFFFFF 43.25%, #00EEFF 167.65%);
}

/* эквалайзер. Место взято из исходного макета кадра: центральная полоска
   стояла на y=916, коробка 528x64 садится ровно по центру по горизонтали.
   Живёт отдельно от текста, потому что виден и на листании, и в финале. */
#ttEq{
  position:absolute;
  width:528px;height:64px;
  left:calc(50% - 528px/2);top:916px;
  opacity:var(--tt-e,0);
  transition:opacity var(--tt-fade,3s) cubic-bezier(.45,0,.3,1) 150ms;
}
#ttEq img{display:block;width:100%;height:100%}