/* ============================================================================
   Genesis — experimental landing experience for G Web3 Networks
   Self-contained. No framework. Cinematic neutral palette: the interface stays
   in shades of off-white / grey so it never competes with the colour already
   present in the hero video and photography. A single --accent drives every
   interactive highlight, so introducing a cinematic accent hue later is a
   one-line change.
   ========================================================================== */

:root {
  --bg:          #0f1115;   /* deep base */
  --ink:         #fbf5f3;   /* primary text / headlines / solid CTA */
  --muted:       #9a9792;   /* secondary text — neutral warm grey */
  --accent:      #d4d0cb;   /* UI highlight (eyebrow, marks) — neutral for now */
  --line:        rgba(251, 245, 243, 0.16);  /* hairline borders */
  --line-strong: rgba(251, 245, 243, 0.45);  /* hover / active borders */

  /* Cinematic accent palette — desaturated, close to grey with just a hint of
     tint, so they read as mood without fighting the colour in the media. Any one
     can drive an interactive element; --accent-steel is on the primary CTA. */
  --accent-steel: #8fb0c9;   /* cool blue */
  --accent-sage:  #9fb1a4;   /* muted green-grey */
  --accent-sand:  #c7b9a3;   /* warm taupe */
  --accent-clay:  #c0a398;   /* dusty terracotta / rose */
  --accent-slate: #a3a7bc;   /* cool lavender-grey */

  /* Dark desaturated counterparts — same hues, deep and muted, for solid buttons
     and panels that take a light label (inverse of the light accents above). */
  --accent-steel-dark: #2c3a44;   /* deep teal-slate */
  --accent-sage-dark:  #313c34;   /* deep forest-grey */
  --accent-sand-dark:  #3e3930;   /* deep umber */
  --accent-clay-dark:  #46352e;   /* deep warm brown */
  --accent-slate-dark: #35373f;   /* deep blue-grey */

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Brand wordmark — self-hosted Orbitron, subset to just "G." (no logo asset).
   Self-hosted rather than hot-linked so it loads everywhere (incl. regions where
   Google Fonts is blocked) with no external dependency. */
@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/orbitron-g.woff2") format("woff2");
  unicode-range: U+2E, U+47;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

a { color: inherit; text-decoration: none; }

/* ── Slider & panes (crossfade) ───────────────────────────────────────── */
.gx-slider {
  position: fixed;
  inset: 0;
  z-index: 1;
}
.gx-pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.gx-pane.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* Pane backgrounds fill the pane */
.gx-pane--image picture,
.gx-pane--image img,
.gx-pane--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Pane content layout */
.gx-pane__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(28px, 8vw, 130px);
}
.gx-pane__inner { max-width: 940px; }

/* ── Atmosphere overlays (vignette + scanlines) ───────────────────────── */
.gx-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.gx-veil::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Readability stage (darkens the left/centre where the copy sits, fading to
     clear on the right so the burst still shines) over the edge vignette. */
  background:
    linear-gradient(90deg,
      rgba(15, 17, 21, 0.80) 0%,
      rgba(15, 17, 21, 0.55) 30%,
      rgba(15, 17, 21, 0.15) 56%,
      rgba(15, 17, 21, 0) 74%),
    radial-gradient(ellipse 78% 78% at 50% 46%,
      transparent 40%, rgba(15, 17, 21, 0.55) 78%, rgba(15, 17, 21, 0.92) 100%);
}
.gx-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Cinematic film grain — random SVG fractal noise instead of scanlines. Being
     isotropic (no horizontal periodicity) it can't alias into the faint horizontal
     "static" bands the repeating-line pattern produced on fractional-DPR screens.
     Tuning knobs: `opacity` = grain intensity, `baseFrequency` = grain fineness. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='gxGrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gxGrain)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.16;
}
/* Pane 2 (Manifold) carries a touch less grain than the rest. */
.gx-slider .gx-pane:nth-of-type(2) .gx-veil::after { opacity: 0.10; }
/* Photo pane gets a touch more darkening so the copy stays legible */
.gx-veil--image::before {
  background:
    linear-gradient(90deg,
      rgba(15, 17, 21, 0.86) 0%,
      rgba(15, 17, 21, 0.62) 32%,
      rgba(15, 17, 21, 0.22) 58%,
      rgba(15, 17, 21, 0) 78%),
    radial-gradient(ellipse 90% 90% at 50% 50%,
      transparent 42%, rgba(15, 17, 21, 0.40) 80%, rgba(15, 17, 21, 0.78) 100%);
}
/* Video pane: lighter so the cinematic footage breathes, with a left scrim
   and gentle vignette weighted left so the hero copy stays readable. */
