/* =========================
   ASCII Paradise — main.css
   Global UI shell styling
   Comments + naming in English, always.
   ========================= */

:root{
  /* Core palette */
  --bg:#000;
  --fg:#fff;
  --muted: rgba(255,255,255,.7);
  --panel: rgba(10,10,10,.92);
  --border: rgba(255,255,255,.12);

  /* Terminal theme (project-configurable) */
  --term-fg: rgba(210,255,210,.78);
  --term-dim: rgba(210,255,210,.45);

  /* Layering */
  --z-hero: 1;
  --z-terminal: 2;
  --z-topbar: 10;
  --z-prompt: 12;
  --z-overlay: 20;
  --z-content: 28;
  --z-panel: 30;

  /* Layout */
  --prompt-pad-bottom: 86px;

  /* Menu typography */
  --menu-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow:hidden; /* Full-screen composition */
}

/* Hide any element using the hidden attribute */
[hidden]{ display:none !important; }

/* ===== Hero layer (project can override background-image inline) ===== */
.hero{
  position:fixed;
  inset:0;
  z-index:var(--z-hero);
  background:#000 center / cover no-repeat;
  filter:saturate(1.05) contrast(1.02);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.35) 62%,
    rgba(0,0,0,.78) 100%);
  pointer-events:none;
}

/* ===== Terminal layer ===== */
.terminal{
  position:fixed;
  inset:0;
  z-index:var(--z-terminal);
  pointer-events:none;
  font-family: var(--menu-font);
  color: var(--term-fg);
  padding: 14px 14px var(--prompt-pad-bottom);
  overflow:hidden;
  opacity:.95;
  mix-blend-mode: screen;
}
.terminal::before{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.03) 0px,
    rgba(255,255,255,.03) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 5px
  );
  opacity:.22;
  pointer-events:none;
}
.term-lines{
  position:relative;
  height:100%;
  overflow:hidden;
  filter: blur(.1px);
  text-shadow: 0 0 10px rgba(120,255,120,.15);
}
.term-line{
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  font-size:12px;
  line-height:1.35;
  color: var(--term-dim);
}

/* Terminal visibility toggles */
body.terminal-off .terminal{ display:none; }
body.terminal-off .promptbar{ display:none; }

/* ===== Topbar ===== */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:var(--z-topbar);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,.70), rgba(0,0,0,0));
  backdrop-filter: blur(8px);
}
.brand{
  display:flex;
  flex-direction:column;
  gap:2px;
  user-select:none;
}
.brand .title{
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:14px;
}
.brand .sub{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.02em;
}

/* ===== Hamburger button ===== */
.menu-btn{
  width:44px;
  height:44px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.15);
  border-radius:999px;
  display:grid;
  place-items:center;
  cursor:pointer;
  color:var(--fg);
}
.menu-btn:focus-visible{
  outline:2px solid rgba(255,255,255,.35);
  outline-offset:2px;
}
.burger{ width:18px; height:12px; position:relative; }
.burger span{
  position:absolute;
  left:0; right:0;
  height:2px;
  background: var(--fg);
  border-radius:2px;
  transition: transform .25s ease, top .25s ease, opacity .2s ease;
}
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:5px; }
.burger span:nth-child(3){ top:10px; }
body.menu-open .burger span:nth-child(1){ top:5px; transform: rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ top:5px; transform: rotate(-45deg); }

/* ===== Overlay + slide panel ===== */
.overlay{
  position:fixed;
  inset:0;
  z-index:var(--z-overlay);
  background: rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
}
body.menu-open .overlay{
  opacity:1;
  pointer-events:auto;
}
.panel{
  position:fixed;
  top:0; right:0;
  z-index:var(--z-panel);
  height:100%;
  width:min(360px, 88vw);
  background: var(--panel);
  border-left:1px solid var(--border);
  transform: translateX(100%);
  transition: transform .25s ease;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  backdrop-filter: blur(10px);
  font-family: var(--menu-font);
  letter-spacing:.02em;
}
body.menu-open .panel{ transform: translateX(0); }

/* Optional header label in panel */
.panel h2{
  margin:6px 0 0;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--muted);
}
.panel .footer{
  margin-top:auto;
  color: var(--muted);
  font-size:12px;
  border-top:1px solid var(--border);
  padding-top:14px;
}

