/* Unagi Foundation — automotive instrument-cluster welcome */
.uf-boot{
  --uf-ink:#062f2a;
  --uf-cream:#f7f2e8;
  --uf-blue:#8fc9d8;
  --uf-lime:#d4e69a;
  --uf-coral:#ef7b5e;
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 48%, rgba(143,201,216,.10), transparent 22%),
    radial-gradient(circle at 50% 52%, rgba(212,230,154,.055), transparent 38%),
    linear-gradient(180deg,#07352f 0%,#062d28 55%,#031f1c 100%);
  color:var(--uf-cream);
  opacity:1;
  visibility:visible;
  transition:opacity .72s cubic-bezier(.2,.72,.16,1),visibility .72s linear;
}
.uf-boot::before{
  content:"";
  position:absolute;
  inset:-25%;
  z-index:-1;
  background:
    linear-gradient(112deg,transparent 43%,rgba(255,255,255,.035) 50%,transparent 57%);
  transform:translateX(-46%);
  animation:ufBootScan 2.25s cubic-bezier(.2,.76,.16,1) both;
}
.uf-boot.is-exit{opacity:0;visibility:hidden}
body.uf-boot-lock{overflow:hidden}

.uf-boot-vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at center,transparent 0 34%,rgba(0,0,0,.12) 68%,rgba(0,0,0,.3) 100%);
}

.uf-boot-cluster{
  position:absolute;
  left:50%;
  top:50%;
  width:min(78vmin,760px);
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.78);
  border-radius:50%;
  opacity:0;
  animation:ufBootClusterIn .72s .08s cubic-bezier(.15,.84,.25,1) forwards;
}
.uf-boot-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(247,242,232,.085);
  box-shadow:inset 0 0 50px rgba(143,201,216,.025),0 0 60px rgba(143,201,216,.025);
}
.uf-boot-ring-outer{inset:6%}
.uf-boot-ring-inner{inset:20%;border-color:rgba(247,242,232,.05)}

