/* ============================================================================
   LYKOS GLOBAL MANAGEMENT — styles.css
   Editorial, institutional, quiet. Dark-navy / light "sandwich" rhythm.

   ── HOW TO TUNE THE MOTION ──────────────────────────────────────────────────
   All animation timing lives in the :root block below (--type-*). The
   schematic draw timing lives inline in main.js (initSchematicDraw).
   ========================================================================== */

/* Real Gotham Medium (licensed file supplied by MP, converted to woff2).
   Declared across 400–500 so the hero sentences — which request 400 —
   pick it up through the existing `Gotham, ..., Montserrat` stack.
   Montserrat remains the fallback while the file loads (font-display: swap). */
@font-face {
  font-family: "Gotham";
  src: url("../fonts/gotham-medium.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brand palette (from the deck) ─────────────────────────────────────── */
  --navy:        #001528;  /* primary dark background            */
  --navy-2:      #0A2540;  /* slightly lighter dark, for variety */
  --ink:         #0A1F3C;  /* headings on light                  */
  --accent:      #2E6BE6;  /* royal blue — links, key words      */
  --canvas:      #E9EBEE;  /* light section background           */
  --canvas-2:    #F7F8FA;  /* near-white light section           */
  --on-navy:     #F2F5FA;  /* off-white text on navy             */
  --slate:       #7C8AA0;  /* muted captions / footnotes         */

  /* ── Type ──────────────────────────────────────────────────────────────── */
  --font: "Inter", "Neue Haas Grotesk Display", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ── Motion timing (tune here) ─────────────────────────────────────────── */
  --type-speed:      50ms;                         /* per-character speed — exactly 3 frames at 60Hz, so the cadence never gallops */
  --line-pause:      650ms;                        /* hold before a line break  */

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --pad:         clamp(24px, 6vw, 96px);
}

/* ── Reset / base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow: hidden;        /* single full-viewport page — no scrolling */
  /* drafting-table pointer, drawn at 50% so it sits quiet on the navy;
     hotspot at the cross centre; native crosshair as fallback. Links keep
     the UA hand. */
  cursor: url("../img/cursor-crosshair.png?v=2") 12 12, crosshair;
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--navy);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
h1, h2, h3, p, ul, ol { margin: 0; }

/* ============================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: flex-start;   /* logo left */
  padding: 23px var(--pad);   /* symmetric — logo and login share one optical centerline */
  transition: padding .35s ease, background-color .35s ease, backdrop-filter .35s ease,
              box-shadow .35s ease;
}
/* Mark-only logo (L + blue bar), balanced against the Investor Login frame:
   the mark's ink fills ~70% of its canvas, so 42px canvas ≈ 29px of ink —
   the same visual height as the button's ~30px bracket frame. */
.nav__logo { display: flex; align-items: center; }
.nav__logo img { height: 42px; width: auto; display: block; transition: height .35s ease; }
/* Investor Login — drafting-style label framed by technical corner ticks
   (like registration marks on a schematic), monospace to echo the footer. */
.nav__login {
  position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-navy); padding: 7px 16px; white-space: nowrap;   /* ~28px tall — matches the logo's height */
  transition: color .3s ease;
}
.nav__login::before, .nav__login::after {   /* two diagonal corner brackets */
  content: ""; position: absolute; width: 8px; height: 8px; pointer-events: none;
  border: 1px solid rgba(242, 245, 250, .4);
  transition: border-color .3s ease, width .3s ease, height .3s ease;
}
.nav__login::before { top: 0; left: 0;  border-right: 0; border-bottom: 0; }   /* ⌐ top-left */
.nav__login::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }    /* ¬ bottom-right */
.nav__login:hover, .nav__login:focus-visible { color: #277AE6; }
.nav__login:hover::before, .nav__login:focus-visible::before,
.nav__login:hover::after,  .nav__login:focus-visible::after {
  border-color: #277AE6; width: 12px; height: 12px;   /* corners open outward */
}

/* condensed state — added by main.js after scroll */
.nav.is-condensed {
  padding-top: 10px; padding-bottom: 10px;
  background: rgba(0, 21, 40, .82);   /* matches --navy */
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 1px 0 rgba(242, 245, 250, .08);
}
.nav.is-condensed .nav__logo img { height: 36px; }

/* Phones: tighten the login button */
@media (max-width: 560px) {
  .nav__login { padding: 10px 14px; font-size: .62rem; letter-spacing: .12em; }
}

/* ============================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--navy); color: var(--on-navy);   /* one navy across the whole page (matches footer) */
  overflow: hidden; text-align: center;
  padding: var(--pad);
}

