/* ============================================================
   DATARGET — coming soon
   Static, dependency-free layout.
   Art direction aligned with ../datarget-landing:
   Inter Tight typeface, coral wordmark, black canvas.
   ============================================================ */

:root {
  --bg: #0b0b0f; /* cool near-black (was pure #000, felt cheap on OLED) */
  --bg-elev: #101017; /* slightly raised flats if needed */
  --fg: #ffffff;
  --muted: rgba(255, 255, 255, 0.42);
  --subtitle: rgba(255, 255, 255, 0.75);
  --coral: #ff6b5c; /* brand accent — warmer coral, wordmark + heart */
  --gold: #e8c961; /* logo yellow */
  --blue: #759fff; /* logo blue */
}

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

html,
body {
  height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter Tight", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  min-height: 100dvh;
  display: flex;
  flex-direction: column;

  /* Gentle initial reveal of the whole page. */
  animation: page-in 1.2s ease both;
}

/* ---------- Stage (title-first, centered, lots of empty space) ---------- */

.stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(0.75rem, 2.5vw, 1.5rem);
  padding: 8vh 1.5rem 4vh;
}

/* Subtle coral glow behind the wordmark so the brand colour lives in the
   canvas, not only in the logo. Sits behind the text (z-index 0 within
   .stage's stacking context). */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    60% 45% at 50% 42%,
    rgba(255, 107, 92, 0.14),
    rgba(255, 107, 92, 0) 70%
  );
  pointer-events: none;
}

/* ---------- Wordmark + glitch ---------- */

.wordmark {
  position: relative;
  display: inline-block;
  margin: 0;
  font-weight: 900;
  /* Match datarget-landing: ~80px on mobile, 200px from md up. */
  font-size: clamp(3rem, 18vw, 200px);
  letter-spacing: -0.025em; /* tracking-tight, like the landing */
  line-height: 1.02;
  color: var(--coral);
}

.wordmark .word {
  position: relative;
  z-index: 2;
  display: inline-block;
  /* Stop layout shifting while letters scramble to varying widths. */
  white-space: nowrap;
  transition: opacity 0.25s ease; /* crossfade between finale words */
}

/* Hundreds-of-ASCII corruption band, sitting behind the title. */
.wordmark .glitch-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 96vw;
  max-width: 1100px;
  height: clamp(4rem, 20vw, 13rem);
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, "Cascadia Code", monospace;
  font-weight: 500;
  font-size: clamp(8px, 2.1vw, 16px);
  line-height: 1.15;
  letter-spacing: 0.05em;
  word-break: break-all;
  text-align: center;
  color: var(--coral);
  opacity: 0;
  transition: opacity 0.6s ease; /* gentle fade-out when streaming stops */
  pointer-events: none;
  user-select: none;
}

.wordmark.is-streaming .glitch-layer {
  opacity: 0.62;
  transition: none; /* appears instantly, only the fade-out is eased */
}

/* Subtle chromatic split + faint jitter during the glitch. */
.wordmark.is-glitching .word {
  text-shadow: 0.018em 0 rgba(0, 255, 255, 0.4),
    -0.018em 0 rgba(255, 0, 90, 0.4);
  animation: jitter 0.14s steps(2, end) infinite;
}

/* Subtle blink as it settles. */
.wordmark.is-blinking .word {
  animation: blink 0.16s steps(1, end) 2;
}

/* Finale-word flicker (sharp few-ms opacity cuts) is driven in glitch.js
   so it can be random + frequent — see startFlicker(). */

.subtitle {
  margin: 0;
  /* Small uppercase reads better at 600 with positive tracking than 900. */
  font-weight: 600;
  /* Smaller on mobile, 24px from md up. */
  font-size: 20px;
  letter-spacing: 0.08em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--subtitle);
  transition: opacity 0.4s ease;
}

@media (min-width: 768px) {
  .subtitle {
    font-size: 24px;
  }
}

.contact {
  margin: 0;
  /* 300/10px was too fragile — bump weight & size, add tracking. */
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--subtitle);
  transition: opacity 0.4s ease;
}

@media (min-width: 768px) {
  .contact {
    font-size: 14px;
  }
}

/* ---------- End-of-cycle finale (EXPLORE / PUBLISH / DATARGET) ---------- */

/* Loading-style percentage under the bar. */
.cycle-pct {
  margin: 0.45rem 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, "Cascadia Code", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-indent: 0.28em; /* optical centering against the tracking */
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  transition: opacity 0.4s ease;
}

/* The finale words are shown one at a time in the wordmark itself (same size),
   so here we just fade the subtitle + bar + percentage out of the way. */
.subwrap.is-finale .subtitle,
.subwrap.is-finale .cycle,
.subwrap.is-finale .cycle-pct {
  opacity: 0;
}

/* ---------- Finale-only trio progress bar (AI/DATA/KNOWLEDGE) ---------- */
/* Same look AND drag behavior as the cycle bar below: track + fill +
   thumb (bigger, easier to grab), same % caption typo. Draggable/
   clickable/arrow-keyable to seek between AI/DATA/KNOWLEDGE — see
   glitch.js's trio drag block. Hidden + inert (pointer-events:none)
   outside the trio. */

