/* ============================================================
   SPACEX69420 // SIGNAL DETECTED
   ============================================================
   Sections:
   00. Tokens & resets
   01. Typography helpers
   02. Loader
   03. Ambient background
   04. Navigation
   05. Hero
   06. Buttons
   07. Section heads
   08. Prophecy
   09. Transmission archive
   10. Tokenomics
   11. Gallery
   12. Ignite CTA
   13. Footer
   14. Reveal-on-scroll
   15. Responsive
   ============================================================ */


/* 00. Tokens & resets ----------------------------------------- */
:root {
  --void:        #050505;
  --void-2:      #0a0808;
  --ink:         #14110f;
  --ink-2:       #1b1714;
  --steel:       #c8c9cd;
  --steel-dim:   #7d7e84;
  --steel-deep:  #4a4b50;
  --mars:        #ff6a00;
  --ember:       #ff8c42;
  --ember-soft:  #ffb27a;
  --blood:       #c63d00;
  --blue:        #4da8ff;   /* sparingly */

  --display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --num:     "Orbitron", var(--display);

  --maxw: 1520px;
  --pad-x: clamp(20px, 4vw, 64px);

  --rad: 4px;
  --rad-lg: 10px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--void);
  color: var(--steel);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

html { scroll-behavior: smooth; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::selection { background: var(--mars); color: #000; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); position: relative; }


/* 01. Typography helpers -------------------------------------- */
.mono       { font-family: var(--mono); letter-spacing: .04em; font-weight: 400; font-size: 11px; text-transform: uppercase; }
.dim        { color: var(--steel-dim); }
.orange     { color: var(--mars); }
.hl         { color: var(--ember); }


/* 02. Loader -------------------------------------------------- */
.loader {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at 50% 75%, #1a0a04 0%, #060201 45%, #000 100%);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: opacity .9s var(--ease), visibility .9s;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.loader__particles { position: absolute; inset: 0; width: 100%; height: 100%; }

.loader__mars-glow {
  position: absolute; left: 50%; bottom: -55vw;
  width: 110vw; height: 110vw;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%,
              rgba(255,106,0,.55) 0%,
              rgba(255,106,0,.25) 25%,
              rgba(255,106,0,0) 60%);
  filter: blur(20px);
  animation: marsPulse 4s ease-in-out infinite;
}
@keyframes marsPulse { 0%,100% { opacity:.7; transform: translateX(-50%) scale(1);} 50% { opacity:1; transform: translateX(-50%) scale(1.05);} }

.loader__smoke {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 70%, rgba(255,140,66,.10), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(198,61,0,.12), transparent 50%);
  mix-blend-mode: screen;
  animation: smokeDrift 12s ease-in-out infinite alternate;
}
@keyframes smokeDrift {
  0%   { transform: translate(-2%, 1%); }
  100% { transform: translate(2%, -1%); }
}

.loader__center {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  padding: 32px;
}

.loader__x {
  width: 140px; height: 140px;
  position: relative;
  filter: drop-shadow(0 0 24px rgba(255,106,0,.35)) drop-shadow(0 0 60px rgba(255,106,0,.15));
  animation: xForm 1.4s var(--ease) both, xFloat 5s ease-in-out 1.4s infinite;
}
.loader__x svg { width: 100%; height: 100%; }
@keyframes xForm {
  0%   { opacity: 0; transform: scale(.4) rotate(-20deg); filter: drop-shadow(0 0 60px rgba(255,106,0,.9)) blur(8px); }
  60%  { opacity: 1; filter: drop-shadow(0 0 40px rgba(255,140,66,.7)) blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes xFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
.loader__sparks {
  position: absolute; inset: -20px;
  background:
    radial-gradient(circle at 20% 30%, #ff8c42 0 1px, transparent 2px),
    radial-gradient(circle at 80% 20%, #ff6a00 0 1px, transparent 2px),
    radial-gradient(circle at 60% 80%, #ffb27a 0 1px, transparent 2px),
    radial-gradient(circle at 30% 70%, #ff6a00 0 1px, transparent 2px);
  animation: sparkle 1.6s steps(8) infinite;
  opacity: .8;
}
@keyframes sparkle { 0%{opacity:.8;} 50%{opacity:.2;} 100%{opacity:.8;} }

.loader__signal {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .25em; color: var(--steel);
  text-transform: uppercase;
}
.loader__signal-bar {
  width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--mars), transparent);
}
.loader__signal-text { color: var(--ember); text-shadow: 0 0 12px rgba(255,140,66,.5); }

.loader__progress {
  width: 320px; max-width: 60vw; height: 2px;
  background: rgba(255,255,255,.06);
  position: relative; overflow: hidden;
}
.loader__progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, var(--blood), var(--mars), var(--ember));
  box-shadow: 0 0 10px var(--mars);
  transition: width .25s linear;
}

.loader__meta {
  display: flex; gap: 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .15em;
  color: var(--steel-dim); text-transform: uppercase;
}
.loader__meta span:last-child { color: var(--steel); }

.loader__pulse {
  position: absolute; left: 50%; top: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0%, var(--ember) 40%, transparent 70%);
  opacity: 0; pointer-events: none;
}
.loader__pulse.is-flash {
  animation: pulseExplode .9s var(--ease) forwards;
}
@keyframes pulseExplode {
  0%   { opacity: 1; width: 10px; height: 10px; }
  100% { opacity: 0; width: 240vmax; height: 240vmax; }
}


/* 03. Ambient background -------------------------------------- */
.ambient {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--void);
}
.ambient__stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent),
    radial-gradient(1px 1px at 78% 32%, #fff 50%, transparent),
    radial-gradient(1px 1px at 42% 62%, rgba(255,255,255,.7) 50%, transparent),
    radial-gradient(1px 1px at 22% 82%, rgba(255,255,255,.6) 50%, transparent),
    radial-gradient(1px 1px at 88% 78%, #fff 50%, transparent),
    radial-gradient(1px 1px at 64% 12%, rgba(255,255,255,.6) 50%, transparent),
    radial-gradient(1px 1px at 95% 50%, #fff 50%, transparent),
    radial-gradient(1px 1px at 5%  48%, rgba(255,255,255,.6) 50%, transparent);
  background-size: 100% 100%;
  opacity: .55;
  animation: starsTwinkle 6s ease-in-out infinite alternate;
}
@keyframes starsTwinkle { 0% { opacity: .35; } 100% { opacity: .65; } }

.ambient__nebula {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 80% 110%, rgba(255,106,0,.18), transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% -10%, rgba(198,61,0,.10), transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(255,140,66,.05), transparent 70%);
}

.ambient__embers {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

.ambient__scanlines {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.012) 0 1px,
      transparent 1px 3px);
  opacity: .6;
  mix-blend-mode: overlay;
}
.ambient__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.7) 100%);
  pointer-events: none;
}


