:root{
  --dim-opacity:.9;
  --fade-ms:300ms;
  --awake-duration:5000;        /* ms */
  --bg-color:#060709;
  --fg:#fff;

  /* Adjust this to align the truths with your image’s bright line */
  --truths-line: 48.5%;
}

/* -------- Global / base -------- */
*{ box-sizing:border-box; }
html{ color-scheme:dark light; }
html, body { min-height: 100dvh; }
body{
  margin:0;
  color:var(--fg);
  background-color:var(--bg-color);
  font:500 2rem/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Create a fresh stacking context so nothing external can paint above */
  isolation: isolate;
}

/* Dedicated, fixed background layer (instead of background-attachment: fixed) */
body::before{
  content:"";
  position: fixed;             /* fixed visual layer */
  inset: 0;
  z-index: -1;                 /* behind everything */
  background: url("/media/images/blackhole_background.webp") center / cover no-repeat;
  /* Help some browser compositors */
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* On mobile/iOS, fixed layers can be janky; absolute is fine since page doesn't scroll */
@media (pointer:coarse), (hover:none){
  body::before{ position: absolute; }
}

/* Skip link */
.skip{
  position:absolute;
  left:-9999px;
  top:auto;
  background:#000;
  color:#fff;
  padding:.5rem .75rem;
  border:1px solid #fff;
}
.skip:focus{
  left:1rem;
  top:1rem;
  z-index:9999;
}

/* Dim overlay / awake-dimmed states */
.dim-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,var(--dim-opacity));
  pointer-events:none;
  transition:opacity var(--fade-ms) ease;
  z-index:0;                 /* sits above bg (z:-1), below content */
  opacity:1;
}
@media (prefers-reduced-motion:reduce){
  .dim-overlay{ transition:none; }
}
body.awake .dim-overlay{ opacity:0; }
body.dimmed .dim-overlay{ opacity:1; }

/* Main stage */
.home-main{
  position:relative;
  height:100dvh;
  overflow:clip;
}
.content{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  z-index:1;
  transition:opacity var(--fade-ms) ease;
}
.content.hidden{ opacity:0; pointer-events:none; }
.central-message{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  z-index:4;
  pointer-events:none;
  padding:0 1rem;
  max-width:70ch;
}

/* -------- Truth chips -------- */
.truth-nav{
  position:fixed;
  top: var(--truths-line);   /* Tune this value */
  left:0;
  width:100%;
  transform: translateY(-50%);
  z-index:2;
}
.truth-box{
  position:absolute;
  top:0;
  transform:none;
  background:rgb(35,35,35);
  border:1px solid rgb(35,35,35);
  border-radius:12px;
  padding:.3rem .6rem;
  color:#fff;
  font-size:.95rem;
  text-decoration:none;
  opacity:0;
  transition:opacity .6s ease;   /* calmer fade */
  width:max-content;
  cursor:pointer;
}
.truth-box:hover,
.truth-box:focus{
  opacity:1 !important;
  transition:opacity 0s !important;
  outline:none;                  /* no border/outline on hover */
}
.truth-box:focus-visible{
  outline:2px solid #fff;        /* keep keyboard visibility */
  outline-offset:2px;
}
/* Horizontal placements (from your original) */
#truth-1{ left:7%;  }
#truth-2{ left:18%; }
#truth-3{ left:30%; }
#truth-4{ left:65%; }
#truth-5{ left:80%; }

/* -------- Icon constellation -------- */
.icon-layer{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:3;
}
.site-icon{
  position:absolute;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;

  opacity:0;                      /* baseline hidden; hover/focus reveals */
  transition:opacity .5s;
}

/* Hover/focus behavior:
   - No border on hover.
   - Keep visible outline for keyboard users only (but not on mouse hover). */
.site-icon:hover{ outline:none; opacity:1; }
.site-icon:focus{ outline:none; opacity:1; }
.site-icon:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

/* Preserve natural aspect ratio (no stretch) */
.site-icon img{
  display:block;
  max-width:100%;
  height:auto;     /* keeps natural aspect */
  width:auto;
}

/* Your custom button widths/positions */
#icon-media{   top:-375px; left:-330px; width:250px; }
#icon-codex{   top:-375px; left: 150px; width:450px; }
#icon-library{ top:-275px; left: 650px; width:200px; }
#icon-salons{  top: 175px; left:-175px; width:350px; }
#icon-contact{ top: 150px; left:-450px; width:200px; }

/* No-JS fallback links */
.nojs-links{
  position:absolute;
  bottom:1rem;
  left:50%;
  transform:translateX(-50%);
  font:600 1rem/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
n n