/* =========================================================
   Aqua OS cold-boot sequence
   Replace images/aqua-logo.png with your own logo file.
   This sequence runs only on a fresh opening of index.html.
   It is skipped when returning from desktop logout.
   ========================================================= */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(35,124,235,.16), transparent 34%),
    linear-gradient(180deg, #01061c 0%, #020a29 54%, #010417 100%);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .9s ease, visibility .9s ease, filter .9s ease;
}
.boot-screen::before {
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 25% 25%, rgba(90,204,255,.12), transparent 24%),
    radial-gradient(circle at 78% 68%, rgba(35,89,255,.12), transparent 28%);
  filter:blur(45px);
  animation:bootAtmosphere 5.2s ease-in-out infinite alternate;
}
.boot-screen.boot-leaving {
  opacity:0;
  visibility:hidden;
  filter:blur(12px);
  pointer-events:none;
}
.boot-content {
  position:relative;
  z-index:2;
  width:min(500px, calc(100vw - 48px));
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transform:translateY(7px);
}
.boot-logo-shell {
  position:relative;
  width:132px;
  height:132px;
  display:grid;
  place-items:center;
  margin-bottom:28px;
  opacity:0;
  transform:scale(.78) translateY(10px);
  filter:blur(10px);
  animation:bootLogoIn 1.15s .25s cubic-bezier(.16,1,.3,1) forwards;
}
.boot-logo-shell::before {
  content:"";
  position:absolute;
  inset:-26px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(102,209,255,.25), rgba(42,103,255,.08) 42%, transparent 70%);
  filter:blur(8px);
  animation:bootLogoPulse 2.7s 1.15s ease-in-out infinite;
}
.boot-logo {
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 14px 32px rgba(0,0,0,.52));
}

.boot-logo-fallback {
  display:grid;
  place-items:center;
  width:86px;
  height:86px;
  border:1px solid rgba(164,238,255,.72);
  border-radius:52% 48% 58% 42% / 62% 46% 54% 38%;
  color:#f2fdff;
  background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.88) 0 3%,transparent 4%),linear-gradient(145deg,#71e6ff,#167fcb 58%,#073877);
  box-shadow:0 0 30px rgba(81,209,255,.58),inset 0 1px 1px rgba(255,255,255,.72);
  font:700 40px/1 "Segoe UI",sans-serif;
  text-shadow:0 2px 8px rgba(0,34,91,.72);
  transform:rotate(-5deg);
}
.boot-title {
  margin:0;
  font-size:34px;
  font-weight:400;
  letter-spacing:-.65px;
  text-shadow:0 6px 24px rgba(0,0,0,.86);
  opacity:0;
  transform:translateY(12px);
  animation:bootTextIn .9s .8s cubic-bezier(.16,1,.3,1) forwards;
}
.boot-status {
  min-height:20px;
  margin-top:10px;
  font-size:12px;
  letter-spacing:.25px;
  color:rgba(219,239,255,.62);
  opacity:0;
  animation:bootTextIn .8s 1.1s ease forwards;
}
.boot-loader {
  position:relative;
  width:236px;
  height:5px;
  margin-top:28px;
  overflow:hidden;
  border-radius:999px;
  border:1px solid rgba(178,224,255,.16);
  background:rgba(0,8,35,.58);
  box-shadow:
    inset 0 1px 4px rgba(0,0,0,.7),
    0 1px 0 rgba(255,255,255,.05);
  opacity:0;
  animation:bootTextIn .8s 1.25s ease forwards;
}
.boot-loader-fill {
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#1a65c8,#64d8ff 50%,#d6f7ff);
  box-shadow:0 0 14px rgba(92,210,255,.82);
  transition:width .6s cubic-bezier(.2,.8,.2,1);
}
.boot-orbit {
  position:absolute;
  inset:50%;
  width:194px;
  height:194px;
  margin:-97px;
  border-radius:50%;
  border:1px solid rgba(170,224,255,.09);
  opacity:.7;
  animation:bootOrbit 7s linear infinite;
}
.boot-orbit::after {
  content:"";
  position:absolute;
  top:14px;
  left:50%;
  width:5px;
  height:5px;
  margin-left:-2.5px;
  border-radius:50%;
  background:#bfefff;
  box-shadow:0 0 13px rgba(100,215,255,1);
}
body.booting {
  cursor:wait;
}
body.booting #stage,
body.booting .profile-overlay {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
body.boot-complete #stage {
  animation:loginStageIn 1s cubic-bezier(.16,1,.3,1) both;
}
body.boot-complete .ui-layer,
body.boot-complete .shelf,
body.boot-complete .users-tray,
body.boot-complete .power-btn,
body.boot-complete .clock {
  animation:loginElementsIn 1.05s .1s cubic-bezier(.16,1,.3,1) both;
}

