/* ============================================================================
   login-logo.css — CRM sign-in page: logo "drives in" + the small line under
   the sign-in card (2026-11-09). Goes with js/login-logo.js.
   Only position + opacity move (smooth on every phone); plays once.
   Units inside the logo are the logo's own drawing units (it is 2835 wide).
   ========================================================================== */

/* the inline logo keeps the size the <img> had */
svg.tl-logo { display: block; height: auto; overflow: visible; }
svg.admin-login-mark.tl-logo { margin: 0 auto; }
svg.tl-logo path { transform-box: fill-box; }

/* 1. cab + "Trux" drive in from the left and stop */
svg.tl-logo.tl-play .tl-body { animation: tlDrive .72s cubic-bezier(.16, 1, .3, 1) .08s both; }
@keyframes tlDrive {
  from { transform: translateX(-760px); opacity: 0; }
  55%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}

/* 2. speed lines streak in behind it, a little after */
svg.tl-logo.tl-play .tl-line { transform-origin: 100% 50%; animation: tlStreak .62s cubic-bezier(.16, 1, .3, 1) both; }
svg.tl-logo.tl-play .tl-line-1 { animation-delay: .30s; }
svg.tl-logo.tl-play .tl-line-2 { animation-delay: .36s; }
svg.tl-logo.tl-play .tl-line-3 { animation-delay: .42s; }
@keyframes tlStreak {
  from { transform: translateX(-1300px) scaleX(2.4); opacity: 0; }
  40%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}

/* 3. "crm" rises into place, letter by letter */
svg.tl-logo.tl-play .tl-crm { animation: tlRise .5s cubic-bezier(.2, .9, .3, 1) both; }
svg.tl-logo.tl-play .tl-crm-1 { animation-delay: .52s; }
svg.tl-logo.tl-play .tl-crm-2 { animation-delay: .58s; }
svg.tl-logo.tl-play .tl-crm-3 { animation-delay: .64s; }
@keyframes tlRise {
  from { transform: translateY(160px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  svg.tl-logo.tl-play .tl-body, svg.tl-logo.tl-play .tl-line, svg.tl-logo.tl-play .tl-crm { animation: none; }
}

/* ── small line under the sign-in card ─────────────────────────────────── */
.admin-login-form-wrap { flex-direction: column; }
.admin-login-legal {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px;
  margin: 18px 0 0; max-width: 468px; width: 100%;
  color: #101828; font-size: 12px; font-weight: 500; line-height: 1.5; text-align: center;
}
.admin-login-legal svg { width: 13px; height: 13px; flex: none; }
.admin-login-legal .all-dot { color: #98a2b3; }
@media (max-width: 920px) {
  /* the card sits at the top on phones / tablets (same as before) */
  .admin-login-form-wrap { justify-content: flex-start; align-items: center; }
}

/* ── social links on the dark left panel (2026-11-09) ───────────────────── */
/* plain white icons, no circle; the link box stays 28px so it is easy to tap */
.admin-login-social { display: flex; align-items: center; gap: 8px; margin: 20px 0 0 -6px; }
.admin-login-social a {
  width: 28px; height: 28px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none; opacity: .85;
  transition: opacity .15s ease;
}
.admin-login-social a:hover { opacity: 1; }
.admin-login-social a:focus-visible { outline: 2px solid #fff; outline-offset: 1px; opacity: 1; }
.admin-login-social svg { width: 16px; height: 16px; }
@media (max-width: 920px) {
  /* phones / tablets: the dark strip on top shows logo + headline; icons sit under it, centred */
  .admin-login-social { justify-content: center; margin: 10px 0 0; gap: 6px; }
  .admin-login-social svg { width: 15px; height: 15px; }
}