.trio-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: 0.35rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.trio-wrap.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.trio-bar {
  width: min(60vw, 220px);
  padding: 6px 0; /* matches .cycle's hit-area spacing, keeps the thumb clear */
  cursor: pointer;
  touch-action: none;
  outline: none;
}

.trio-bar-track {
  position: relative;
  height: 2px;
  background: rgba(255, 255, 255, 0.12); /* matches .cycle-track */
}

.trio-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: rgba(255, 255, 255, 0.4); /* discreet grey, matches .cycle-fill */
  transition: width 0.3s ease;
}

.trio-bar-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 10px; /* bigger than .cycle-thumb (6px) — easier to grab */
  height: 10px;
  margin-left: -5px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6); /* matches .cycle-thumb */
  /* Slower than .cycle-thumb's hover pop (0.15s) — calmer, less snappy. */
  transition: left 0.3s ease, width 0.3s ease, height 0.3s ease, background 0.3s ease;
}

.trio-bar:hover .trio-bar-thumb,
.trio-bar:focus-visible .trio-bar-thumb {
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  background: rgba(255, 255, 255, 0.85);
}

.trio-bar:hover .trio-bar-fill,
.trio-bar:focus-visible .trio-bar-fill {
  background: rgba(255, 255, 255, 0.65);
}

/* While dragging, follow the pointer instantly (no easing lag). */
.trio-bar.is-dragging .trio-bar-fill,
.trio-bar.is-dragging .trio-bar-thumb {
  transition: none;
}

/* Same typo as .cycle-pct. */
.trio-pct {
  margin: 0.45rem 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, "Cascadia Code", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

/* ---------- Subtitle + cycle bar block (kept tight together) ---------- */

.subwrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0; /* bar hugs the subtitle (spacing comes from .cycle padding only) */
}

/* ---------- Cycle progress bar (interactive) ---------- */

.cycle {
  width: 100%; /* matched to the subtitle width via JS */
  padding: 6px 0; /* small hit area; keeps the bar tight under the subtitle */
  cursor: pointer;
  touch-action: none;
  outline: none;
  transition: opacity 0.4s ease;
}

.cycle-track {
  position: relative;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
}

.cycle-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: rgba(255, 255, 255, 0.4); /* discreet grey */
  transition: background 0.2s ease; /* width is animated continuously in JS */
}

.cycle-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6); /* discreet grey */
  transition: width 0.15s ease, height 0.15s ease, background 0.2s ease;
}

.cycle:hover .cycle-thumb,
.cycle:focus-visible .cycle-thumb {
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  background: rgba(255, 255, 255, 0.85);
}

.cycle:hover .cycle-fill,
.cycle:focus-visible .cycle-fill {
  background: rgba(255, 255, 255, 0.65);
}

/* While dragging, follow the pointer instantly (no easing lag). */
.cycle.is-dragging .cycle-fill,
.cycle.is-dragging .cycle-thumb {
  transition: none;
}

/* ---------- Footer ---------- */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 1.25rem;
  padding: 2rem 1.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.footer-mark {
  height: 11px;
  width: auto;
  opacity: 0.85;
}

.footer .heart {
  color: var(--coral);
  margin: 0 0.15em;
}

.footer a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer a:hover,
.footer a:focus-visible {
  color: var(--fg);
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

/* ---------- Connected-nodes background (network.js) ---------- */

.network {
  position: fixed;
  inset: 0;
  z-index: 0; /* above --bg, below grain + content */
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Hollow the network out behind the title, dense on the edges — keeps the
     wordmark + subtitle perfectly legible while raising overall density. */
  -webkit-mask-image: radial-gradient(60% 50% at 50% 45%, transparent 0%, #000 75%);
  mask-image: radial-gradient(60% 50% at 50% 45%, transparent 0%, #000 75%);
}

/* ---------- Film grain overlay ---------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.045;
  /* Self-contained SVG noise — no extra request. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Tile is 160px, so a 160px shift loops seamlessly — steps() = film jitter. */
  animation: grain-shift 1.1s steps(6) infinite;
}

/* Keep real content above the grain. */
.stage,
.footer {
  position: relative;
  z-index: 2;
}

/* ---------- Accessibility helper ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Animations ---------- */

@keyframes page-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes grain-shift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 160px 160px;
  }
}

@keyframes jitter {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-0.5px, 0.5px);
  }
  100% {
    transform: translate(0.5px, -0.5px);
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* Respect users who prefer no motion — no reveal, no glitch. */
@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }
  .wordmark.is-glitching .word,
  .wordmark.is-blinking .word {
    animation: none;
    text-shadow: none;
  }
  .wordmark.is-streaming .glitch-layer {
    opacity: 0;
  }
  /* Freeze the film grain (network.js renders a single static frame itself). */
  .grain {
    animation: none;
  }
  /* The cycle never advances without motion — a 0% bar looks broken, hide it. */
  .cycle,
  .cycle-pct {
    display: none;
  }
}