/* ── Raster wipe: the fallback intro for no-JS / reduced-motion / vector-
     fetch-failure visitors. The 1.2MB PNG is deliberately NOT referenced
     here — that would download it on every normal visit only to hide it.
     It loads only when actually needed: via a <noscript> style in the HTML
     (no-JS visitors) or via the .hero--raster class main.js adds when it
     declines the vector draw. The 1s delay keeps the wipe invisible on
     normal loads while the vector path takes over. ── */
.hero__plot {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: center / contain no-repeat;
  /* Match the settled vector's quietness (see .hero__schematic) so the
     fallback paths — reduced-motion, no-JS, fetch-failure — render the
     INTENDED final frame (a dim blueprint behind the text) instead of a
     bold, dominant plot that reads as an old/unfinished version. */
  opacity: .25;
  filter: saturate(.6);
  clip-path: inset(0 100% 0 0);                 /* hidden; wipes open left → right */
  animation: bp-plot 6s cubic-bezier(.37, 0, .16, 1) 1s forwards;
}
.hero--raster .hero__plot { background-image: url("../img/lykos-schematic.png?v=2"); }
@keyframes bp-plot { to { clip-path: inset(0 0 0 0); } }

/* ── True stroke-draw (vector schematic) ─────────────────────────────────
   main.js fetches lykos-schematic.svg (5 tonal layers, darkest→lightest),
   injects it, splits every layer into its individual subpaths, and draws
   them line-by-line as stroke-only fragments (dash patterns restart per
   subpath, so a compound path can't be drawn sequentially in one go). Each
   layer then crossfades from the fragments to its true compound fill. All
   draw timing is inline from JS. When JS takes this path it puts
   .hero--draw on the hero, retiring the raster wipe (it remains
   the no-JS fallback). */
.hero__schematic {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .25;            /* half of the previous half — well behind the headline */
  filter: saturate(.6);    /* pull the lines toward grey so the white text owns the contrast */
}

