@import "./boot-lettering.css";
@font-face{font-family:MiSans;src:url("./regular.woff2");font-weight:400;font-display:swap}
@font-face{font-family:MiSans;src:url("./semibold.woff2");font-weight:600;font-display:swap}
@font-face{font-family:MiSans;src:url("./bold.woff2");font-weight:700;font-display:swap}

.brand {
  position: absolute;
  left: 59px;
  top: 114px;
  z-index: 5;
  line-height: 1;
  user-select: none;
  width: 270px;
  white-space: nowrap;
}
.brand h1 {
  font-size: 44px;
  letter-spacing: 2.324px;
  line-height: 48px;
  margin: 0;
  font-weight: 750;
}
.brand > div {
  font-size: 19px;
  line-height: 23px;
  letter-spacing: 0.587px;
  font-weight: 600;
}
.brand p {
  margin: 0;
  font-size: 35px;
  line-height: 40px;
  letter-spacing: 0;
  word-spacing: 0;
  display: flex;
  justify-content: space-between;
}
.brand p b {
  font-weight: 750;
  letter-spacing: 3px;
}
.brand-analysis {
  position: relative;
  display: block;
  width: 189px;
  height: 40px;
}
.brand-analysis > span {
  position: absolute;
  top: 0;
  letter-spacing: 0;
  font-kerning: none;
}
.powered {
  position: absolute;
  right: 59px;
  bottom: 108px;
  font-size: 18px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 24px;
}
.powered b {
  font-weight: 750;
}
.powered i {
  height: 6px;
  width: 25px;
  background: #090a08;
  display: inline-block;
  margin-left: 11px;
}
.boot-background {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 51% 48%,
    #e7e7e1 0%,
    #e3e1dc 76%,
    #e4dfdb 100%
  );
  transition: none;
  pointer-events: none;
}
.boot-background svg {
  width: 100%;
  height: 100%;
  opacity: 0.15;
  filter: blur(2px);
}
.boot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.boot-logo {
  position: absolute;
  width: 296px;
  height: 177px;
  left: 518px;
  top: 462px;
  transition: none;
  opacity: 0;
}
.boot-logo svg {
  width: 100%;
  height: 100%;
}
.auth-status {
  position: absolute;
  left: 931px;
  top: 529px;
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  opacity: 0;
}
.auth-status > span:first-child {
  font-size: 14px;
}
.auth-status i {
  width: 3px;
  height: 22px;
  background: #282b26;
  animation: blink 0.8s steps(1) infinite;
}
.access-text {
  position: absolute;
  top: 532px;
  left: 800px;
  width: 420px;
  text-align: left;
  font-size: 18px;
  opacity: 0;
}
.scan {
  position: absolute;
  left: 410px;
  top: -10px;
  width: 1100px;
  height: 1100px;
  opacity: 0;
  transform: scale(0.82);
  transition:
    transform 1.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.6s;
}
.scan svg {
  width: 100%;
  height: 100%;
}
.scan > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
}
.scan-track {
  stroke: #f7f5f0;
  stroke-width: 8;
}
.scan-ring {
  stroke: #aaa9a0;
  stroke-width: 8;
  transform-origin: center;
  stroke-dasharray: 2400 900;
}
.ring-one {
  animation: orbit 8s linear infinite;
}
.ring-two {
  stroke-width: 9;
  stroke-dasharray: 590 500;
  animation: orbit 4s linear infinite reverse;
}
.ring-three {
  stroke: #f4f3eb;
  stroke-width: 3;
  stroke-dasharray: 600 200;
  animation: orbit 16s linear infinite;
}
.scan-nodes {
  fill: #e7c69b;
  filter: drop-shadow(0 0 15px #ddb788);
  transform-origin: center;
  animation: orbit 8s linear infinite;
}
.welcome {
  position: absolute;
  top: 403px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 55px;
  font-weight: 700;
  line-height: 1.05;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.7s,
    transform 1s;
}
.welcome strong {
  display: inline-block;
  background: #080a08;
  color: #ece9e4;
  padding: 4px 10px 6px;
  font-size: 51px;
  line-height: 1;
}
.welcome-logo {
  width: 203px;
  height: 121px;
  margin: 58px auto 0;
}
.welcome-logo svg {
  width: 100%;
  height: 100%;
}
/* Frame-driven opening: no elapsed CSS animation state when seeking/replaying. */
[data-mode="boot"] .brand,
[data-mode="boot"] .powered,
[data-mode="boot"] .boot * {
  transition: none;
  animation: none;
}
[data-mode="boot"] .auth-status {
  animation: none;
}
.auth-status i {
  display: none;
}
.boot-white {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
}
.scan {
  inset: 0;
  width: 1920px;
  height: 1080px;
  transform: none;
  transition: none;
}
.scan > span {
  font-size: 22px;
  white-space: nowrap;
  padding-left: 0;
}
.welcome {
  left: 720px;
  top: 403px;
  width: 480px;
  height: 340px;
  transform-origin: 50% 44%;
  transition: none;
}
.welcome-heading {
  position: relative;
  z-index: 1;
  line-height: 65px;
  font-size: 55px;
  white-space: nowrap;
}
.welcome-panel {
  position: absolute;
  top: -59px;
  left: 5px;
  width: 470px;
  height: 392px;
  background: #080a08;
}
.welcome-company {
  position: absolute;
  top: 67px;
  left: 35px;
  width: 410px;
  height: 60px;
}
.welcome-company strong {
  display: block;
  position: absolute;
  inset: 0;
  padding: 5px 8px;
  background: transparent;
  color: #080a08;
  font-size: 48px;
  line-height: 50px;
  white-space: nowrap;
  letter-spacing: -0.5px;
}
.welcome-company .welcome-highlight {
  background: #080a08;
  color: #eeede8;
}
.welcome-database {
  position: absolute;
  top: 134px;
  left: 0;
  width: 100%;
  font-size: 36px;
  line-height: 43px;
  white-space: nowrap;
}
.welcome-logo {
  position: absolute;
  top: 187px;
  left: 138.5px;
  margin: 0;
}

#rhine-boot { position:fixed; inset:0; z-index:2147483000; overflow:hidden; background:#121414; opacity:1; transition:opacity 1500ms cubic-bezier(.22,.61,.36,1); }
#rhine-boot.leaving { opacity:0; pointer-events:none; }
#rhine-stage { position:absolute; left:50%; top:50%; width:1920px; height:1080px; transform-origin:center; font-family:MiSans,sans-serif; color:#080a08; filter:invert(1); }
#rhine-stage * { box-sizing:border-box; }
#rhine-stage .boot-background { background:#ededeb; }
#rhine-stage .boot-background svg { opacity:.08; }
#rhine-stage .brand { z-index:5; }
#rhine-boot .load-status { position:absolute; left:32px; bottom:30px; right:32px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:#a9b8b6; font:11px nbarchitekt,monospace; letter-spacing:.14em; }
#rhine-boot button { border:1px solid #53605e; background:none; color:#e1e8e3; padding:12px 16px; font:inherit; cursor:pointer; letter-spacing:.1em; }
#rhine-boot button:disabled { opacity:.35; cursor:wait; }
#rhine-boot button:focus-visible { outline:2px solid #ddbd88; outline-offset:4px; }
#rhine-stage.portrait .welcome { left:210px; top:calc(50% - 135px); }
#rhine-stage.portrait .boot-logo { left:302px; top:calc(50% - 180px); transform:none !important; }
#rhine-stage.portrait .auth-status { left:220px; top:calc(50% + 70px); font-size:24px; }
#rhine-stage.portrait .access-text { left:210px; top:50%; font-size:24px; }
#rhine-stage.portrait .scan { top:50%; left:50%; transform:translate(-50%,-50%) scale(.6); }
#rhine-stage.portrait .powered { bottom:260px; }
@media(prefers-reduced-motion:reduce) { #rhine-boot { transition-duration:300ms; } }