.gx-veil--video::before {
  background:
    linear-gradient(90deg,
      rgba(15, 17, 21, 0.80) 0%,
      rgba(15, 17, 21, 0.50) 32%,
      rgba(15, 17, 21, 0.14) 60%,
      rgba(15, 17, 21, 0) 82%),
    radial-gradient(ellipse 96% 96% at 38% 50%,
      transparent 48%, rgba(15, 17, 21, 0.30) 82%, rgba(15, 17, 21, 0.70) 100%);
}

/* ── Nav ──────────────────────────────────────────────────────────────── */
.gx-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px clamp(28px, 5vw, 64px) 26px;   /* top nudged so the bar's bottom lines up with the top corners' bottom (~56px) */
  animation: gxDrop 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: 0.5s;
}
/* Top scrim: keeps the logo + links legible over ANY pane. Pane 3's photo is pale
   grey right under the bar, which otherwise swallowed the grey nav text. Fades to
   clear by ~130px so it's just a subtle frame on the already-dark panes. */
.gx-nav::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 130px;
  background: linear-gradient(to bottom,
              rgba(15, 17, 21, 0.68) 0%,
              rgba(15, 17, 21, 0.32) 48%,
              rgba(15, 17, 21, 0) 100%);
  pointer-events: none;
  z-index: -1;
}
/* "G." wordmark in the futuristic Orbitron face, in place of a logo image. */
.gx-nav__brand {
  display: inline-flex;
  align-items: center;
  font-family: "Orbitron", var(--sans);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--ink);
  text-shadow: 0 1px 12px rgba(15, 17, 21, 0.8);
}
.gx-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.gx-nav__links a {
  position: relative;
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 0;
  text-shadow: 0 1px 12px rgba(15, 17, 21, 0.8);
  transition: color 0.25s ease;
}
.gx-nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--ink);
  transition: width 0.28s ease;
}
.gx-nav__links a:hover { color: var(--ink); }
.gx-nav__links a:hover::after { width: 100%; }

/* Right-side cluster — nav links + Discord CTA (+ hamburger on mobile) — grouped
   in one flex container so they hug the right together and lay out reliably at any
   width (a single group right-aligned by the bar's space-between). */
.gx-nav__right {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
}
/* Discord community CTA — neutral by default (steel on hover) so it sits with the
   UI, while the Discord glyph carries the brand recognition. */
.gx-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 21px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--ink);
  font: 600 13px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(15, 17, 21, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.2s ease;
  white-space: nowrap;
}
.gx-nav__cta:hover {
  color: var(--accent-steel);
  border-color: var(--accent-steel);
  background: rgba(143, 176, 201, 0.10);
  transform: translateY(-1px);
}
.gx-nav__cta-ic { flex: 0 0 auto; width: 20px; height: 20px; }

.gx-nav__toggle {
  display: none;
  width: 40px; height: 32px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}
.gx-nav__toggle span,
.gx-nav__toggle span::before,
.gx-nav__toggle span::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 2px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: opacity 0.18s ease;
}
.gx-nav__toggle span::before { transform: translate(-50%, calc(-50% - 6px)); }
.gx-nav__toggle span::after  { transform: translate(-50%, calc(-50% + 6px)); }

/* Open state swaps the three bars for a single down-pointing chevron.
   It's a static 2-border box rotated 45° (the rotation is fixed, never
   animated) that just cross-fades in as the bars fade out — no spin. */
.gx-nav__toggle::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translate(-50%, -60%) rotate(45deg);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

/* ── Hero copy ────────────────────────────────────────────────────────── */
.gx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 1px 12px rgba(15, 17, 21, 0.85);
  margin: 0 0 26px;
}
.gx-eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: gxPulse 1.8s ease-in-out infinite;
}
.gx-eyebrow .rule {
  width: clamp(40px, 7vw, 92px);
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.gx-title {
  margin: 0;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-size: clamp(54px, 11vw, 158px);
  text-transform: uppercase;
}
.gx-title .l1 {
  display: block;
  color: var(--ink);
  text-shadow: 0 2px 34px rgba(15, 17, 21, 0.9), 0 0 2px rgba(15, 17, 21, 0.6);
}

.gx-sub {
  max-width: 560px;
  margin: 30px 0 0;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.7;
  color: var(--muted);
  text-shadow: 0 1px 16px rgba(15, 17, 21, 0.9);
}
.gx-sub b { color: var(--ink); font-weight: 600; }

.gx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 42px;
}

