/* ============================================================
   LOADING / WELCOME SCREEN — first-visit only
   One orchestrated entrance → hold → exit sequence, no looping
   effects beyond a barely-there glow breathe. Uses the site's
   existing design tokens (--purple, --amber, --purple-soft) rather
   than a new palette — this is the site's own curtain-raiser, not a
   separate brand moment.

   html.ls-skip (set synchronously by an inline <head> script for
   returning visitors, before first paint — see index.html) hides
   this instantly with zero flash. The <noscript> fallback in
   index.html covers JS-disabled visitors the same way.
============================================================= */

.ls-screen{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#050507;
  transition:opacity .7s cubic-bezier(.16,1,.3,1),
             transform .7s cubic-bezier(.16,1,.3,1),
             visibility 0s linear .7s;
}
.ls-screen.ls-exit{
  opacity:0;
  transform:scale(1.03);
  pointer-events:none;
  visibility:hidden;
}
html.ls-skip .ls-screen{ display:none !important; }

.ls-glow{
  position:absolute;
  left:50%; top:50%;
  width:min(70vw, 620px);
  height:min(70vw, 620px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, var(--purple-soft), transparent 70%);
  filter:blur(80px);
  opacity:0;
  transition:opacity 1.2s ease;
}
.ls-screen.ls-active .ls-glow{
  opacity:.85;
  animation:lsBreathe 6s ease-in-out 1s infinite;
}
@keyframes lsBreathe{
  0%, 100%{ opacity:.75; }
  50%{ opacity:1; }
}

.ls-content{
  position:relative;
  z-index:1;
  text-align:center;
  padding:0 24px;
}

.ls-line{
  margin:0;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),
             transform .7s cubic-bezier(.16,1,.3,1);
}
.ls-screen.ls-active .ls-line{ opacity:1; transform:translateY(0); }

.ls-line--1{
  font-family:'Inter', sans-serif;
  font-weight:500;
  font-size:clamp(1.05rem, 2.6vw, 1.35rem);
  color:rgba(245,245,247,.72);
  margin-bottom:10px;
  transition-delay:.4s;
}

.ls-line--2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(2.1rem, 6.2vw, 3.4rem);
  letter-spacing:-0.01em;
  line-height:1.1;
  background:linear-gradient(100deg, var(--purple), var(--amber));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  transition-delay:.75s;
}

/* thin accent rule — same motif as .hero-accent-line, drawn in as the
   sequence's quiet closing beat rather than a separate progress bar */
.ls-rule{
  display:block;
  width:0;
  height:2px;
  margin:22px auto 0;
  border-radius:2px;
  background:linear-gradient(90deg, var(--purple), var(--amber));
  transition:width .5s cubic-bezier(.16,1,.3,1) 1.5s;
}
.ls-screen.ls-active .ls-rule{ width:64px; }

@media (prefers-reduced-motion: reduce){
  .ls-screen, .ls-glow, .ls-line, .ls-rule{
    transition:none !important;
    animation:none !important;
  }
  .ls-screen.ls-active .ls-glow{ opacity:.85; }
  .ls-screen.ls-active .ls-line{ opacity:1; transform:none; }
  .ls-screen.ls-active .ls-rule{ width:64px; }
}

@media (max-width:640px){
  .ls-line--1{ font-size:1rem; margin-bottom:8px; }
  .ls-line--2{ font-size:clamp(1.9rem, 9vw, 2.6rem); }
  .ls-glow{ width:80vw; height:80vw; filter:blur(60px); }
}