/* auth-transition.css  (REPLACES the existing file of the same name)
   Page-to-page transitions for: landing, resident login, admin login, register,
   forgot / reset password.

   1. Browsers with cross-document View Transitions (Chrome, Edge, Safari 18.2+):
      a short cross-fade of the whole page.
   2. Every browser: the card / hero content rises 8px while fading in (sub-300ms),
      the feature list on the landing page follows with a very short stagger.
   3. prefers-reduced-motion: ALL entrance animations and transitions are switched off
      (previously the entrance animations from auth.css / landing.css ignored it).

   To make it faster or slower, change the three durations marked  <-- duration. */

@media (prefers-reduced-motion: no-preference) {

    @view-transition {
        navigation: auto;
    }

    ::view-transition-group(root) {
        animation-duration: 220ms;                 /* <-- duration */
    }

    /* opacity only on the whole page: moving it would reveal empty edges mid-transition */
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 220ms;                 /* <-- duration */
        animation-timing-function: cubic-bezier(.4, 0, .2, 1);
    }

    /* Entrance: a gentle rise. "backwards" (not "both") so that nothing is held after
       the animation, which keeps the landing card's hover lift working. */
    @keyframes auth-rise {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: none; }
    }

    .view,
    .hero-content {
        animation: auth-rise 280ms cubic-bezier(.2, .8, .2, 1) backwards;   /* <-- duration */
    }

    /* Landing feature list: was 4 x 0.5s with delays up to 0.6s (about 1.1s in total).
       Now quick and lightly staggered. */
    .hero-features li {
        opacity: 1;
        transform: none;
        animation: auth-rise 260ms cubic-bezier(.2, .8, .2, 1) backwards;
    }
    .hero-features li:nth-child(1) { animation-delay: 40ms; }
    .hero-features li:nth-child(2) { animation-delay: 80ms; }
    .hero-features li:nth-child(3) { animation-delay: 120ms; }
    .hero-features li:nth-child(4) { animation-delay: 160ms; }
}

/* Reduced motion: no movement, no fades, no staggered reveals. */
@media (prefers-reduced-motion: reduce) {
    .view,
    .hero-content,
    .form-error-banner,
    .error-text,
    .date-dropdown.is-open,
    .notif-dropdown.is-open {
        animation: none !important;
    }

    .hero-features li {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .landing-panel .card,
    .role-btn,
    .role-chevron,
    .submit-btn,
    .create-btn,
    .back-btn,
    .field input,
    .date-display {
        transition: none !important;
    }

    .landing-panel .card:hover,
    .role-btn:hover {
        transform: none;
    }
}