/* 04. Navigation ---------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(5,5,5,.85), rgba(5,5,5,.25));
  border-bottom: 1px solid rgba(255,140,66,.08);
}
.nav__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 14px var(--pad-x);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.nav__brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: .12em; font-size: 14px;
}
.nav__brand-x {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  font-size: 22px; line-height: 1;
  color: var(--steel);
  background: linear-gradient(135deg, #e7e8eb 0%, #6e6f74 50%, #e7e8eb 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--num); font-weight: 900;
}
.nav__links {
  display: flex; gap: 28px; justify-content: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
}
.nav__links a {
  color: var(--steel-dim); transition: color .25s var(--ease);
  position: relative;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: var(--mars); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__links a:hover { color: var(--ember); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__status {
  display: flex; align-items: center; gap: 8px;
  justify-content: flex-end;
  font-family: var(--mono); font-size: 10px; color: var(--steel-dim); letter-spacing: .2em;
}
.nav__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mars);
  box-shadow: 0 0 10px var(--mars), 0 0 22px rgba(255,106,0,.6);
  animation: dot 1.4s ease-in-out infinite;
}
@keyframes dot { 0%,100% { transform: scale(1); opacity: .9;} 50% { transform: scale(1.4); opacity: 1;} }


/* 05. Hero — LAYERED COMPOSITION ----------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 100%, #1a0a04 0%, #060201 55%, #000 100%);
}

/* Generic layer ---------------------------------------------- */
.layer {
  position: absolute; inset: 0;
  pointer-events: none;
  will-change: transform;
}
.layer__img {
  position: absolute;
  user-select: none;
  -webkit-user-drag: none;
}

