/* JJ: progressive, one-shot recovery entry motion. Native links, forms and OTP inputs stay native. */
body.fabrexa-recovery-page[data-jj-stage] {
    --jj-inline: 1;
    --jj-distance: 18px;
    --jj-enter-x: 0px;
    --jj-enter-y: 6px;
    --jj-enter-duration: 320ms;
    --jj-enter-ease: cubic-bezier(.22, .72, .28, 1);
}

html[dir="rtl"] body.fabrexa-recovery-page[data-jj-stage] {
    --jj-inline: -1;
}

body.fabrexa-recovery-page[data-jj-stage][data-jj-direction="forward"] {
    --jj-enter-x: calc(var(--jj-distance) * var(--jj-inline));
    --jj-enter-y: 0px;
}

body.fabrexa-recovery-page[data-jj-stage][data-jj-direction="back"] {
    --jj-enter-x: calc(-1 * var(--jj-distance) * var(--jj-inline));
    --jj-enter-y: 0px;
}

/* Without the JS readiness class, HH/II remain intact and every control stays visible. */
body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready :is(.fh-content, .fh-scene, .fh-story-copy, .fh-key svg path) {
    animation: none;
}

body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready :is(
    .fh-heading > *, .fh-content > .fh-alert, .fii-steps, .fii-address,
    .fh-content > [data-ii-form], .fii-security-note, .fii-realm-switch,
    .fh-login, .fh-help, .fh-assurance
) {
    --jj-delay: 0ms;
    opacity: 1;
    transform: none;
}

/* Stagger top-level units only: no nested input/cell transforms, hidden fields or focus shifts. */
body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-heading > .fh-eyebrow { --jj-delay: 0ms; }
body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-heading > .fh-key { --jj-delay: 20ms; }
body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-heading > h1 { --jj-delay: 40ms; }
body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-heading > p { --jj-delay: 60ms; }
body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-content > .fh-alert { --jj-delay: 65ms; }
body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fii-steps { --jj-delay: 80ms; }
body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fii-address { --jj-delay: 95ms; }
body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-content > [data-ii-form] { --jj-delay: 110ms; }
body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-content > .fii-secondary-form { --jj-delay: 125ms; }
body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-content > .fii-restart { --jj-delay: 140ms; }
body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fii-security-note { --jj-delay: 125ms; }
body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fii-realm-switch { --jj-delay: 140ms; }
body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-login { --jj-delay: 150ms; }
body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-help { --jj-delay: 165ms; }
body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-assurance { --jj-delay: 180ms; }

body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready.jj-entering :is(
    .fh-heading > *, .fh-content > .fh-alert, .fii-steps, .fii-address,
    .fh-content > [data-ii-form], .fii-security-note, .fii-realm-switch,
    .fh-login, .fh-help, .fh-assurance
) {
    animation: jj-recovery-entry var(--jj-enter-duration) var(--jj-enter-ease) var(--jj-delay) both;
}

/* Chrome and imagery breathe once, without zoom, drift, ambient loops or document reflow. */
body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready.jj-entering :is(.fh-topbar, .fh-panel-foot, .fh-story-top) {
    animation: jj-recovery-soft 280ms ease-out both;
}

body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready.jj-entering :is(.fh-story-copy, .fh-scene, .fh-mobile-scene) {
    animation: jj-recovery-soft 420ms ease-out both;
}

/* Quiet edge highlight: it cannot intercept clicks or change button geometry/contrast. */
body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-submit {
    transition: transform 140ms ease-out;
}

body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-submit::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(31, 35, 58, .12);
    opacity: 0;
    transition: opacity 160ms ease-out;
}

body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-submit:focus-visible::before {
    opacity: .6;
}

body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-submit:not(:disabled):active {
    transform: translateY(1px);
}

body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-submit:not(:disabled):active::before {
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-submit:not(:disabled):hover::before {
        opacity: .7;
    }
}

@media (max-width: 359.98px) {
    /* HH uses 16px side padding here; keep the motion within that existing viewport budget. */
    body.fabrexa-recovery-page[data-jj-stage] { --jj-distance: 14px; }
    /* Native 304px CAPTCHA bleeds through HH's negative form-child margins. Forms must
       enter vertically here; keep logical horizontal motion on the separate stage text. */
    body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-content > [data-ii-form] {
        --jj-enter-x: 0px;
        --jj-enter-y: 6px;
    }
}

@keyframes jj-recovery-entry {
    from { opacity: .12; transform: translate3d(var(--jj-enter-x), var(--jj-enter-y), 0); }
    to { opacity: 1; transform: none; }
}

@keyframes jj-recovery-soft {
    from { opacity: .76; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready :is(
        .fh-heading > *, .fh-content > .fh-alert, .fii-steps, .fii-address,
        .fh-content > [data-ii-form], .fii-security-note, .fii-realm-switch,
        .fh-login, .fh-help, .fh-assurance, .fh-topbar, .fh-panel-foot,
        .fh-story-top, .fh-story-copy, .fh-scene, .fh-mobile-scene
    ) {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-submit {
        transition: none !important;
        transform: none !important;
    }
    body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-submit::before {
        transition: none !important;
        opacity: 0 !important;
    }
}

@media (forced-colors: active) {
    body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready :is(
        .fh-heading > *, .fh-content > .fh-alert, .fii-steps, .fii-address,
        .fh-content > [data-ii-form], .fii-security-note, .fii-realm-switch,
        .fh-login, .fh-help, .fh-assurance, .fh-topbar, .fh-panel-foot,
        .fh-story-top, .fh-story-copy, .fh-scene, .fh-mobile-scene
    ) {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-submit {
        transition: none !important;
        transform: none !important;
    }
    body.fabrexa-recovery-page[data-jj-stage].jj-motion-ready .fh-submit::before {
        transition: none !important;
        opacity: 0 !important;
    }
}