/*
 * Login: continuidade entre a foto e o acesso (vidro), luz que percorre a curva,
 * cartões da rotina sobre a foto e animações de entrada, troca de destaque e acesso liberado.
 * Carregado depois de login-clinical.css. Quem pede menos movimento no sistema operacional
 * (por exemplo, "Efeitos de animação" desligado no Windows) continua vendo surgimentos suaves,
 * a luz da curva e o acesso liberado; só o que desloca a tela (zoom da foto, cartões
 * flutuando, brilhos à deriva e paralaxe) fica parado.
 */

.mm-login-page {
  --mm-login-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --mm-login-veil-0: rgba(247, 251, 255, 0);
  --mm-login-veil-1: rgba(247, 251, 255, 0.7);
  --mm-login-veil-2: rgba(247, 251, 255, 0.9);
  --mm-login-glow-1: #bfe1ff;
  --mm-login-glow-2: #c4f0e4;
  --mm-login-glow-3: #ddd8ff;
  --mm-login-glow-opacity: 0.7;
  --mm-login-glass-input: rgba(255, 255, 255, 0.78);
  --mm-login-glass-input-disabled: rgba(248, 250, 252, 0.72);
  --mm-login-chip-bg: rgba(255, 255, 255, 0.84);
  --mm-login-chip-border: rgba(255, 255, 255, 0.95);
  --mm-login-chip-shadow: 0 14px 30px rgba(16, 35, 76, 0.12);
  --mm-login-chip-title: #10234c;
  --mm-login-chip-text: #70809f;
  --mm-login-flow-1: rgba(26, 160, 224, 0.2);
  --mm-login-flow-2: rgba(25, 179, 148, 0.16);
  --mm-login-progress-track: #d7e2ee;
  --mm-login-ring-track: #e3edf7;
  --mm-login-success: #25b87a;
  --mm-login-error: #d0453b;
}

html[data-theme="dark"] .mm-login-page {
  --mm-login-veil-0: rgba(10, 20, 36, 0);
  --mm-login-veil-1: rgba(10, 20, 36, 0.72);
  --mm-login-veil-2: rgba(10, 20, 36, 0.9);
  --mm-login-glow-1: #1c5aa0;
  --mm-login-glow-2: #0f6b5c;
  --mm-login-glow-3: #41348c;
  --mm-login-glow-opacity: 0.38;
  --mm-login-glass-input: rgba(13, 23, 39, 0.72);
  --mm-login-glass-input-disabled: rgba(17, 29, 46, 0.72);
  --mm-login-chip-bg: rgba(13, 23, 39, 0.8);
  --mm-login-chip-border: rgba(255, 255, 255, 0.08);
  --mm-login-chip-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
  --mm-login-chip-title: #edf5ff;
  --mm-login-chip-text: #94a3b8;
  --mm-login-flow-1: rgba(61, 186, 242, 0.26);
  --mm-login-flow-2: rgba(25, 179, 148, 0.22);
  --mm-login-progress-track: #23344d;
  --mm-login-ring-track: #1d2b42;
  --mm-login-error: #ff7b72;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .mm-login-page {
    --mm-login-veil-0: rgba(10, 20, 36, 0);
    --mm-login-veil-1: rgba(10, 20, 36, 0.72);
    --mm-login-veil-2: rgba(10, 20, 36, 0.9);
    --mm-login-glow-1: #1c5aa0;
    --mm-login-glow-2: #0f6b5c;
    --mm-login-glow-3: #41348c;
    --mm-login-glow-opacity: 0.38;
    --mm-login-glass-input: rgba(13, 23, 39, 0.72);
    --mm-login-glass-input-disabled: rgba(17, 29, 46, 0.72);
    --mm-login-chip-bg: rgba(13, 23, 39, 0.8);
    --mm-login-chip-border: rgba(255, 255, 255, 0.08);
    --mm-login-chip-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
    --mm-login-chip-title: #edf5ff;
    --mm-login-chip-text: #94a3b8;
    --mm-login-flow-1: rgba(61, 186, 242, 0.26);
    --mm-login-flow-2: rgba(25, 179, 148, 0.22);
    --mm-login-progress-track: #23344d;
    --mm-login-ring-track: #1d2b42;
    --mm-login-error: #ff7b72;
  }
}

/* ---------- Luz ambiente atrás do formulário ---------- */
.mm-login-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  animation: mm-login-motion-fade 1400ms var(--mm-login-ease) both;
}