/* L0 — Stars (CSS-generated star field) */
.layer--stars {
  background-color: #000;
  background-image:
    radial-gradient(1.2px 1.2px at 8%  14%, #fff 50%, transparent),
    radial-gradient(1px   1px   at 22% 28%, rgba(255,255,255,.85) 50%, transparent),
    radial-gradient(1px   1px   at 42% 18%, #fff 50%, transparent),
    radial-gradient(1px   1px   at 58% 8%,  rgba(255,255,255,.7) 50%, transparent),
    radial-gradient(1.4px 1.4px at 72% 22%, #fff 50%, transparent),
    radial-gradient(1px   1px   at 88% 12%, rgba(255,255,255,.8) 50%, transparent),
    radial-gradient(1px   1px   at 6%  42%, #fff 50%, transparent),
    radial-gradient(1.2px 1.2px at 18% 56%, rgba(255,255,255,.7) 50%, transparent),
    radial-gradient(1px   1px   at 34% 38%, #fff 50%, transparent),
    radial-gradient(1.4px 1.4px at 52% 48%, rgba(255,255,255,.75) 50%, transparent),
    radial-gradient(1px   1px   at 68% 62%, #fff 50%, transparent),
    radial-gradient(1.2px 1.2px at 82% 44%, rgba(255,255,255,.85) 50%, transparent),
    radial-gradient(1px   1px   at 92% 58%, #fff 50%, transparent),
    radial-gradient(1px   1px   at 14% 72%, rgba(255,255,255,.6) 50%, transparent),
    radial-gradient(1.4px 1.4px at 38% 78%, #fff 50%, transparent),
    radial-gradient(1px   1px   at 62% 88%, rgba(255,255,255,.75) 50%, transparent);
  background-size: 100% 100%;
  animation: starTwinkle 6s ease-in-out infinite alternate;
}
@keyframes starTwinkle {
  0%   { opacity: .55; }
  100% { opacity: .95; }
}

/* L1 — Nebula color wash */
.layer--nebula {
  background:
    radial-gradient(ellipse 60% 50% at 70% 30%, rgba(255,106,0,.08), transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 60%, rgba(198,61,0,.06), transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(77,168,255,.03), transparent 70%);
  mix-blend-mode: screen;
}

/* L2 — Mars terrain (bottom panoramic) */
.layer--mars {
  overflow: hidden;
}
.layer__img--mars {
  bottom: -5%;
  left: 50%;
  transform: translateX(-50%);
  width: 130%;
  min-width: 1400px;
  max-width: none;
  height: auto;
  filter: brightness(.95) saturate(1.1) contrast(1.05);
}

/* L3 — Horizon orange glow (above mars, below characters) */
.layer--horizon {
  background:
    radial-gradient(ellipse 70% 40% at 50% 78%, rgba(255,106,0,.55), transparent 65%),
    radial-gradient(ellipse 90% 25% at 50% 70%, rgba(255,140,66,.30), transparent 70%),
    radial-gradient(ellipse 40% 18% at 50% 64%, rgba(255,200,140,.18), transparent 75%);
  mix-blend-mode: screen;
  animation: horizonPulse 7s ease-in-out infinite;
}
@keyframes horizonPulse {
  0%,100% { opacity: .85; }
  50%     { opacity: 1;   }
}

/* L4 — Floating dust / mid-fog */
.layer--dust {
  background:
    radial-gradient(ellipse 30% 18% at 18% 65%, rgba(255,140,66,.12), transparent 70%),
    radial-gradient(ellipse 32% 18% at 82% 70%, rgba(255,106,0,.10), transparent 70%),
    radial-gradient(ellipse 24% 12% at 50% 55%, rgba(255,180,120,.06), transparent 70%);
  mix-blend-mode: screen;
  animation: dustDrift 18s ease-in-out infinite alternate;
}
@keyframes dustDrift {
  0%   { transform: translate(-1%, 0); opacity: .9; }
  100% { transform: translate( 1%, -1%); opacity: 1; }
}

/* L5 — Left girl ------------------------------------------------ */
.layer--girl-left { overflow: hidden; }
.layer__img--girl-left {
  bottom: -3vh;
  left: clamp(-120px, -6vw, -40px);
  height: 98vh;
  height: 98svh;
  width: auto;
  max-width: none;
  filter:
    drop-shadow(8px 0 24px rgba(0,0,0,.7))
    drop-shadow(-12px 0 30px rgba(255,106,0,.18));
  animation: girlFloat 8s ease-in-out infinite;
}
@keyframes girlFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
.layer__edge--left {
  position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, transparent, rgba(255,106,0,.5), transparent);
  filter: blur(2px);
  opacity: .6;
}

/* L6 — Right girl ----------------------------------------------- */
.layer--girl-right { overflow: hidden; }
.layer__img--girl-right {
  bottom: -3vh;
  right: clamp(-120px, -6vw, -40px);
  height: 98vh;
  height: 98svh;
  width: auto;
  max-width: none;
  filter:
    drop-shadow(-8px 0 24px rgba(0,0,0,.7))
    drop-shadow(12px 0 30px rgba(255,106,0,.18));
  animation: girlFloat 9s ease-in-out -1.5s infinite;
}
.layer__edge--right {
  position: absolute; right: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, transparent, rgba(255,106,0,.5), transparent);
  filter: blur(2px);
  opacity: .6;
}

/* Cigarette smoke (tied to right girl) */
.cig-smoke {
  position: absolute;
  /* Position roughly above the cigarette in the source art */
  right: 19%;
  top: 14%;
  width: 60px;
  height: 220px;
  pointer-events: none;
  filter: blur(.5px);
}
.cig-smoke__p {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,150,.45), rgba(255,140,66,.18) 50%, transparent 70%);
  transform: translateX(-50%);
  opacity: 0;
  animation: cigPuff 5.5s linear infinite;
}
.cig-smoke__p--1 { animation-delay: 0s;   }
.cig-smoke__p--2 { animation-delay: 1.1s; }
.cig-smoke__p--3 { animation-delay: 2.2s; }
.cig-smoke__p--4 { animation-delay: 3.3s; }
.cig-smoke__p--5 { animation-delay: 4.4s; }
@keyframes cigPuff {
  0%   { opacity: 0;   transform: translate(-50%, 0)     scale(.6); }
  15%  { opacity: .8;  transform: translate(-50%, -30px) scale(.9); }
  60%  { opacity: .35; transform: translate(-20%, -120px) scale(1.6); }
  100% { opacity: 0;   transform: translate(10%, -200px) scale(2.4); }
}

/* L7 — Orange halo behind X logo */
.layer--xglow {
  background: radial-gradient(circle at 50% 46%,
              rgba(255,140,66,.42) 0%,
              rgba(255,106,0,.28) 18%,
              rgba(255,106,0,.10) 32%,
              transparent 50%);
  mix-blend-mode: screen;
  animation: xGlowPulse 4.5s ease-in-out infinite;
}
@keyframes xGlowPulse {
  0%,100% { opacity: .85; transform: scale(1);    }
  50%     { opacity: 1;   transform: scale(1.04); }
}

/* L8 — X logo focal point */
.layer--xlogo {
  display: grid; place-items: center;
  padding-bottom: 4vh;
}
.x-shell {
  position: relative;
  width: min(46vw, 560px);
  aspect-ratio: 1 / 1;
  animation: xFloat 6s ease-in-out infinite;
  filter:
    drop-shadow(0 12px 30px rgba(0,0,0,.6))
    drop-shadow(0 0 32px rgba(255,106,0,.35));
}
.layer__img--xlogo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
@keyframes xFloat {
  0%,100% { transform: translateY(0)   rotate(0); }
  50%     { transform: translateY(-10px) rotate(.4deg); }
}
.x-shell__shine {
  position: absolute; inset: 0;
  background: linear-gradient(120deg,
              transparent 35%,
              rgba(255,255,255,.18) 48%,
              rgba(255,200,150,.10) 52%,
              transparent 65%);
  mix-blend-mode: screen;
  -webkit-mask-image: url('assets/x-logo.png');
          mask-image: url('assets/x-logo.png');
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  animation: xShine 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes xShine {
  0%,100% { transform: translateX(-25%); opacity: 0; }
  40%     { opacity: .9; }
  60%     { opacity: .9; }
  100%    { transform: translateX(25%);  opacity: 0; }
}

/* L9 — HUD --------------------------------------------------- */
.hud { position: absolute; inset: 96px var(--pad-x) 96px; pointer-events: none; z-index: 5; }
.hud__corner {
  position: absolute;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--steel);
  padding: 10px 12px;
}
.hud__corner::before {
  content: ""; position: absolute;
  width: 18px; height: 18px;
  border-color: rgba(255,140,66,.8);
  border-style: solid;
}
.hud__corner--tl { top: 0; left: 0; }
.hud__corner--tl::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
.hud__corner--tr { top: 0; right: 0; align-items: flex-end; }
.hud__corner--tr::before { top: 0; right: 0; border-width: 1px 1px 0 0; }
.hud__corner--bl { bottom: 0; left: 0; }
.hud__corner--bl::before { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.hud__corner--br { bottom: 0; right: 0; align-items: flex-end; }
.hud__corner--br::before { bottom: 0; right: 0; border-width: 0 1px 1px 0; }

/* Scanning line down hero */
.hud__scan {
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,140,66,.5) 30%, rgba(255,180,120,.85) 50%, rgba(255,140,66,.5) 70%, transparent);
  box-shadow: 0 0 18px rgba(255,140,66,.6);
  animation: scan 7s linear infinite;
  opacity: .7;
}
@keyframes scan {
  0%   { transform: translateY(0); }
  100% { transform: translateY(80vh); }
}

/* HUD chips floating around scene */
.hud__chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: linear-gradient(180deg, rgba(20,12,6,.7), rgba(8,5,3,.85));
  border: 1px solid rgba(255,140,66,.3);
  backdrop-filter: blur(6px);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .25em;
  color: var(--steel);
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255,140,66,.08), 0 8px 30px rgba(0,0,0,.4);
  animation: chipFloat 6s ease-in-out infinite;
}
.hud__chip::before, .hud__chip::after {
  content: ""; position: absolute; width: 8px; height: 8px; border: 1px solid var(--mars);
}
.hud__chip::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.hud__chip::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

.hud__chip--top    { top: 8%;  left: 50%; transform: translateX(-50%); }
.hud__chip--left   { top: 38%; left: 4%;  flex-direction: column; align-items: flex-start; gap: 6px; }
.hud__chip--right  { top: 38%; right: 4%; animation-delay: -2s; }
.hud__chip--bottom { bottom: 14%; left: 50%; transform: translateX(-50%); animation-delay: -3s; }

@keyframes chipFloat {
  0%,100% { transform: translate(var(--tx, 0), 0); }
  50%     { transform: translate(var(--tx, 0), -4px); }
}
.hud__chip--top, .hud__chip--bottom { --tx: -50%; }

.hud__chip-dot, .hud__pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mars);
  box-shadow: 0 0 12px var(--mars);
  animation: dot 1.3s ease-in-out infinite;
}

