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

   ── HOW TO TUNE THE MOTION ──────────────────────────────────────────────────
   All animation durations/easing live in the :root block below (--draw-*,
   --type-*, --reveal-*). Change them there; nothing else needs editing.
   ========================================================================== */

:root {
  /* ── Brand palette (from the deck) ─────────────────────────────────────── */
  --navy:        #04162F;  /* primary dark background            */
  --navy-2:      #0A2540;  /* slightly lighter dark, for variety */
  --ink:         #0A1F3C;  /* headings on light                  */
  --accent:      #2E6BE6;  /* royal blue — links, key words      */
  --mark:        #F2F5FA;  /* hero mark — same off-white as the text */
  --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) ─────────────────────────────────────────── */
  --draw-duration:   5s;                          /* mark outline draw                       */
  --draw-ease:       cubic-bezier(.42,0,.58,1);   /* ease-in-out — smooth, graceful          */
  --fill-duration:   1.1s;                        /* (unused; kept for reference)            */
  --type-speed:      50ms;                         /* per-character type speed  */
  --reveal-duration: 0.8s;
  --reveal-ease:     cubic-bezier(.22,.61,.36,1);
  --reveal-shift:    16px;                          /* fade-up distance          */
  --reveal-stagger:  80ms;                          /* delay between siblings    */

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --wrap:        1120px;
  --wrap-narrow: 720px;
  --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;
  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; }

/* ── Layout helpers ───────────────────────────────────────────────────────── */
.wrap        { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.wrap--narrow{ max-width: var(--wrap-narrow); }

/* ── Section colour blocks (the "sandwich") ─────────────────────────────────── */
.section--dark  { background: var(--navy);   color: var(--on-navy); }
.section--light { background: var(--canvas-2); color: var(--ink); }
.section--alt   { background: var(--canvas); }
section { padding-block: clamp(88px, 14vh, 180px); }

.accent { color: var(--accent); }

/* ============================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: flex-start;   /* logo left */
  padding: 16px var(--pad);
  transition: padding .35s ease, background-color .35s ease, backdrop-filter .35s ease,
              box-shadow .35s ease;
}
/* Full lockup, centered (in flow so it sets the bar height) */
.nav__logo { display: flex; align-items: center; }
.nav__logo img { width: 140px; height: auto; display: block; transition: width .35s ease; }
/* Links pinned to the right, vertically centered */
.nav__links {
  position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%);
  display: flex; gap: clamp(18px, 3vw, 40px);
}
.nav__links a {
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: #FFFFFF; opacity: 1; transition: opacity .25s ease;
}
.nav__links a:hover, .nav__links a:focus-visible { opacity: .62; }

/* condensed state — added by main.js after scroll */
.nav.is-condensed {
  padding-top: 10px; padding-bottom: 10px;
  background: rgba(4, 22, 47, .72);
  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 { width: 116px; }

/* On phones the links don't fit beside the wordmark — hide them (logo stays left).
   TODO: add a proper mobile menu (hamburger) if nav links are wanted on phones. */
@media (max-width: 560px) {
  .nav__links { display: none; }
}

/* ============================================================================
   1 · 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);
  overflow: hidden; text-align: center;
  padding: var(--pad);
}

/* Blueprint motif stand-in: faint drafting grid + radial vignette.
   TODO: to use the real art, drop lykos-blueprint.png in assets/img/ and
   uncomment the background-image line below (it layers under the grid). */
.hero__blueprint {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    /* background-image: url("../img/lykos-blueprint.png"), */
    linear-gradient(rgba(46,107,230,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,107,230,.06) 1px, transparent 1px),
    radial-gradient(ellipse at center, rgba(10,37,64,0) 40%, var(--navy) 78%);
  background-size: 64px 64px, 64px 64px, 100% 100%;
  background-position: center;
}

.hero__inner { position: relative; z-index: 2; max-width: 960px; }

/* Split hero: typed headline (left) + drawn mark (right) */
.hero__split {
  position: relative; z-index: 2; width: 100%;
  max-width: 1480px; margin-inline: auto; padding-inline: var(--pad);
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: clamp(28px, 4vw, 64px);
}
.hero__type { text-align: left; order: 2; }        /* text on the right */
.hero__headline {
  font-size: clamp(1.6rem, 3vw, 2.9rem);
  font-weight: 300; line-height: 1.15; letter-spacing: .005em;
  color: var(--on-navy); margin: 0;
  white-space: nowrap;  /* keep each sentence on one line */
  min-height: 2.4em;    /* reserve two lines so type-in doesn't shift the mark */
}
.hero__mark-wrap { display: flex; justify-content: center; align-items: center; order: 1; } /* mark on the left */
.hero__mark {
  width: min(42vw, 560px); height: auto; max-height: 84vh; overflow: visible;
  opacity: 0; transition: opacity 1.8s ease;   /* gentle fade-in so it emerges softly */
}
.hero__mark.is-drawing { opacity: 1; }
/* Mark draw — the outline is drawn on (stroke-dashoffset → 0) and settles as
   the outline (no fill). stroke-width is in the path's local units (the mark is
   heavily scaled by its group transforms), so ~95 renders as a thin, delicate line. */
.hero__mark .draw-path {
  fill: none;
  stroke: var(--mark);
  stroke-width: 95;          /* thin, delicate drawing line */
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 40000);
  stroke-dashoffset: var(--len, 40000);
}
.hero__mark.is-drawing .draw-path {
  transition: stroke-dashoffset var(--draw-duration) var(--draw-ease);
  stroke-dashoffset: 0;
}