.mm-login-ambient__glow {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: var(--mm-login-glow-opacity);
  animation: mm-login-motion-drift 18s ease-in-out infinite alternate;
}

.mm-login-ambient__glow--1 { top: -18%; left: -20%; background: var(--mm-login-glow-1); }
.mm-login-ambient__glow--2 { right: -25%; bottom: -22%; background: var(--mm-login-glow-2); animation-duration: 22s; animation-delay: -7s; }
.mm-login-ambient__glow--3 { top: 38%; left: 25%; width: 45%; background: var(--mm-login-glow-3); opacity: calc(var(--mm-login-glow-opacity) * 0.7); animation-duration: 26s; animation-delay: -12s; }

.mm-login-ambient::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
  transform: translateX(-130%);
  animation: mm-login-motion-sheen 1600ms 700ms ease-out both;
}

/* ---------- Entrada do formulário ---------- */
/* "backwards": depois da entrada o estado normal volta a valer (necessário para o acesso liberado). */
.mm-login-access__inner > * {
  animation: mm-login-motion-rise 620ms var(--mm-login-ease) backwards;
}

.mm-login-access__inner > :nth-child(1) { animation-delay: 60ms; }
.mm-login-access__inner > :nth-child(2) { animation-delay: 140ms; }
.mm-login-access__inner > :nth-child(3) { animation-delay: 220ms; }
.mm-login-access__inner > :nth-child(4),
.mm-login-access__inner > :nth-child(5) { animation-delay: 300ms; }
.mm-login-access__inner > :nth-child(n+6) { animation-delay: 380ms; }

.mm-login-access__inner > .mm-login-brand {
  animation-name: mm-login-motion-glass-in;
  animation-duration: 900ms;
}

/* ---------- Microinterações dos campos ---------- */
.mm-login-control > i:first-child {
  transition: color 180ms ease, transform 220ms var(--mm-login-ease);
}

.mm-login-control:focus-within > i:first-child {
  color: var(--mm-login-focus);
  transform: translateY(-50%) scale(1.08);
}

.mm-login-password-toggle i {
  transition: transform 240ms var(--mm-login-ease);
}

.mm-login-password-toggle:hover i {
  transform: scale(1.1);
}

.mm-login-control.is-error input {
  border-color: var(--mm-login-error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mm-login-error) 14%, transparent);
}

.mm-login-control.is-error {
  animation: mm-login-motion-shake 380ms ease;
}

.mm-login-primary-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}

.mm-login-primary-button:hover:not(:disabled)::after {
  animation: mm-login-motion-sheen 900ms ease-out;
}

/* ---------- Escolha da clínica ---------- */
.mm-login-page .mm-login-companies:not(.is-hidden) {
  animation: mm-login-motion-rise 520ms var(--mm-login-ease) backwards;
}

.mm-login-page .mm-login-company {
  animation: mm-login-motion-rise 480ms var(--mm-login-ease) backwards;
  transition: border-color 140ms ease, background-color 140ms ease, transform 160ms ease;
}

.mm-login-page .mm-login-company:nth-child(2) { animation-delay: 60ms; }
.mm-login-page .mm-login-company:nth-child(3) { animation-delay: 120ms; }
.mm-login-page .mm-login-company:nth-child(4) { animation-delay: 180ms; }
.mm-login-page .mm-login-company:nth-child(n+5) { animation-delay: 240ms; }

.mm-login-page .mm-login-company:hover:not(:disabled) {
  transform: translateX(3px);
}

.mm-login-page .mm-login-company__arrow {
  transition: transform 160ms ease;
}

.mm-login-page .mm-login-company:hover .mm-login-company__arrow {
  transform: translateX(3px);
}

/* ---------- Acesso liberado ---------- */
.mm-login-access__inner > .mm-login-seal {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 0 24px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) scale(0.96);
  pointer-events: none;
  animation: none !important;
  transition: opacity 320ms ease 180ms, transform 420ms var(--mm-login-ease) 180ms, visibility 0s linear 500ms;
}

.mm-login-seal__mark {
  position: relative;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}

.mm-login-seal__ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
  stroke-width: 4;
  stroke-linecap: round;
}

.mm-login-seal__track {
  stroke: var(--mm-login-ring-track);
}

.mm-login-seal__bar {
  stroke: var(--mm-login-focus);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 900ms var(--mm-login-ease) 280ms, stroke 300ms ease 1100ms;
}

.mm-login-seal__logo {
  width: 58px;
  height: auto;
  transition: opacity 260ms ease 1000ms, transform 260ms ease 1000ms;
}

