/*
 * The entrance a signed-out visitor gets on the landing page, sign in, register and forgot
 * password. There is no longer a veil carried BETWEEN pages - links navigate natively - so each
 * page simply introduces itself as it loads: the panel and the card settle in from the colour the
 * page already sits on. The selectors rely on the markup these pages share - .page wrapping a
 * .brand-panel and a card - so a page opts in by linking this file, with no extra classes.
 *
 * The only veil left is a plain colour cover a form raises over itself while its POST is in
 * flight (PageTransition.show / hide) - no spinner, no checkmark, just the cover in the colour of
 * the screen the submit leads to.
 */

/* ============================================================
   SUBMIT COVER - the plain veil a form raises over itself
   ============================================================ */

.pt-veil {
    position: fixed;
    inset: 0;
    z-index: 9998;

    /* Only while it is up: a cover the page can be typed and clicked through is not a cover, and
       one left transparent after hide() must not keep eating the clicks. */
    pointer-events: none;
    opacity: 0;

    /* The body colour these pages sit on, so a submit that reloads lands on the same colour
       rather than on one of its own. */
    background: #EEF3FA;
    transition: opacity 300ms ease;
}

/* For a handover into one of the navy interstitials - signing in, signing out. Keep the three
   layers in step with .brand-panel and auth-transition.css. */
.pt-veil.is-dark {
    background:
            radial-gradient(circle at 12% 18%, rgba(76, 201, 240, 0.14), transparent 28%),
            radial-gradient(circle at 86% 82%, rgba(30, 91, 255, 0.16), transparent 30%),
            linear-gradient(135deg, #0B1F3A 0%, #07162B 100%);
}

.pt-veil.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================================
   ARRIVING - the panel and the card settling in
   ============================================================ */

.page > .brand-panel {
    opacity: 0;
    animation: pt-panel-in 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.brand-content > * {
    opacity: 0;
    animation: pt-rise-in 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.brand-content > *:nth-child(1) { animation-delay: 90ms; }
.brand-content > *:nth-child(2) { animation-delay: 170ms; }
.brand-content > *:nth-child(3) { animation-delay: 250ms; }
.brand-content > *:nth-child(4) { animation-delay: 330ms; }
.brand-content > *:nth-child(n+5) { animation-delay: 400ms; }

.signin-card,
.register-card {
    opacity: 0;
    animation: pt-card-in 760ms cubic-bezier(0.22, 1, 0.36, 1) 180ms forwards;
}

@keyframes pt-panel-in {
    from { opacity: 0; transform: translateX(-22px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes pt-rise-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pt-card-in {
    from { opacity: 0; transform: translateY(26px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   SUBMITTING - a form that has been sent and is waiting
   ============================================================ */

/* The card keeps its fields: a disabled input is not posted, and on these forms the inputs are
   the credentials. Blocking the pointer is enough, and the scripts guard the second submit. */
.pt-busy {
    pointer-events: none;
}

.pt-busy input,
.pt-busy select,
.pt-busy textarea,
.pt-busy label,
.pt-busy .helper,
.pt-busy .row-options,
.pt-busy .signup-box,
.pt-busy .signin {
    opacity: 0.55;
    transition: opacity 260ms ease;
}

.submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #FFFFFF;
    animation: pt-spin 720ms linear infinite;
}

.submit-btn.is-submitting .btn-spinner {
    display: block;
}

/* The lift on hover would fight the spinner for attention. */
.submit-btn.is-submitting:hover {
    transform: none;
}

@keyframes pt-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   Nothing above carries meaning that the motion is needed to read.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .page > .brand-panel,
    .brand-content > *,
    .signin-card,
    .register-card,
    .btn-spinner {
        animation: none;
        opacity: 1;
    }

    .pt-veil,
    .pt-busy input,
    .pt-busy select,
    .pt-busy textarea,
    .pt-busy label {
        transition: none;
    }
}