.hero__logo {
  width: min(72vw, 620px); height: auto; margin: 0 auto 2.4rem;
  overflow: visible;
}
/* Logo-draw: strokes drawn on in accent blue, then a soft white fill fades in.
   main.js sets --len per path and toggles .is-drawn / .is-filled. */
.hero__logo .draw-path {
  fill: var(--on-navy);
  fill-opacity: 0;
  stroke: var(--accent);
  stroke-width: 3.4375;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 4000);
  stroke-dashoffset: var(--len, 4000);
}
.hero__logo.is-drawing .draw-path {
  transition: stroke-dashoffset var(--draw-duration) var(--draw-ease);
  stroke-dashoffset: 0;
}
.hero__logo.is-filled .draw-path {
  transition: fill-opacity var(--fill-duration) ease,
              stroke-opacity var(--fill-duration) ease;
  fill-opacity: 1;
  stroke-opacity: 0;
}

.hero__tagline {
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  font-weight: 300; letter-spacing: .02em; color: var(--on-navy);
  min-height: 2.4em; /* reserve space so type-in doesn't shift layout */
}

/* Typing caret — a text-insertion cursor like a word processor.
   Uses currentColor so it matches whatever text it sits in (white in the hero).
   Needs an explicit height or it collapses to a 0-tall, invisible sliver. */
.typed .caret {
  display: inline-block;
  width: 0.07em;
  height: 1em;
  margin-left: 0.06em;
  vertical-align: -0.13em;      /* drop the bar to sit on the text baseline */
  background: currentColor;
  animation: blink 1.06s steps(1) infinite;   /* ~530ms on/off, like a Windows caret */
}
.typed.is-done .caret { animation: none; opacity: 0; }
@keyframes blink { 50% { opacity: 0; } }

.hero__cue {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  z-index: 2; color: var(--slate);
  animation: cue-bob 2.4s ease-in-out infinite;
}
.hero__cue img { width: 20px; height: 20px; opacity: .7; }
@keyframes cue-bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* ============================================================================
   2 · MANIFESTO
   ========================================================================== */
.manifesto .lede {
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 300; line-height: 1.4; letter-spacing: .005em;
  margin-bottom: 1.6em; max-width: 22ch;
}
.manifesto .lede em { color: var(--accent); font-style: italic; }
.manifesto p {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--on-navy); max-width: 68ch; margin-bottom: 1.5em;
}
.manifesto p:last-child { margin-bottom: 0; }
.manifesto p em { color: #C9D6EC; }

/* ============================================================================
   Shared section title
   ========================================================================== */
.section__title {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 400; line-height: 1.15; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink);
  margin-bottom: clamp(48px, 7vh, 88px);
}
.section--dark .section__title { color: var(--on-navy); }

/* ============================================================================
   3 · PLATFORM — pillars
   ========================================================================== */