.mm-login-seal__check {
  position: absolute;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: var(--mm-login-success);
  font-size: 24px;
  opacity: 0;
  transform: scale(0);
  transition: transform 380ms cubic-bezier(0.3, 1.5, 0.5, 1) 1100ms, opacity 200ms ease 1100ms;
}

.mm-login-seal__title {
  color: var(--mm-login-success);
  font-size: 18px;
  font-weight: 600;
}

.mm-login-seal__text {
  color: var(--mm-login-muted);
  font-size: 14px;
}

.mm-login-access__inner > * {
  transition: opacity 280ms ease, transform 320ms var(--mm-login-ease);
}

.mm-login-access.is-login-success .mm-login-access__inner > :not(.mm-login-brand):not(.mm-login-seal) {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

.mm-login-access.is-login-success .mm-login-access__inner > .mm-login-seal {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
  transition-delay: 180ms, 180ms, 0s;
}

.mm-login-access.is-login-success .mm-login-seal__bar {
  stroke-dashoffset: 0;
  stroke: var(--mm-login-success);
}

.mm-login-access.is-login-success .mm-login-seal__logo {
  opacity: 0;
  transform: scale(0.7);
}

.mm-login-access.is-login-success .mm-login-seal__check {
  opacity: 1;
  transform: scale(1);
}

/* ---------- Destaques: zoom lento, texto em camadas e barra de progresso ---------- */
.mm-login-hero__media-item.is-active {
  animation: mm-login-motion-kenburns 9s ease-out both;
}

.mm-login-hero.is-carousel-ready .mm-login-hero__slide.is-active .mm-login-hero__eyebrow,
.mm-login-hero.is-carousel-ready .mm-login-hero__slide.is-active h2,
.mm-login-hero.is-carousel-ready .mm-login-hero__slide.is-active .mm-login-hero__description,
.mm-login-hero.is-carousel-ready .mm-login-hero__slide.is-active .mm-login-benefit {
  animation: mm-login-motion-rise 620ms var(--mm-login-ease) both;
}

.mm-login-hero.is-carousel-ready .mm-login-hero__slide.is-active .mm-login-hero__eyebrow { animation-delay: 140ms; }
.mm-login-hero.is-carousel-ready .mm-login-hero__slide.is-active h2 { animation-delay: 220ms; }
.mm-login-hero.is-carousel-ready .mm-login-hero__slide.is-active .mm-login-hero__description { animation-delay: 320ms; }
.mm-login-hero.is-carousel-ready .mm-login-hero__slide.is-active .mm-login-benefit:nth-child(1) { animation-delay: 420ms; }
.mm-login-hero.is-carousel-ready .mm-login-hero__slide.is-active .mm-login-benefit:nth-child(2) { animation-delay: 500ms; }
.mm-login-hero.is-carousel-ready .mm-login-hero__slide.is-active .mm-login-benefit:nth-child(3) { animation-delay: 580ms; }

.mm-login-hero.is-carousel-ready .mm-login-hero__slide.is-active .mm-login-benefit__icon {
  animation: mm-login-motion-pop 520ms var(--mm-login-ease) both;
  animation-delay: inherit;
}

.mm-login-hero__dots {
  gap: 8px;
}

.mm-login-hero__dots button,
.mm-login-hero__dots button:hover,
.mm-login-hero__dots button.is-active {
  position: relative;
  width: 36px;
  min-width: 36px;
  height: 16px;
  border-radius: 4px;
  background: transparent;
  transform: none;
}

.mm-login-hero__dots button::before,
.mm-login-hero__dots button::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 0;
  left: 0;
  height: 4px;
  border-radius: 4px;
}

.mm-login-hero__dots button::before {
  background: var(--mm-login-progress-track);
  transition: background-color 180ms ease;
}

.mm-login-hero__dots button:hover::before {
  background: color-mix(in srgb, var(--mm-login-progress-track) 70%, var(--mm-login-focus));
}

.mm-login-hero__dots button::after {
  background: var(--mm-login-focus);
  transform: scaleX(0);
  transform-origin: left;
}

.mm-login-hero__dots button.is-done::after {
  transform: scaleX(1);
}

.mm-login-hero__dots button.is-active::after {
  transform: scaleX(var(--mm-login-progress, 0));
}

/* ---------- Cartões da rotina e luz na curva (somente com a foto visível) ---------- */
.mm-login-chips,
.mm-login-flow {
  display: none;
}