.hud__bars { display: flex; gap: 2px; align-items: flex-end; height: 14px; }
.hud__bars i {
  width: 3px; background: var(--mars); display: block;
  animation: wave 1.4s ease-in-out infinite;
  opacity: .8;
}
.hud__bars i:nth-child(1) { height: 30%; animation-delay: .00s; }
.hud__bars i:nth-child(2) { height: 60%; animation-delay: .07s; }
.hud__bars i:nth-child(3) { height: 80%; animation-delay: .14s; }
.hud__bars i:nth-child(4) { height: 50%; animation-delay: .21s; }
.hud__bars i:nth-child(5) { height: 90%; animation-delay: .28s; }
.hud__bars i:nth-child(6) { height: 40%; animation-delay: .35s; }
.hud__bars i:nth-child(7) { height: 70%; animation-delay: .42s; }
.hud__bars i:nth-child(8) { height: 55%; animation-delay: .49s; }

/* Reticle around X logo */
.hud__reticle {
  position: absolute; left: 50%; top: 46%;
  width: min(54vw, 640px); aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
}
.hud__reticle-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(255,140,66,.3);
  animation: spin 60s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hud__reticle-mark {
  position: absolute; background: var(--mars); opacity: .8;
  box-shadow: 0 0 8px var(--mars);
}
.hud__reticle-mark--t, .hud__reticle-mark--b { left: 50%; width: 2px; height: 12px; transform: translateX(-50%); }
.hud__reticle-mark--l, .hud__reticle-mark--r { top: 50%; height: 2px; width: 12px; transform: translateY(-50%); }
.hud__reticle-mark--t { top: -6px; }
.hud__reticle-mark--b { bottom: -6px; }
.hud__reticle-mark--l { left: -6px; }
.hud__reticle-mark--r { right: -6px; }

/* CTA floor — anchored above ticker */
.hero__cta-floor {
  position: absolute; left: 0; right: 0; bottom: 80px;
  z-index: 6;
  display: flex; justify-content: center;
  padding: 0 var(--pad-x);
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.hero__ticker {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 6;
  border-top: 1px solid rgba(255,140,66,.18);
  border-bottom: 1px solid rgba(255,140,66,.18);
  background: linear-gradient(180deg, rgba(20,8,2,.5), rgba(0,0,0,.85));
  overflow: hidden;
  padding: 12px 0;
}
.ticker__track {
  display: inline-flex; gap: 36px; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .3em; color: var(--steel);
  animation: ticker 38s linear infinite;
  padding-left: 100%;
}
.ticker__track .dot { color: var(--mars); }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }


/* 06. Buttons ------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .25em; text-transform: uppercase;
  border-radius: 2px;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.btn__arrow { font-size: 14px; }
.btn--small { padding: 10px 14px; font-size: 10px; }
.btn--large { padding: 18px 28px; font-size: 13px; }

.btn--primary {
  color: #0a0604;
  background: linear-gradient(180deg, #ffb27a 0%, #ff8c42 40%, #ff6a00 75%, #c63d00 100%);
  border: 1px solid #ffb27a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 0 0 1px rgba(255,106,0,.4),
    0 10px 40px rgba(255,106,0,.35),
    0 0 18px rgba(255,140,66,.55);
  font-weight: 600;
}
.btn--primary .btn__glow {
  position: absolute; inset: -2px;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease);
  pointer-events: none;
  z-index: 1;
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 0 0 1px rgba(255,106,0,.6),
    0 16px 60px rgba(255,106,0,.55),
    0 0 30px rgba(255,140,66,.85);
}
.btn--primary:hover .btn__glow { transform: translateX(120%); }
.btn--primary > * { position: relative; z-index: 2; }

.btn--ghost {
  color: var(--steel);
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(200,201,205,.25);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  color: #fff;
  border-color: var(--ember);
  background: rgba(255,140,66,.07);
  box-shadow: 0 0 0 1px rgba(255,140,66,.25), 0 0 24px rgba(255,140,66,.18);
  transform: translateY(-2px);
}


/* 07. Section heads ------------------------------------------- */
section { position: relative; padding: 120px 0; }
.section-head { text-align: center; margin-bottom: 64px; }
.section-head .mono.dim { display: block; margin-bottom: 14px; }
.section-title {
  margin: 0 0 14px;
  font-family: var(--num);
  font-weight: 800;
  font-size: clamp(36px, 6vw, 84px);
  letter-spacing: .02em;
  background: linear-gradient(180deg, #f4f4f6 0%, #9a9ba0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.section-sub {
  color: var(--steel-dim);
  font-size: 12px; letter-spacing: .25em;
  margin: 14px auto 0; max-width: 600px;
}
.section-rule {
  width: 80px; height: 2px;
  margin: 24px auto 0;
  background: linear-gradient(90deg, transparent, var(--mars), transparent);
  position: relative;
}
.section-rule::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; background: var(--mars);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 12px var(--mars);
}


/* 08. Prophecy ------------------------------------------------ */
.prophecy::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,106,0,.08), transparent 70%);
  pointer-events: none;
}

.prophecy__grid {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
  gap: 48px;
  align-items: start;
}

.prophecy__lore { font-size: 17px; line-height: 1.7; color: var(--steel); }
.prophecy__lore p { margin: 0 0 22px; }
.prophecy__lore em { font-style: normal; color: var(--ember); }
.prophecy__lead { font-size: 19px; }
.prophecy__caps {
  font-family: var(--num);
  font-size: clamp(22px, 2.5vw, 32px);
  letter-spacing: .04em;
  color: var(--steel);
  border-top: 1px solid rgba(255,140,66,.2);
  border-bottom: 1px solid rgba(255,140,66,.2);
  padding: 18px 0;
  text-align: center;
}
.prophecy__close { font-size: 19px; }
.prophecy__sigil {
  display: inline-flex; gap: 12px; align-items: center;
  margin-top: 14px;
  padding: 8px 14px;
  border: 1px solid rgba(255,140,66,.25);
  color: var(--ember);
  background: rgba(255,106,0,.04);
}

