.sys {

  --sys-track-height: 550vh;

  --sys-pin-height: 100vh;

  padding-bottom: 0;

}

.sys-track { position: relative; height: var(--sys-track-height); }

.sys-pin {

  position: sticky; top: 0; height: var(--sys-pin-height); overflow: hidden;

  display: flex; flex-direction: column;

}

.sys-head { flex: none; width: 100%; padding-top: max(9vh, 72px); padding-bottom: 10px; }

.sys-head .sec-head { margin-bottom: 0; max-width: 17ch; }

.sys-stage { position: relative; flex: 1 1 auto; min-height: 0; }



.sys-row {

  position: absolute; inset: 0;

  display: grid; grid-template-columns: minmax(0, var(--sys-copy, 580px)) 1fr;

  align-items: center; gap: 52px;

  padding: 0 30px 0 64px;

}

.sys-row .txt { grid-column: 1; grid-row: 1; }

.sys-row .sys-frame { grid-column: 2; grid-row: 1; }



.sys-frame {

  position: relative;

  width: min(100%, calc(84vh * 16 / 9), 1024px);

  aspect-ratio: 16 / 9;

  margin-inline: auto;

  transform: scale(var(--sys-scale, 1));

  transform-origin: 50% 55%;

}

.sys-plate { position: absolute; inset: 0; display: block; }

.sys-plate img,

.sys-clip,

.sys-film {

  width: 100%; height: 100%; object-fit: contain; display: block;

  --edge-x: calc(7% + 11% * var(--sys-dark, 0));

  --edge-y: calc(6% + 10% * var(--sys-dark, 0));

  --feather:

    linear-gradient(to right,

      rgba(0, 0, 0, 0) 0,

      rgba(0, 0, 0, .18) calc(var(--edge-x) * .32),

      rgba(0, 0, 0, .72) calc(var(--edge-x) * .68),

      #000 var(--edge-x),

      #000 calc(100% - var(--edge-x)),

      rgba(0, 0, 0, .72) calc(100% - var(--edge-x) * .68),

      rgba(0, 0, 0, .18) calc(100% - var(--edge-x) * .32),

      rgba(0, 0, 0, 0) 100%),

    linear-gradient(to bottom,

      rgba(0, 0, 0, 0) 0,

      rgba(0, 0, 0, .18) calc(var(--edge-y) * .32),

      rgba(0, 0, 0, .72) calc(var(--edge-y) * .68),

      #000 var(--edge-y),

      #000 calc(100% - var(--edge-y)),

      rgba(0, 0, 0, .72) calc(100% - var(--edge-y) * .68),

      rgba(0, 0, 0, .18) calc(100% - var(--edge-y) * .32),

      rgba(0, 0, 0, 0) 100%);

  -webkit-mask-image: var(--feather);

  mask-image: var(--feather);

  -webkit-mask-composite: source-in;

  mask-composite: intersect;

}

.sys-film { position: absolute; inset: 0; }

.sys-step .sys-frame { opacity: 0; }

.sys-pin:not(.has-film) .sys-film { display: none; }

.sys-pin.has-film .sys-step .sys-frame { display: none; }

.sys-pin.has-film.film-stale .sys-film { visibility: hidden; }

.sys-pin.has-film.film-stale .sys-step .sys-frame { display: block; }



