/* Motion is decorative: content and actions remain available at every frame. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
.login-story { isolation: isolate; }
.login-story::before {
  content: ''; position: absolute; pointer-events: none; z-index: -1;
  width: 280px; height: 280px; border-radius: 50%; top: 21%; right: -120px;
  background: #bbd0e8; opacity: .23; filter: blur(52px);
}
.login-story::after {
  content: ''; position: absolute; pointer-events: none; z-index: -1;
  width: 170px; height: 170px; border-radius: 50%; left: -80px; bottom: 15%;
  background: #c7c6df; opacity: .2; filter: blur(40px);
}
@media (prefers-reduced-motion: no-preference) {
  .login-story::before { animation: login-light-settle 4.4s var(--motion-ease) both; }
  .login-story::after { animation: login-light-settle 4s .15s var(--motion-ease) both; }
  .login-brand { animation: glass-enter .65s var(--motion-ease) both; }
  .login-intro { animation: glass-enter .85s .08s var(--motion-ease) both; }
  .login-form-wrap { animation: glass-enter .75s .12s var(--motion-ease) both; }
  .login-entry input {
    transition: border-color .2s ease, background-color .2s ease, box-shadow .25s ease;
  }
  .login-entry input:focus { background: #fff; box-shadow: 0 0 0 5px #3978c50b; }
  .login-submit, .login-submit span, .executive-node,
  .executive-owner-tabs button, .executive-more, .executive-project>button {
    transition: transform .22s var(--motion-ease), background-color .2s ease,
      border-color .2s ease, box-shadow .22s ease, color .2s ease;
  }
  /* Animate a single surface on filter changes, never every row in a long board. */
  .executive-timeline { animation: glass-enter .3s var(--motion-ease) both; }
  .executive-summary { animation: glass-enter .3s var(--motion-ease) both; }
  .executive-detail[open] { animation: glass-dialog-enter .28s var(--motion-ease) both; }
  .executive-detail[open]::backdrop { animation: glass-backdrop-enter .2s ease both; }
  .executive-node:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 22px #30476616; }
  .executive-node:not(:disabled):active,
  .executive-owner-tabs button:not(:disabled):active,
  .login-submit:not(:disabled):active { transform: scale(.985); }
  @media (hover: hover) and (pointer: fine) {
    .compact .executive-node:hover { transform: translateY(-3px); box-shadow: 0 10px 26px #30476618; }
    .executive-owner-tabs button:hover, .executive-more:hover { transform: translateY(-1px); }
    .executive-project>button:hover { transform: translateX(2px); }
    .login-submit:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 8px 20px #3978c526; }
    .login-submit:not(:disabled):hover span { transform: translateX(4px); }
    .compact .executive-node:active, .login-submit:not(:disabled):active { transform: scale(.985); }
  }
}
@keyframes glass-enter { from { opacity: .4; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes glass-dialog-enter { from { opacity: .3; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes glass-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes login-light-settle { from { opacity: .06; transform: translate(-18px,12px) scale(.86); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .login-layout *, .login-story::before, .login-story::after,
  .executive-timeline, .executive-summary, .executive-detail, .executive-detail::backdrop,
  .executive-node, .executive-owner-tabs button, .executive-more, .executive-project>button {
    animation: none !important; transition: none !important; transform: none !important;
  }
}
@media (prefers-reduced-transparency: reduce) { .login-story::before, .login-story::after { display: none; } }
@media print {
  .login-story::before, .login-story::after { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; transform: none !important; }
}

.login-sequence canvas { display:block; width:100%; height:auto; }
.login-sequence .dna-caption { align-items:center; padding:0 22px; letter-spacing:.14em; font-size:10px; }