/* Variant 3 – "Світло".
   Daylight version: warm paper, brand blue as the only chroma, Unbounded's big
   rounded letterforms for everything that speaks. The youngest of the variants
   without becoming loud – the restraint lives in the spacing, not in the
   palette. Every diagram is drawn as a route or a ripple: something you walk
   along, never a wheel you look at.

   Field: 132 px on every side. */

:root {
  /* Фірмова палітра. Логотип: #345491 синій, #b3c2cd сірий, #748aaf темно-сірий,
     #fdfdfd білий, #d8e0e5 світло-сірий. У публікаціях беруть #325390 синій і
     #aebecb сірий — саме ці два тут і головні, бо дек живе поруч із ними.
     #345491 і #325390 відрізняються на 0,13 за контрастом: другого токена вони
     не варті. */
  --paper: #fdfdfd;
  --paper-2: #d8e0e5;
  --brand: #325390;
  --brand-deep: #243d6e;

  /* Основний текст лишається майже чорним: рішення замовника — набір тримає
     чорний, а фірмовий синій лишається акцентом, а не другим кольором тексту.
     Другорядні яруси беруться з відрізка між фірмовим темно-сірим #748aaf і
     глибоким синім #243d6e, тож стороннього тону в деку немає ніде:
     ink 16,1 : 1,
     mid 7,4 : 1 (рядок «До тебе тут навчалися тисячі»; повна фарба на цьому
     кеглі забирала вагу у відповіді, заради якої рядок і стоїть),
     soft 5,3 : 1 (підписи під назвами).
     Сам чорний — це фірмовий синій, доведений до чорного: той самий тон 219°
     і майже та сама насиченість (0,45 проти 0,48), світлість 13 %. На око це
     чорний, а не синій, але він із тієї ж родини, що й усе решта на аркуші —
     нейтральний чорний поруч із синіми лініями завжди трохи брудний. */
  --ink: #121d30;
  --ink-mid: #3c5482;
  --ink-soft: #546b95;

  /* Волосяні лінії тримають більшість схем цього варіанта. Погоджені пороги —
     1,44 : 1 і 1,83 : 1: нижче вони зникають у світлому залі й у стисненому
     відео, вище починають читатися як рамки, а не як побудова. Фірмовий сірий
     #b3c2cd дає 1,79, а синій під 42 % — 2,02, і різниця між ярусами лишається. */
  --hairline: #b3c2cd;
  --brand-line: rgba(50, 83, 144, 0.42);

  --display: 'Unbounded', 'e-Ukraine Head', system-ui, sans-serif;
  --sans: 'e-Ukraine', system-ui, sans-serif;
}

.deck {
  background: var(--paper);
}

.stage {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}

/* The whole photographic set is desaturated in the file itself rather than by
   a runtime filter: a full-screen filtered layer costs a recomposite every
   frame it is animated over. Two grades, and the difference is the subject:
   `--mute` is the archive, used only for the four historical facades;
   `--mute-light` is everyone alive in the deck now – brighter, with a trace of
   colour left in. The one place full colour survives is the present-day frame
   on the history slide, which drops its muted copy as the row reaches today.
   Both are baked no larger than the source and at roughly twice the width of
   the slot they land in. */

/* ------------------------------------------------------------- typography */

/* 1.04 is the variant's voice on a single line, but a heading that breaks was
   set solid: the two lines locked together into one grey block. 1.14 opens the
   gap by a tenth of the size – 15 px on the title – which is the difference
   between tight and airless. Not more: the close leading is the character. */
.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.05em;
  margin: 0;
}

.display--xl { font-size: 120px; }
.display--l  { font-size: 104px; }
.display--m  { font-size: 66px; }
.display--s  { font-size: 60px; }

/* Under the rule, with the speaker below it – the school and the person are
   one block, and the title stands on its own above them. */
/* Under the rule. It was the school's name set as a label – tracked caps, one
   short line. It is a sentence now, and a sentence shouted in caps stops being
   read, so this one is set to be read: sentence case, two lines, still the
   only brand colour above the speaker. */
.brandline {
  position: absolute;
  top: 607px;
  left: 132px;
  margin: 0;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.6;
  color: var(--brand);
}

