/* =============================================================================
   stud.stavmk.ru — страница входа                                       v8
   /web/css/login-pages.css
   ============================================================================= */

@font-face{font-family:"Raleway";src:url("/web/fonts/raleway-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0400-04FF,U+2000-206F,U+20B0-20BF}
@font-face{font-family:"Raleway";src:url("/web/fonts/raleway-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0400-04FF,U+2000-206F,U+20B0-20BF}
@font-face{font-family:"Raleway";src:url("/web/fonts/raleway-700italic.woff2") format("woff2");
  font-weight:700;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0400-04FF,U+2000-206F}

/* Изоляция стилей от старого site.css/main.css stud-сервера */
html, body, .login {
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body {
  background: var(--bg-surface) !important;
  color: var(--fg-default) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  line-height: var(--lh-base) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.auth, .auth * {
  box-sizing: border-box !important;
  font-family: var(--font-sans) !important;
}

/* =============================================================================
   КАРКАС
   ============================================================================= */
.auth {
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr clamp(400px, 34%, 540px);
  background: var(--bg-surface);
  position: relative;
  overflow: hidden;
}

/* ---------- Левая панель ---------- */
.auth__brand {
  position: relative;
  z-index: var(--z-base);
  overflow: hidden;
  background: var(--bg-brand);
}

.auth__slides { position: absolute; inset: 0; }
.auth__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-crossfade) var(--ease-out);
}
.auth__slide.is-active { opacity: 1; }
.auth__slide img, .auth__slide svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.auth__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(16,24,32,.10) 0%, rgba(16,24,32,.04) 38%,
             rgba(16,24,32,.70) 80%, rgba(16,24,32,.92) 100%);
}

.auth__brand--photo .auth__scrim {
  background: linear-gradient(103deg, rgba(16,24,32,.86) 0%, rgba(16,24,32,.62) 46%, rgba(108,115,165,.50) 100%);
}
.auth__brand--photo .auth__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(16,24,32,.82) 100%);
}

.auth__brandbody {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(2rem, 4vw, 3.5rem);
  color: var(--fg-on-dark);
}

.auth__mark {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: auto;
}

.auth__mark img {
  width: 46px;
  height: 46px;
  flex: none;
  object-fit: contain;
}

.auth__mark-txt {
  font-size: var(--text-xs) !important;
  line-height: 1.4 !important;
  letter-spacing: var(--tracking-caps) !important;
  text-transform: uppercase !important;
  font-weight: var(--fw-semibold) !important;
  color: rgba(255,255,255,.88) !important;
}

.auth__title {
  font-weight: var(--fw-semibold) !important;
  font-size: clamp(1.875rem, 3.1vw, 2.875rem) !important;
  line-height: var(--lh-5xl) !important;
  letter-spacing: var(--tracking-tight) !important;
  margin: 0 0 var(--sp-4) !important;
  max-width: 15ch;
  text-wrap: balance;
  color: var(--fg-on-dark) !important;
}

.auth__lede {
  margin: 0 !important;
  max-width: 44ch;
  font-size: var(--text-base) !important;
  line-height: var(--lh-base) !important;
  color: rgba(255,255,255,.84) !important;
}

.auth__dots {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
}

.auth__dots button {
  width: 26px;
  height: 3px;
  border: 0;
  padding: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
  background: rgba(255,255,255,.34);
  transition: background var(--dur-base), width var(--dur-slow) var(--ease-out);
}
.auth__dots button[aria-current="true"] {
  background: var(--fg-on-dark);
  width: 44px;
}

/* ---------- Правая панель ---------- */
.auth__panel {
  position: relative;
  z-index: var(--z-raised);
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  min-width: 0;
  --bulge: 64px;
}

.auth__panel::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  left: calc(-1 * var(--bulge));
  width: calc(var(--bulge) * 2);
  background: var(--bg-surface);
  border-radius: 100% / 50%;
  pointer-events: none;
}

.auth__panel::after {
  content: "";
  position: absolute;
  top: -7%;
  height: 114%;
  left: calc(-1 * (var(--bulge) + 42px));
  width: calc((var(--bulge) + 42px) * 2);
  border: 1px solid rgba(163,161,200,.55);
  border-radius: 100% / 50%;
  clip-path: inset(0 50% 0 0);
  pointer-events: none;
}

.auth__body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-10) clamp(1.75rem, 3.4vw, 3.5rem) var(--sp-5);
  min-height: 0;
  overflow-y: auto;
}

