/* 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 {
  --paper: #f4f1ea;
  --paper-2: #eae5db;
  --ink: #16202e;
  --ink-soft: #5b6577;
  --brand: #325390;
  --brand-deep: #243d6e;
  --hairline: rgba(22, 32, 46, 0.12);
  --brand-line: rgba(50, 83, 144, 0.3);

  --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 */

.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.05em;
  margin: 0;
}

.display--xl { font-size: 132px; }
.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. */
.brandline {
  position: absolute;
  top: 744px;
  left: 132px;
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  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: 320px;
  left: 132px;
  width: 1400px;
}

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

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

.title-speaker span {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 18px;
  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: 19px;
  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. Карта можливостей */

.lede {
  position: absolute;
  top: 246px;
  left: 132px;
  width: 620px;
  margin: 0;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-soft);
}

.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: 18px;
  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;
}

.edu-to {
  position: absolute;
  left: 132px;
  top: 512px;
  width: 1500px;
  margin: 0;
  font-family: var(--display);
  font-size: 56px;
  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 {
  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;
  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 {
  padding: 46px 40px 48px;
  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: 20px;
  font-weight: 300;
  color: var(--ink-soft);
}

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

/* Seven 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. Four and three keeps the block the size of a thing you could
   actually do. */
.checklist {
  position: absolute;
  left: 132px;
  top: 392px;
  width: 1656px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 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);
}

.legacy__lead {
  position: absolute;
  left: 132px;
  top: 428px;
  margin: 0;
  font-size: 30px;
  font-weight: 300;
  color: var(--ink-soft);
}

.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: 276px;
  width: 150px;
  height: 150px;
}

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

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

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

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

.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;
}