@keyframes bootAtmosphere {
  from { transform:translate3d(-1.5%,-1%,0) scale(1); }
  to { transform:translate3d(1.5%,1%,0) scale(1.06); }
}
@keyframes bootLogoIn {
  to { opacity:1; transform:scale(1) translateY(0); filter:blur(0); }
}
@keyframes bootTextIn {
  to { opacity:1; transform:translateY(0); }
}
@keyframes bootLogoPulse {
  0%,100% { opacity:.55; transform:scale(.94); }
  50% { opacity:1; transform:scale(1.08); }
}
@keyframes bootOrbit {
  to { transform:rotate(360deg); }
}
@keyframes loginStageIn {
  from { opacity:0; filter:blur(14px); transform:scale(1.025); }
  to { opacity:1; filter:blur(0); transform:scale(1); }
}
@keyframes loginElementsIn {
  from { opacity:0; filter:blur(10px); }
  to { opacity:1; filter:blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .boot-screen::before,
  .boot-logo-shell,
  .boot-logo-shell::before,
  .boot-title,
  .boot-status,
  .boot-loader,
  .boot-orbit,
  body.boot-complete #stage,
  body.boot-complete .ui-layer,
  body.boot-complete .shelf,
  body.boot-complete .users-tray,
  body.boot-complete .power-btn,
  body.boot-complete .clock {
    animation:none !important;
  }
  .boot-logo-shell,
  .boot-title,
  .boot-status,
  .boot-loader {
    opacity:1;
    transform:none;
    filter:none;
  }
}


/* =========================================================
   Aqua OS extended kernel boot
   ========================================================= */
.boot-screen {
  background:#00040d !important;
  transition:opacity 1.15s ease, visibility 1.15s ease, filter 1.15s ease !important;
}
.boot-screen::before {
  opacity:.32;
  background:
    radial-gradient(circle at 50% 45%, rgba(17,67,150,.18), transparent 34%),
    linear-gradient(rgba(45,117,190,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,117,190,.02) 1px, transparent 1px);
  background-size:auto, 4px 4px, 4px 4px;
  filter:none;
  animation:none;
}
.boot-screen::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom, transparent 0%, rgba(120,190,255,.025) 49%, rgba(120,190,255,.06) 50%, transparent 52%);
  background-size:100% 5px;
  opacity:.18;
}

.boot-terminal {
  position:absolute;
  inset:0;
  z-index:3;
  padding:34px 42px;
  font-family:"Courier New", Consolas, monospace;
  font-size:14px;
  line-height:1.52;
  color:#a9d7ff;
  text-shadow:0 0 8px rgba(68,166,255,.28);
  opacity:1;
  transition:opacity .85s ease, filter .85s ease, transform .85s ease;
}
.boot-terminal.hidden {
  opacity:0;
  filter:blur(8px);
  transform:scale(1.015);
}
.boot-terminal-head {
  margin-bottom:14px;
  color:#e2f3ff;
}
.boot-terminal-line {
  white-space:pre-wrap;
  min-height:1.52em;
}
.boot-terminal-line.ok::before {
  content:"[  OK  ] ";
  color:#7fffb9;
}
.boot-terminal-line.warn::before {
  content:"[ WARN ] ";
  color:#ffe795;
}
.boot-terminal-line.info::before {
  content:"[ INFO ] ";
  color:#77bfff;
}
.boot-cursor {
  display:inline-block;
  width:8px;
  height:1em;
  margin-left:4px;
  vertical-align:-2px;
  background:#bfe7ff;
  animation:bootCursorBlink .72s steps(1) infinite;
}

