/* ===========================================
   ABYSS — Gate minimal (v5 align + big octos)
   =========================================== */

:root{
  --bg:#191817;
  --text:#eef2f8;
  --muted:#a0a6b2;
  --line:#ffffff;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background:var(--bg);
  color:var(--text);
  font:400 16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- NAV ---- */
.nav{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg,rgba(0,0,0,.38),rgba(0,0,0,0));
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-inner{ display:flex; align-items:center; gap:12px; padding:10px 4%; }
.spacer{ flex:1; }

/* ---- GATE ---- */
.gate{
  position:fixed; inset:0; overflow:hidden;
  background:var(--bg);
}

/* désactive tous les clics */
.gate *{ pointer-events:none; }

/* seuls les mots house / tech sont cliquables */
.side-links a{ pointer-events:auto; }

/* deux moitiés fixes */
.half{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:var(--bg);
  z-index:1;
  pointer-events:none;
}

/* réalignement précis desktop */
.half.left  { clip-path:inset(0 50% 0 0); transform:translateY(-1px); }
.half.right { clip-path:inset(0 0 0 50%); }

/* correction mobile : supprime le décalage vertical */
@media (max-width: 768px) {
  .half.left { transform:none; }
}

/* ligne centrale */
.split-line{
  position:absolute; top:0; bottom:0; left:50%; width:2px;
  background:linear-gradient(180deg,transparent,var(--line),transparent);
  opacity:.9; z-index:0;
}

/* ---- PIEUVRES ---- */
.half .octo{
  width:clamp(520px,38vmin,600px);
  height:auto;
  display:block;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.35));
}

/* responsive */
@media (max-width:900px){
  .half .octo{ width:clamp(220px,44vmin,360px); }
}
@media (max-width:640px){
  .half .octo{ width:clamp(200px,48vmin,320px); }
}


/* ---- CHOOSER ---- */
.chooser{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:20vh;
  text-align:center;
  z-index:2;
}

/* clignotement doux */
@keyframes softBlink{0%{opacity:.35}50%{opacity:1}100%{opacity:.35}}
.choose-label{
  display:inline-block;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:clamp(14px,2.4vw,18px);
  letter-spacing:.06em;
  color:var(--text);
  animation:softBlink 3.5s ease-in-out infinite;
  pointer-events:none;
}

/* liens house / tech seuls actifs */
.side-links{
  margin-top:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:clamp(13px,2.2vw,16px);
  letter-spacing:.08em;
}
.side-link{
  color:var(--text);
  text-decoration:none;
  opacity:.85;
}
.side-link:hover,
.side-link:focus{opacity:1;text-decoration:underline;outline:none;}
.slash{margin:0 10px;color:var(--muted);}