@media (min-width: 1181px) {
  .mm-login-page {
    --mm-login-hero-w: calc(100% - max(34%, 500px));
  }

  .mm-login-shell {
    position: relative;
  }

  /* A foto ocupa a tela inteira e esmaece por baixo do acesso, sem divisão. */
  .mm-login-hero {
    position: absolute;
    inset: 0;
    grid-area: auto;
    z-index: auto;
  }

  .mm-login-hero__media {
    top: -12px;
    right: max(34%, 500px);
    bottom: -12px;
    left: -12px;
    -webkit-mask-image: linear-gradient(90deg, #000 56%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 56%, transparent 100%);
    transition: transform 700ms var(--mm-login-ease);
  }

  /* Em telas largas a foto da plataforma não cobria a área inteira e deixava uma borda reta no noturno. */
  .mm-login-hero__media-item--platform {
    background-size: cover;
    background-position: left center;
  }

  .mm-login-hero__content {
    width: min(calc(var(--mm-login-hero-w) * 0.48), 510px);
    margin-left: calc(var(--mm-login-hero-w) * 0.43);
  }

  .mm-login-hero__dots {
    left: calc(var(--mm-login-hero-w) * 0.65);
  }

  /* Os dois prefixos cobrem tema escolhido e tema automático com a mesma força. */
  html[data-theme] .mm-login-page .mm-login-access,
  html:not([data-theme]) .mm-login-page .mm-login-access {
    background: transparent;
  }

  .mm-login-access::before,
  .mm-login-access::after {
    display: none !important;
  }

  .mm-login-ambient {
    left: -8vw;
    background: linear-gradient(90deg, var(--mm-login-veil-0) 0%, var(--mm-login-veil-1) 38%, var(--mm-login-veil-2) 62%);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
  }

  html[data-theme] .mm-login-page .mm-login-control input,
  html[data-theme] .mm-login-page .mm-login-locale select,
  html[data-theme] .mm-login-page .mm-login-support,
  html:not([data-theme]) .mm-login-page .mm-login-control input,
  html:not([data-theme]) .mm-login-page .mm-login-locale select,
  html:not([data-theme]) .mm-login-page .mm-login-support {
    background: var(--mm-login-glass-input);
  }

  html[data-theme] .mm-login-page .mm-login-control input:disabled,
  html:not([data-theme]) .mm-login-page .mm-login-control input:disabled {
    background: var(--mm-login-glass-input-disabled);
  }

  .mm-login-flow {
    position: absolute;
    top: 0;
    left: calc(var(--mm-login-hero-w) - 10%);
    z-index: 3;
    display: block;
    width: 13%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .mm-login-flow path {
    fill: none;
  }

  .mm-login-flow__line {
    stroke-dasharray: 100 100;
    animation: mm-login-motion-draw 1800ms 300ms var(--mm-login-ease) both;
  }

  .mm-login-flow__line--1 { stroke: var(--mm-login-flow-1); stroke-width: 1.2; }
  .mm-login-flow__line--2 { stroke: var(--mm-login-flow-2); stroke-width: 1; }

  .mm-login-flow__light {
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 9 100;
    stroke-dashoffset: 109;
    opacity: 0;
    animation: mm-login-motion-travel 7s 1.6s cubic-bezier(0.45, 0.05, 0.35, 1) infinite;
  }

  .mm-login-flow__light--1 { stroke: #1aa0e0; filter: drop-shadow(0 0 6px rgba(26, 160, 224, 0.85)); }
  .mm-login-flow__light--2 { stroke: #19b394; filter: drop-shadow(0 0 6px rgba(25, 179, 148, 0.8)); animation-delay: 4.8s; }

  .mm-login-chips {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    pointer-events: none;
    transition: transform 700ms var(--mm-login-ease);
  }

  .mm-login-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 260px;
    white-space: nowrap;
    padding: 10px 14px 10px 10px;
    border: 1px solid var(--mm-login-chip-border);
    border-radius: 14px;
    background: var(--mm-login-chip-bg);
    box-shadow: var(--mm-login-chip-shadow);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    animation:
      mm-login-motion-chip-in 800ms var(--mm-login-ease) both,
      mm-login-motion-float 6s ease-in-out infinite;
  }

  .mm-login-chip--confirmed { top: 13%; left: calc(var(--mm-login-hero-w) * 0.19); animation-delay: 900ms, 0s; }
  .mm-login-chip--reminder { top: 63%; left: calc(var(--mm-login-hero-w) * 0.21); animation-delay: 1350ms, -2s; }
  .mm-login-chip--record { bottom: 9%; left: calc(var(--mm-login-hero-w) * 0.03); animation-delay: 1800ms, -4s; }

  .mm-login-chip__icon {
    position: relative;
    flex: 0 0 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 16px;
  }

  .mm-login-chip--confirmed .mm-login-chip__icon { color: #139a5c; background: rgba(19, 154, 92, 0.14); }
  .mm-login-chip--reminder .mm-login-chip__icon { color: #2d6fd8; background: rgba(45, 111, 216, 0.14); }
  .mm-login-chip--record .mm-login-chip__icon { color: #7656d6; background: rgba(118, 86, 214, 0.15); }

  .mm-login-chip__live {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--mm-login-surface);
    border-radius: 50%;
    background: #19b394;
  }

  .mm-login-chip__live::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 2px solid #19b394;
    border-radius: 50%;
    animation: mm-login-motion-beat 1.8s ease-out infinite;
  }

  .mm-login-chip__body {
    display: grid;
    min-width: 0;
    line-height: 1.25;
  }

  .mm-login-chip__body strong {
    color: var(--mm-login-chip-title);
    font-size: 13.5px;
    font-weight: 600;
  }

  .mm-login-chip__body small {
    color: var(--mm-login-chip-text);
    font-size: 12px;
  }
}

@media (max-width: 1180px) {
  .mm-login-page {
    --mm-login-glow-opacity: 0.45;
  }
}

/* Em telas estreitas ou baixas os cartões disputariam espaço com o texto do destaque. */
@media (min-width: 1181px) and (max-width: 1439px), (min-width: 1181px) and (max-height: 640px) {
  .mm-login-chip--reminder {
    display: none;
  }
}

@media (min-width: 1181px) and (max-height: 760px) {
  .mm-login-hero__dots {
    bottom: 5%;
  }
}

/* Menos movimento: mantém as transições suaves e para só o que desloca a tela. */
@media (prefers-reduced-motion: reduce) {
  .mm-login-hero__media-item.is-active,
  .mm-login-ambient__glow {
    animation: none !important;
  }

  .mm-login-chip {
    animation-name: mm-login-motion-chip-in, none !important;
  }

  /* O design system (.mm-clinical) zera as transições com redução de movimento; aqui as do acesso voltam. */
  .mm-login-page .mm-login-access__inner > * {
    transition: opacity 280ms ease, transform 320ms var(--mm-login-ease) !important;
  }

  .mm-login-page .mm-login-access__inner > .mm-login-seal {
    transition: opacity 320ms ease 180ms, transform 420ms var(--mm-login-ease) 180ms, visibility 0s linear 500ms !important;
  }

  .mm-login-page .mm-login-access.is-login-success .mm-login-access__inner > .mm-login-seal {
    transition-delay: 180ms, 180ms, 0s !important;
  }

  .mm-login-page .mm-login-seal__bar {
    transition: stroke-dashoffset 900ms var(--mm-login-ease) 280ms, stroke 300ms ease 1100ms !important;
  }

  .mm-login-page .mm-login-seal__logo {
    transition: opacity 260ms ease 1000ms, transform 260ms ease 1000ms !important;
  }

  .mm-login-page .mm-login-seal__check {
    transition: transform 380ms cubic-bezier(0.3, 1.5, 0.5, 1) 1100ms, opacity 200ms ease 1100ms !important;
  }
}

@keyframes mm-login-motion-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes mm-login-motion-glass-in {
  from { opacity: 0; transform: translateY(-6px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes mm-login-motion-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mm-login-motion-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(10%, 8%) scale(1.12); }
  100% { transform: translate(-8%, 12%) scale(0.94); }
}

@keyframes mm-login-motion-sheen {
  to { transform: translateX(130%); }
}

@keyframes mm-login-motion-shake {
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

@keyframes mm-login-motion-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.045); }
}

@keyframes mm-login-motion-pop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}

@keyframes mm-login-motion-draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

@keyframes mm-login-motion-travel {
  0% { stroke-dashoffset: 109; opacity: 0; }
  6% { opacity: 1; }
  60% { stroke-dashoffset: 0; opacity: 1; }
  66%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes mm-login-motion-chip-in {
  from { opacity: 0; transform: translateY(16px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

@keyframes mm-login-motion-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

@keyframes mm-login-motion-beat {
  from { transform: scale(0.8); opacity: 1; }
  to { transform: scale(1.4); opacity: 0; }
}