.sys-pin.film-wait .sys-lineholder .sys-frame::after {

  content: ""; position: absolute; inset: 0; border-radius: inherit;

  background: linear-gradient(100deg, #EDE7DE 0%, #F5F1EA 45%, #EDE7DE 90%);

  background-size: 260% 100%;

  animation: sys-wait 1.5s ease-in-out infinite;

}

@keyframes sys-wait {

  from { background-position: 130% 0 }

  to   { background-position: -30% 0 }

}

@media (prefers-reduced-motion: reduce) {

  .sys-pin.film-wait .sys-lineholder .sys-frame::after { animation: none; }

}



.sys-lineholder { pointer-events: none; }



.sys-steps { list-style: none; margin: 0; padding: 0; }

.sys-step { pointer-events: none; }

.sys-step .txt {

  opacity: 0; transform: translate3d(0, 12px, 0);

  transition: opacity .3s cubic-bezier(0, 0, .2, 1),

              transform .3s cubic-bezier(0, 0, .2, 1);

}

.sys-step .txt.on { opacity: 1; transform: none; pointer-events: auto; }

.sys-step .txt.out {

  opacity: 0; transform: translate3d(0, -12px, 0); transition-duration: .15s;

}

.sys-step .n {

  font-family: "Borna", sans-serif; font-size: 17px; line-height: 1;

  color: var(--flare-ink); letter-spacing: .16em; display: block;

}

@keyframes sys-num {

  from { opacity: 0; transform: translate3d(0, -4px, 0); }

  to { opacity: 1; transform: none; }

}

.sys-step .txt.on .n {

  animation: sys-num .45s cubic-bezier(0, 0, .2, 1) .1s backwards;

}

.sys-step h3 { font-size: clamp(38px, 3.4vw, 46px); margin-top: 16px; }

.sys-step p {

  font-size: 20px; line-height: 1.68; color: var(--ink-soft);

  max-width: 37ch; margin: 22px 0 0;

}

.sys-rail {

  grid-column: 1; grid-row: 1; justify-self: end; align-self: stretch;

  display: flex; align-items: center; gap: 18px;

  margin: 12vh 0; width: max-content;

}

.sys-bar {

  order: 2;

  flex: none; width: 2px; height: 100%;

  background: var(--stone-mid); position: relative;

}

.sys-bar i {

  position: absolute; inset: 0 0 auto 0; width: 100%;

  height: calc(var(--sys-p, 0) * 100%); background: var(--flare); display: block;

}

.sys-ticks {

  display: flex; flex-direction: column; align-items: flex-end; gap: 20px;

  font-size: 12px; letter-spacing: .12em; color: var(--warm-grey);

  font-variant-numeric: tabular-nums;

}

.sys-ticks button {

  pointer-events: auto; cursor: pointer;

  background: none; border: 0; padding: 0; margin: 0;

  font: inherit; letter-spacing: inherit; color: inherit;

  transition: color .25s ease;

}

.sys-ticks button:hover { color: var(--red110); }

.sys-ticks button.on { color: var(--flare-ink); }

.sys-ticks button:focus-visible {

  outline: 2px solid var(--flare); outline-offset: 4px; border-radius: 3px;

}



.sys-step .txt { padding-right: 76px; }



@media (max-width: 1180px) {

  .sys-row { --sys-copy: min(500px, 44vw); gap: 40px; padding: 0 24px 0 44px; }

  .sys-step .txt { padding-right: 64px; }

}



@media (max-width: 900px), (prefers-reduced-motion: reduce) {

  .sys-track { height: auto; }

  .sys-pin { position: static; height: auto; overflow: visible; padding: 8px 0 64px; display: block; }

  .sys-head { padding-top: 0; padding-bottom: 22px; }

  .sys-stage { position: static; }

  .sys-steps { display: grid; gap: 56px; padding: 0 max(20px, calc((100% - var(--measure)) / 2)); }

  .sys-row { position: static; display: flex; flex-direction: column; padding: 0; }

  .sys-row .sys-frame, .sys-row .txt { grid-column: auto; grid-row: auto; }

  .sys-step .txt { padding-right: 0; }

  .sys-lineholder { display: none; }

  .sys-frame {

    width: 100%; transform: none; margin-bottom: 22px; order: -1;

  }

  .sys-step .sys-frame { opacity: 1; }

  .sys-step .txt { opacity: 1; transform: none; transition: none; }

  .sys-step .txt.on .n { animation: none; }

  .sys-step { pointer-events: auto; }

}



@keyframes sys-breathe {

  0%, 100% {

    transform: scale(var(--sys-scale, 1)) translate3d(0, 0, 0);

  }

  50% {

    transform: scale(calc(var(--sys-scale, 1) * 1.012)) translate3d(0, -0.35%, 0);

  }

}

.sys-pin.is-idle .sys-frame {

  animation: sys-breathe 9s ease-in-out infinite;

  will-change: transform;

}



@keyframes sys-tick-breathe {

  0%, 100% { opacity: 1; }

  50% { opacity: .52; }

}

.sys-pin.is-idle .sys-ticks button.on {

  animation: sys-tick-breathe 3.4s ease-in-out infinite;

}



@media (prefers-reduced-motion: reduce) {

  .sys-pin.is-idle .sys-frame,

  .sys-pin.is-idle .sys-ticks button.on { animation: none; }

  .sys-pin.is-idle .sys-frame { will-change: auto; }

}





.sys-clip { display: none; position: absolute; inset: 0; }

@media (max-width: 900px) {

  .sys-clip { display: block; opacity: 0; transition: opacity .4s linear; }

  .sys-frame.clip-on .sys-clip { opacity: 1; }

}

@media (prefers-reduced-motion: reduce) {

  .sys-clip { display: none; }

}