/* Hux interface motion: gradual, stable reveals for authentication and navigation. */

:root {
  --hux-motion-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --hux-motion-settle: cubic-bezier(0.33, 1, 0.68, 1);
  --hux-motion-login: 440ms;
  --hux-motion-workspace: 320ms;
}

.auth-gate-card-copy {
  display: grid;
  gap: 12px;
}

.auth-gate-card-copy p {
  max-width: 34ch;
  margin-top: 0;
  text-wrap: pretty;
}

html.app-ready.auth-login .auth-gate-brand {
  animation: hux-auth-brand-in 260ms var(--hux-motion-settle) both;
}

html.app-ready.auth-login .auth-gate-layout {
  animation: hux-auth-frame-in var(--hux-motion-login) var(--hux-motion-enter) both;
}

html.app-ready.auth-login .auth-gate-intro > .section-kicker,
html.app-ready.auth-login .auth-gate-intro > h1,
html.app-ready.auth-login .auth-gate-intro > p,
html.app-ready.auth-login .auth-gate-flow {
  animation: hux-auth-copy-in 360ms var(--hux-motion-enter) both;
}

html.app-ready.auth-login .auth-gate-intro > .section-kicker {
  animation-delay: 50ms;
}

html.app-ready.auth-login .auth-gate-intro > h1 {
  animation-delay: 90ms;
}

html.app-ready.auth-login .auth-gate-intro > p {
  animation-delay: 125ms;
}

html.app-ready.auth-login .auth-gate-flow {
  animation-delay: 160ms;
}

html.app-ready.auth-login .auth-gate-card > * {
  animation: hux-auth-action-in 340ms var(--hux-motion-enter) both;
}

html.app-ready.auth-login .auth-gate-card-index {
  animation-delay: 80ms;
}

html.app-ready.auth-login .auth-gate-card-copy {
  animation-delay: 115ms;
}

html.app-ready.auth-login .auth-gate-primary {
  animation-delay: 150ms;
}

html.app-ready.auth-login .auth-gate-divider {
  animation-delay: 180ms;
}

html.app-ready.auth-login .auth-gate-secondary {
  animation-delay: 205ms;
}

html.app-ready.auth-login .auth-gate-card-note,
html.app-ready.auth-login .auth-gate-status {
  animation-delay: 225ms;
}

html.app-ready.auth-login .auth-gate-footer {
  animation: hux-auth-brand-in 260ms 190ms var(--hux-motion-settle) both;
}

html.app-ready.auth-workspace .topbar {
  animation: hux-workspace-chrome-in 180ms var(--hux-motion-settle) both;
}

html.app-ready.auth-workspace .workspace {
  animation: hux-workspace-in var(--hux-motion-workspace) var(--hux-motion-enter) both;
}

/* Older class-based reveals are superseded by the cancellable Web Animation in app.js. */
.view-entering {
  animation: none;
}

@keyframes hux-auth-brand-in {
  from { opacity: 0.16; }
  to { opacity: 1; }
}

@keyframes hux-auth-frame-in {
  from { opacity: 0.12; }
  to { opacity: 1; }
}

@keyframes hux-auth-copy-in {
  from {
    opacity: 0;
    filter: blur(0.75px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes hux-auth-action-in {
  from {
    opacity: 0;
    filter: blur(0.75px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes hux-workspace-chrome-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hux-workspace-in {
  from { opacity: 0.24; }
  to { opacity: 1; }
}

@media (max-width: 620px) {
  :root {
    --hux-motion-login: 380ms;
    --hux-motion-workspace: 280ms;
  }

  html.app-ready.auth-login .auth-gate-card > * {
    animation-delay: 0ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.app-ready.auth-login .auth-gate-brand,
  html.app-ready.auth-login .auth-gate-layout,
  html.app-ready.auth-login .auth-gate-intro > .section-kicker,
  html.app-ready.auth-login .auth-gate-intro > h1,
  html.app-ready.auth-login .auth-gate-intro > p,
  html.app-ready.auth-login .auth-gate-flow,
  html.app-ready.auth-login .auth-gate-card > *,
  html.app-ready.auth-login .auth-gate-footer,
  html.app-ready.auth-workspace .topbar,
  html.app-ready.auth-workspace .workspace {
    animation: none !important;
  }
}