/* ==========================================================================
   boot.css — MoradoSolution entry overlay
   Compact brand lockup: a soft violet bloom, quick logo-and-wordmark reveal,
   then a short fade so the site is visible without a long loading pause.
   Monochrome: void #050505, bone-white marks, soft white glows only. Pure CSS
   — hides itself with JS disabled; every decorative pseudo ends invisible.
   ========================================================================== */
:root{
  --boot-void:#050505;
  --boot-bone:#ffffff;
  --boot-ease-out:cubic-bezier(.22,1,.36,1);
  --boot-ease-in-out:cubic-bezier(.65,0,.35,1);
  --z-boot:100;
}
.boot-overlay{
  position:fixed; inset:0; z-index:var(--z-boot);
  display:grid; place-items:center; overflow:hidden;
  /* A lit stage: soft centre lift + faint floor glow, not a flat void. */
  background:
    radial-gradient(140% 110% at 50% 46%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
    radial-gradient(90% 55% at 50% 112%, rgba(255,255,255,.03), rgba(255,255,255,0) 55%),
    var(--boot-void);
  animation:boot-overlay-out .34s var(--boot-ease-out) .88s both;
}
/* Scanning "booting" line — an indeterminate scanner (fetch time unknown). */
.boot-overlay::after{
  content:""; position:absolute; left:50%; bottom:11vh; transform:translateX(-50%);
  width:clamp(120px,20vw,240px); height:2px; border-radius:2px; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%);
  background-size:55% 100%; background-repeat:no-repeat;
  animation:boot-scan 1.15s var(--boot-ease-in-out) infinite;
}
html[data-boot=skip] .boot-overlay{ display:none }
/* The lockup stacks logo above wordmark, gently pushing in throughout. */
.boot-stage{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1.25rem, 3.2vw, 2.15rem);
  animation:boot-stage-in 1.15s var(--boot-ease-out) both;
}
/* Logo comes in with a small lift; the wordmark appears as one readable unit. */
.boot-logo{
  width:clamp(4.5rem,3rem + 5.5vw,8.5rem); height:auto;
  filter:drop-shadow(0 8px 28px rgba(174,145,255,.18));
  animation:boot-logo .62s var(--boot-ease-out) both;
}
/* Name on one line: the 14 letter spans stay a single flex row. */
.boot-stage::before,
.boot-stage::after {
  content:"";
  position:absolute;
  left:50%; top:29%;
  width:clamp(11rem,26vw,20rem); aspect-ratio:1;
  border-radius:50%; pointer-events:none; z-index:-1;
  transform:translate(-50%,-50%);
}
.boot-stage::before {
  background:radial-gradient(circle,rgba(167,139,250,.22),rgba(167,139,250,.07) 42%,transparent 70%);
  animation:boot-bloom 1.2s var(--boot-ease-out) both;
}
.boot-stage::after {
  width:clamp(6rem,12vw,9rem);
  border:1px solid rgba(213,198,255,.5);
  box-shadow:0 0 40px rgba(167,139,250,.18);
  animation:boot-ring .8s var(--boot-ease-out) .04s both;
}
.boot-wordmark{
  color:var(--boot-bone); letter-spacing:.03em;
  font-size:clamp(1.6rem,.6rem + 6vw,3.5rem);
  font-weight:700; line-height:1; display:flex; flex-direction:row;
  flex-wrap:nowrap; white-space:nowrap; justify-content:center;
  animation:boot-wordmark-in .42s var(--boot-ease-out) .12s both;
}
.boot-space{ width:.36em; display:inline-block }
.boot-letter{ display:inline-block; animation:boot-letter .42s var(--boot-ease-out) .12s both !important }

@keyframes boot-stage-in{
  0%{opacity:0;transform:scale(.96)}
  18%{opacity:1}
  100%{opacity:1;transform:scale(1.02)}
}
@keyframes boot-bloom{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  70%{opacity:.5;transform:translate(-50%,-50%) scale(1.08)}
  100%{opacity:.3;transform:translate(-50%,-50%) scale(1.12)}
}
@keyframes boot-ring{
  0%{opacity:.55;transform:translate(-50%,-50%) scale(.6)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.9)}
}
@keyframes boot-scan{
  0%{background-position:-60% 0}
  100%{background-position:160% 0}
}
@keyframes boot-logo{
  0%{opacity:0;animation-timing-function:cubic-bezier(.34,1.56,.64,1);transform:scale(.6) translateY(6px)}
  100%{opacity:1;transform:none}
}
@keyframes boot-letter{ from{opacity:0;transform:translateY(.45em)} to{opacity:1;transform:none} }
@keyframes boot-wordmark-in{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes boot-wordmark-out{ to{opacity:0;transform:translateY(-4px) scale(1.02)} }
@keyframes boot-overlay-out{ 0%{opacity:1;visibility:visible} to{opacity:0;visibility:hidden} }

@media (prefers-reduced-motion: reduce){
  .boot-letter,.boot-logo,.boot-stage,.boot-stage::before,.boot-stage::after,.boot-overlay::after{
    animation:none !important;
  }
  .boot-stage::before{ opacity:.4 !important }
  .boot-stage::after{ opacity:0 !important }
  .boot-overlay::after{ opacity:.35 }           /* keep the line, drop the scan */
  .boot-wordmark{ animation:none !important; opacity:1 }
  .boot-overlay{ animation:boot-overlay-out .2s linear .2s both !important }
}