.auth__form {
  width: 100%;
  max-width: 376px;
  margin: 0 auto;
}

.auth__foot {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 clamp(1.75rem, 3.4vw, 3.5rem) var(--sp-6);
  font-size: var(--text-xs) !important;
  color: var(--fg-subtle) !important;
}

.auth__head { margin: 0 0 var(--sp-6); }

.auth__h1 {
  font-size: var(--text-2xl) !important;
  line-height: var(--lh-2xl) !important;
  letter-spacing: var(--tracking-snug) !important;
  font-weight: var(--fw-semibold) !important;
  margin: 0 0 var(--sp-1) !important;
  color: var(--fg-default) !important;
}

.auth__sub {
  margin: 0 !important;
  font-size: var(--text-sm) !important;
  line-height: var(--lh-sm) !important;
  color: var(--fg-subtle) !important;
}

.auth__mobilehead { display: none; }

/* =============================================================================
   ПОЛЯ
   ============================================================================= */
.auth .form-group {
  margin: 0 0 var(--sp-4) !important;
  position: relative;
}

.auth .control-label, .auth__label {
  display: block;
  font-size: var(--text-sm) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--fg-muted) !important;
  margin: 0 0 var(--sp-2) !important;
}
.auth .control-label .required, .auth .required { display: none !important; }

.auth .form-control {
  display: block !important;
  width: 100% !important;
  height: var(--control-h-lg) !important;
  padding: 0 var(--sp-4) !important;
  font-size: var(--text-md) !important;
  color: var(--fg-default) !important;
  background: var(--bg-field) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast) !important;
}

.auth .form-control::placeholder { color: var(--fg-disabled); }
.auth .form-control:hover { border-color: var(--border-brand) !important; }
.auth .form-control:focus {
  outline: none !important;
  background: var(--bg-surface) !important;
  border-color: var(--border-focus) !important;
  box-shadow: var(--ring-focus) !important;
}

.auth__field--pass .form-control { padding-right: 48px !important; }

.auth .has-error .form-control {
  border-color: var(--status-danger-solid) !important;
  background: var(--status-danger-bg) !important;
}
.auth .has-error .form-control:focus { box-shadow: var(--ring-danger) !important; }

.auth .help-block {
  margin: var(--sp-2) 0 0 !important;
  font-size: var(--text-sm) !important;
  line-height: var(--lh-sm) !important;
  color: var(--status-danger-fg) !important;
}
.auth .help-block:empty { display: none !important; }

.auth__inputwrap { position: relative; display: block; }
.auth__peek {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--fg-subtle);
  cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.auth__peek:hover { color: var(--action3-fg); background: var(--action3-bg-hover); }
.auth__peek svg { width: 19px; height: 19px; }

.auth__hint {
  display: none;
  gap: var(--sp-2);
  align-items: center;
  margin: var(--sp-2) 0 0 !important;
  font-size: var(--text-xs) !important;
  color: var(--status-warning-fg) !important;
  background: var(--status-warning-bg) !important;
  padding: var(--sp-2) var(--sp-3) !important;
  border-radius: var(--radius-sm) !important;
}
.auth__hint.is-on { display: flex; }
.auth__hint svg { width: 14px; height: 14px; flex: none; }

/* ---------- Строка «Запомнить меня» ---------- */
.auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  flex-wrap: wrap;
  margin: var(--sp-1) 0 var(--sp-5) !important;
}

.auth__helpwrap { position: relative; display: inline-flex; }
.auth__reset {
  font-size: var(--text-sm) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--fg-link) !important;
  background: none;
  border: 0;
  cursor: help;
  white-space: nowrap;
  padding: 2px 0;
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast);
}
.auth__reset:hover { color: var(--fg-link-hover) !important; }

.auth__tip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: var(--z-tooltip);
  width: max-content;
  max-width: 264px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-inverse);
  color: var(--fg-on-dark);
  font-size: var(--text-xs) !important;
  font-weight: var(--fw-regular) !important;
  line-height: 1.5 !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.auth__tip::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 100%;
  border: 6px solid transparent;
  border-top-color: var(--bg-inverse);
}
.auth__tip b { font-weight: var(--fw-semibold); }