.uf-boot-ticks{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:repeating-conic-gradient(
    from -126deg,
    rgba(247,242,232,.78) 0deg .36deg,
    transparent .36deg 4.55deg
  );
  -webkit-mask:radial-gradient(circle,transparent 0 43%,#000 43.3% 46%,transparent 46.4%);
  mask:radial-gradient(circle,transparent 0 43%,#000 43.3% 46%,transparent 46.4%);
  opacity:.56;
  animation:ufBootTicks 1s .15s ease both;
}

.uf-boot-progress{
  position:absolute;
  inset:10%;
  border-radius:50%;
  background:conic-gradient(
    from -130deg,
    transparent 0 7%,
    var(--uf-coral) 7% 20%,
    var(--uf-lime) 20% 33%,
    var(--uf-blue) 33% 41%,
    transparent 41% 100%
  );
  -webkit-mask:radial-gradient(circle,transparent 0 48%,#000 48.2% 50.2%,transparent 50.5%);
  mask:radial-gradient(circle,transparent 0 48%,#000 48.2% 50.2%,transparent 50.5%);
  filter:drop-shadow(0 0 12px rgba(239,123,94,.26));
  animation:ufBootArc 1.85s .12s cubic-bezier(.17,.8,.18,1) both;
}

.uf-boot-needle{
  position:absolute;
  left:50%;
  top:50%;
  width:2px;
  height:31%;
  border-radius:3px;
  background:linear-gradient(to top,rgba(239,123,94,.04),var(--uf-coral) 36%,#fff8ef 100%);
  box-shadow:0 0 12px rgba(239,123,94,.62);
  transform-origin:50% 100%;
  transform:translate(-50%,-100%) rotate(-118deg);
  animation:ufBootNeedle 1.72s .26s cubic-bezier(.19,.75,.18,1) both;
}
.uf-boot-center{
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:18px;
  transform:translate(-50%,-50%) scale(.45);
  border-radius:50%;
  border:2px solid rgba(247,242,232,.78);
  background:#0a3932;
  box-shadow:0 0 0 6px rgba(143,201,216,.055),0 0 24px rgba(143,201,216,.18);
  opacity:0;
  animation:ufBootCenter .42s .56s ease forwards;
}

.uf-boot-brand{
  position:relative;
  z-index:4;
  display:grid;
  justify-items:center;
  text-align:center;
  pointer-events:none;
}
.uf-boot-logo{
  width:clamp(112px,12vw,178px);
  height:auto;
  display:block;
  opacity:0;
  transform:scale(.84);
  filter:brightness(0) invert(1);
  animation:ufBootLogo .8s .82s cubic-bezier(.17,.82,.22,1) forwards;
}
.uf-boot-name{
  margin-top:18px;
  font-family:var(--font-serif,"Philosopher",Georgia,serif);
  font-size:clamp(17px,1.7vw,25px);
  font-weight:500;
  letter-spacing:.17em;
  opacity:0;
  transform:translateY(10px);
  animation:ufBootCopy .62s 1.18s ease forwards;
}
.uf-boot-tagline{
  margin-top:7px;
  font-family:var(--font-sans,"Raleway",Arial,sans-serif);
  font-size:9px;
  font-weight:700;
  letter-spacing:.36em;
  color:rgba(212,230,154,.92);
  opacity:0;
  transform:translateY(8px);
  animation:ufBootCopy .62s 1.36s ease forwards;
}

.uf-boot-bottom{
  position:absolute;
  left:50%;
  bottom:10.5%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:11px;
  white-space:nowrap;
  font-family:var(--font-sans,"Raleway",Arial,sans-serif);
  font-size:9px;
  font-weight:700;
  letter-spacing:.25em;
  color:rgba(247,242,232,.48);
  opacity:0;
  animation:ufBootCopy .55s 1.5s ease forwards;
}
.uf-boot-status-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--uf-lime);
  box-shadow:0 0 8px rgba(212,230,154,.72);
}
.uf-boot-divider{width:24px;height:1px;background:rgba(247,242,232,.18)}

@keyframes ufBootScan{
  0%{transform:translateX(-52%);opacity:0}
  16%{opacity:1}
  100%{transform:translateX(52%);opacity:0}
}
@keyframes ufBootClusterIn{
  from{opacity:0;transform:translate(-50%,-50%) scale(.78)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes ufBootTicks{
  from{opacity:0;transform:rotate(-26deg) scale(.92)}
  to{opacity:.56;transform:rotate(0) scale(1)}
}
@keyframes ufBootArc{
  0%{transform:rotate(-150deg);opacity:0}
  18%{opacity:1}
  72%{transform:rotate(46deg);opacity:1}
  100%{transform:rotate(18deg);opacity:.92}
}
@keyframes ufBootNeedle{
  0%{transform:translate(-50%,-100%) rotate(-118deg);opacity:0}
  8%{opacity:1}
  55%{transform:translate(-50%,-100%) rotate(112deg)}
  76%{transform:translate(-50%,-100%) rotate(-20deg)}
  100%{transform:translate(-50%,-100%) rotate(8deg);opacity:.78}
}
@keyframes ufBootCenter{
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes ufBootLogo{
  0%{opacity:0;transform:scale(.84);filter:blur(7px) brightness(0) invert(1)}
  100%{opacity:1;transform:scale(1);filter:blur(0) brightness(0) invert(1)}
}
@keyframes ufBootCopy{
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:600px){
  .uf-boot-cluster{width:92vmin}
  .uf-boot-logo{width:126px}
  .uf-boot-name{font-size:16px;letter-spacing:.14em}
  .uf-boot-tagline{font-size:8px;letter-spacing:.28em}
  .uf-boot-bottom{bottom:9%;font-size:8px;letter-spacing:.18em}
}
@media(prefers-reduced-motion:reduce){
  .uf-boot,.uf-boot *{animation:none!important;transition:none!important}
}