.prophecy__card {
  position: relative;
  border: 1px solid rgba(200,201,205,.12);
  background:
    linear-gradient(180deg, rgba(20,17,15,.7), rgba(10,8,8,.85));
  backdrop-filter: blur(6px);
  padding: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 30px 80px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,140,66,.06);
}
.prophecy__card::before, .prophecy__card::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--mars);
}
.prophecy__card::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.prophecy__card::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.prophecy__card-head, .prophecy__card-foot {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: .25em;
}
.prophecy__card-head { padding-bottom: 18px; border-bottom: 1px dashed rgba(255,140,66,.18); }
.prophecy__card-foot { padding-top: 18px; border-top: 1px dashed rgba(255,140,66,.18); margin-top: 18px; }
.prophecy__card-body { padding: 24px 0; display: flex; flex-direction: column; gap: 20px; }
.prophecy__stat { display: flex; flex-direction: column; gap: 6px; }
.prophecy__stat-num {
  font-family: var(--num); font-weight: 800;
  font-size: clamp(34px, 4vw, 52px);
  background: linear-gradient(180deg, #fff 0%, #ffb27a 60%, #ff6a00 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.prophecy__stat-label { font-size: 10px; letter-spacing: .25em; }


/* 09. Transmission archive ----------------------------------- */
.archive::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,140,66,.04) 39px 40px);
  pointer-events: none; opacity: .4;
}

.archive__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
}

/* Card como link */
a.trans {
  display: block;
  text-decoration: none;
  color: inherit;
}

.trans {
  position: relative;
  background: linear-gradient(180deg, rgba(22,16,12,.75), rgba(10,8,8,.92));
  border: 1px solid rgba(200,201,205,.10);
  padding: 16px;
  overflow: hidden;
  transition: transform .35s var(--ease),
              border-color .35s var(--ease),
              box-shadow .35s var(--ease);
}
.trans::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--mars), transparent);
  opacity: .5;
}
.trans:hover {
  transform: translateY(-4px);
  border-color: rgba(255,140,66,.45);
  box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 30px rgba(255,106,0,.18);
}

/* Card destacada — Polymarket */
.trans--highlight {
  border-color: rgba(255,140,66,.35);
  box-shadow: 0 0 0 1px rgba(255,140,66,.10), 0 0 24px rgba(255,106,0,.08);
}
.trans--highlight::before {
  opacity: 1;
  background: linear-gradient(90deg, transparent, var(--ember), var(--mars), var(--ember), transparent);
}

/* Header */
.trans__head {
  display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.trans__id { color: var(--ember); }
.trans__chip {
  padding: 4px 8px;
  border: 1px solid rgba(255,140,66,.3);
  color: var(--mars);
  font-size: 9px; letter-spacing: .25em;
  background: rgba(255,106,0,.05);
}
.trans__chip--alt {
  border-color: var(--ember);
  background: rgba(255,140,66,.12);
  color: var(--ember);
  box-shadow: 0 0 12px rgba(255,140,66,.25);
}

/* Pantalla con imagen */
.trans__screen {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,106,0,.10), transparent 60%),
    linear-gradient(180deg, #0c0907 0%, #050302 100%);
  border: 1px solid rgba(255,140,66,.12);
  aspect-ratio: 1180 / 494;  /* ← cambiá esta línea */
  overflow: hidden;
}

.trans__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;        /* ← cambiá cover por contain */
  object-position: center;
  display: block;
  filter: brightness(.85) contrast(1.05) saturate(.95);
  transition: filter .5s var(--ease), transform .8s var(--ease);
}

/* Ruido de TV (heredado, ajustado) */
.trans__noise {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.025) 2px 3px);
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: .6;
  animation: noiseShift 6s linear infinite;
  z-index: 2;
}
@keyframes noiseShift { 0%{ transform: translateY(0); } 100% { transform: translateY(3px); } }

/* Línea de escaneo que recorre la imagen */
.trans__scanline {
  position: absolute; left: 0; right: 0; top: -10%;
  height: 80px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,140,66,.08) 40%,
    rgba(255,180,120,.18) 50%,
    rgba(255,140,66,.08) 60%,
    transparent 100%);
  pointer-events: none;
  z-index: 3;
  animation: transScan 5s linear infinite;
}
@keyframes transScan {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(120%); opacity: 0; }
}

/* Badge DECODED en la esquina — visible solo en hover */
.trans__decode {
  position: absolute;
  left: 10px; bottom: 10px;
  z-index: 4;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 9px;
  background: rgba(5,3,2,.85);
  border: 1px solid rgba(255,140,66,.35);
  font-size: 9px;
  letter-spacing: .25em;
  color: var(--ember);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events: none;
}
.trans:hover .trans__decode {
  opacity: 1;
  transform: translateY(0);
}
/* Footer */
.trans__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}
.trans__open {
  color: var(--ember);
  transition: transform .25s var(--ease);
}
.trans:hover .trans__open {
  transform: translateX(3px);
}

/* Fade de salida (lo dejamos como estaba) */
.archive {
  padding-bottom: 140px;
  position: relative;
}
.archive::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--void));
  pointer-events: none;
  z-index: 1;
}

/* 10. Tokenomics --------------------------------------------- */
/* REEMPLAZA el tokenomics::before existente */
.tokenomics::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* Glow central más sutil + fade en bordes top/bottom */
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(255,106,0,.09), transparent 70%),
    radial-gradient(ellipse 50% 25% at 50% 100%, rgba(255,106,0,.07), transparent 70%);

  /* Máscara que hace fade natural en los bordes */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
}

.tok__contract {
  max-width: 920px;
  margin: 0 auto 48px;
  padding: 18px 22px;
  background:
    linear-gradient(180deg, rgba(22,16,12,.85), rgba(10,8,8,.95));
  border: 1px solid rgba(255,140,66,.20);
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
}
.tok__contract::before, .tok__contract::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--mars);
}
.tok__contract::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.tok__contract::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

.tok__contract-label { letter-spacing: .25em; }
.tok__contract-row {
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap;
}
.tok__contract-addr {
  font-family: var(--mono); font-size: 13px;
  color: var(--ember);
  letter-spacing: .12em;
  flex: 1; min-width: 0;
  word-break: break-all;
}

.tok__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}

.tok-card {
  position: relative;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(28,21,16,.85) 0%, rgba(12,9,8,.95) 100%);
  border: 1px solid rgba(200,201,205,.10);
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.tok-card::before, .tok-card::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid rgba(255,140,66,.4);
}
.tok-card::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.tok-card::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

.tok-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,140,66,.4);
  box-shadow:
    0 30px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,140,66,.15),
    0 0 30px rgba(255,106,0,.18);
}