.boot-content {
  opacity:0;
  transform:translateY(18px) scale(.97);
  filter:blur(12px);
  transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.16,1,.3,1), filter 1.1s ease;
}
.boot-content.brand-visible {
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}
.boot-logo-shell,
.boot-title,
.boot-status,
.boot-loader {
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  animation:none !important;
}
.boot-logo-shell {
  width:144px;
  height:144px;
  margin-bottom:32px;
}
.boot-title {
  font-size:38px;
}
.boot-status {
  margin-top:12px;
  font-size:13px;
  min-height:22px;
}
.boot-loader {
  width:270px;
  height:6px;
  margin-top:30px;
}
.boot-loader-fill {
  transition:width .9s cubic-bezier(.18,.8,.2,1);
}
.boot-orbit {
  width:218px;
  height:218px;
  margin:-109px;
  opacity:.9;
}
.boot-brand-subtitle {
  margin-top:7px;
  font-size:11px;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:rgba(198,229,255,.42);
}
.boot-skip {
  position:absolute;
  right:26px;
  bottom:22px;
  z-index:4;
  border:0;
  background:transparent;
  color:rgba(206,232,250,.38);
  font:11px Tahoma, Arial, sans-serif;
  cursor:pointer;
}
.boot-skip:hover { color:rgba(235,248,255,.78); }

@keyframes bootCursorBlink {
  0%,48% { opacity:1; }
  49%,100% { opacity:0; }
}


/* =========================================================
   Aqua OS revised boot sequence
   - monochrome kernel
   - hard cut into branded wave screen
   - full-background visualizer waves
   - dotted progress rail
   ========================================================= */
.boot-screen {
  background:#000 !important;
}
.boot-screen::before,
.boot-screen::after {
  display:none !important;
}

.boot-terminal {
  color:#f2f2f2 !important;
  background:#000;
  text-shadow:none !important;
  font-family:Consolas, "Courier New", monospace;
  font-size:13px;
  line-height:1.48;
  transition:none !important;
}
.boot-terminal.hidden {
  display:none !important;
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
}
.boot-terminal-head {
  color:#fff !important;
}
.boot-terminal-line.ok::before,
.boot-terminal-line.warn::before,
.boot-terminal-line.info::before {
  color:#fff !important;
}
.boot-cursor {
  background:#fff !important;
  box-shadow:none !important;
}

.boot-content {
  position:absolute;
  inset:0;
  width:100%;
  max-width:none;
  display:block;
  opacity:0;
  transform:none;
  filter:none;
  transition:opacity .35s ease;
  overflow:hidden;
}
.boot-content.brand-visible {
  opacity:1;
  transform:none;
  filter:none;
}

.boot-wave-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.boot-wave-shade {
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 72% 40%, rgba(115,219,255,.14), transparent 29%),
    radial-gradient(circle at 28% 63%, rgba(35,104,255,.13), transparent 34%),
    linear-gradient(180deg, rgba(0,5,28,.14), rgba(0,3,18,.5));
  pointer-events:none;
}

.boot-brand-layout {
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:minmax(260px, .82fr) minmax(320px, 1.18fr);
  align-items:center;
  gap:5vw;
  padding:8vh 8vw 13vh;
}
.boot-brand-copy {
  justify-self:end;
  width:min(480px, 100%);
  text-align:left;
  text-shadow:0 12px 36px rgba(0,0,0,.68);
}
.boot-logo-shell {
  width:112px !important;
  height:112px !important;
  margin:0 0 28px !important;
}
.boot-logo-shell::before,
.boot-orbit {
  display:none !important;
}
.boot-logo {
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.5));
}
.boot-title {
  margin:0;
  font-size:clamp(38px, 5vw, 74px) !important;
  line-height:.98;
  letter-spacing:-2.6px;
  max-width:580px;
}
.boot-brand-subtitle {
  margin-top:17px;
  max-width:430px;
  font-size:12px;
  line-height:1.7;
  letter-spacing:2.4px;
  color:rgba(222,241,255,.58);
}
.boot-status {
  position:absolute;
  left:8vw;
  bottom:54px;
  margin:0 !important;
  font-size:12px !important;
  letter-spacing:.35px;
  color:rgba(225,243,255,.68);
}