/* Cut-corner buttons — primary is a solid desaturated-steel CTA (the fill also
   blocks the busy footage behind the label); ghost is a hairline. */
.gx-btn {
  --c: var(--accent-steel);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  font: 600 12.5px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bg);                 /* dark label reads cleanly on the light steel fill */
  background: var(--c);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease, border-color 0.25s ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.gx-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);   /* neutral cinematic lift, no neon glow */
}
.gx-btn .arr { transition: transform 0.2s ease; }
.gx-btn:hover .arr { transform: translateX(4px); }

.gx-btn--ghost {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
}
.gx-btn--ghost:hover {
  border-color: var(--line-strong);
  color: var(--ink);
  background: rgba(251, 245, 243, 0.06);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

/* Dark-fill solid CTA — a #0f1115 "black" panel with a light label, borderless to
   match pane 1's solid style. (pane 3 "Lone Claw Asylum".) */
.gx-btn--dark {
  --c: var(--bg);
  color: var(--ink);
}
.gx-btn--dark-steel {
  --c: var(--accent-steel-dark);
  color: var(--ink);
}
.gx-btn--dark-slate {
  --c: var(--accent-slate-dark);
  color: var(--ink);
}

/* ── Content reveal (per pane) ────────────────────────────────────────────
   Triggered by .is-revealed the first time a pane becomes current. */
.gx-pane.is-revealed .gx-eyebrow      { animation: gxRise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 0.25s; }
.gx-pane.is-revealed .gx-title .l1    { animation: gxRise 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 0.40s; }
.gx-pane.is-revealed .gx-sub          { animation: gxRise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 0.60s; }
.gx-pane.is-revealed .gx-actions      { animation: gxRise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 0.80s; }

/* ── Slider controls ──────────────────────────────────────────────────── */
.gx-slider__ui {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(28px, 8vw, 130px) 34px;
  animation: gxFade 1s ease both;
  animation-delay: 2.2s;
}
.gx-pager {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 600 13px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--ink);
}
.gx-pager__total { color: var(--muted); }
.gx-pager__track {
  position: relative;
  width: clamp(80px, 16vw, 200px);
  height: 2px;
  background: rgba(251, 245, 243, 0.14);
  overflow: hidden;
}
.gx-pager__fill {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 100%;
  background: var(--ink);
}
.gx-arrows { display: flex; gap: 10px; }
.gx-arrow {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: rgba(15, 17, 21, 0.35);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.12s ease;
}
.gx-arrow:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: rgba(251, 245, 243, 0.08);
}
.gx-arrow:active { transform: scale(0.94); }

/* ── Keyframes ────────────────────────────────────────────────────────── */
@keyframes gxRise {
  from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes gxDrop {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gxFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes gxPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .gx-nav__toggle { display: block; }
  .gx-nav__links {
    position: fixed;
    top: 84px; right: clamp(28px, 5vw, 64px);
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 28px;
    background: rgba(15, 17, 21, 0.92);
    border: 1px solid var(--line);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }
  .gx-nav.open .gx-nav__links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .gx-nav.open .gx-nav__toggle span    { opacity: 0; }   /* fade the three bars out  */
  .gx-nav.open .gx-nav__toggle::after  { opacity: 1; }   /* fade the chevron in       */
}

@media (max-width: 520px) {
  .gx-actions { gap: 12px; }
  .gx-btn { padding: 14px 22px; }
  .gx-arrow { width: 40px; height: 40px; }
  .gx-slider__ui { padding-bottom: 26px; }
}

/* Small phones (<=360px): drop the "Join Discord" label to an icon-only pill so it
   never crowds the brand. All iPhones (375px+) and wider keep the full label. */
@media (max-width: 360px) {
  .gx-nav__cta span { display: none; }
  .gx-nav__cta { padding: 10px; }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gx-nav, .gx-slider__ui,
  .gx-pane.is-revealed .gx-eyebrow,
  .gx-pane.is-revealed .gx-title .l1,
  .gx-pane.is-revealed .gx-sub,
  .gx-pane.is-revealed .gx-actions {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .gx-pane { transition: none !important; }
  .gx-eyebrow .dot { animation: none !important; }
}