/* ---- Bigger logo (login page + app) ---- */
body:has(input[type="password"]) img[src^="/branding/logo"] {
  height: 72px !important;
  width: auto !important;
  max-width: 340px !important;
  max-height: none !important;
  object-fit: contain;
}

/* ---- Inside the app: logo fits its slot ---- */
body:not(:has(input[type="password"])) img[src^="/branding/"] {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 40px !important;
  object-fit: contain !important;
  padding: 4px;
  box-sizing: border-box;
}

/* ---- Animations, login page only; turned off for users who prefer reduced motion ---- */
@media (prefers-reduced-motion: no-preference) {
  body:has(input[type="password"]) {
    background: linear-gradient(120deg, #07152b, #0b5394, #0a2a4a, #0d0d0d) !important;
    background-size: 300% 300% !important;
    animation: sit-bg 18s ease infinite;
  }
  body:has(input[type="password"]) form {
    animation: sit-card .6s cubic-bezier(.2,.7,.2,1) both;
  }
  body:has(input[type="password"]) img[src^="/branding/logo"] {
    animation: sit-logo-in .8s ease both, sit-logo-float 6s ease-in-out 1s infinite;
  }
  body:has(input[type="password"]) button[type="submit"] {
    transition: transform .15s ease, box-shadow .15s ease;
  }
  body:has(input[type="password"]) button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(11, 83, 148, .45);
  }
}

@keyframes sit-bg       { 0% {background-position: 0% 50%} 50% {background-position: 100% 50%} 100% {background-position: 0% 50%} }
@keyframes sit-card     { from {opacity: 0; transform: translateY(16px)} to {opacity: 1; transform: none} }
@keyframes sit-logo-in  { from {opacity: 0; transform: scale(.92)} to {opacity: 1; transform: none} }
@keyframes sit-logo-float { 0%, 100% {transform: translateY(0)} 50% {transform: translateY(-4px)} }