/* =====================================================================
   Sign in <-> Sign up <-> Additional details <-> Forgot password: one card that morphs.
   ---------------------------------------------------------------------
   Cross-document View Transitions. Loaded only on the auth pages, so the
   transition runs between them and nowhere else (signing in and landing
   on the agenda stays a normal load). Browsers without support simply
   navigate as before.

   Shared names: the card itself, its heading block, the form body, the
   Email field, the submit button and the "switch" line. Every name must
   be unique on a page, or the browser skips the transition.
   ===================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

.is-auth-page .booking-form {
  view-transition-name: auth-card;
  border-radius: 24px !important; /* same corners on every auth card so the morph stays clean */
}

.is-auth-page .booking-form > h1,
.is-auth-page .signup-card__head {
  view-transition-name: auth-head;
}

.is-auth-page .booking-form form {
  view-transition-name: auth-form;
}

.is-auth-page .form-row:has(> #email),
.is-auth-page .form-row:has(> .input-group > #email) {
  view-transition-name: auth-email;
}

.is-auth-page #submitbtn,
.is-auth-page #submit-btn,
.is-auth-page .signup-card__cta {
  view-transition-name: auth-submit;
}

.is-auth-page .reg-link {
  view-transition-name: auth-switch;
}

/* Timing (slower, calmer): the card and shared parts glide for 650ms. Old content
   fades out completely (0-200ms) before the new content fades in (240-650ms), so
   the two forms never overlap. Overlapping them is what looked like a flash of
   skeleton placeholders: two half-transparent sets of empty fields. */
::view-transition-group(*) {
  animation-duration: 650ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(*) {
  animation-duration: 200ms;
  animation-timing-function: ease-out;
}

::view-transition-new(*) {
  animation-duration: 410ms;
  animation-delay: 240ms;
  animation-timing-function: ease-out;
}

/* The page behind the card is identical on both screens: keep it still. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* The card is just the white panel (its contents are named separately), so it
   stays solid and simply reshapes: no fade, no gap where it could blink. */
::view-transition-old(auth-card),
::view-transition-old(auth-email) {
  animation: none;
  opacity: 0;
}

/* The Email field is the same on every screen: it stays solid and glides. */
::view-transition-new(auth-email) {
  animation: none;
}

::view-transition-new(auth-card) {
  animation: none;
  height: 100%;
}

/* The button reshapes too; its snapshots fill the box as it morphs. */
::view-transition-old(auth-submit),
::view-transition-new(auth-submit) {
  height: 100%;
}

/* Heading and form contents differ between screens: cross-fade them pinned to
   the top corner at their real size instead of stretching the text. */
::view-transition-old(auth-head),
::view-transition-new(auth-head),
::view-transition-old(auth-form),
::view-transition-new(auth-form) {
  width: auto;
  height: auto;
  inset-inline-start: 0;
  inset-block-start: 0;
  inset-inline-end: auto;
}

::view-transition-group(auth-form),
::view-transition-group(auth-head) {
  overflow: clip;
}

/* Arriving through the morph: skip the page-entrance rise (the morph is the entrance). */
html.vt-arrival main.inner-page {
  animation: none !important;
}