.tok-card__top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.tok-card__chip {
  font-family: var(--mono); font-size: 10px; letter-spacing: .3em;
  padding: 4px 10px;
  border: 1px solid rgba(255,140,66,.3);
  background: rgba(255,106,0,.06);
  color: var(--ember);
}
.tok-card__big {
  font-family: var(--num); font-weight: 800;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.1;
  background: linear-gradient(180deg, #fff 0%, #c8c9cd 60%, #6e6f74 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: .02em;
}
.tok-card__sub {
  margin-top: 10px;
  font-size: 10px; letter-spacing: .25em; color: var(--steel-dim);
}
.tok-card__bar {
  margin-top: 18px;
  height: 4px;
  background: rgba(255,255,255,.05);
  position: relative;
}
.tok-card__bar span {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--blood), var(--mars), var(--ember));
  box-shadow: 0 0 12px rgba(255,106,0,.4);
}
.tok-card__glint {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.04) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 1.2s var(--ease);
}
.tok-card:hover .tok-card__glint { transform: translateX(100%); }


/* 11. Gallery ------------------------------------------------- */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  grid-auto-rows: 220px;
  gap: 18px;
}
.gframe {
  position: relative; margin: 0;
  background: #0a0807;
  border: 1px solid rgba(200,201,205,.10);
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.gframe::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.85) 100%);
  pointer-events: none;
}
.gframe--tall { grid-row: span 2; }
.gframe--wide { grid-column: span 2; }
.gframe:hover { transform: translateY(-4px); border-color: rgba(255,140,66,.4); }

.gframe__placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(45deg, #1a120d 0 14px, #120c08 14px 28px),
    radial-gradient(ellipse at 50% 50%, rgba(255,106,0,.18), transparent 70%);
  color: var(--steel-dim);
}
.gframe__placeholder .mono { font-size: 11px; letter-spacing: .2em; }

.gframe figcaption {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 3;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: .25em;
  color: var(--steel);
}
.gframe figcaption .mono.dim { color: var(--mars); }

/* FRAME 001 — DOGE MOBILE FIX */

.gframe__img--mars{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: center center;
}

@media (max-width: 768px){

  .gframe__img--mars{
    object-position: 72% 35%;
  }

}
/* 12. Ignite CTA --------------------------------------------- */
.ignite {
  text-align: center;
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}
.ignite__title {
  margin: 0;
  font-family: var(--num); font-weight: 900;
  font-size: clamp(40px, 8vw, 120px);
  line-height: .9;
  background: linear-gradient(180deg, #fff 0%, #c8c9cd 60%, #6e6f74 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ignite__sub {
  margin: 18px 0 32px;
  font-size: 12px; letter-spacing: .3em; color: var(--steel-dim);
}
.ignite__cta { justify-content: center; }
.ignite__glow {
  position: absolute; left: 50%; top: 50%;
  width: 80vw; height: 80vw; max-width: 1200px; max-height: 1200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,106,0,.16) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
  animation: marsPulse 6s ease-in-out infinite;
}


/* 13. Footer -------------------------------------------------- */
.footer {
  position: relative;
  border-top: 1px solid rgba(255,140,66,.12);
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(10,5,2,.9) 80%);
  padding: 72px 0 36px;
  overflow: hidden;
}
.footer__glow {
  position: absolute; left: 50%; bottom: -100px;
  width: 120%; height: 220px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 50%, rgba(255,106,0,.25), transparent 70%);
  pointer-events: none;
  filter: blur(20px);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.footer__brand {
  display: flex; gap: 14px; align-items: center;
}
.footer__brand-x {
  font-family: var(--num); font-weight: 900;
  font-size: 48px; line-height: 1;
  background: linear-gradient(135deg, #e7e8eb 0%, #6e6f74 50%, #e7e8eb 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footer__brand-name { font-weight: 700; font-size: 18px; letter-spacing: .12em; }

.footer__links {
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-end;
}
.footer__link {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 10px 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: .25em;
  color: var(--steel-dim);
  border-bottom: 1px solid rgba(255,255,255,.04);
  width: 240px; justify-content: space-between;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.footer__link .arrow { color: var(--mars); }
.footer__link:hover { color: var(--ember); border-color: rgba(255,140,66,.35); }

.footer__legal {
  grid-column: span 2;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.05);
  display: flex; justify-content: space-between; gap: 24px;
  font-size: 10px; letter-spacing: .15em;
  position: relative; z-index: 1;
}

.footer__brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.footer__brand-logo{
  width:200px;
  height:auto;
  display:block;
  flex-shrink:0;

  filter:
    drop-shadow(0 0 10px rgba(255,120,0,.18));
}

@media (max-width: 768px){

  .footer__brand-logo{
    width: 240px;
  }

}

/* 14. Reveal-on-scroll --------------------------------------- */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in {
  opacity: 1; transform: translateY(0);
}


/* 15. Responsive --------------------------------------------- */
@media (max-width: 960px) {
  section {
    padding: 64px 0;
  }

  .nav__links { display: none; }
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav__status { display: none; }
  .nav__inner { grid-template-columns: 1fr; justify-items: center; }

  .hud__corner { font-size: 9px; padding: 6px 8px; }
  .hud--hero { inset: 80px 16px 90px; }
  .hud__chip { font-size: 9px; padding: 6px 10px; }
  .hud__chip--left, .hud__chip--right { top: 30%; }
  .hud__chip--left  { left: 12px; }
  .hud__chip--right { right: 12px; }
  .layer__img--girl-left, .layer__img--girl-right { height: 72vh; height: 72svh; opacity: .9; }
  .x-shell { width: 62vw; }
  .hud__reticle { width: 70vw; }
  .cig-smoke { right: 14%; top: 18%; }

  .prophecy__grid { grid-template-columns: 1fr; gap: 28px; }
  .archive__grid { grid-template-columns: 1fr 1fr; }
  .trans--wide { grid-column: span 2; }

  .tok__grid { grid-template-columns: 1fr 1fr; }

  .gallery__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; }
  .gframe--tall { grid-row: span 1; }
  .gframe--wide { grid-column: span 2; }

  .footer__inner { grid-template-columns: 1fr; }
  .footer__links { align-items: flex-start; }
  .footer__legal { grid-column: 1; flex-direction: column; gap: 8px; }
}

@media (max-width: 560px) {
  section {
    padding: 48px 0;
  }

  .section-head {
    margin-bottom: 36px;
  }

  .ignite {
    padding: 72px 0;
  }

  .archive__grid { grid-template-columns: 1fr; }
  .trans--wide { grid-column: span 1; }
  .tok__grid { grid-template-columns: 1fr; }
  .gallery__grid { grid-template-columns: 1fr; }
  .gframe--wide { grid-column: span 1; }
  .hud__corner--bl, .hud__corner--br { font-size: 8px; }
  .layer__img--girl-left, .layer__img--girl-right { height: 58vh; height: 58svh; opacity: .65; }
  .hud__chip--top, .hud__chip--bottom { font-size: 8px; letter-spacing: .18em; padding: 5px 8px; }
  .hud__chip--left, .hud__chip--right { display: none; }
  .x-shell { width: 75vw; }
  .hero__cta-floor { bottom: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .2s !important;
  }
  .hero__banner { animation: none; }
}
/* ============================================================
   IGNITE — Ship + layout restructure
============================================================ */

.ignite__inner {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 6vw, 100px);
  text-align: left;
  flex-wrap: wrap;
}

