/* The sign-in signature animation.

   One twelve second loop in three synchronised parts: a packing list snapping
   straight with a stamp punching in, a vessel travelling the real route, and a
   status and day counter ticking through five states.

   CSS and SVG only. No video, no canvas, no animation library.

   It is ambient proof of purpose and must stay subordinate to the form. Under
   reduced motion the settled end state is shown with no movement at all. */

@keyframes snapRow {
  12%, 85% {
    rotate: 0deg;
    translate: 0px 0px;
  }
}

@keyframes stampIn {
  0%, 13% {
    opacity: 0;
    scale: 1.4;
  }
  17%, 86% {
    opacity: 1;
    scale: 1;
  }
  93%, 100% {
    opacity: 0;
    scale: 1;
  }
}

@keyframes cyc {
  0% { opacity: 0 }
  3% { opacity: 1 }
  18% { opacity: 1 }
  21% { opacity: 0 }
  100% { opacity: 0 }
}

.si-row {
  font: 400 10.5px "Spline Sans Mono", ui-monospace, monospace;
  color: #5C6270;
  background: #F4F5F7;
  border-radius: 3px;
  padding: 2px 8px;
  animation: snapRow 12s infinite;
}

.si-row-1 { rotate: -1.3deg; translate: 5px 1px }
.si-row-2 { rotate: 1.1deg; translate: -6px 0px }
.si-row-3 { rotate: -0.8deg; translate: 7px -1px }

.si-stamp {
  position: absolute;
  right: -8px;
  top: -13px;
  background: #182F63;
  color: #FFFFFF;
  font: 600 10px "Spline Sans Mono", ui-monospace, monospace;
  letter-spacing: .04em;
  padding: 4px 9px;
  border-radius: 4px;
  animation: stampIn 12s infinite;
}

.si-track {
  position: relative;
  width: 110px;
  height: 22px;
}

.si-track span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  animation: cyc 12s infinite;
}

.si-track--status span {
  font: 600 11px "Hanken Grotesk", sans-serif;
  letter-spacing: .14em;
  color: #C7D0E6;
}

.si-track--status span.is-clear {
  color: #8FCBA4;
}

.si-track--counter {
  font: 400 11.5px "Spline Sans Mono", ui-monospace, monospace;
  color: #C7D0E6;
}

.si-track--counter span {
  justify-content: flex-end;
}

/* These must out-specify the animation shorthand on .si-track span, which
   would otherwise reset the delay to zero and fade all five states in
   together instead of one at a time. */
.si-track span.si-delay-0 { animation-delay: 0s }
.si-track span.si-delay-1 { animation-delay: 2.4s }
.si-track span.si-delay-2 { animation-delay: 4.8s }
.si-track span.si-delay-3 { animation-delay: 7.2s }
.si-track span.si-delay-4 { animation-delay: 9.6s }

.si-vessel-static {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .si-row,
  .si-stamp,
  .si-track span {
    animation: none;
  }

  .si-row {
    rotate: 0deg;
    translate: 0px 0px;
  }

  .si-stamp {
    opacity: 1;
    scale: 1;
  }

  /* Show only the settled final state of each track. */
  .si-track span {
    opacity: 0;
  }

  .si-track span.si-delay-4 {
    opacity: 1;
  }

  .si-vessel-animated {
    display: none;
  }

  .si-vessel-static {
    display: block;
  }
}

/* The brand column seats the mark, the wordmark, the strapline and the route
   on one screen without scrolling, and a 1440x900 display only gives the
   viewport about 800px of that once browser chrome is taken out. So on a
   short viewport the mark steps down one size and the column's own top and
   bottom padding pays for the rest, which keeps the page from scrolling on
   the laptops most of the office actually signs in on.

   The plaque rules out-specify app.css without !important because its
   component classes sit inside @layer components and these do not. The
   padding rule does need it: that one is fighting an inline style. */
@media (max-height: 840px) {
  .si-brand { padding-top: 34px !important; padding-bottom: 34px !important }
  .mcg-logo-plaque--hero { padding: 13px 18px }
  .mcg-logo-plaque--hero img { height: 60px }
}

@media (max-width: 640px) {
  .si-grid { grid-template-columns: 1fr !important }
  .si-brand { padding: 28px 24px !important }
  .si-brand-name { font-size: 30px !important }
  .si-mark { gap: 18px }
  .mcg-logo-plaque--hero { padding: 12px 17px }
  .mcg-logo-plaque--hero img { height: 60px }
  .si-route { display: none !important }
  .si-form-col { padding: 28px 16px 64px !important }
  .si-card { width: 100% !important; padding: 28px 22px !important }
  .si-footer { position: static !important; margin-top: 24px; text-align: center }
}