.pillars {
  display: grid; gap: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pillar { max-width: 34ch; }
.pillar__icon {
  height: 40px; width: auto; margin-bottom: 22px;
  color: var(--slate); /* icons use currentColor */
}
.pillar__title {
  font-size: 1.05rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); margin-bottom: .5em;
}
.pillar__body { font-size: 1rem; color: #55627A; line-height: 1.55; }

/* ============================================================================
   4 · THESIS — logic chain
   ========================================================================== */
.thesis__kicker {
  font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 300; font-style: italic;
  color: var(--accent); margin-top: -.5em; margin-bottom: clamp(40px, 6vh, 72px);
}
.chain { list-style: none; padding: 0; counter-reset: step; }
.chain__item {
  position: relative; padding-left: 2.4em; padding-block: 1.05em;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem); font-weight: 300; line-height: 1.45;
  color: var(--ink); border-top: 1px solid rgba(10,31,60,.12);
}
.chain__item:last-child { border-bottom: 1px solid rgba(10,31,60,.12); }
.chain__item::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 1.35em;
  font-size: .72rem; letter-spacing: .1em; color: var(--slate); font-weight: 500;
}
.chain__item--emph { font-weight: 400; }
.chain__item--emph em { color: var(--accent); font-style: italic; }

/* ============================================================================
   5 · BELIEFS
   ========================================================================== */
.beliefs__list { list-style: none; padding: 0; display: grid; gap: clamp(28px, 4vh, 44px); }
.belief {
  font-size: clamp(1.3rem, 3.2vw, 2.1rem);
  font-weight: 300; line-height: 1.3; letter-spacing: .01em;
  color: var(--accent); min-height: 1.3em;
}
.belief em { color: var(--on-navy); font-style: italic; }

/* ============================================================================
   6 · CLOSING
   ========================================================================== */
.closing { position: relative; text-align: center; overflow: hidden; }
.closing__blueprint {
  position: absolute; inset: 0; pointer-events: none; opacity: .28;
  background:
    linear-gradient(rgba(46,107,230,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,107,230,.05) 1px, transparent 1px),
    radial-gradient(ellipse at center, rgba(10,37,64,0) 45%, var(--navy) 82%);
  background-size: 72px 72px, 72px 72px, 100% 100%;
  background-position: center;
}
.closing__line {
  position: relative; z-index: 2; margin-inline: auto; max-width: 20ch;
  font-size: clamp(1.5rem, 4.5vw, 3rem); font-weight: 300; line-height: 1.25;
  letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy);
}

/* ============================================================================
   7 · FOOTER
   ========================================================================== */
.footer { padding-block: clamp(56px, 8vh, 96px); }
.footer__inner { display: flex; flex-direction: column; gap: 26px; }
.footer__wordmark { width: 200px; height: auto; opacity: .9; }
.footer__meta { display: flex; flex-direction: column; gap: 4px; }
.footer__name { font-size: .95rem; letter-spacing: .08em; color: var(--on-navy); }
.footer__email { color: var(--accent); font-size: .95rem; width: fit-content; }
.footer__email:hover { text-decoration: underline; }
.footer__legal { font-size: .78rem; color: var(--slate); margin-top: 8px; }

/* ============================================================================
   REVEAL — fade-up on scroll (IntersectionObserver adds .is-in)
   ========================================================================== */
.reveal {
  opacity: 0; transform: translateY(var(--reveal-shift));
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
/* Stack the split hero on narrower screens: mark above, headline below. */
@media (max-width: 820px) {
  .hero__split {
    grid-template-columns: 1fr; justify-items: center; text-align: center;
    gap: clamp(28px, 6vh, 48px);
  }
  .hero__type { text-align: center; order: 2; }
  .hero__headline { white-space: normal; } /* allow wrap when stacked/full-width */
  .hero__mark-wrap { order: 1; }
  .hero__mark { width: min(38vw, 180px); }
}
@media (max-width: 640px) {
  .nav__logo img { width: 112px; }
  .nav__links { gap: 14px; }
  .nav__links a { font-size: .68rem; letter-spacing: .06em; }
  .hero__logo { width: 82vw; }
  .pillars { grid-template-columns: 1fr; }
  .manifesto .lede { max-width: none; }
}

/* ============================================================================
   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; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero__logo .draw-path { fill-opacity: 1; stroke-opacity: 0; stroke-dashoffset: 0; }
  .hero__mark { opacity: 1; }
  .hero__mark .draw-path { stroke-opacity: 1; stroke-dashoffset: 0; }
  .hero__cue { animation: none; }
  .typed .caret { display: none; }
}