.boot-dot-loader {
  position:absolute;
  left:8vw;
  right:8vw;
  bottom:27px;
  height:10px;
  display:grid;
  grid-template-columns:repeat(30, 1fr);
  gap:8px;
}
.boot-dot {
  height:4px;
  border-radius:999px;
  background:rgba(218,240,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:background .32s ease, box-shadow .32s ease, transform .32s ease;
}
.boot-dot.active {
  background:rgba(213,245,255,.92);
  box-shadow:0 0 10px rgba(110,215,255,.65);
  transform:translateY(-1px);
}
.boot-loader {
  display:none !important;
}
.boot-skip {
  right:8vw !important;
  bottom:49px !important;
  color:rgba(225,242,255,.42) !important;
}
.boot-skip:hover {
  color:#fff !important;
}

@media (max-width: 760px) {
  .boot-terminal {
    padding:22px 20px;
    font-size:11px;
  }
  .boot-brand-layout {
    grid-template-columns:1fr;
    align-content:center;
    padding:8vh 8vw 17vh;
  }
  .boot-brand-copy {
    justify-self:start;
  }
  .boot-logo-shell {
    width:86px !important;
    height:86px !important;
    margin-bottom:22px !important;
  }
  .boot-title {
    font-size:clamp(40px, 13vw, 64px) !important;
  }
  .boot-status {
    bottom:58px;
  }
  .boot-dot-loader {
    bottom:30px;
    grid-template-columns:repeat(20,1fr);
    gap:5px;
  }
}


/* =========================================================
   Aqua OS bright crystal boot refinements
   ========================================================= */
.boot-content {
  background:
    radial-gradient(circle at 68% 42%, rgba(164,236,255,.34), transparent 24%),
    radial-gradient(circle at 22% 70%, rgba(70,174,255,.24), transparent 32%),
    linear-gradient(180deg, #0a2c78 0%, #0d55ae 44%, #0b367f 100%);
}
.boot-wave-shade {
  background:
    radial-gradient(circle at 70% 38%, rgba(220,250,255,.24), transparent 24%),
    radial-gradient(circle at 35% 62%, rgba(83,190,255,.22), transparent 33%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,19,74,.18)) !important;
}
.boot-brand-layout {
  grid-template-columns: minmax(260px, .72fr) minmax(360px, 1.28fr);
  padding: 9vh 8vw 14vh;
}
.boot-brand-copy {
  justify-self:start;
  width:min(560px,100%);
  margin-left:2vw;
}
.boot-logo-shell {
  width:78px !important;
  height:78px !important;
  margin:0 0 22px !important;
}
.boot-title {
  font-size:clamp(44px,5.8vw,86px) !important;
  line-height:.92;
  letter-spacing:-3.5px;
  max-width:640px;
}
.boot-brand-subtitle {
  margin-top:18px;
  font-size:12px;
  letter-spacing:2.8px;
  color:rgba(235,248,255,.72);
}
.boot-status {
  color:rgba(241,250,255,.82);
  text-shadow:0 2px 12px rgba(0,45,120,.5);
}
.boot-dot {
  height:5px;
  background:rgba(235,249,255,.2);
}
.boot-dot.active {
  background:#e8fbff;
  box-shadow:0 0 12px rgba(130,226,255,.95), 0 0 22px rgba(71,165,255,.55);
}
.boot-gpu-flash {
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0%, rgba(195,240,255,.88) 18%, rgba(87,181,255,.42) 42%, rgba(20,86,200,0) 72%);
}
.boot-gpu-flash.fire {
  animation:gpuDriverFlash .58s cubic-bezier(.2,.7,.2,1) both;
}
.boot-particles {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.boot-particle {
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:rgba(235,253,255,.85);
  box-shadow:0 0 8px rgba(168,232,255,.85);
  animation:bootParticleFloat var(--dur) ease-in-out var(--delay) infinite alternate;
  opacity:var(--opacity);
}
@keyframes gpuDriverFlash {
  0% { opacity:0; }
  18% { opacity:1; }
  42% { opacity:.72; }
  100% { opacity:0; }
}
@keyframes bootParticleFloat {
  from { transform:translate3d(0,0,0) scale(.8); }
  to { transform:translate3d(var(--drift-x),var(--drift-y),0) scale(1.3); }
}


/* Character-by-character kernel typing polish */
.boot-terminal-line {
  position:relative;
}
.boot-terminal-line.typing::after {
  content:"";
  display:inline-block;
  width:7px;
  height:1em;
  margin-left:4px;
  vertical-align:-2px;
  background:#fff;
  animation:bootCursorBlink .72s steps(1) infinite;
}
.boot-terminal-line.complete::after {
  display:none;
}


/* =========================================================
   Correct staged login entrance
   Loading finishes -> login background fades in ->
   3D canvas icon drops -> credentials fade in ->
   bottom shelf and controls rise in
   ========================================================= */

/* Disable the older all-at-once boot-complete reveal. */
body.boot-complete #stage,
body.boot-complete .ui-layer,
body.boot-complete .shelf,
body.boot-complete .users-tray,
body.boot-complete .power-btn,
body.boot-complete .clock {
  animation:none !important;
}

/* Prepare the real login elements before the boot overlay is removed. */
body.login-reveal-ready #stage {
  opacity:0 !important;
  visibility:visible !important;
  pointer-events:none;
  filter:blur(12px);
  transform:scale(1.025);
}