/* Minimal footer line, pinned bottom-center of the single-viewport page */
.pagefoot {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 50; margin: 0; white-space: nowrap;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  text-transform: uppercase;
  font-size: .66rem; letter-spacing: .08em; color: var(--slate);
  text-align: center;
}
.pagefoot a { color: var(--slate); transition: color .25s ease; }
.pagefoot a:hover, .pagefoot a:focus-visible { color: #277AE6; }
.pagefoot__sep { margin: 0 8px; opacity: .5; }
.pagefoot__links { display: block; margin-bottom: 7px; }   /* links line sits over the © line */
@media (max-width: 600px) {
  .pagefoot {
    font-size: .56rem; white-space: normal; line-height: 1.6;
    width: 92vw; text-align: center; bottom: 12px;
  }
}

.hero__schematic svg { width: 100%; height: 100%; display: block; }
.hero__schematic svg > rect { display: none; }  /* drop the baked-in bg so lines draw straight on the hero navy (no band edge) */
.hero--draw .hero__plot { display: none; }
.hero--draw .hero__statement {
  animation: none; opacity: 0; transform: translateY(12px);
  transition: opacity 1.5s ease, transform 1.5s ease;
}
.hero--draw.is-said .hero__statement { opacity: 1; transform: none; }

.hero__statement {
  position: absolute; left: 0; right: 0; z-index: 2; margin: 0; padding-inline: var(--pad);
  /* vertically at the artwork's centre line; horizontally on the TRUE
     viewport centre — the artwork's letters are viewBox-panned onto the
     same axis (main.js), so headline, letters and footer all agree */
  top: 50%;
  margin-left: 0;
  opacity: 0;
  animation: bp-say 1.5s ease 6.2s forwards;    /* fades in once the blueprint finishes */
}
/* (text sits below the artwork on clean navy — no scrim needed) */
@keyframes bp-say { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.hero__line {
  /* Rotating sentences are stacked on the same spot and cross-faded. */
  position: absolute; left: 0; right: 0; top: 0; margin: 0;
  font-family: Gotham, "Gotham SSm A", "Gotham SSm B", Montserrat, "Aptos Display", var(--font), sans-serif;  /* real Gotham Medium ships via @font-face; Montserrat is the loading/failure fallback */
  font-size: clamp(.8rem, 2.2vw, 2.35rem);  /* scales with viewport so the line never breaks */
  font-weight: 400; line-height: 1.28; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--on-navy);
  opacity: 0; transition: opacity .7s ease;   /* must match FADE in main.js */
}
.hero__line.is-active { opacity: 1; }
.hero__line .hl { color: #277AE6; }   /* the two brand phrases pop in blue */
@media (max-width: 600px) {
  .hero__line {
    white-space: normal;                                  /* phones: wrap (NO text-wrap:balance — it re-splits
                                                             the lines as the caret moves, which reads as chop) */
    font-size: clamp(1.1rem, 5.6vw, 1.7rem);              /* generous setting over the portrait sheet */
  }
  .hero__statement {
    margin-left: 0; padding-inline: 20px;
    /* the block is TWO lines here — pull up one line height (5.6vw font
       × 1.28 line-height) so the block truly centres on the viewport
       instead of hanging from the 50% line */
    top: calc(50% - 7.2vw);
  }
}

/* ── Portrait phones: the sheet stays LANDSCAPE (portrait rotation was
     tried and rejected), pulled close — the artwork renders at 160vw so
     the LYKOS band fills the screen width and the scaffolding edges crop
     off-canvas like a drawing viewed up close. The viewBox pan keeps the
     letters dead-centred within the crop. ── */
@media (max-width: 700px) and (orientation: portrait) {
  .hero__schematic svg {
    width: 160vw; max-width: none;   /* max-width: none beats the global svg clamp */
    height: 100%; margin-left: -30vw;
  }
  .hero__plot { background-size: 160vw auto; }   /* no-JS raster fallback matches */
}

@media (prefers-reduced-motion: reduce) {
  .hero__plot { clip-path: none; animation: none; }
  .hero__statement { opacity: 1; animation: none; }
}

/* Typing caret — a text-insertion cursor like a word processor.
   Always WHITE, even when it sits inside the blue .hl phrases.
   Needs an explicit height or it collapses to a 0-tall, invisible sliver. */
.typed .caret {
  display: inline-block;
  position: absolute;           /* OUT OF FLOW: renders at its natural spot but takes
                                   zero space, so moving it during typing can never
                                   shift the wrap point (words flickered between
                                   lines on phones) or stretch the line box */
  width: 0.09em;
  height: 1em;
  margin-left: 0.06em;
  margin-top: 0.12em;           /* out-of-flow boxes ignore vertical-align: sit at the
                                   line-box top + this nudge = centred on the capitals */
  background: #FFFFFF;
  animation: blink 1.06s steps(1) infinite;   /* ~530ms on/off, like a Windows caret */
}
/* The caret keeps blinking through hand-offs; main.js fades it out for
   good shortly after the final sentence completes. */
@keyframes blink { 50% { opacity: 0; } }

/* ============================================================================
   DOC PAGES (legal / privacy) — scrolling text pages in the site's chrome:
   same navy, mark + login nav (scrolls away), mono kickers, quiet body copy.
   ========================================================================== */
body.docpage { overflow: auto; }
/* nav stays FIXED on doc pages; main.js adds .is-condensed past 40px of
   scroll, which gives it the opaque blurred backdrop */
/* Doc content is deliberately PLAIN per the user: white text, 14px, no
   decorative treatments — just a readable column. */
.doc {
  max-width: 780px; margin: 0 auto; text-align: left;
  padding: clamp(120px, 18vh, 170px) 24px 20px;
  color: #FFFFFF;
}
.doc__title { font-size: 1.4rem; font-weight: 600; color: #FFFFFF; margin: 0 0 8px; }
.doc__date { font-size: 10px; color: #FFFFFF; margin: 0 0 24px; }
.doc h2 { font-size: 10px; font-weight: 700; color: #FFFFFF; margin: 1.8em 0 .8em; }
.doc p, .doc li { font-size: 10px; line-height: 1.7; color: #FFFFFF; }
.doc p { margin: 0 0 1em; }
.doc ul { margin: 0 0 1em; padding-left: 1.25em; }
.doc li { margin: 0 0 .35em; }
.doc a { color: #FFFFFF; text-decoration: underline; }
.docpage .pagefoot { position: static; transform: none; margin: 70px auto 26px; text-align: center; }


/* Text selection carries the brand — most visible on the document pages */
::selection { background: #277AE6; color: #001528; }

/* Typed characters appear crisply the instant they land (no fade — the
   frame-aligned cadence in main.js alone keeps the rhythm smooth). */
.typed .ch { opacity: 0; }
.typed .ch.is-on { opacity: 1; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 640px) {
  .nav__logo img { height: 36px; width: auto; }
}

/* ============================================================================
   REDUCED MOTION — honour user preference everywhere.
   Everything jumps to its final state; no draw, no typing, no bobbing.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; }
  .typed .caret { display: none; }
}