/* =========================================================
   Centered Aqua OS branded loading composition
   ========================================================= */

.boot-brand {
  left:50% !important;
  right:auto !important;
  top:50% !important;
  bottom:auto !important;
  width:min(760px, 88vw) !important;
  transform:translate(-50%, -50%) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

.boot-brand-inner,
.boot-brand-copy {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  width:100% !important;
}

.boot-logo-shell {
  margin:0 auto 30px !important;
  transform-origin:center !important;
}

.boot-logo-shell,
.boot-logo,
.boot-logo-mark {
  align-self:center !important;
}

.boot-title,
.boot-brand-title,
.boot-brand h1 {
  width:100% !important;
  margin:0 !important;
  text-align:center !important;
  font-size:clamp(42px, 5.4vw, 78px) !important;
  line-height:.98 !important;
  letter-spacing:-.045em !important;
}

.boot-status-wrap,
.boot-progress-wrap,
.boot-dot-loader {
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
  justify-content:center !important;
}

.boot-status {
  text-align:center !important;
}

.boot-dot-loader {
  margin-top:30px !important;
}

/* Slightly enlarge the logo for the centered hero layout. */
.boot-logo-shell {
  scale:1.12;
}

/* Refined staged exit: title leaves first, logo follows. */
.boot-brand-title.title-exit,
.boot-title.title-exit,
.boot-brand h1.title-exit {
  animation:aquaTitleExit .28s ease both !important;
}

.boot-logo-shell.logo-exit {
  animation:aquaLogoExit .42s ease both !important;
}

@keyframes aquaTitleExit {
  from {
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
  to {
    opacity:0;
    transform:translateY(-8px);
    filter:blur(5px);
  }
}

@keyframes aquaLogoExit {
  0% {
    opacity:1;
    transform:scale(1);
    filter:blur(0);
  }
  100% {
    opacity:0;
    transform:scale(.97);
    filter:blur(7px);
  }
}

@media (max-width:700px) {
  .boot-brand {
    width:min(92vw, 620px) !important;
  }

  .boot-logo-shell {
    margin-bottom:24px !important;
    scale:1.04;
  }

  .boot-title,
  .boot-brand-title,
  .boot-brand h1 {
    font-size:clamp(36px, 10vw, 58px) !important;
  }
}


/* =========================================================
   FINAL CORRECTION
   - Actually center the boot composition
   - Remove all logo shimmer/glint
   - Make the real Three.js login canvas visibly drop
   ========================================================= */

/* The actual boot container is .boot-brand-layout, not .boot-brand. */
.boot-brand-layout {
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  padding:0 7vw 92px !important;
  text-align:center !important;
}

.boot-brand-copy {
  justify-self:auto !important;
  align-self:center !important;
  width:min(760px, 88vw) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  text-shadow:0 12px 36px rgba(0,0,0,.68);
}

.boot-logo-shell {
  width:126px !important;
  height:126px !important;
  margin:0 auto 30px !important;
  scale:1 !important;
  transform:none !important;
  animation:none !important;
  filter:none !important;
}

.boot-logo {
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  margin:0 auto !important;
  animation:none !important;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.5)) !important;
}

.boot-title {
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  text-align:center !important;
  font-size:clamp(42px, 5.2vw, 76px) !important;
  line-height:1 !important;
  letter-spacing:-.045em !important;
}

/* Center status and progress rail beneath the hero stack. */
.boot-status {
  left:50% !important;
  right:auto !important;
  bottom:63px !important;
  width:min(760px, 84vw) !important;
  transform:translateX(-50%) !important;
  text-align:center !important;
}

.boot-dot-loader {
  left:50% !important;
  right:auto !important;
  bottom:33px !important;
  width:min(760px, 84vw) !important;
  transform:translateX(-50%) !important;
}

/* Kill every boot-logo shimmer/bloom treatment. */
.boot-logo-shell.final-bloom,
.boot-logo-shell.logo-exit {
  animation:none !important;
  filter:none !important;
}