.kicker {
  position: absolute;
  top: 88px;
  left: 132px;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.kicker b {
  font-weight: 500;
  color: var(--brand);
  margin-right: 18px;
}

/* Every ordinary slide hangs its heading from the same line. */
.slide--history .display--m,
.slide--today .display--m,
.slide--map .display--m,
.slide--international .display--m,
.slide--checklist .display--m,
.slide--education .display--s,
.slide--career .display--s,
.slide--science .display--s {
  position: absolute;
  top: 152px;
  left: 132px;
}

/* ---------------------------------------------------------------- 1. Титул */

.seal {
  position: absolute;
  right: 132px;
  top: 88px;
  width: 132px;
  height: 132px;
}

.slide--title .display--xl {
  position: absolute;
  top: 221px;
  left: 132px;
  width: 1400px;
}

.title-rule {
  position: absolute;
  left: 132px;
  top: 573px;
  width: 220px;
  height: 2px;
  background: var(--brand);
  transform-origin: 0 50%;
}

.title-speaker {
  position: absolute;
  left: 132px;
  top: 753px;
  margin: 0;
  font-family: var(--display);
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.title-speaker span {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ------------------------------------------- 2. Ви – студенти ХНЕУ */

.slide--intro .display--l {
  position: absolute;
  top: 178px;
  left: 132px;
}

/* Five upright frames, edge to edge inside the field. The slide is a shelf of
   photographs, not a collage laid under the words – nothing is written on a
   picture anywhere in this variant. */
.strip {
  position: absolute;
  left: 132px;
  right: 132px;
  top: 452px;
  height: 394px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.strip__cell {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
}

/* -------------------------------------------------------------- 3. Історія */

.cards {
  position: absolute;
  left: 132px;
  right: 132px;
  bottom: 108px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
}

.card__photo {
  position: relative;
  height: 320px;
  overflow: hidden;
  background: var(--paper-2);
}

.card__years {
  margin: 28px 0 0;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.card--now .card__years {
  color: var(--brand);
}

.card__name {
  margin: 12px 0 0;
  font-size: 21px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

/* -------------------------------------------------------- 4. Семен Кузнець */

/* A round portrait rather than a plate: the only circle in the deck, and it
   answers the rounded bowls of the display face beside it. */
.disc {
  position: absolute;
  left: 1108px;
  top: 250px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper-2);
}

.disc__caption {
  position: absolute;
  left: 1108px;
  top: 862px;
  width: 560px;
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.disc__caption span {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--brand);
}

.slide--kuznets .display--m {
  position: absolute;
  left: 132px;
  top: 372px;
  width: 880px;
}

/* The placeholders are the only slides with nothing to look at, so they say so
   plainly and quietly: the number in the display face, a short blue rule, the
   sentence. Left-aligned on the same line as every other slide. */
/* --------------------------------------------------------- 6. ХНЕУ сьогодні */

/* Six words and the name they belong to, as one block of tiles. A ring was
   the obvious drawing and the wrong one here: it makes the six look equal and
   far away, while the grid keeps them close and countable. */
.today-grid {
  position: absolute;
  left: 132px;
  right: 132px;
  top: 380px;
  height: 540px;
  display: grid;
  grid-template-columns: 520px repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 26px;
}

.today-core {
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 34px;
  background: var(--brand);
}

.today-core span {
  font-family: var(--display);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.04em;
  text-align: center;
  color: var(--paper);
}

.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
  border: 1px solid var(--brand-line);
  border-radius: 34px;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ink);
}

/* ------------------------------------------------- 8. Карта можливостей */

/* Two words under the heading: a subheading, and set like one. At 21/300 in
   soft grey it was the size of a footnote sitting where a subtitle goes. */
.lede {
  position: absolute;
  top: 244px;
  left: 132px;
  margin: 0;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--brand);
}

.metro {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
}

.metro line {
  stroke: var(--brand);
  stroke-width: 3;
  stroke-linecap: round;
}

.metro circle {
  fill: var(--paper);
  stroke: var(--brand);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.stations {
  position: absolute;
  inset: 0;
}

.station {
  position: absolute;
  width: 380px;
  transform: translateX(-50%);
  text-align: center;
}

/* Symmetrical about the axis, which runs at y=690: the text box stops 100px
   short of it on both sides – bottom edge at 590 above, top edge at 790 below.
   The earlier figures were measured against y=640 and the line is not there,
   so the upper leaders fell 68px short of it and the lower ones ran through
   the circle. */
.station--up   { bottom: 490px; }
.station--down { top: 790px; }

.station h3 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.station p {
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* A hairline drops from each label to its station on the line. */
/* A real element, not a pseudo-element: GSAP cannot animate ::after, so the
   leaders used to stand on screen before the line had reached their station.
   It also stops short of the circle – radius 10 with a 3px stroke, so a line
   drawn the whole way to the axis ran inside it. */
.station__leader {
  position: absolute;
  left: 50%;
  width: 1px;
  height: 80px;
  background: var(--hairline);
}

.station--up .station__leader   { bottom: -80px; transform-origin: 50% 0; }
.station--down .station__leader { top: -80px; transform-origin: 50% 100%; }

/* ---------------------------------------------------------------- 9. Освіта */

/* The argument runs down the left in two type sizes – small and grey for the
   premise, large and dark for the conclusion – and the five ways of widening
   it are set loose underneath as a row of pills, because they are options to
   pick from, not a list to read through. */
.edu-from {
  position: absolute;
  left: 132px;
  top: 340px;
  margin: 0;
  font-size: 26px;
  font-weight: 300;
  color: var(--ink-soft);
}

.edu-arrow {
  position: absolute;
  left: 128px;
  top: 396px;
  width: 34px;
  height: 92px;
}

.edu-arrow path {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The slide is labelled Освіта and its content is the move from one line to
   the other. At 56 against the label's 60 the two read as one size, so the
   slide had a heading and a sentence competing for the same rank. The sentence
   wins it outright: it is what the slide is for, the label is a tab. */
.edu-to {
  position: absolute;
  left: 132px;
  top: 508px;
  width: 1500px;
  margin: 0;
  font-family: var(--display);
  font-size: 80px;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.05em;
  color: var(--ink);
}

.pills {
  position: absolute;
  left: 132px;
  top: 780px;
  width: 1656px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

/* Sized so all five stand on one line: broken over two rows the last one sits
   alone and reads as an afterthought rather than a fifth option. */
.pills li {
  padding: 17px 30px 18px;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  font-size: 22px;
  font-weight: 300;
  color: var(--brand-deep);
}

/* -------------------------------------------------------- 10. Міжнародність */

/* Rings widening out of Харків, not a route to four named places: the sentence
   is about there being no edge, so the drawing has to keep going after the
   last label. */
.ripple {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
}

.ripple path {
  fill: none;
  stroke: var(--brand-line);
  stroke-width: 2;
  stroke-linecap: round;
}

.ripple g {
  transform-box: view-box;
  transform-origin: 960px 900px;
}

.ripple circle {
  fill: var(--brand);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.ripple__origin {
  position: absolute;
  left: 810px;
  top: 934px;
  width: 300px;
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.ripple__stop {
  position: absolute;
  width: 460px;
  margin: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------- 11. Кар'єра */

.row4 {
  position: absolute;
  left: 132px;
  right: 132px;
  top: 296px;
  height: 262px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.row4__cell {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
}

/* Five stops climbing left to right. The connector is behind the chips and the
   chips are filled with paper, so the line shows only in the gaps – the eye
   reads a staircase rather than a ruler with labels on it. */
.stair {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
}

.stair polyline {
  fill: none;
  stroke: var(--brand-line);
  stroke-width: 2;
  stroke-linejoin: round;
}

.steps {
  position: absolute;
  inset: 0;
}

.step {
  position: absolute;
  width: 280px;
  margin: 0;
  padding: 16px 0 17px;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ink-soft);
}

.step--last {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--paper);
}

.claim {
  position: absolute;
  left: 132px;
  right: 132px;
  top: 906px;
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -0.05em;
  color: var(--ink);
}

/* ------------------------------------------------- 12. Студентське життя */

/* Five verbs down the left, four photographs squared off on the right. The
   words are the slide; the pictures only say who is doing them. */
.verbs {
  position: absolute;
  left: 132px;
  top: 356px;
  width: 800px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Відкриття цих рядків їде знизу вгору, тож обрізку не можна відсунути вбік –
   вона рухається разом із текстом. Замість цього коробка рядка отримує запас
   під хвіст, а відступ компенсується, щоб ритм списку не змінився. */
.verbs li {
  padding-bottom: 8px;
  margin-bottom: -8px;
  font-family: var(--display);
  font-size: 52px;
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: -0.05em;
  color: var(--ink);
}

.verbs li:nth-child(even) {
  color: var(--brand);
}

.quad {
  position: absolute;
  left: 1000px;
  top: 200px;
  width: 788px;
  height: 660px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 24px;
}

.quad__cell {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
}

/* -------------------------------------------------- 13. Наука та інновації */

/* Той самий радіус, що й у карток під ним. Знімок і три картки стоять однією
   колонкою, на всю ширину поля, одна під одною — це один блок, і кути в нього
   мають бути одні. Решта знімків у деку лишається з прямим кутом. */
.banner {
  position: absolute;
  left: 132px;
  top: 284px;
  width: 1656px;
  height: 440px;
  overflow: hidden;
  border-radius: 34px;
  background: var(--paper-2);
}

.trio {
  position: absolute;
  left: 132px;
  top: 756px;
  width: 1656px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Кожна картка тримає свою висоту без другого рядка: підписи під дієсловами
   були переказом самих дієслів («Досліджувати – дослідження»). Сценарій
   просить під кожним реальні приклади можливостей університету, а їх у
   джерелі немає – краще порожньо, ніж повторено. */
.trio li {
  display: flex;
  align-items: center;
  min-height: 180px;
  padding: 40px;
  border: 1px solid var(--brand-line);
  border-radius: 34px;
}

.trio b {
  display: block;
  font-family: var(--display);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.05em;
  color: var(--brand);
}

.trio span {
  display: block;
  margin-top: 16px;
  font-size: 22px;
  font-weight: 300;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------- 16. Чекліст */

/* Six things in two columns rather than one long list: at one per line the
   column ran the full height of the slide and the last item sat on the
   counter. Three and three keeps the block the size of a thing you could
   actually do, and the two columns end level. */
.checklist {
  position: absolute;
  left: 132px;
  top: 472px;
  width: 1656px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 56px;
  row-gap: 46px;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 20px 0 21px;
  border-bottom: 1px solid var(--hairline);
  font-size: 26px;
  font-weight: 300;
  color: var(--ink);
}

.checklist .box {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--brand-line);
  border-radius: 13px;
}

.checklist svg {
  width: 26px;
  height: 26px;
  overflow: visible;
}

.checklist path {
  fill: none;
  stroke: var(--brand);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----------------------------------------- 19. Відтепер – це ваша історія */

/* A ribbon of faces along the top edge and the sentence underneath on bare
   paper. The number of people is the point, so they run off both sides of the
   screen; the words are never laid over them. */
/* The ribbon is given the screen, not the plane: `bleed-y` pulls its top edge
   above the stage and the height takes that overhang back, so on a screen that
   is taller than 16:9 the photographs still start at the very top. */
/* Faces above and below, the line between them: the slide is about how many
   people came before, so it says so twice and holds the sentence in the middle
   instead of leaving half the sheet empty. */
.ribbon {
  position: absolute;
  left: calc(-1 * var(--bleed-x));
  right: calc(-1 * var(--bleed-x));
  height: calc(300px + var(--bleed-y));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.ribbon--top    { top: calc(-1 * var(--bleed-y)); }
.ribbon--bottom { bottom: calc(-1 * var(--bleed-y)); }

.ribbon__cell {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
}

/* The line that sets up the whole slide. At 30/300 in soft grey it read as a
   caption to the photographs above rather than as the sentence "Тепер – ти"
   answers; the size carries it now, so the colour does not have to. Full ink
   at this size was heavier than the sentence – it took the weight off the
   answer, which is the only thing on the slide that should be loud. */
.legacy__lead {
  position: absolute;
  left: 132px;
  top: 414px;
  margin: 0;
  font-size: 44px;
  font-weight: 400;
  color: var(--ink-mid);
}

.legacy__now {
  position: absolute;
  left: 132px;
  top: 492px;
  margin: 0;
  font-family: var(--display);
  font-size: 132px;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.06em;
  color: var(--brand);
}

/* --------------------------------------------------------------- 20. Фінал */

/* The deck opened on bare paper with the seal, and closes the same way – the
   same two ingredients, stacked instead of spread. No photograph: every
   attempt had the picture arguing with the words. */
/* Три речі стоять як одна колонка й опускаються разом: коли фінальний рядок
   став на два рядки коротшим, група лишилася вгорі, а під нею відкрилася
   порожнеча висотою з півслайда. */
.signoff__seal {
  position: absolute;
  left: 885px;
  top: 330px;
  width: 150px;
  height: 150px;
}

.signoff__rule {
  position: absolute;
  left: 760px;
  top: 546px;
  width: 400px;
  height: 2px;
  background: var(--brand);
  transform-origin: 50% 50%;
}

.slide--finale .display--s {
  position: absolute;
  left: 132px;
  right: 132px;
  top: 618px;
  margin: 0;
  font-size: 64px;
  line-height: 1.25;
  text-align: center;
}

/* Привітання велике, назва під ним: школа підписує запрошення, а не вимовляє
   його. Той самий набір, що й під лінійкою на титулі, — дек відкривається і
   закривається однією парою. */
.signoff__org {
  position: absolute;
  left: 132px;
  right: 132px;
  top: 838px;
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: var(--brand);
}

/* --------------------------------------------------------- enlarged photo */

.stage {
  --zoom-veil: #fdfdfd;
}

.deck-zoom__years {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- chrome */

.deck-progress {
  background: var(--brand);
}

.deck-counter {
  position: absolute;
  right: 132px;
  bottom: 44px;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
}

.deck-counter i {
  font-style: normal;
  opacity: 0.4;
  margin: 0 6px;
}