.ignite__text-block {
  flex: 1 1 400px;
  max-width: 620px;
  text-align: left;
}

@media (max-width: 768px) {

  .ignite__inner {
    text-align: center;
  }

  .ignite__text-block {
    text-align: center;
  }

  .ignite__cta {
    justify-content: center;
  }

}

/* ============================================================
   SHIP CONTAINER
============================================================ */

.ignite__ship {
  position: relative;

  flex: 0 0 auto;

  width: clamp(240px, 32vw, 480px);

  aspect-ratio: 1 / 1;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
}

/* ============================================================
   SHIP IMAGE
============================================================ */

.ignite__ship-img {

  width: 100%;
  height: 100%;

  object-fit: contain;

  mix-blend-mode: screen;

  filter:
    drop-shadow(0 0 30px rgba(255,106,0,.55))
    drop-shadow(0 0 70px rgba(255,106,0,.25))
    brightness(1.05);

  animation: shipFloat 7s ease-in-out infinite;

  transform-origin: center center;

  position: relative;
  z-index: 2;

  will-change: transform, filter;

  transition:
    transform 2.8s ease,
    filter 3.8s cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   FLOAT ANIMATION
============================================================ */

@keyframes shipFloat {

  0% {
    transform: translateY(0px) rotate(0deg);
  }

  30% {
    transform: translateY(-18px) rotate(1.2deg);
  }

  60% {
    transform: translateY(-8px) rotate(-0.8deg);
  }

  80% {
    transform: translateY(-22px) rotate(1.8deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }

}

/* ============================================================
   SMOOTH HOVER GLOW
============================================================ */

.ignite__ship:hover .ignite__ship-img {

  filter:
    drop-shadow(0 0 55px rgba(255,106,0,.78))
    drop-shadow(0 0 120px rgba(255,106,0,.38))
    brightness(1.14);
}

/* ============================================================
   UNDER GLOW
============================================================ */

.ignite__ship-glow {

  position: absolute;

  bottom: 8%;
  left: 50%;

  transform: translateX(-50%);

  width: 60%;
  height: 30px;

  background: radial-gradient(
    ellipse at center,
    rgba(255,106,0,.55) 0%,
    rgba(255,106,0,.20) 45%,
    transparent 70%
  );

  filter: blur(12px);

  animation: shipGlowPulse 7s ease-in-out infinite;

  z-index: 1;

  transition:
    opacity 3.5s cubic-bezier(.16,1,.3,1),
    width 3.5s cubic-bezier(.16,1,.3,1),
    background 3.5s cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   GLOW PULSE
============================================================ */

@keyframes shipGlowPulse {

  0%,100% {
    opacity: .7;
    transform: translateX(-50%) scaleX(1);
  }

  40% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.15);
  }

  70% {
    opacity: .8;
    transform: translateX(-50%) scaleX(0.95);
  }

}

/* ============================================================
   HOVER GLOW
============================================================ */

.ignite__ship:hover .ignite__ship-glow {

  opacity: 1;

  width: 80%;

  background: radial-gradient(
    ellipse at center,
    rgba(255,106,0,.75) 0%,
    rgba(255,106,0,.30) 45%,
    transparent 70%
  );
}
  /* ============================================================
     FOOTER — Suelo de Marte
     ============================================================ */
 /* Footer — reset limpio */
.footer {
  position: relative;
  border-top: none;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(10,5,2,.9) 80%);
  padding: 72px 0 36px;
  overflow: hidden;
}

/* La imagen de Marte va en ::before — separada del contenido */
.footer::before {
  content: "";
  position: absolute;
  bottom: 0;        /* PEGADA AL PISO */
  left: 0;
  right: 0;
  height: 320px;
  background-image: url('assets/mars-ground.png');
  background-repeat: no-repeat;
  background-position: center bottom; /* anclada abajo */
  background-size: cover;
  
  /* Fade: arriba se disuelve, abajo sólido */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.5) 20%,
    black 45%,
    black 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.5) 20%,
    black 45%,
    black 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Contenido siempre encima */
.footer__glow,
.footer__inner,
.footer__legal {
  position: relative;
  z-index: 1;
}

