/* ===========================================================================
   Design Stream — the public landing page
   ===========================================================================
   The one page on library.monomind.one that anyone can load. It has a single
   job: tell a signed-out visitor what is behind the door, and give them the
   door.

   Dark by commitment, not by preference. The library itself is theme-aware
   (light by default, dark on toggle); this page is not, because it is the
   product's first impression and a hero built out of light on black cannot be
   re-lit for a white background without becoming a different design. Colours
   are therefore painted explicitly rather than inherited.

   The palette is the product's own (gallery/library.html :root), so the page
   you sign in FROM and the page you sign in TO are visibly the same software:
   #0000FF is the brand accent, and — exactly as the library's dark theme does
   — it is lightened toward BLUE (#6E9BFF), never toward grey, whenever it has
   to be legible as text. #0000FF on near-black is 2.0:1 and unreadable.

   Motion: gradients drift, a beam sweeps, sections rise as they enter. All of
   it is transform/opacity so it stays on the compositor, and all of it stops
   dead under prefers-reduced-motion — see the block at the bottom, which is
   the authority, not a courtesy.
   ========================================================================= */

:root{
  color-scheme: dark;

  --bg:#05060A;
  --bg-2:#080A11;
  --panel:rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  --fg:#F4F6FB;
  --fg-2:#A7AEC2;
  --fg-3:#727A8E;

  /* Brand blue, and the lightened blue it becomes when it has to be read. */
  --accent:#0000FF;
  --accent-lift:#2B4BFF;
  --accent-ink:#6E9BFF;
  --accent-fg:#FFFFFF;

  --r-sm:8px; --r:14px; --r-lg:22px; --pill:999px;
  --dur:200ms; --ease:cubic-bezier(.22,.8,.28,1);

  --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Inter Tight','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;

  --shell:1160px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'cv11','ss01';
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none;}
h1,h2,h3{margin:0; font-family:var(--font-display); letter-spacing:-.028em; line-height:1.05;}
p{margin:0;}
img,svg{display:block; max-width:100%;}
::selection{background:var(--accent-ink); color:#05060A;}

:focus-visible{
  outline:2px solid var(--accent-ink);
  outline-offset:3px;
  border-radius:6px;
}

.shell{width:100%; max-width:var(--shell); margin:0 auto; padding:0 24px;}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent-lift); color:#fff; padding:12px 18px; border-radius:0 0 var(--r-sm) 0;
  font-weight:600;
}
.skip:focus{left:0;}

/* ===========================================================================
   Backdrop — beams, glows, grid
   ---------------------------------------------------------------------------
   One fixed layer behind everything, `aria-hidden` and pointer-transparent.
   Keeping it fixed rather than per-section means the whole page scrolls
   THROUGH one continuous light source instead of restating it four times.
   ========================================================================= */
.backdrop{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, #0B1030 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 45%);
}

/* Blueprint grid, faded out toward the bottom so it reads as depth rather
   than as a texture laid over the copy. */
