/* =========================================================
   GXTHEM — styles.css
   ========================================================= */

:root{
  --bg:      #000;
  --fg:      #fff;
  --muted:   rgba(255,255,255,.3);
  --line:    rgba(255,255,255,.12);
  --ease:    cubic-bezier(.22,1,.36,1);
  --mono:    "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
}

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

html,body{ height:100%; }

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

::selection{ background:#fff; color:#000; }
a{ color:inherit; text-decoration:none; }

/* =========================================================
   Background
   ========================================================= */
.crossfield{ position:fixed; inset:0; width:100%; height:100%; z-index:0; }

.fx{ position:fixed; inset:0; pointer-events:none; }

.fx--glow{
  z-index:1;
  background:radial-gradient(44% 30% at 50% 42%, rgba(255,255,255,.06), transparent 70%);
}

.fx--grain{
  z-index:97; opacity:.05; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

.fx--vignette{
  z-index:98;
  background:radial-gradient(120% 90% at 50% 45%, transparent 34%, rgba(0,0,0,.58) 76%, #000 100%);
}

/* =========================================================
   Stage
   ========================================================= */
.stage{
  position:relative; z-index:10;
  flex:1 1 auto;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:clamp(40px,6.5vh,80px);
  padding:clamp(40px,7vh,80px) 24px 24px;
}

/* ---------- wordmark: extruded, static ---------- */
.mark{
  opacity:0;
  animation:rise 1.1s var(--ease) .1s forwards;
}

.mark__inner{
  position:relative;
  display:inline-block;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(3.4rem,15vw,11rem);
  line-height:.95;
  letter-spacing:.015em;
}

.mark__layer{ position:absolute; inset:0; white-space:nowrap; pointer-events:none; }
.mark__layer--face{
  position:relative;
  color:#fff;
  text-shadow:0 0 26px rgba(255,255,255,.16);
}

@keyframes rise{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}

/* =========================================================
   Links
   ========================================================= */
.links{
  width:min(420px,100%);
  display:flex; flex-direction:column;
  border-top:1px solid var(--line);
}

.link{
  position:relative;
  display:flex; align-items:center; gap:15px;
  padding:17px 14px;
  border-bottom:1px solid var(--line);
  opacity:0;
  animation:rise .9s var(--ease) forwards;
  transition:background-color .28s ease, color .28s ease;
}
.link:nth-child(1){ animation-delay:.45s }
.link:nth-child(2){ animation-delay:.55s }
.link:nth-child(3){ animation-delay:.65s }

.link:hover,
.link:focus-visible{ background:#fff; color:#000; outline:none; }

.link__icon{ display:flex; width:19px; height:19px; flex:0 0 19px; opacity:.6; transition:opacity .28s ease; }
.link__icon svg{ width:100%; height:100% }
.link:hover .link__icon,
.link:focus-visible .link__icon{ opacity:1 }

.link__name{
  flex:1 1 auto;
  font-size:.78rem; font-weight:700;
  letter-spacing:.26em;
}

.link__arrow{
  display:flex; width:15px; height:15px;
  opacity:.25;
  transition:opacity .28s ease;
}
.link__arrow svg{ width:100%; height:100% }
.link:hover .link__arrow,
.link:focus-visible .link__arrow{ opacity:1 }

/* =========================================================
   Footer
   ========================================================= */
.foot{
  position:relative; z-index:10;
  padding:0 24px clamp(20px,4vh,34px);
  text-align:center;
  font-size:.56rem; letter-spacing:.28em;
  color:var(--muted);
  opacity:0;
  animation:rise .9s var(--ease) .85s forwards;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:560px){
  .stage{ gap:clamp(32px,5vh,56px); padding-top:clamp(30px,5vh,56px) }
  .link{ padding:15px 12px }
  .link__name{ font-size:.68rem; letter-spacing:.2em }
}

@media (max-height:600px){
  .mark__inner{ font-size:clamp(2.2rem,9vh,4.5rem) }
  .stage{ gap:24px; padding-top:28px }
  .link{ padding:11px 12px }
}

@media (hover:none){
  .link:hover{ background:transparent; color:var(--fg) }
  .link:hover .link__arrow{ opacity:.25 }
  .link:active{ background:#fff; color:#000 }
  .link:active .link__arrow{ opacity:1 }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .mark,.link,.foot{ opacity:1; transform:none }
}