.auth__reset:focus-visible + .auth__tip,
.auth__reset[aria-expanded="true"] + .auth__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (hover:hover) and (pointer:fine){
  .auth__helpwrap:hover .auth__tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.auth__check {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 !important;
  cursor: pointer;
  font-size: var(--text-sm) !important;
  color: var(--fg-muted) !important;
  user-select: none;
  font-weight: var(--fw-regular) !important;
}

.auth__check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.auth__check-box {
  width: 19px;
  height: 19px;
  flex: none;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--bg-surface);
  display: grid;
  place-items: center;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}

.auth__check-box svg {
  width: 12px;
  height: 12px;
  color: var(--action-fg);
  opacity: 0;
  transform: scale(.7);
  transition: opacity var(--dur-instant), transform var(--dur-fast) var(--ease-out);
}

.auth__check input:checked + .auth__check-box {
  background: var(--action-bg);
  border-color: var(--action-bg);
}
.auth__check input:checked + .auth__check-box svg {
  opacity: 1;
  transform: scale(1);
}

/* =============================================================================
   КНОПКА «ВОЙТИ»
   ============================================================================= */
.auth__btn {
  position: relative;
  width: 100% !important;
  height: var(--control-h-xl) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--sp-2) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--tracking-wide) !important;
  color: var(--action-fg) !important;
  background: var(--action-bg) !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-instant) var(--ease-out) !important;
}
.auth__btn:hover, .auth__btn:focus { background: var(--action-bg-hover) !important; color: var(--action-fg) !important; }
.auth__btn:active { background: var(--action-bg-active) !important; transform: scale(.988) !important; }
.auth__btn[aria-busy="true"] { background: var(--action-bg-hover) !important; cursor: progress; }

.auth__spin {
  display: none;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255,255,255,.40);
  border-top-color: #fff;
  border-radius: var(--radius-full);
  animation: auth-btn-spin .7s linear infinite;
}
.auth__btn[aria-busy="true"] .auth__spin { display: block; }
@keyframes auth-btn-spin { to { transform: rotate(360deg); } }

/* =============================================================================
   СЛУЖЕБНЫЕ БЛОКИ
   ============================================================================= */
.auth__alert {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm) !important;
  line-height: var(--lh-sm) !important;
  margin: 0 0 var(--sp-5) !important;
}
.auth__alert[hidden] { display: none; }
.auth__alert svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.auth__alert--err {
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
  box-shadow: inset 0 0 0 1px var(--status-danger-border);
}
.auth__alert--ok {
  background: var(--status-success-bg);
  color: var(--status-success-fg);
  box-shadow: inset 0 0 0 1px var(--status-success-border);
}

.auth__captcha { margin: 0 0 var(--sp-5); min-height: 0; }
.auth__captcha.is-armed { min-height: 86px; }

.auth__legal {
  margin: var(--sp-4) 0 0 !important;
  font-size: var(--text-xs) !important;
  line-height: 1.55 !important;
  color: var(--fg-subtle) !important;
  text-align: center;
}
.auth__legal a {
  color: var(--fg-muted) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  text-decoration-color: var(--border-brand);
}
.auth__legal a:hover { text-decoration-color: var(--fg-brand); }

/* =============================================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ============================================================================= */
@media (max-width:900px){
  .auth {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
  }
  .auth__brand { display: none; }
  .auth__panel::before, .auth__panel::after { display: none; }

  .auth__mobilehead {
    display: block;
    position: relative;
    background: var(--bg-brand);
    color: var(--fg-on-dark);
    padding: var(--sp-6) var(--sp-5) var(--sp-10);
    overflow: hidden;
  }
  .auth__mobilehead .auth__mobilebg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .auth__mobilehead::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16,24,32,.20), rgba(16,24,32,.58));
  }
  .auth__mobilehead::after {
    content: "";
    position: absolute;
    left: -12%;
    right: -12%;
    bottom: -26px;
    height: 52px;
    background: var(--bg-surface);
    border-radius: 100% / 100%;
  }
  .auth__mobilehead .auth__mark { position: relative; margin: 0; }
  .auth__mobilehead .auth__mark img { width: 40px; height: 40px; }
  .auth__mobilehead .auth__mark-txt { font-size: var(--text-2xs) !important; }

  .auth__body {
    justify-content: flex-start;
    padding: var(--sp-6) var(--sp-5) var(--sp-3);
    overflow: visible;
    min-height: auto;
  }
  .auth__h1 { font-size: var(--text-xl) !important; }
  .auth__head { margin-bottom: var(--sp-5); }
  .auth__foot { padding: 0 var(--sp-5) var(--sp-4); }
}

/* =============================================================================
   2K+ ЭКРАНЫ
   ============================================================================= */