body.login-reveal-ready #threeCanvas {
  opacity:0 !important;
  transform:translate3d(0,-145px,0) scale(.82) !important;
  filter:blur(9px);
  transform-origin:50% 32%;
}

body.login-reveal-ready .login-fields {
  opacity:0 !important;
  transform:translate3d(0,22px,0) !important;
  filter:blur(7px);
  pointer-events:none !important;
}

body.login-reveal-ready .shelf,
body.login-reveal-ready .users-tray,
body.login-reveal-ready .power-btn,
body.login-reveal-ready .clock {
  opacity:0 !important;
  filter:blur(7px);
}

body.login-reveal-ready .shelf {
  transform:translate3d(0,100%,0) !important;
}

body.login-reveal-ready .users-tray {
  transform:translate3d(-50%,85px,0) scale(.96) !important;
}

body.login-reveal-ready .power-btn {
  transform:translate3d(0,70px,0) !important;
}

body.login-reveal-ready .clock {
  transform:translate3d(0,70px,0) !important;
}

/* Stage 1 — only the login environment fades in. */
body.login-stage-visible #stage {
  opacity:1 !important;
  filter:blur(0);
  transform:scale(1);
  transition:
    opacity 1.2s cubic-bezier(.22,.75,.18,1),
    filter 1.2s ease,
    transform 1.2s cubic-bezier(.16,1,.3,1);
}

/* Stage 2 — the actual 3D canvas drops into place after the fade. */
body.login-icon-visible #threeCanvas {
  opacity:1 !important;
  transform:translate3d(0,0,0) scale(1) !important;
  filter:blur(0);
  transition:
    transform 1.08s cubic-bezier(.16,1.22,.28,1),
    opacity .5s ease,
    filter .78s ease;
}

/* Stage 3 — name, password, and login button reveal after the icon lands. */
body.login-details-visible .login-fields:not(.is-hidden) {
  opacity:1 !important;
  transform:translate3d(0,0,0) !important;
  filter:blur(0);
  pointer-events:auto !important;
  transition:
    opacity .72s ease,
    transform .82s cubic-bezier(.16,1,.3,1),
    filter .62s ease;
}

/* Stage 4 — lower tab and controls rise together with the credentials. */
body.login-bottom-visible .shelf,
body.login-bottom-visible .users-tray,
body.login-bottom-visible .power-btn,
body.login-bottom-visible .clock {
  opacity:1 !important;
  filter:blur(0);
  transition:
    transform .95s cubic-bezier(.16,1,.3,1),
    opacity .62s ease,
    filter .62s ease;
}

body.login-bottom-visible .shelf {
  transform:translate3d(0,0,0) !important;
}

body.login-bottom-visible .users-tray {
  transform:translate3d(-50%,0,0) scale(1) !important;
}

body.login-bottom-visible .power-btn,
body.login-bottom-visible .clock {
  transform:translate3d(0,0,0) !important;
}

body.login-sequence-complete #stage,
body.login-sequence-complete #threeCanvas,
body.login-sequence-complete .login-fields,
body.login-sequence-complete .shelf,
body.login-sequence-complete .users-tray,
body.login-sequence-complete .power-btn,
body.login-sequence-complete .clock {
  pointer-events:auto;
}

@media (prefers-reduced-motion: reduce) {
  body.login-reveal-ready #stage,
  body.login-reveal-ready #threeCanvas,
  body.login-reveal-ready .login-fields,
  body.login-reveal-ready .shelf,
  body.login-reveal-ready .users-tray,
  body.login-reveal-ready .power-btn,
  body.login-reveal-ready .clock {
    transition:none !important;
    filter:none !important;
  }
}


/* =========================================================
   Aqua OS final boot-to-login polish
   ========================================================= */

