/* THE WAY IN (Auth Phase Ω, entry concept 1, 2026-10-01).

   Signing in does not load another page; it walks into the building. The
   sign-in's brand column narrows into the Office's rail (or folds into the
   client account's top bar), the TKATI lockup glides to where it lives in
   there, and the work arrives beside it. Signing out plays it backwards:
   the rail opens back out into the wall.

   It is the browser's own cross-document View Transition. CSS only, so the
   CSP has nothing to allow and no auth code changes. A browser without it
   navigates exactly as before, and reduced motion turns it off. The shapes
   move; nothing on the mark lights up (owner rule: the TK mark never
   carries moving light).

   Loaded by the three pages it joins: admin/index.html (the sign-in),
   office.html and account.html. Both ends of a navigation must opt in, and
   the pseudo-elements below belong to whichever page is arriving. */

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

/* THE PAIRS. One name per element on each side; the browser morphs the box
   from where it was to where it lands. The rail is a column beside the work
   from 62rem, so it only pairs there; below that the wall simply leaves. */
#signin .auth-world { view-transition-name: tkati-wall; }
#signin .auth-brand { view-transition-name: tkati-lockup; }
/* The words leave on their own, first, so the closing wall is only the
   mark's geometry and never a sentence cut in half. */
#signin .auth-statement { view-transition-name: tkati-words; }
#signin .auth-back { view-transition-name: tkati-back; }
.ac-top { view-transition-name: tkati-wall; }
.ac-top__mark { view-transition-name: tkati-lockup; }
@media (min-width: 62.0625rem) {
  .ofc-rail { view-transition-name: tkati-wall; }
  .ofc-rail__brand { view-transition-name: tkati-lockup; }
}

/* DRAWN FROM THE FIRST FRAME. The arriving page's wall has to be on screen
   when the browser takes its picture, but both pages keep their content
   hidden until their script has decided what may be shown. So the wall
   alone is drawn before that:
   - the Office's rail: static links, no data;
   - the sign-in's brand side, with the form kept invisible. The form must
     never be usable before its script: without the handler, a press of
     Enter would submit it by GET and put the password in the address.
   The script then reveals the rest exactly as before. `!important` because
   app.css says `[hidden] { display: none !important }` for the whole admin,
   and these three lines are the one deliberate exception to it. */
@media (min-width: 62.0625rem) {   /* only where the rail pairs (above) */
  #office[hidden] { display: grid !important; }
  #office[hidden] > :not(.ofc-rail) { visibility: hidden; }
}
body:has(> #app[hidden] > #signin[hidden]) { background: var(--au-bg); padding: 0; }
#app[hidden]:has(> #signin[hidden]) {
  display: flex !important; flex-direction: column;
  max-width: none; margin: 0; min-height: 100dvh;
}
#app[hidden] > #signin[hidden] { display: grid !important; }
#app[hidden] > #signin .auth-access { visibility: hidden; }

/* TIMING. `--tk-entry` is a multiplier (1 in use); the render harness sets
   it to film the motion slowly. One ease, the Office's own. */
::view-transition-group(*) {
  animation-duration: calc(520ms * var(--tk-entry, 1));
  animation-timing-function: cubic-bezier(.2, .7, .2, 1);
}

/* THE WALL IS CROPPED AS IT NARROWS, NEVER SQUEEZED. Each image keeps its
   own size, pinned top-left, so the column closes like a panel sliding
   shut rather than shrinking like a photograph. The old wall holds, then
   gives way to the rail as it arrives. */
::view-transition-group(tkati-wall),
::view-transition-image-pair(tkati-wall) { overflow: clip; }
::view-transition-old(tkati-wall),
::view-transition-new(tkati-wall) {
  width: 100%;
  height: 100%;
  object-fit: none;
  object-position: left top;
}
::view-transition-old(tkati-wall) {
  animation: tk-entry-out calc(140ms * var(--tk-entry, 1)) calc(220ms * var(--tk-entry, 1)) both;
}
::view-transition-new(tkati-wall) {
  animation: tk-entry-in calc(200ms * var(--tk-entry, 1)) calc(240ms * var(--tk-entry, 1)) both;
}

/* OPENING (the sign-in is the page arriving: a sign-out, or a session that
   ran out). The wall is shown from the first frame and the widening box
   reveals it, a panel sliding open; the rail it replaces steps aside at
   once. The pseudo-elements belong to the arriving page, so it is the
   arriving page that says which way the wall moves. */
html:has(#signin)::view-transition-old(tkati-wall) {
  animation: tk-entry-out calc(140ms * var(--tk-entry, 1)) both;
}
html:has(#signin)::view-transition-new(tkati-wall) { animation: none; }

/* THE LOCKUP: both ends start with the same 30px mark, so each picture
   keeps its own size, pinned left, and only the words change ("TKATI" to
   "TKATI / Office") while the mark glides and holds. Stretching one onto
   the other doubled the name. */
::view-transition-old(tkati-lockup),
::view-transition-new(tkati-lockup) {
  inline-size: auto;
  block-size: auto;
  inset-block-start: 50%;
  translate: 0 -50%;
}
::view-transition-old(tkati-lockup) {
  animation: tk-entry-out calc(140ms * var(--tk-entry, 1)) both;
}
::view-transition-new(tkati-lockup) {
  animation: tk-entry-in calc(220ms * var(--tk-entry, 1)) calc(120ms * var(--tk-entry, 1)) both;
}
::view-transition-old(tkati-words),
::view-transition-old(tkati-back) {
  animation: tk-entry-out calc(140ms * var(--tk-entry, 1)) both;
}
::view-transition-new(tkati-words),
::view-transition-new(tkati-back) {
  animation: tk-entry-in calc(200ms * var(--tk-entry, 1)) calc(320ms * var(--tk-entry, 1)) both;
}

/* EVERYTHING ELSE. The form leaves at once; the work arrives once the wall
   has settled, so the eye follows the wall and then reads the room. */
::view-transition-old(root) {
  animation: tk-entry-out calc(160ms * var(--tk-entry, 1)) both;
}
::view-transition-new(root) {
  animation: tk-entry-in calc(300ms * var(--tk-entry, 1)) calc(360ms * var(--tk-entry, 1)) both;
}

@keyframes tk-entry-out { to { opacity: 0; } }
@keyframes tk-entry-in { from { opacity: 0; } }