/* Mobile — reducir espacio negro */
@media (max-width: 768px) {
  .footer {
    padding-bottom: 0; /* elimina el espacio vacío abajo */
  }

  .footer::before {
    height: 260px; /* más alta para que llegue bien al borde */
    background-position: center bottom;
    background-size: cover;
  }

  .footer__legal {
    padding-bottom: 0px; /* pequeño respiro antes del suelo */
    margin-bottom: 0;
  }
}
  /* ============================================================
     TOKENOMICS — Estrellas visibles
     ============================================================ */
  .tokenomics {
    /* Hereda las estrellas del ambient__stars pero las hacemos
       visibles localmente con un pseudo-elemento */
    isolation: auto; /* importante: no aislar para que el ambient las filtre */
  }
  
  /* Overlay de estrellas específico para tokenomics */
  .tokenomics::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  
    background-image:
      /* Capa 1 — estrellas medianas */
      radial-gradient(1.5px 1.5px at  5%  8%,  rgba(255,255,255,.92) 50%, transparent),
      radial-gradient(1.2px 1.2px at 14% 22%,  rgba(255,255,255,.85) 50%, transparent),
      radial-gradient(1.8px 1.8px at 24%  6%,  rgba(255,255,255,.90) 50%, transparent),
      radial-gradient(1.3px 1.3px at 36% 18%,  rgba(255,255,255,.80) 50%, transparent),
      radial-gradient(1.6px 1.6px at 48%  5%,  rgba(255,255,255,.88) 50%, transparent),
      radial-gradient(1.4px 1.4px at 60% 15%,  rgba(255,255,255,.82) 50%, transparent),
      radial-gradient(1.7px 1.7px at 74%  9%,  rgba(255,255,255,.90) 50%, transparent),
      radial-gradient(1.2px 1.2px at 84% 24%,  rgba(255,255,255,.85) 50%, transparent),
      radial-gradient(1.5px 1.5px at 94% 12%,  rgba(255,255,255,.88) 50%, transparent),
      /* Capa 2 — estrellas pequeñas, más densas */
      radial-gradient(1px 1px at  9% 38%,  rgba(255,255,255,.75) 50%, transparent),
      radial-gradient(1px 1px at 20% 52%,  rgba(255,255,255,.70) 50%, transparent),
      radial-gradient(1.3px 1.3px at 32% 44%,  rgba(255,255,255,.80) 50%, transparent),
      radial-gradient(1px 1px at 44% 60%,  rgba(255,255,255,.72) 50%, transparent),
      radial-gradient(1.2px 1.2px at 56% 42%,  rgba(255,255,255,.78) 50%, transparent),
      radial-gradient(1px 1px at 68% 55%,  rgba(255,255,255,.70) 50%, transparent),
      radial-gradient(1.4px 1.4px at 79% 48%,  rgba(255,255,255,.82) 50%, transparent),
      radial-gradient(1px 1px at 90% 62%,  rgba(255,255,255,.75) 50%, transparent),
      radial-gradient(1px 1px at  4% 75%,  rgba(255,255,255,.65) 50%, transparent),
      radial-gradient(1.2px 1.2px at 18% 82%,  rgba(255,255,255,.72) 50%, transparent),
      radial-gradient(1px 1px at 30% 72%,  rgba(255,255,255,.68) 50%, transparent),
      radial-gradient(1.3px 1.3px at 52% 78%,  rgba(255,255,255,.75) 50%, transparent),
      radial-gradient(1px 1px at 70% 88%,  rgba(255,255,255,.65) 50%, transparent),
      radial-gradient(1.5px 1.5px at 88% 80%,  rgba(255,255,255,.78) 50%, transparent),
      /* Capa 3 — puntos diminutos para textura */
      radial-gradient(0.8px 0.8px at 12% 45%,  rgba(255,255,255,.55) 50%, transparent),
      radial-gradient(0.8px 0.8px at 38% 30%,  rgba(255,255,255,.50) 50%, transparent),
      radial-gradient(0.8px 0.8px at 62% 72%,  rgba(255,255,255,.55) 50%, transparent),
      radial-gradient(0.8px 0.8px at 82% 35%,  rgba(255,255,255,.50) 50%, transparent),
      radial-gradient(0.8px 0.8px at 96% 50%,  rgba(255,255,255,.55) 50%, transparent);
  
    background-size: 100% 100%;
  
    /* Más visibles — antes estaban al .55, ahora .85 */
    opacity: .85;
  
    /* Fade en los bordes para que no corten duro */
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black 10%,
      black 90%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black 10%,
      black 90%,
      transparent 100%
    );
  
    animation: starTwinkle 7s ease-in-out infinite alternate;
  }
  
  /* El contenido de tokenomics queda encima de las estrellas */
  .tokenomics .container {
    position: relative;
    z-index: 1;
  }
  
  /* Nebula sutil de fondo en tok para darle profundidad */
  .tokenomics::before {
    background:
      radial-gradient(ellipse 50% 40% at 50% 100%, rgba(255,106,0,.08), transparent 70%),
      radial-gradient(ellipse 80% 60% at 50% 0%,   rgba(255,106,0,.04), transparent 70%);
  }

  /* Sección archive termina con fade hacia abajo */
.archive {
  padding-bottom: 140px;
  position: relative;
}
.archive::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--void));
  pointer-events: none;
  z-index: 1;
}

/* Tokenomics a ignite: fade suave de salida */
.tokenomics {
  padding-top: 120px;
  padding-bottom: 120px;
}

@media (max-width: 960px) {
  .tokenomics {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

@media (max-width: 560px) {
  .tokenomics {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/* Estrellas en sección Ignite — mismo sistema que tokenomics */
.ignite::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image:
    radial-gradient(1.5px 1.5px at  5%  8%,  rgba(255,255,255,.92) 50%, transparent),
    radial-gradient(1.2px 1.2px at 14% 22%,  rgba(255,255,255,.85) 50%, transparent),
    radial-gradient(1.8px 1.8px at 24%  6%,  rgba(255,255,255,.90) 50%, transparent),
    radial-gradient(1.3px 1.3px at 36% 18%,  rgba(255,255,255,.80) 50%, transparent),
    radial-gradient(1.6px 1.6px at 48%  5%,  rgba(255,255,255,.88) 50%, transparent),
    radial-gradient(1.4px 1.4px at 60% 15%,  rgba(255,255,255,.82) 50%, transparent),
    radial-gradient(1.7px 1.7px at 74%  9%,  rgba(255,255,255,.90) 50%, transparent),
    radial-gradient(1.2px 1.2px at 84% 24%,  rgba(255,255,255,.85) 50%, transparent),
    radial-gradient(1.5px 1.5px at 94% 12%,  rgba(255,255,255,.88) 50%, transparent),
    radial-gradient(1px   1px   at  9% 38%,  rgba(255,255,255,.75) 50%, transparent),
    radial-gradient(1px   1px   at 20% 52%,  rgba(255,255,255,.70) 50%, transparent),
    radial-gradient(1.3px 1.3px at 32% 44%,  rgba(255,255,255,.80) 50%, transparent),
    radial-gradient(1px   1px   at 44% 60%,  rgba(255,255,255,.72) 50%, transparent),
    radial-gradient(1.2px 1.2px at 56% 42%,  rgba(255,255,255,.78) 50%, transparent),
    radial-gradient(1px   1px   at 68% 55%,  rgba(255,255,255,.70) 50%, transparent),
    radial-gradient(1.4px 1.4px at 79% 48%,  rgba(255,255,255,.82) 50%, transparent),
    radial-gradient(1px   1px   at 90% 62%,  rgba(255,255,255,.75) 50%, transparent),
    radial-gradient(1px   1px   at 15% 78%,  rgba(255,255,255,.65) 50%, transparent),
    radial-gradient(1.2px 1.2px at 38% 85%,  rgba(255,255,255,.72) 50%, transparent),
    radial-gradient(1px   1px   at 62% 75%,  rgba(255,255,255,.68) 50%, transparent),
    radial-gradient(1.3px 1.3px at 82% 88%,  rgba(255,255,255,.70) 50%, transparent);

  background-size: 100% 100%;
  opacity: .80;

  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );

  animation: starTwinkle 8s ease-in-out infinite alternate;
}

/* Contenido de ignite encima de las estrellas */
.ignite .container {
  position: relative;
  z-index: 1;
}

.ignite__glow {
  z-index: 0;
}