/* ===========================================================================
   MindSpring — monochrome design system (Phase 1)

   The pure-black / white visual language, per the supplied design spec. This
   is a SEPARATE stylesheet rather than an edit to base.css on purpose:

   Phase 1 converts the landing page only. base.css still drives the other 41
   pages with the evergreen/honey tokens, and those pages must keep rendering
   exactly as they do today. Loading this file AFTER base.css on a single page
   overrides just that page. Nothing here leaks anywhere it isn't linked.

   Phase 2 folds these values into base.css itself, at which point the
   monochrome cascade reaches the whole app and the legacy tokens retire.

   Tokens are stored as bare HSL CHANNELS (no hsl() wrapper) so any of them can
   be used at partial alpha: hsl(var(--foreground) / .6). That is the whole
   reason for the format — it buys a translucent variant of every colour for
   free, without a second token for each.
   ======================================================================== */

:root{
  --background:0 0% 0%;
  --foreground:0 0% 100%;
  --card:0 0% 5%;
  --card-foreground:0 0% 100%;
  --primary:0 0% 100%;
  --primary-foreground:0 0% 0%;
  --secondary:0 0% 12%;
  --secondary-foreground:0 0% 85%;
  --muted:0 0% 15%;
  --muted-foreground:0 0% 65%;
  --accent:170 15% 45%;
  --accent-foreground:0 0% 100%;
  --border:0 0% 20%;
  --input:0 0% 18%;
  --ring:0 0% 40%;
  --hero-subtitle:210 17% 95%;

  /* --- The one deliberate exception to monochrome -------------------------
     MindSpring is a quiz app. 17 pages use colour to say "you got it right"
     or "you got it wrong", and removing that costs real comprehension — for
     colour-blind users especially, since the fallback everywhere is icon +
     weight + position, never colour alone.

     These two are deliberately desaturated (45% / 50% sat, not the usual
     70%+) so they read as part of a black-and-white system rather than as
     stoplights bolted onto it. They are the ONLY hues in the palette besides
     --accent, and they appear only on correctness feedback — never on
     decoration, never on chrome. */
  --ok:150 45% 55%;
  --bad:6 50% 58%;

  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  --radius-xl:24px;
}

/* ---------------------------------------------------------------------------
   Liquid glass — ported verbatim from the spec.

   Two things make this read as crafted rather than as the usual frosted-panel
   cliche, and both are worth preserving exactly:

   1. The fill is rgba(255,255,255,0.01) — very nearly nothing. The panel is
      defined by its EDGE, not by a milky wash over the content behind it.
   2. The ::before is a gradient BORDER, not a background. `padding:1.4px` plus
      the two-layer mask and `mask-composite:exclude` knocks the centre out of
      the gradient, leaving only a 1.4px rim. That rim is bright at top and
      bottom and fully transparent through the middle, which is how a real
      bevelled edge catches light — bright where it faces up, dark where it
      faces away.

   `mask-composite:exclude` is the standard property and `-webkit-mask-composite:xor`
   is the older WebKit spelling of the same operation; both are needed for
   Safari coverage.
   ------------------------------------------------------------------------ */
.liquid-glass{
  background:rgba(255,255,255,0.01);
  background-blend-mode:luminosity;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  border:none;
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.1);
  position:relative;
  overflow:hidden;
}
.liquid-glass::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1.4px;
  background:linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%,
    rgba(255,255,255,0.45) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite:exclude;
  pointer-events:none;
}

/* ---------------------------------------------------------------------------
   Page shell
   ------------------------------------------------------------------------ */
.mono{
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* base.css paints an ambient wash behind every page. On pure black it would
   show as a grey haze at the top, so it is cancelled here. */
.mono::before{content:none !important;}

.mono h1,.mono h2,.mono h3,.mono h4,.mono h5{
  font-family:'Inter',system-ui,sans-serif;
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1.05;
  margin:0;
}

/* The serif italic accent. This single device carries the personality of the
   whole design — one word per heading set in Instrument Serif italic against
   Inter's geometry. It needs a nudge down in weight and up in size because
   the serif's x-height runs smaller than Inter's at the same px. */
.serif{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-0.01em;
}

.mono-wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 24px;}
@media(min-width:768px){.mono-wrap{padding:0 clamp(32px,7vw,112px);}}

.text-muted{color:hsl(var(--muted-foreground));}
.text-sub{color:hsl(var(--hero-subtitle));}

/* ---------------------------------------------------------------------------
   Type scale — fluid, so it never snaps awkwardly between breakpoints.
   ------------------------------------------------------------------------ */
.t-display{font-size:clamp(2.75rem,7.4vw,6rem);letter-spacing:-2px;}
.t-h2{font-size:clamp(2.25rem,5.6vw,4.5rem);letter-spacing:-1.5px;}
.t-h3{font-size:clamp(1.75rem,3.4vw,3rem);letter-spacing:-1px;}
.t-lead{font-size:clamp(1.5rem,3vw,2.5rem);letter-spacing:-1px;line-height:1.28;font-weight:500;}
.t-lead-sm{font-size:clamp(1.15rem,2.1vw,1.75rem);letter-spacing:-.5px;line-height:1.35;font-weight:500;}
.t-label{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:hsl(var(--muted-foreground));}

/* ---------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------ */
.m-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:500;
  padding:14px 32px;border-radius:var(--radius);border:none;cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease,opacity .18s ease;
  white-space:nowrap;text-decoration:none;
}
.m-btn-primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground));}
.m-btn-primary:hover{transform:scale(1.03);}
.m-btn-primary:active{transform:scale(.98);}
.m-btn-glass{color:hsl(var(--foreground));}
.m-btn-glass:hover{transform:scale(1.03);background:rgba(255,255,255,0.04);}
.m-btn-glass:active{transform:scale(.98);}
.m-btn-pill{border-radius:100px;padding:12px 32px;}

/* One focus ring for the whole system. Pure white at 2px with a black spacer
   ring clears WCAG's non-text contrast requirement against any surface here. */
.mono :focus-visible{
  outline:none;
  box-shadow:0 0 0 2px hsl(var(--background)),0 0 0 4px hsl(var(--foreground));
  border-radius:var(--radius-sm);
}

/* ---------------------------------------------------------------------------
   Motion — the vanilla port of the spec's framer-motion `fadeUp` helper.

     initial:{opacity:0,y:20} -> whileInView:{opacity:1,y:0}
     viewport:{once:true,margin:"-100px"}, duration .6, ease easeOut

   `once:true` maps to unobserving after the first intersection, and the
   "-100px" margin maps to a negative rootMargin, so an element animates a
   little BEFORE its top edge reaches the viewport. Stagger comes from a
   --delay custom property set per element instead of a JS delay argument.
   ------------------------------------------------------------------------ */
.fade-up{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s cubic-bezier(0,0,.2,1),transform .6s cubic-bezier(0,0,.2,1);
  transition-delay:var(--delay,0s);
}
.fade-up.in{opacity:1;transform:none;}

/* Scroll-driven word reveal. Each word starts at .15 opacity and is lifted to
   full as the paragraph passes through the viewport. */
.reveal-words span{
  opacity:.15;
  transition:opacity .3s linear;
  will-change:opacity;
}
.reveal-words span.lit{opacity:1;}

@media(prefers-reduced-motion:reduce){
  .fade-up{opacity:1;transform:none;transition:none;}
  .reveal-words span{opacity:1;transition:none;}
  .m-btn:hover{transform:none;}
}