/* Subtitle and startup bypass are permanently removed. */
.boot-brand-subtitle,
.boot-skip {
  display:none !important;
}

/* Subtle cinematic drift for the branded loading environment. */
.boot-content.brand-visible .boot-wave-canvas,
.boot-content.brand-visible .boot-wave-shade,
.boot-content.brand-visible .boot-particles {
  animation:bootCameraDrift 8s ease-in-out infinite alternate;
  transform-origin:center;
  will-change:transform;
}

@keyframes bootCameraDrift {
  0%   { transform:translate3d(-2px, 1px, 0) scale(1.006); }
  50%  { transform:translate3d(2px, -2px, 0) scale(1.011); }
  100% { transform:translate3d(4px, 1px, 0) scale(1.007); }
}

/* One restrained bloom pulse immediately before login handoff. */
.boot-logo-shell.final-bloom {
  animation:aquaFinalLogoBloom 1.15s cubic-bezier(.16,1,.3,1) both !important;
}

@keyframes aquaFinalLogoBloom {
  0% {
    transform:scale(1);
    filter:drop-shadow(0 18px 36px rgba(0,0,0,.5));
  }
  42% {
    transform:scale(1.045);
    filter:
      drop-shadow(0 18px 36px rgba(0,0,0,.46))
      drop-shadow(0 0 22px rgba(181,242,255,.92))
      drop-shadow(0 0 55px rgba(72,178,255,.62));
  }
  100% {
    transform:scale(1);
    filter:drop-shadow(0 18px 36px rgba(0,0,0,.5));
  }
}

/* Final travelling shimmer through the completed loading rail. */
.boot-dot-loader.final-shimmer .boot-dot {
  animation:bootDotFinalShimmer .92s ease both;
  animation-delay:calc(var(--dot-index, 0) * 22ms);
}

@keyframes bootDotFinalShimmer {
  0%, 100% {
    transform:translateY(-1px) scaleX(1);
    background:rgba(213,245,255,.92);
    box-shadow:0 0 10px rgba(110,215,255,.65);
  }
  48% {
    transform:translateY(-2px) scaleX(1.16);
    background:#fff;
    box-shadow:
      0 0 11px rgba(255,255,255,.95),
      0 0 24px rgba(112,221,255,.92);
  }
}

/* The login lives underneath the loading screen during the handoff. */
body.login-reveal-ready #stage {
  visibility:visible !important;
}

/* Weighted 3D icon landing with a tiny overshoot and settle. */
body.login-icon-visible #threeCanvas {
  animation:aquaIconWeightedDrop 1.12s cubic-bezier(.18,.88,.22,1) both !important;
  transition:opacity .45s ease, filter .68s ease !important;
}

@keyframes aquaIconWeightedDrop {
  0% {
    opacity:0;
    transform:translate3d(0,-145px,0) scale(.82);
    filter:blur(9px);
  }
  72% {
    opacity:1;
    transform:translate3d(0,5px,0) scale(1.012);
    filter:blur(0);
  }
  86% {
    transform:translate3d(0,-4px,0) scale(.998);
  }
  100% {
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0);
  }
}

/* Glass glint that crosses the profile icon after it settles. */
.login-icon-glint {
  position:absolute;
  z-index:3;
  top:14%;
  left:50%;
  width:min(380px, 42vw);
  height:min(380px, 42vw);
  transform:translateX(-50%);
  border-radius:50%;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
}

.login-icon-glint::before {
  content:"";
  position:absolute;
  top:-18%;
  bottom:-18%;
  left:-48%;
  width:24%;
  transform:skewX(-18deg);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.08),
    rgba(220,249,255,.72),
    rgba(255,255,255,.12),
    transparent
  );
  filter:blur(3px);
}

body.login-icon-glint-visible .login-icon-glint {
  opacity:1;
}

body.login-icon-glint-visible .login-icon-glint::before {
  animation:aquaProfileGlint .72s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes aquaProfileGlint {
  from { left:-48%; opacity:0; }
  18%  { opacity:1; }
  to   { left:128%; opacity:0; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-content.brand-visible .boot-wave-canvas,
  .boot-content.brand-visible .boot-wave-shade,
  .boot-content.brand-visible .boot-particles,
  body.login-icon-visible #threeCanvas,
  body.login-icon-glint-visible .login-icon-glint::before {
    animation:none !important;
  }
}