/* Smooth direct MFA -> username return.

   The canonical card positions are username=0deg, password=180deg and MFA=360deg.
   Returning from 360deg to 0deg through the canonical coordinate system would
   necessarily expose the password face at 180deg. Instead, this transient state
   continues the card forward from 360deg to 540deg while temporarily placing the
   username face at 180deg. The visible result is one normal half-turn: MFA rotates
   out, username rotates in, and password is never part of the transition.

   Direct-return geometry is explicitly excluded while MFA is active/settled.
   This keeps the active MFA face as the only hit-testable 3D plane and prevents
   cursor/click oscillation if a transient return class overlaps for a frame.
*/

#operations-flip-stage.is-mfa-direct-return:not(.is-mfa):not(.is-mfa-settled) .flip-card-inner {
  min-height: 190px !important;
  transform: rotateY(540deg) !important;
}

#operations-flip-stage.is-mfa-direct-return:not(.is-mfa):not(.is-mfa-settled) .flip-face--front {
  transform: rotateY(180deg) translateZ(1px) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

#operations-flip-stage.is-mfa-direct-return:not(.is-mfa):not(.is-mfa-settled) .flip-face--back {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#operations-flip-stage.is-mfa-direct-return:not(.is-mfa):not(.is-mfa-settled) .flip-face--mfa {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* Active MFA owns the complete interaction plane. Even if a transient return
   class survives for one compositor frame, front/back cannot compete for hover
   or clicks and the MFA face remains the sole pointer target. */
#operations-flip-stage.is-mfa .flip-face--front,
#operations-flip-stage.is-mfa .flip-face--back,
#operations-flip-stage.is-mfa-settled .flip-face--front,
#operations-flip-stage.is-mfa-settled .flip-face--back {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

#operations-flip-stage.is-mfa .flip-face--mfa,
#operations-flip-stage.is-mfa-settled .flip-face--mfa {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

/* At 540deg + a 180deg username face the rendered orientation is 720deg, which
   is visually identical to the canonical 0deg username state. Disable the
   transition for this one normalization frame so the existing showFront()
   cleanup can resume without a second rotation or a visible snap. */
#operations-flip-stage.is-mfa-direct-return-reset:not(.is-mfa):not(.is-mfa-settled) .flip-card-inner {
  min-height: 190px !important;
  transform: rotateY(0deg) !important;
  transition: none !important;
}

#operations-flip-stage.is-mfa-direct-return-reset:not(.is-mfa):not(.is-mfa-settled) .flip-face--front {
  transform: rotateY(0deg) translateZ(1px) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#operations-flip-stage.is-mfa-direct-return-reset:not(.is-mfa):not(.is-mfa-settled) .flip-face--back,
#operations-flip-stage.is-mfa-direct-return-reset:not(.is-mfa):not(.is-mfa-settled) .flip-face--mfa {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 576px) {
  #operations-flip-stage.is-mfa-direct-return:not(.is-mfa):not(.is-mfa-settled) .flip-card-inner,
  #operations-flip-stage.is-mfa-direct-return-reset:not(.is-mfa):not(.is-mfa-settled) .flip-card-inner {
    min-height: 205px !important;
  }
}