:root{
  --bg:#060606;
  --s1:#0c0c0c;
  --s2:#101010;
  --border:#1c1c1c;
  --border2:#282828;
  --red:#ff3a2d;
  --orange:#f5a520;
  --purple:#8b31ff;
  --magenta:#cc3ae0;
  --text:#f0f0f0;
  --muted:#999;
  --muted2:#333
}
/* The launcher used to be a scroll-locked single screen. It now scrolls:
   the split-hero still fills the first viewport, and the About section below
   it gives the homepage real, indexable copy about what Karaza does -- which
   is what the page was missing for search. */
body{font-family:'IBM Plex Mono','Consolas','Courier New',monospace;background:var(--bg);color:var(--text)}



.split-hero{
  position:relative;
  width:100vw;
  height:100vh;
  display:flex;
  overflow:hidden;
  flex-shrink:0
}


.mobile-brand{
  display:none;
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  text-align:center;
  padding:14px 0;
  font-weight:900;
  font-size:1.1rem;
  letter-spacing:.06em;
  pointer-events:none;
  transition:opacity var(--t-med) ease
}
/* Faded out once the launcher scrolls away, so it stops covering the About
   text. index-init.js toggles this from how much of the hero is on screen. */
.mobile-brand.is-scrolled{opacity:0}


.split-half{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
  transition:all .3s;
  overflow:hidden;
  border:none;
}
.split-half:hover .split-label{transform:translateY(-4px);opacity:1}
.split-half:hover .split-sub{opacity:.7}


.split-logo{
  position:relative;
  z-index:15;
  width:48px;
  height:48px;
  object-fit:contain;
  margin-bottom:12px;
  pointer-events:none;
  image-rendering:pixelated;
  opacity:.85
}
.split-label{
  position:relative;
  z-index:15;
  font-size:clamp(1.2rem,3vw,2rem);
  font-weight:800;
  letter-spacing:.04em;
  transition:all .3s;
  pointer-events:none
}
.split-sub{
  position:relative;
  z-index:15;
  font-size:.78rem;
  color:var(--muted);
  margin-top:8px;
  transition:all .3s;
  pointer-events:none;
  opacity:.6
}



.split-left{
  background:transparent
}
.split-left .split-label{
  color:var(--red);
}
.split-left::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center,rgba(255,58,45,.05),transparent 70%);
  pointer-events:none;
}


.split-right{
  background:transparent
}
.split-right .split-label{
  color:var(--purple);
}
.split-right::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center,rgba(139,49,255,.05),transparent 70%);
  pointer-events:none;
}


.split-left:hover::after{
  background:radial-gradient(ellipse at center,rgba(255,58,45,.10),transparent 55%)
}
.split-right:hover::after{
  background:radial-gradient(ellipse at center,rgba(139,49,255,.10),transparent 55%)
}



.scroll-spacer{
  height:0;
  position:relative;
  z-index:1;
  background:var(--bg)
}
.site-footer{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:100;
  background:rgba(var(--bg-rgb),.85);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
  padding:22px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  transform:translateY(100%);
  transition:transform var(--t-slow) ease;
  pointer-events:auto
}
.site-footer.visible{
  transform:translateY(0)
}
.f-logo{font-weight:900;font-size:.92rem;letter-spacing:.05em;display:flex;align-items:center;gap:9px}
.f-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.f-links a{color:var(--muted);font-size:.72rem;text-decoration:none;transition:color var(--t-med)}
.f-links a:hover{color:var(--orange)}
.f-links span{color:var(--muted2);font-size:.72rem;user-select:none}
.f-logos a{display:flex;transition:opacity var(--t-med)}
.f-logos a:hover{opacity:1}
.f-logos img{transition:transform var(--t-med)}
.f-logos a:hover img{transform:scale(1.1)}

.f-logos{display:flex;gap:7px}
.f-logos img{width:18px;height:18px;object-fit:contain;image-rendering:pixelated;opacity:.55}
.site-footer p{color:var(--muted2);font-size:.72rem}




@media(max-width:768px){
  .mobile-brand{display:block}

  .split-hero{
    flex-direction:column;
    height:100vh;
    overflow:hidden
  }

  .split-half{
    flex:none;
    height:50vh;
    overflow:hidden
  }


  .split-left{order:2}
  .split-right{order:1}
}


/* The shared footer used to float and reveal on a scroll gesture, because the
   page had nothing to scroll. Now that the About section is real content, the
   footer sits at the natural end of the document like every other page's.
   footer-reveal.js still toggles .visible; with no transform to move, it's a
   harmless no-op here. */
.shared-footer{
  position:relative;
  z-index:2;
  background:var(--bg);
  border-top:1px solid var(--border);
}

/* The About-section styles moved to main.css so the 3D hub and mesh-tools
   pages can share them. The scroll cue is gone entirely -- people who
   instinctively scroll find the section; it doesn't need announcing. */