/* CSS Reset & Baseline */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  user-select: none;
}

/* Header Background & Gradient Area
   Height: 158px, full width
   Linear Gradient starting at #7E7E7E (at -71.71% offset) down to transparent (at 100% offset)
*/
.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 158px;
  background: linear-gradient(180deg, #7E7E7E -71.71%, rgba(217, 217, 217, 0.00) 100%);
  z-index: 10;
  pointer-events: none;
  /* Let clicks pass through to background canvas */
}

/* Ensure links and logos inside header are interactive */
.header-bg .logo-top-left,
.header-bg .login-top-right {
  pointer-events: auto;
}

/* Header Logo (Top-Left)
   Distance from top: 73px, left: 63px
   Image dimension: 144px width, 79px height
*/
.logo-top-left {
  position: absolute;
  top: 73px;
  left: 63px;
  width: 144px;
  height: 79px;
  z-index: 11;
}

.logo-top-left img {
  display: block;
  width: 100%;
  height: 100%;
  display: none;
}

/* Client Login Button (Top-Right)
   Distance from top: 80px, right: 74px
   Image dimension: 298px width, 44px height
*/
.login-top-right {
  position: absolute;
  top: 80px;
  right: 74px;
  width: 298px;
  height: 44px;
  z-index: 10;
}

.login-top-right img {
  display: block;
  width: 100%;
  height: 100%;
  display: none;
}

/* Center Content Container
   Centered horizontally, contains the central logo and the big login button
*/
.center-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
}

/* Main Center Logo
   Centered precisely. Width: 398px, Height: 244px (PNG version)
*/
.logo-mid {
  display: block;
  width: 398px;
  height: 244px;
  margin-bottom: 50px;
  /* 20px vertical space to login button */
}

/* Large Login Button
   Button Container matches exact bounds of normal-img (298x44).
   Hover glow (355x101) expands outward symmetrically when hovered.
*/
.login-button-large {
  position: relative;
  display: block;
  width: 298px;
  height: 44px;
  text-decoration: none;
  cursor: pointer;
}

/* Normal State (Button without glow) */
.login-button-large .normal-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 298px;
  height: 44px;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  z-index: 2;
}

/* Hover State (Glow button 355x101)
   Symmetric offset calculation:
   X-axis: (355px - 298px) / 2 = 28.5px offset to left
   Y-axis: (101px - 44px) / 2 = 28.5px offset to top
*/
.login-button-large .hover-img {
  position: absolute;
  top: -28.5px;
  left: -28.5px;
  width: 355px;
  height: 101px;
  opacity: 0;
  pointer-events: none;
  /* Avoid mouse interference on glow margins */
  transition: opacity 0.3s ease-in-out;
  z-index: 1;
}

/* Hover Transitions */
.login-button-large:hover .normal-img {
  opacity: 0;
}

.login-button-large:hover .hover-img {
  opacity: 1;
}