/* Base reset and page scaffolding for login */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* Base colors for inheritance */
  color: rgb(var(--color-text));
  background-color: rgb(var(--color-canvas));
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: 1.4;
  /* Base colors - inherited by all elements */
  color: rgb(var(--color-text));
  background-color: rgb(var(--color-canvas));
  background: rgb(var(--login-gradient-background)) 0%, var(--grey-50) 100%));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden; /* Prevent horizontal scroll */
  overflow-y: auto; /* Allow vertical scroll if needed */
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .video-background { display: none !important; }
  .video-overlay { background: rgb(var(--color-canvas)) !important; }
}

:focus-visible { outline: var(--focus-halo); outline-offset: 2px; }

.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--container-padding) var(--container-padding) 0;
  position: relative;
  overflow: hidden;
  animation: containerFloat 6s ease-in-out infinite;
}

@keyframes containerFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

.login-container::before{
  content:''; position:absolute; inset:0; z-index:1;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(var(--color-primary), .1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(var(--login-color-primary-tint), .1) 0%, transparent 50%),
    radial-gradient(circle at 60% 20%, rgba(var(--login-color-gold), .08) 0%, transparent 50%);
  animation: backgroundFloat 20s ease-in-out infinite; pointer-events:none;
}

@keyframes backgroundFloat { 0%,100%{transform:translateY(0) rotate(0);opacity:.3} 50%{transform:translateY(-20px) rotate(1deg);opacity:.6} }

.login-content { width:100%; max-width:600px; text-align:center; position:relative; z-index:3; animation: contentFadeIn 1.2s ease-out; }
@keyframes contentFadeIn { from{opacity:0;transform:translateY(30px) scale(.95)} to{opacity:1;transform:none} }