/* ============================================================
   LUMEN skin v2 — deep-space dark + electric cyan
   Maps the original site's utility color classes to the LUMEN
   palette (nude/white surfaces -> deep blacks, red accents ->
   cyan), plus glow, scrollbar and Ken Burns polish.
   ============================================================ */

html { color-scheme: dark; }

/* ---- surfaces: light -> deep space ---- */
.bg-nude-01 { background-color: #0a0e14 !important; }
.bg-neutral-white { background-color: #0d1219 !important; }
.bg-neutral-white\/30 { background-color: rgba(255, 255, 255, 0.05) !important; }
.bg-neutral-white\/50 { background-color: rgba(255, 255, 255, 0.07) !important; }
.bg-black { background-color: #05080c !important; }
.bg-black\/30 { background-color: rgba(0, 0, 0, 0.5) !important; }
.bg-black\/80 { background-color: rgba(0, 0, 0, 0.85) !important; }
.bg-neutral-black { background-color: #10151d !important; }

/* ---- accents: red -> electric cyan ---- */
.bg-red-01 { background-color: #00e5ff !important; }
.bg-red-02 { background-color: #00c2d9 !important; }
.bg-red-03 { background-color: #009db4 !important; }
[class*="bg-red-0"], [class*="bg-red-0"] .text-neutral-white { color: #04222a !important; }
/* Qualified with a tag so it outranks the plain `.text-neutral-white` rule further down:
   equal specificity + !important means source order decides, and that rule sits later,
   which left the CTA buttons white-on-cyan (contrast 1.54). */
a[class*="bg-red-0"], button[class*="bg-red-0"] { color: #04222a !important; transition: box-shadow 0.25s, filter 0.25s; }
a[class*="bg-red-0"]:hover, button[class*="bg-red-0"]:hover { box-shadow: 0 0 26px rgba(0, 229, 255, 0.5); filter: brightness(1.06); }

/* ---- text ---- */
.text-neutral-black { color: #e8eef5 !important; }
.text-neutral-black\/50 { color: rgba(232, 238, 245, 0.5) !important; }
.text-neutral-gray { color: #8b98a8 !important; }
.text-red-01 { color: #00e5ff !important; }
.text-neutral-white { color: #ffffff !important; }

/* The rebrand mapped the source ink (36 37 50) onto the LUMEN background colour, so
   every rule that painted TEXT with the ink turned invisible. `body` is the worst of
   them: it is the inherited colour, so untagged headings, nav labels, footer links and
   the copyright line all rendered #0a0e14 on #0a0e14 — present in the DOM, invisible on
   screen, which reads as "empty page". Restore the ink to a legible light value. */
body { color: #e8eef5; }
.text-gray-06 { color: #e8eef5 !important; } /* shares its rule with .text-neutral-black */
.hover\:text-neutral-black:hover { color: #e8eef5 !important; }
.group:hover .group-hover\:text-neutral-black { color: #e8eef5 !important; }

/* ---- borders: hard lines -> soft cyan-tinted hairlines ---- */
.border-nude-01,
.border-neutral-black,
.border-neutral-white,
.border-neutral-white\/30,
.border-b-neutral-black\/10,
.border-t-neutral-black\/10 { border-color: rgba(148, 180, 204, 0.16) !important; }
.border-b-red-01 { border-color: #00e5ff !important; }

/* ---- page polish ---- */
body {
  background-color: #0a0e14;
  background-image:
    radial-gradient(1100px 520px at 76% -8%, rgba(0, 229, 255, 0.10), transparent 60%),
    radial-gradient(900px 480px at -8% 14%, rgba(0, 229, 255, 0.05), transparent 55%);
  background-attachment: fixed;
}
h1, h2, h3, h4 { letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; }
a { transition: color 0.2s, text-shadow 0.2s; }
a.text-red-01:hover { text-shadow: 0 0 14px rgba(0, 229, 255, 0.6); }
::selection { background: rgba(0, 229, 255, 0.35); color: #ffffff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0e14; }
::-webkit-scrollbar-thumb { background: #1c2a3a; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #00b8cc; }

/* ---- Ken Burns for replaced video stills ---- */
.lumen-kb { animation: lumenKB 16s ease-in-out infinite alternate; }
@keyframes lumenKB { from { transform: scale(1.02); } to { transform: scale(1.12); } }

/* ---- brand visuals: red renders -> cyan (safety net for any not swapped by JS) ---- */
img[src*="2003_mainshot"],
img[src*="videoframe_7882"],
img[src*="Sequence%252003"],
img[src*="Sequence%252005"],
img[src*="TheRenderNetworkReel"],
img[src*="RenderNetwork_DownloadManager"],
video[src*="Render_Howitworks"],
video[src*="RenderNetwork_LBR"] {
  filter: hue-rotate(180deg) saturate(1.12);
}

/* ---- logos: cancel the original site's invert ----
   The source mark is black/white and the theme flipped it with `invert`, so a
   black logo reads white on dark. Our mark is already authored in LUMEN cyan,
   and inverting cyan (#00E5FF) lands on red (#FF1A00) — exactly the brand we
   are trying not to look like. Turn the invert off wherever the logo renders. */
img[src*="logo.svg"],
img[src*="logotest3"],
img[src*="logo-footer"] {
  filter: none !important;
}

/* ---- footer social icons: the same flip, inverted ----
   Those PNGs are black glyphs drawn for the original light footer, so on the
   LUMEN dark footer they disappear. Here the invert is what we actually want. */
img[src*="file%2Fx.png"],
img[src*="file%2Fmd.png"],
img[src*="file%2Fig.png"],
img[src*="file%2FVector.png"],
img[src*="file%2Flinkedin.png"],
img[src*="file%2Flinked-in.png"] {
  filter: invert(1) brightness(1.15);
}

/* ---- hero loop ----
   Fills the slot the harvested hero video occupied. Rendered at 1280x720 by our own
   engine and encoded to MP4, so it decodes at full resolution instead of being upscaled.
   Do NOT force width/height here: the element inherits the original's layout classes, and
   the sprite-sheet canvas it replaces sized itself the same way. Forcing 100% makes the
   video a 900px-tall block that pushes the hero copy out of the fold. */
.lumen-hero-loop {
  display: block;
  object-fit: cover;
  background: #05080c;
}

/* ---- scroll reveal ----
   .lumen-reveal is added from lumen-visuals.js, never in the markup, so a page without
   JS shows everything instead of leaving blocks stranded at opacity 0. */
.lumen-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.lumen-reveal.lumen-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lumen-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- "In the News" logos ----
   Those marks are dark artwork drawn for the original light background; on the LUMEN
   dark band they are nearly invisible. Same flip as the footer social icons. */
img[src*="file%2Ffast-c"],
img[src*="file%2Fventure-b"],
img[src*="file%2Fcoindesk"],
img[src*="file%2Ffxguide"],
img[src*="file%2Fvariaty"],
img[src*="file%2Fharvard"] {
  filter: invert(1) brightness(1.25) contrast(0.95);
  opacity: 0.82;
  transition: opacity 0.25s, filter 0.25s;
}
img[src*="file%2Ffast-c"]:hover,
img[src*="file%2Fventure-b"]:hover,
img[src*="file%2Fcoindesk"]:hover,
img[src*="file%2Ffxguide"]:hover,
img[src*="file%2Fvariaty"]:hover,
img[src*="file%2Fharvard"]:hover { opacity: 1; }

/* ---- section rhythm ----
   The source layout leaves a very tall void between a section headline and the cards
   that belong to it. Cap the worst offenders without touching the intended full-bleed
   spacing around the hero. */
section > div { scroll-margin-top: 96px; }
/* Carousel slides stretch to the height of the tallest one and then push their contents
   apart with justify-between, so every shorter slide opens a tall void through its middle.
   Collapse the distribution and let the content sit at the top of the slide instead.
   The hero uses the same flex-col + justify-between pair to distribute its own content
   down the full-height hero, so it must be excluded or its copy slides under the nav. */
[class*="flex-col"][class*="justify-between"] { justify-content: flex-start !important; }
.block-hero-intersection [class*="flex-col"][class*="justify-between"] { justify-content: space-between !important; }

/* ---- interaction polish ---- */
img { transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.3s; }
a:hover > img, a:hover img { transform: scale(1.02); }
button, a[class*="rounded-"] { transition: box-shadow 0.25s, filter 0.25s, transform 0.25s; }
button:hover, a[class*="rounded-"]:hover { transform: translateY(-1px); }

/* ---- social links other than X ----
   X is the only social account this site links to. The remaining links live in the RSC
   payload, where they are shared rows referenced by id from more than one place — deleting
   them there breaks hydration ("Cannot read properties of undefined (reading '$$typeof')").
   Hiding them is the safe lever: the anchor and its whole list row disappear, icon included. */
a[href*="medium.com"],
a[href*="instagram.com"],
a[href*="facebook.com"],
a[href*="linkedin.com"],
a[href*="//t.me/"],
li:has(> a[href*="medium.com"]),
li:has(> a[href*="instagram.com"]),
li:has(> a[href*="facebook.com"]),
li:has(> a[href*="linkedin.com"]),
li:has(> a[href*="//t.me/"]) {
  display: none !important;
}