/* Login-only arrival: fixed geometry, one short opacity transition. */
/* Match the outgoing field before the rest of the login styles are ready. */
html {
  color-scheme: dark;
  background: #111d27;
}
body.entry-body {
  background: #111d27;
}
html[data-login-arrival="pending"] {
  --login-arrival-opacity: 0;
  /* Fail open even if the early script stops before DOMContentLoaded. */
  animation: login-arrival-fail-open 900ms steps(1, end) forwards;
}
html[data-login-arrival="pending"] .login-layout > .entry-copy,
html[data-login-arrival="pending"] .login-layout > .login-panel {
  opacity: var(--login-arrival-opacity, 1);
  /* Own the initial frame even before the later particle stylesheet arrives. */
  animation: none !important;
  transition: none;
}
html[data-login-arrival="ready"] .login-layout > .entry-copy,
html[data-login-arrival="ready"] .login-layout > .login-panel {
  opacity: 1;
  /* A finite opacity-only keyframe also runs when a cached font resolves
     before the first paint; a transition alone could skip that first entry. */
  animation: login-arrival-in 650ms cubic-bezier(.45, 0, .55, 1) both !important;
}
/* Pointer/keyboard activity and history restoration reveal immediately. */
html[data-login-arrival="visible"] .login-layout > .entry-copy,
html[data-login-arrival="visible"] .login-layout > .login-panel {
  opacity: 1;
  animation: none !important;
  transition: none;
}
@keyframes login-arrival-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes login-arrival-fail-open {
  from { --login-arrival-opacity: 0; }
  to { --login-arrival-opacity: 1; }
}
/* Keep the opaque poster under the new opaque GPU base while it settles in.
   Fading both at once would briefly expose the darker page underneath. */
.entry-body .dc-particle-gpu-surface {
  transition: none;
}
.entry-body .dc-particle-gpu-surface[data-particle-gpu-ready="true"] {
  transition: opacity 180ms linear;
}
/* Login boot now draws synchronously before paint; show that first real field
   immediately rather than fading it up from an empty document background. */
.entry-body .dc-particle-gpu-surface[data-particle-gpu-first-frame="true"] {
  transition: none !important;
}
.entry-body img.dc-particle-poster {
  transition: none;
}
.entry-body video.dc-particle-surface:not([data-particle-gpu-ready="true"]) + img.dc-particle-poster {
  opacity: 1 !important;
}
.entry-body video.dc-particle-surface[data-particle-gpu-ready="true"] + img.dc-particle-poster {
  transition: opacity 0s linear 180ms;
}
@media (prefers-reduced-motion: reduce) {
  html[data-login-arrival] { animation: none; }
  html[data-login-arrival] .login-layout > .entry-copy,
  html[data-login-arrival] .login-layout > .login-panel {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }
  .entry-body .dc-particle-gpu-surface,
  .entry-body img.dc-particle-poster {
    transition: none !important;
  }
}