@media (min-width:1600px){
  .auth { grid-template-columns: 1fr clamp(440px, 32%, 640px); }
  .auth__form { max-width: 420px; }
  .auth__h1 { font-size: var(--text-3xl) !important; line-height: var(--lh-3xl) !important; }
  .auth__sub { font-size: var(--text-base) !important; }
  .auth__label { font-size: var(--text-base) !important; }
  .auth .form-control {
    height: var(--control-h-xl) !important;
    font-size: var(--text-lg) !important;
    padding: 0 var(--sp-5) !important;
  }
  .auth__field--pass .form-control { padding-right: 56px !important; }
  .auth__peek { width: 44px; height: 44px; }
  .auth__peek svg { width: 21px; height: 21px; }
  .auth__btn { height: 58px !important; font-size: var(--text-lg) !important; }
  .auth__check, .auth__reset { font-size: var(--text-base) !important; }
  .auth__check-box { width: 21px; height: 21px; }
  .auth__legal { font-size: var(--text-sm) !important; }
  .auth__title { font-size: clamp(2.875rem, 3.4vw, 3.75rem) !important; }
  .auth__lede { font-size: var(--text-lg) !important; }
  .auth__mark img { width: 56px; height: 56px; }
  .auth__mark-txt { font-size: var(--text-sm) !important; }
}

@media (min-width:2200px){
  .auth { grid-template-columns: 1fr clamp(440px, 30%, 720px); }
  .auth__form { max-width: 460px; }
}

/* =============================================================================
   ЖИВАЯ АНИМАЦИЯ
   ============================================================================= */
.auth__art { position: absolute; inset: 0; overflow: hidden; background: var(--bg-brand); }
.auth__wash { display: none; }
.auth__wash--1 { display: block; position: absolute; inset: 0; opacity: 1; background: var(--bg-brand); }

.auth__stage {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
}
.auth__mono { position: absolute; inset: 0; width: 100%; height: 100%; }

.auth__ring {
  position: absolute;
  left: 41.67%;
  top: 45.42%;
  border-style: solid;
  border-radius: 50%;
  border-right-color: transparent;
  will-change: transform;
}

.auth__ring--r1 {
  width: 25.00%;
  aspect-ratio: 1;
  border-width: 2.4px;
  border-color: var(--fg-on-dark);
  border-right-color: transparent;
  opacity: .90;
  animation: auth-spin-r1 48s linear infinite;
}
.auth__ring--r2 {
  width: 45.83%;
  aspect-ratio: 1;
  border-width: 1.8px;
  border-color: var(--fg-on-dark);
  border-right-color: transparent;
  opacity: .62;
  animation: auth-spin 98s linear infinite reverse;
}
.auth__ring--r3 {
  width: 69.17%;
  aspect-ratio: 1;
  border-width: 1.6px;
  border-color: var(--lilac-100);
  border-right-color: transparent;
  opacity: .70;
  animation: auth-spin 132s linear infinite;
}
.auth__ring--r4 {
  width: 95.83%;
  aspect-ratio: 1;
  border-width: 1.4px;
  border-color: var(--lilac-100);
  border-right-color: transparent;
  opacity: .46;
  animation: auth-spin 171s linear infinite reverse;
}
.auth__ring--r5 {
  width: 110.0%;
  aspect-ratio: 1;
  border-width: 1.3px;
  border-color: var(--lilac-100);
  border-right-color: transparent;
  opacity: .30;
  animation: auth-spin 214s linear infinite;
}

@keyframes auth-spin {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}