.backdrop .grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(90% 60% at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(90% 60% at 50% 0%, #000 0%, transparent 75%);
}

/* Soft colour fields. Big, blurred, slow — they are the room's lighting. */
.glow{
  position:absolute; border-radius:50%;
  filter:blur(90px);
  opacity:.55;
  will-change:transform;
}
.glow.a{
  width:52vw; height:52vw; min-width:420px; min-height:420px;
  left:-12vw; top:-18vw;
  background:radial-gradient(circle, rgba(43,75,255,.55) 0%, rgba(43,75,255,0) 70%);
  animation:drift-a 26s var(--ease) infinite alternate;
}
.glow.b{
  width:46vw; height:46vw; min-width:380px; min-height:380px;
  right:-14vw; top:-6vw;
  background:radial-gradient(circle, rgba(120,60,255,.42) 0%, rgba(120,60,255,0) 70%);
  animation:drift-b 32s var(--ease) infinite alternate;
}
.glow.c{
  width:60vw; height:38vw; min-width:420px; min-height:280px;
  left:22vw; top:52vh;
  background:radial-gradient(circle, rgba(0,140,255,.22) 0%, rgba(0,140,255,0) 70%);
  animation:drift-c 38s var(--ease) infinite alternate;
}

@keyframes drift-a{ from{transform:translate3d(0,0,0) scale(1);}   to{transform:translate3d(7vw,5vh,0) scale(1.12);} }
@keyframes drift-b{ from{transform:translate3d(0,0,0) scale(1.08);} to{transform:translate3d(-6vw,7vh,0) scale(.94);} }
@keyframes drift-c{ from{transform:translate3d(0,0,0) scale(1);}    to{transform:translate3d(-9vw,-6vh,0) scale(1.15);} }

/* The beams: thin, bright, and rotated — the line of light an Aceternity hero
   is built around. They sweep rather than pulse, so nothing blinks. */
.beam{
  position:absolute; top:-40vh; width:2px; height:150vh;
  background:linear-gradient(180deg, transparent 0%, var(--accent-ink) 35%, #C9D8FF 50%, var(--accent-ink) 65%, transparent 100%);
  opacity:0; filter:blur(.5px);
  will-change:transform,opacity;
}
.beam::after{
  content:""; position:absolute; inset:-1px -40px;
  background:linear-gradient(180deg, transparent, rgba(110,155,255,.16) 50%, transparent);
  filter:blur(24px);
}
.beam.b1{left:18%;  transform:rotate(14deg);  animation:sweep 11s linear infinite;}
.beam.b2{left:52%;  transform:rotate(-9deg);  animation:sweep 15s linear infinite 3.5s;}
.beam.b3{left:81%;  transform:rotate(18deg);  animation:sweep 13s linear infinite 7s;}

@keyframes sweep{
  0%   {opacity:0;   transform:translateY(-30vh) rotate(var(--tilt, 14deg));}
  12%  {opacity:.75;}
  70%  {opacity:.55;}
  100% {opacity:0;   transform:translateY(60vh)  rotate(var(--tilt, 14deg));}
}
.beam.b1{--tilt:14deg;}
.beam.b2{--tilt:-9deg;}
.beam.b3{--tilt:18deg;}

/* Everything readable sits above the backdrop. */
.page{position:relative; z-index:1;}

/* ===========================================================================
   Nav
   ========================================================================= */
.nav{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav.stuck{border-bottom-color:var(--line);}
.nav .shell{display:flex; align-items:center; gap:16px; height:66px;}

.brand{display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-.02em;}
.brand .mark{width:22px; height:22px; color:var(--fg);}
.brand .mark svg{width:100%; height:100%;}
.brand .name{font-size:16px;}
.brand .org{
  font-family:var(--font-mono); font-size:11px; color:var(--fg-3);
  border-left:1px solid var(--line-2); padding-left:10px; margin-left:2px;
  letter-spacing:.04em; text-transform:uppercase;
}
.nav .spacer{flex:1;}
.nav-links{display:flex; align-items:center; gap:22px;}
.nav-links a{font-size:14px; color:var(--fg-2); transition:color var(--dur) var(--ease);}
.nav-links a:hover{color:var(--fg);}

/* ===========================================================================
   Buttons
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:44px; padding:0 20px; border-radius:var(--pill);
  font-size:14.5px; font-weight:600; letter-spacing:-.005em;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  font-family:inherit;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease),
             border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn svg{width:16px; height:16px;}
.btn.primary{
  color:var(--accent-fg);
  background:linear-gradient(180deg, var(--accent-lift) 0%, var(--accent) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 10px 30px -10px rgba(43,75,255,.85);
}
.btn.primary:hover{transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 16px 40px -12px rgba(43,75,255,1);}
.btn.primary:active{transform:translateY(0);}
.btn.ghost{
  color:var(--fg); background:var(--panel); border-color:var(--line-2);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.btn.ghost:hover{background:var(--panel-2); border-color:rgba(255,255,255,.28); transform:translateY(-1px);}
.btn.sm{height:36px; padding:0 16px; font-size:13.5px;}
.btn.link{
  height:auto; padding:0; background:none; border:none; color:var(--accent-ink);
  font-weight:500; font-size:13.5px; text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(110,155,255,.4);
}
.btn.link:hover{text-decoration-color:var(--accent-ink);}

/* ===========================================================================
   Hero
   ========================================================================= */
.hero{padding:clamp(64px, 12vh, 132px) 0 clamp(56px, 9vh, 104px); text-align:center;}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  height:32px; padding:0 14px 0 10px; border-radius:var(--pill);
  background:var(--panel); border:1px solid var(--line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:12.5px; color:var(--fg-2); letter-spacing:.01em;
  margin-bottom:26px;
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent-ink);
  box-shadow:0 0 0 3px rgba(110,155,255,.18);
  animation:pulse 2.8s var(--ease) infinite;
}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}

h1.display{
  font-size:clamp(2.6rem, 7.2vw, 5.1rem);
  font-weight:700;
  letter-spacing:-.042em;
  max-width:16ch;
  margin:0 auto;
  background:linear-gradient(180deg, #FFFFFF 30%, #A9B6DA 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h1.display .lit{
  background:linear-gradient(100deg, var(--accent-ink) 0%, #B9CBFF 45%, var(--accent-ink) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.lede{
  max-width:60ch; margin:26px auto 0;
  font-size:clamp(1rem, 1.6vw, 1.15rem); color:var(--fg-2);
}

.cta-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px;}
.fineprint{margin-top:18px; font-size:13px; color:var(--fg-3);}
.fineprint code{
  font-family:var(--font-mono); font-size:12px; color:var(--fg-2);
  background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:1px 6px;
}

/* The signed-in strip, revealed by landing.js when GET /api/auth/session says
   there is already a session. A visitor who is signed in should never be shown
   a "Log in" button as their main move. */
.whoami{
  display:none; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  margin-top:20px; font-size:13.5px; color:var(--fg-2);
}
.whoami.on{display:flex;}
.whoami .badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 12px; border-radius:var(--pill);
  background:var(--panel); border:1px solid var(--line); font-family:var(--font-mono); font-size:12px;
}
.whoami .badge .tick{width:13px; height:13px; color:#5BE49B;}

/* ===========================================================================
   Vocabulary strip — what a capture is cut into
   ---------------------------------------------------------------------------
   Real terms from data/taxonomy.json, not decoration and not invented metrics.
   Two rows scrolling in opposite directions, duplicated in the markup so the
   loop is seamless; the second copy is aria-hidden so a screen reader hears the
   list once.
   ========================================================================= */
.strip{
  /* The track is `width:max-content` and runs to ~3000px. The mask HIDES the
     ends but does not clip them, so without this the document is 3000px wide
     and the page scrolls sideways — `overflow-x:hidden` on body papers over it
     in a browser and does nothing for the scrollWidth an audit reads. Clip it
     where it actually happens. */
  position:relative; overflow:hidden; padding:10px 0 4px;
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.track{display:flex; gap:10px; width:max-content; padding:6px 0;}
.js .track.left{animation:marquee-l 46s linear infinite;}
.js .track.right{animation:marquee-r 58s linear infinite;}
@keyframes marquee-l{from{transform:translateX(0);}     to{transform:translateX(-50%);}}
@keyframes marquee-r{from{transform:translateX(-50%);}   to{transform:translateX(0);}}

.chip{
  flex:none;
  padding:7px 15px; border-radius:var(--pill);
  background:var(--panel); border:1px solid var(--line);
  font-size:13px; color:var(--fg-2); white-space:nowrap;
}
.chip.hot{color:var(--fg); border-color:rgba(110,155,255,.38); background:rgba(43,75,255,.10);}

/* ===========================================================================
   Sections
   ========================================================================= */
section.band{padding:clamp(64px, 10vh, 108px) 0;}
.band-head{max-width:62ch;}
.kicker{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent-ink); margin-bottom:14px;
}
h2{font-size:clamp(1.75rem, 3.6vw, 2.5rem); font-weight:700;}
.band-head p{margin-top:14px; color:var(--fg-2); font-size:1.02rem;}

/* --- feature grid -------------------------------------------------------- */
/* Four cards, so the column count is stated rather than left to auto-fit.
   `minmax(268px, 1fr)` packed three across at this shell width and left the
   fourth alone on a second row — a ragged grid that reads as a mistake. 4 / 2 /
   1 always divides four evenly. */
.features{
  display:grid; gap:16px; margin-top:44px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
@media (min-width:1120px){ .features{grid-template-columns:repeat(4, minmax(0, 1fr));} }
@media (max-width:640px){  .features{grid-template-columns:1fr;} }
.card{
  position:relative; overflow:hidden; isolation:isolate;
  padding:26px 24px 28px;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border:1px solid var(--line);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover{border-color:var(--line-2); transform:translateY(-2px);}

/* The spotlight: a radial highlight tracked to the pointer. Set from
   landing.js as --mx/--my, so with no script (or a coarse pointer) the card is
   simply a glass panel and nothing looks broken. */
.card::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx, 50%) var(--my, -20%),
             rgba(110,155,255,.16), transparent 62%);
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.card:hover::before{opacity:1;}

.card .ico{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(43,75,255,.30), rgba(43,75,255,.10));
  border:1px solid rgba(110,155,255,.30);
  color:#CFDCFF; margin-bottom:18px;
}
.card .ico svg{width:19px; height:19px;}
.card h3{font-size:1.08rem; font-weight:650; letter-spacing:-.02em;}
.card p{margin-top:9px; color:var(--fg-2); font-size:14.5px; line-height:1.62;}

/* --- roles --------------------------------------------------------------- */
.roles{
  display:grid; gap:16px; margin-top:40px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.role{
  padding:24px 22px; border-radius:var(--r);
  background:var(--panel); border:1px solid var(--line);
}
.role .tag{
  display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-ink);
  border:1px solid rgba(110,155,255,.32); border-radius:var(--pill);
  padding:3px 10px; margin-bottom:14px;
}
.role p{color:var(--fg-2); font-size:14.5px;}

/* --- closing CTA --------------------------------------------------------- */
.closer{
  position:relative; overflow:hidden;
  margin:0 auto; padding:clamp(44px, 7vw, 72px) clamp(24px, 5vw, 60px);
  border-radius:28px; text-align:center;
  border:1px solid var(--line-2);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(43,75,255,.28) 0%, transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.closer h2{max-width:20ch; margin:0 auto;}
.closer p{margin:16px auto 0; max-width:52ch; color:var(--fg-2);}
.closer .cta-row{margin-top:28px;}

/* ===========================================================================
   Footer
   ========================================================================= */
footer{
  margin-top:clamp(64px, 10vh, 110px);
  border-top:1px solid var(--line);
  padding:34px 0 46px;
  font-size:13.5px; color:var(--fg-3);
}
footer .shell{display:flex; flex-wrap:wrap; gap:18px 26px; align-items:center;}
footer .spacer{flex:1;}
footer a{color:var(--fg-2);}
footer a:hover{color:var(--fg);}

/* ===========================================================================
   Reveal on scroll
   ---------------------------------------------------------------------------
   The class is added by script. `.reveal` alone is invisible, so the no-script
   case would be a blank page — landing.js therefore marks the document
   `.js` FIRST, and the hidden state only applies inside `.js`. Fail visible.
   ========================================================================= */
.js .reveal{opacity:0; transform:translateY(18px); }
.js .reveal.in{opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease);}
.js .reveal.d1.in{transition-delay:.06s;}
.js .reveal.d2.in{transition-delay:.12s;}
.js .reveal.d3.in{transition-delay:.18s;}

/* ===========================================================================
   Narrow screens
   ========================================================================= */
@media (max-width:720px){
  .nav .shell{height:60px; gap:10px;}
  .brand .org{display:none;}
  .nav-links{display:none;}
  .hero{padding-top:52px;}
  h1.display{letter-spacing:-.034em;}
  .cta-row .btn{flex:1 1 auto; min-width:150px;}
  .closer{border-radius:20px;}
  footer .shell{flex-direction:column; align-items:flex-start;}
  footer .spacer{display:none;}
}

/* ===========================================================================
   Reduced motion — the authority, not a courtesy
   ---------------------------------------------------------------------------
   Everything above that moves is switched off here: drifting glows, sweeping
   beams, the marquee, the pulse, and the scroll reveal (which must resolve to
   VISIBLE, not to its hidden start state). landing.js checks the same query
   before it registers an IntersectionObserver at all.
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .glow{animation:none;}
  .beam{opacity:.42; animation:none;}
  .track{animation:none; transform:none;}
  .js .reveal{opacity:1; transform:none;}
}