/* ============================================================
   XILIOS — stylesheet
   Colors live in the :root tokens below; they are mirrored by
   the PALETTE config in index.html for the 3D scene.
   ============================================================ */

/* ==========================================================
   1. DESIGN TOKENS — swap colors here
   ========================================================== */
:root{
  --ink:        #050208;   /* deep space background            */
  --star:       #efe9ff;   /* primary text, near-white violet  */
  --dim:        #9d92c4;   /* secondary text                   */
  --amber:      #ffb45c;   /* galactic-core accent             */
  --violet:     #7a63ff;   /* outer-arm accent                 */
  --line:       rgba(154, 134, 255, .18);
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body:    'Space Grotesk', system-ui, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  background:var(--ink);
  color:var(--star);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ==========================================================
   2. GALAXY CANVAS — fixed, full screen, behind everything
   ========================================================== */
#galaxy{
  position:fixed;
  inset:0;
  z-index:-1;
  display:block;
}

/* Soft vignette so text stays readable over bright particles */
#vignette{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(ellipse at center,
              transparent 45%, rgba(5,2,8,.55) 100%);
}

/* ==========================================================
   3. FIXED NAVIGATION — logo + sector dots
   ========================================================== */
#logo{
  position:fixed;
  top:28px; left:32px;
  z-index:10;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.42em;
  text-decoration:none;
  /* same signature gradient as the h1 */
  background:linear-gradient(100deg, var(--amber) 0%, var(--star) 45%, var(--violet) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

nav#dots{
  position:fixed;
  right:26px; top:50%;
  transform:translateY(-50%);
  z-index:10;
  display:flex;
  flex-direction:column;
  gap:22px;
}
nav#dots a{
  position:relative;
  width:10px; height:10px;
  border-radius:50%;
  border:1px solid var(--dim);
  background:transparent;
  transition:background .3s, border-color .3s, transform .3s;
}
nav#dots a.active{
  background:var(--amber);
  border-color:var(--amber);
  transform:scale(1.25);
  box-shadow:0 0 12px rgba(255,180,92,.7);
}
/* Sector label on hover (desktop only) */
nav#dots a::before{
  content:attr(data-label);
  position:absolute;
  right:22px; top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
  font-size:.62rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--dim);
  opacity:0;
  transition:opacity .25s;
  pointer-events:none;
}
nav#dots a:hover::before{ opacity:1; }

/* ==========================================================
   4. SECTIONS — each is a waypoint in the journey
   ========================================================== */
main{ position:relative; z-index:1; }

section{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 8vw;
}

.sector-tag{
  font-size:.68rem;
  letter-spacing:.5em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:1.4rem;
}

h1,h2{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:.02em;
}
h1{
  font-size:clamp(3rem, 9vw, 7.5rem);
  font-weight:700;
  letter-spacing:.12em;
  line-height:1.05;
  /* signature gradient: amber core -> ultraviolet edge */
  background:linear-gradient(100deg, var(--amber) 0%, var(--star) 45%, var(--violet) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
h2{
  font-size:clamp(1.5rem, 4vw, 2.8rem);
  max-width:16ch;
  margin-bottom:1.2rem;
}
.body-copy{
  max-width:44ch;
  color:var(--dim);
  font-size:clamp(.95rem, 1.4vw, 1.1rem);
}
.body-copy a{
  color:var(--amber);
  text-decoration:none;
  border-bottom:1px solid rgba(255,180,92,.4);
  transition:border-color .25s;
}
.body-copy a:hover{ border-bottom-color:var(--amber); }

/* Hero */
#hero{ align-items:flex-start; }
#hero .subtext{
  margin-top:1.6rem;
  color:var(--dim);
  letter-spacing:.18em;
  font-size:clamp(.85rem, 1.6vw, 1.05rem);
}
.scroll-hint{
  position:absolute;
  bottom:5vh; left:50%;
  transform:translateX(-50%);
  font-size:.62rem;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--dim);
  animation:hint 2.6s ease-in-out infinite;
}
@keyframes hint{
  0%,100%{ opacity:.35; transform:translateX(-50%) translateY(0); }
  50%    { opacity:1;   transform:translateX(-50%) translateY(8px); }
}
@media (prefers-reduced-motion: reduce){
  .scroll-hint{ animation:none; }
}

/* Alternate alignment so the journey feels like banking turns */
#about   { align-items:flex-end; text-align:right; }
#about h2, #about .body-copy{ margin-left:auto; }
#contact { align-items:flex-start; }

/* Features grid */
#features .grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem;
  margin-top:2.6rem;
  max-width:900px;
}
.card{
  border:1px solid var(--line);
  border-radius:6px;
  padding:1.8rem 1.5rem;
  background:rgba(10,5,20,.35);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:border-color .3s, transform .3s;
}
.card:hover{
  border-color:rgba(255,180,92,.45);
  transform:translateY(-4px);
}
@media (prefers-reduced-motion: reduce){
  .card:hover{ transform:none; }
}
.card h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1rem;
  letter-spacing:.14em;
  margin-bottom:.7rem;
  color:var(--amber);
}
.card p{
  font-size:.9rem;
  color:var(--dim);
}

/* Game spec line (Sector 04) */
.play-meta{
  margin-top:1.2rem;
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--dim);
}

/* Game launch button (Sector 04) — matches the game's own UI */
.btn-play{
  display:inline-block;
  margin-top:2.2rem;
  padding:.9rem 3.2rem;
  font-family:var(--font-display);
  font-weight:500;
  font-size:.9rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--star);
  border:1px solid var(--amber);
  border-radius:4px;
  transition:background .25s, box-shadow .25s, transform .15s;
}
.btn-play:hover{
  background:rgba(255,180,92,.12);
  box-shadow:0 0 24px rgba(255,180,92,.35);
}
.btn-play:active{ transform:scale(.97); }
@media (prefers-reduced-motion: reduce){
  .btn-play:active{ transform:none; }
}

/* Footer */
footer{
  position:relative;
  z-index:1;
  text-align:center;
  padding:3rem 8vw 3.5rem;
  font-size:.75rem;
  letter-spacing:.14em;
  color:var(--dim);
  border-top:1px solid var(--line);
  background:rgba(5,2,8,.5);
}

/* ==========================================================
   5. RESPONSIVE
   ========================================================== */
@media (max-width: 760px){
  #logo{ top:20px; left:20px; font-size:.8rem; }
  nav#dots{ right:14px; gap:18px; }
  nav#dots a{ width:8px; height:8px; }
  section{ padding:0 7vw; }
  #features .grid{ grid-template-columns:1fr; gap:1rem; }
  #about{ align-items:flex-start; text-align:left; }
  #about h2, #about .body-copy{ margin-left:0; }

  /* Hero: move the title block to the top of the screen so it
     doesn't sit over the galaxy, which fills the centre view */
  #hero{
    justify-content:flex-start;
    padding-top:16vh;   /* clears the fixed logo */
  }
}