/* ===== Nav ===== */
.nav ul,
.nav li{
  list-style:none;
  margin:0;
  padding:0;
}
.nav{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.nav > ul{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Nav items */
.nav a,
.nav-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  color:var(--fg);
  text-decoration:none;
  padding:12px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background: rgba(0,0,0,.10);
  cursor:pointer;
  font: inherit;
  text-transform: uppercase;
  letter-spacing: .10em;
}
.nav a:hover,
.nav-toggle:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
}

/* Focus ring */
.nav a:focus-visible,
.nav-toggle:focus-visible{
  outline:2px solid rgba(120,180,255,.85);
  outline-offset:2px;
}

/* Chevron */
.chev{
  display:inline-block;
  transition: transform .18s ease;
  opacity:.85;
}
.nav-toggle[aria-expanded="true"] .chev{
  transform: rotate(180deg);
}

/* Submenu indentation */
/* Submenu indentation and structure */
.nav ul.submenu{
  margin-top: 10px;
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Optional subtle hierarchy styling */
.nav ul.submenu a{
  opacity: .85;
}
.submenu[hidden]{ display:none !important; }

/* Slightly different style for submenu links */
.submenu a{
  background: rgba(0,0,0,.06);
}

/* ===== Terminal-style cursor after label text =====
   Requires each item label to be wrapped like:
   <span class="nav-label">Instagram</span>
*/
.nav-label{
  display:inline-block;
}
.nav a:focus-visible .nav-label::after,
.nav-toggle:focus-visible .nav-label::after,
.nav a:hover .nav-label::after,
.nav-toggle:hover .nav-label::after{
  content:"_";
  margin-left:6px;
  color: inherit;
  animation: ap-blink 1s steps(1, end) infinite;
}
@keyframes ap-blink{
  50%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .nav a:focus-visible .nav-label::after,
  .nav-toggle:focus-visible .nav-label::after,
  .nav a:hover .nav-label::after,
  .nav-toggle:hover .nav-label::after{
    animation:none;
  }
}

/* ===== Content overlay (optional) ===== */
.content-overlay{
  position:fixed;
  inset:0;
  z-index:var(--z-content);
  background: rgba(0,0,0,.65);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.content-overlay[aria-hidden="false"]{
  opacity:1;
  pointer-events:auto;
}
.content-panel{
  width:min(920px, 96vw);
  max-height:86vh;
  overflow:auto;
  background: rgba(6,6,6,.98);
  border:1px solid var(--border);
  padding:18px;
  border-radius:12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  position:relative;
  color:var(--fg);
}
.close-btn{
  position:absolute;
  top:10px; right:10px;
  background:transparent;
  border:1px solid var(--border);
  color:var(--fg);
  width:36px; height:36px;
  border-radius:999px;
  display:grid;
  place-items:center;
  cursor:pointer;
}

/* ===== Prompt bar ===== */
.promptbar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:var(--z-prompt);
  pointer-events:auto;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.40));
  border-top: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
  font-family: var(--menu-font);
}
.promptrow{
  display:flex;
  align-items:center;
  gap:10px;
  max-width: 1400px;
  margin: 0 auto;
}
.promptlabel{
  color: var(--term-fg);
  opacity:.9;
  font-size:12px;
  white-space:nowrap;
}
.promptinput{
  flex:1;
  min-width:0;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.55);
  color: var(--term-fg);
  outline:none;
  font-size:12px;
}
.promptinput::placeholder{
  color: rgba(210,255,210,.35);
}
.cursor{
  width:10px;
  height:14px;
  background: rgba(210,255,210,.75);
  border-radius:2px;
  animation: blink 1s steps(1) infinite;
  opacity:.9;
}
@keyframes blink{ 50%{ opacity:0; } }
.promptout{
  margin-top:8px;
  max-width: 1400px;
  margin-left:auto;
  margin-right:auto;
  font-size:12px;
  color: rgba(210,255,210,.55);
  min-height: 16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* ===== Mobile tweaks ===== */
@media (max-width: 820px){
  .terminal{ padding-bottom: 98px; }
  .topbar{ padding:12px 12px; }
}