@keyframes auth-spin-r1 {
  0.0% { transform: translate(-50%,-50%) rotate(-2.47deg); }
  2.083% { transform: translate(-50%,-50%) rotate(-1.08deg); }
  4.167% { transform: translate(-50%,-50%) rotate(-0.01deg); }
  6.25% { transform: translate(-50%,-50%) rotate(0.85deg); }
  8.333% { transform: translate(-50%,-50%) rotate(1.61deg); }
  10.417% { transform: translate(-50%,-50%) rotate(2.39deg); }
  12.5% { transform: translate(-50%,-50%) rotate(3.3deg); }
  14.583% { transform: translate(-50%,-50%) rotate(4.46deg); }
  16.667% { transform: translate(-50%,-50%) rotate(5.98deg); }
  18.75% { transform: translate(-50%,-50%) rotate(7.95deg); }
  20.833% { transform: translate(-50%,-50%) rotate(10.47deg); }
  22.917% { transform: translate(-50%,-50%) rotate(13.63deg); }
  25.0% { transform: translate(-50%,-50%) rotate(17.5deg); }
  27.083% { transform: translate(-50%,-50%) rotate(22.14deg); }
  29.167% { transform: translate(-50%,-50%) rotate(27.61deg); }
  31.25% { transform: translate(-50%,-50%) rotate(33.93deg); }
  33.333% { transform: translate(-50%,-50%) rotate(41.13deg); }
  35.417% { transform: translate(-50%,-50%) rotate(49.21deg); }
  37.5% { transform: translate(-50%,-50%) rotate(58.17deg); }
  39.583% { transform: translate(-50%,-50%) rotate(67.97deg); }
  41.667% { transform: translate(-50%,-50%) rotate(78.58deg); }
  43.75% { transform: translate(-50%,-50%) rotate(89.94deg); }
  45.833% { transform: translate(-50%,-50%) rotate(102.0deg); }
  47.917% { transform: translate(-50%,-50%) rotate(114.66deg); }
  50.0% { transform: translate(-50%,-50%) rotate(127.85deg); }
  52.083% { transform: translate(-50%,-50%) rotate(141.46deg); }
  54.167% { transform: translate(-50%,-50%) rotate(155.39deg); }
  56.25% { transform: translate(-50%,-50%) rotate(169.53deg); }
  58.333% { transform: translate(-50%,-50%) rotate(183.77deg); }
  60.417% { transform: translate(-50%,-50%) rotate(197.99deg); }
  62.5% { transform: translate(-50%,-50%) rotate(212.07deg); }
  64.583% { transform: translate(-50%,-50%) rotate(225.91deg); }
  66.667% { transform: translate(-50%,-50%) rotate(239.4deg); }
  68.75% { transform: translate(-50%,-50%) rotate(252.43deg); }
  70.833% { transform: translate(-50%,-50%) rotate(264.91deg); }
  72.917% { transform: translate(-50%,-50%) rotate(276.75deg); }
  75.0% { transform: translate(-50%,-50%) rotate(287.88deg); }
  77.083% { transform: translate(-50%,-50%) rotate(298.23deg); }
  79.167% { transform: translate(-50%,-50%) rotate(307.77deg); }
  81.25% { transform: translate(-50%,-50%) rotate(316.44deg); }
  83.333% { transform: translate(-50%,-50%) rotate(324.24deg); }
  85.417% { transform: translate(-50%,-50%) rotate(331.16deg); }
  87.5% { transform: translate(-50%,-50%) rotate(337.21deg)}
  89.583% { transform: translate(-50%,-50%) rotate(342.41deg); }
  91.667% { transform: translate(-50%,-50%) rotate(346.8deg); }
  93.75% { transform: translate(-50%,-50%) rotate(350.43deg); }
  95.833% { transform: translate(-50%,-50%) rotate(353.38deg); }
  97.917% { transform: translate(-50%,-50%) rotate(355.72deg); }
  100.0% { transform: translate(-50%,-50%) rotate(357.53deg); }
}

.auth__mk { opacity: .62; }
.auth__mk path {
  fill: none;
  stroke: var(--fg-on-dark);
  stroke-width: 12.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mk-front {
  transform-box: view-box;
  transform-origin: 500px 545px;
  animation: auth-mk-front 48s linear infinite;
}
@keyframes auth-mk-front {
  0%, 0.5%   { transform: scale(0); animation-timing-function: var(--ease-out); }
  4.2%       { transform: scale(1); }
  11%        { transform: scale(1); animation-timing-function: var(--ease-in-out); }
  15.5%      { transform: scale(0); }
  16%, 100%  { transform: scale(0); }
}

.ring--core {
  transform-box: view-box;
  transform-origin: 500px 545px;
  animation: auth-core 48s linear infinite;
}
@keyframes auth-core {
  0%           { opacity: .82; }
  0.5%, 15.5%  { opacity: 0; }
  16%, 100%    { opacity: .82; }
}

@media (max-width:900px){
  .auth__mobilehead .auth__wash,
  .auth__mobilehead .ring { animation: none; }
  .auth__mobilehead .auth__wash--1 { opacity: 1; }
  .auth__mobilehead .auth__stage { display: none; }
}

@media (prefers-reduced-motion:reduce){
  .mk-front { animation: none; transform: scale(1); }
  .ring--core { animation: none; opacity: 0; }
}