.boot-logo-shell::after,
.boot-logo::after,
.login-icon-glint,
.login-icon-glint::before {
  display:none !important;
  animation:none !important;
  opacity:0 !important;
}

/* Keep the title fade, but let the logo simply fade with the screen. */
.boot-logo-shell.logo-exit {
  opacity:1 !important;
  transform:none !important;
}

@media (max-width:700px) {
  .boot-brand-layout {
    padding:0 5vw 100px !important;
  }

  .boot-logo-shell {
    width:104px !important;
    height:104px !important;
    margin-bottom:24px !important;
  }

  .boot-title {
    font-size:clamp(36px, 10vw, 56px) !important;
  }

  .boot-status,
  .boot-dot-loader {
    width:86vw !important;
  }
}

/* =========================================================
   REAL 3D PROFILE ICON DROP
   Keep the canvas stationary and animate masterPivot in Three.js.
   ========================================================= */
body.login-reveal-ready #threeCanvas,
body.login-icon-visible #threeCanvas,
body.login-icon-settled #threeCanvas,
body.login-icon-final #threeCanvas {
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  animation:none !important;
  transition:none !important;
}


/* =========================================================
   FIRST-BOOT LOGIN TRANSITION FIX
   The staged boot reveal classes remain on <body> after startup.
   Their !important visibility rules previously overrode logging-in,
   leaving the login UI visible during the Welcome back animation.
   These final rules intentionally take priority.
   ========================================================= */

body.logging-in.login-details-visible .login-fields,
body.logging-in .login-fields {
  opacity:0 !important;
  transform:translate3d(95px,0,0) scale(.94) !important;
  filter:blur(8px) !important;
  pointer-events:none !important;
  transition:
    opacity .55s ease,
    transform .75s cubic-bezier(.19,1,.22,1),
    filter .55s ease !important;
}

body.logging-in.login-bottom-visible .users-tray,
body.logging-in .users-tray {
  opacity:0 !important;
  transform:translate3d(-50%,85px,0) scale(.92) !important;
  filter:blur(10px) !important;
  pointer-events:none !important;
}

body.logging-in.login-bottom-visible .shelf,
body.logging-in .shelf {
  opacity:0 !important;
  transform:translate3d(0,120px,0) !important;
  filter:blur(14px) !important;
  pointer-events:none !important;
}

body.logging-in.login-bottom-visible .power-btn,
body.logging-in .power-btn {
  opacity:0 !important;
  transform:translate3d(0,70px,0) scale(.9) !important;
  filter:blur(8px) !important;
  pointer-events:none !important;
}

body.logging-in.login-bottom-visible .clock,
body.logging-in .clock {
  opacity:0 !important;
  transform:translate3d(0,70px,0) scale(.9) !important;
  filter:blur(8px) !important;
  pointer-events:none !important;
}

/* Keep the wallpaper and Three.js scene visible during the login animation. */
body.logging-in #stage {
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  transform:none !important;
}

/* Ensure only the 3D profile icon is visually dominant. */
body.logging-in .ui-layer {
  opacity:0 !important;
  pointer-events:none !important;
}

body.logging-in .loading-glow {
  opacity:1 !important;
}

/* Welcome text must always sit cleanly above the cleared login interface. */
body.logging-in.show-welcome .welcome-text {
  opacity:1 !important;
  transform:scale(1) !important;
  filter:blur(0) !important;
  pointer-events:auto !important;
}

/* Keep the desktop login composition clear on smaller and shorter laptops. */
@media (max-width:1100px) {
  .layout-container {
    gap:clamp(42px,7vw,76px);
  }

  .block-canvas-spacer {
    width:300px;
    height:300px;
  }

  .login-fields {
    max-width:calc(100vw - 410px);
  }
}

@media (max-height:700px) {
  .layout-container {
    transform:translateY(-68px);
  }

  .block-canvas-spacer {
    width:280px;
    height:280px;
  }

  .shelf {
    height:132px;
  }

  .users-tray {
    bottom:14px;
  }

  .user .avatar {
    width:66px;
    height:66px;
  }

  .clock {
    bottom:16px;
  }
}