/* The arrival after login (2026-10-19, slower). One orchestrated moment, once per visit.
   The login page's own ground (#FAF8F8) and the TLT Portal logo hold for a beat; then the logo moves toward you, growing as it
   dissolves, the ground dissolves with it, and the home page comes toward you out of that distance: the photo first and furthest (from 86%),
   the words a little behind it in time and nearer (from 94%). About 8 seconds in all. Only opacity and transform move.
   Plays on tltportal.com on the first load of a visit, or locally with ?enter on the address.
   Reduced motion: a short fade and nothing moves. */
.enter-veil { display: none; }
/* The login goes first: from 1.2s its logo moves toward you and dissolves (gone by 5.4s). The page only starts to come forward at 3.2s,
   when the login is already mostly gone, and has arrived at 8.2s. */
html.is-entering .enter-veil { display: grid; position: fixed; inset: 0; z-index: 100; place-items: center; background: #FAF8F8; pointer-events: none;
  animation: tlt-veil 4200ms cubic-bezier(0.37, 0, 0.3, 1) 1200ms both; }
html.is-entering .enter-veil img { width: min(260px, 56vw); height: auto; animation: tlt-logo 5400ms ease-in-out both; }

html.is-entering .hero-scene { transform-origin: 50% 45%; animation: tlt-approach-far 5000ms cubic-bezier(0.37, 0, 0.2, 1) 3200ms both; }
html.is-entering .hero .words > * { transform-origin: 0 50%; animation: tlt-approach 5000ms cubic-bezier(0.37, 0, 0.2, 1) 3200ms both; }
/* Everything below the opening (the note, the sessions, Library, Journal, the footer) waits and arrives with the rest. */
html.is-entering main > :not(.hero), html.is-entering .foot { transform-origin: 50% 0; animation: tlt-approach 5000ms cubic-bezier(0.37, 0, 0.2, 1) 3200ms both; }
html.is-entering .bar { animation: tlt-fade 5000ms cubic-bezier(0.37, 0, 0.2, 1) 3200ms both; }

/* Logo: appears, holds, then moves toward you, growing as it dissolves, as if it passes you. */
@keyframes tlt-logo {
  0% { opacity: 0; transform: scale(0.97); }
  12% { opacity: 1; transform: scale(1); }
  22% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.45, 0, 0.75, 0.5); }
  100% { opacity: 0; transform: scale(2.4); }
}
@keyframes tlt-veil { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes tlt-approach-far { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }
@keyframes tlt-approach { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes tlt-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html.is-entering .enter-veil { animation: tlt-veil 300ms linear 200ms both; }
  html.is-entering .enter-veil img, html.is-entering .hero-scene, html.is-entering .bar, html.is-entering .hero .words > *,
  html.is-entering main > :not(.hero), html.is-entering .foot { animation: none; }
}