/* style.css */

/* ── GLOBAL COLOR TOKENS ───────────────────────────────────── */
:root{
  /* — Dark (default) — */
  --bg:        #0e1117;   /* super-dark navy                  */
  --surface:   #151b23;   /* slightly lighter card background */
  --border:    #2a313d;
  --fg:        #d0d7de;   /* main text                        */
  --muted:     #8b949e;   /* secondary text                   */
  --accent:    #3e8cff;   /* link / button blue               */
  --code:      #cfa8ff;   /* lavender for <code>              */
  --highlights:#32d583;   /* mint success / “green blips”     */
  --radius:    12px;

  /* Vanta FOG (dark) */
  --vanta-highlight:  #3e8cff;  /* same blue as links  */
  --vanta-midtone:    #a04dff;  /* violet glow         */
  --vanta-lowlight:   #32d583;  /* matches highlights  */
  --vanta-base:       #070a10;  /* almost-black fog    */
  --vanta-blur:       0.70;
  --vanta-speed:      2.00;
  --vanta-zoom:       1.60;
  --vanta-minh:       200;
  --vanta-minw:       200;
  --vanta-mouse:      1;
  --vanta-touch:      1;
  --vanta-gyro:       0;
}

@media (prefers-color-scheme: light){
  :root{
    /* — Light — */
    --bg:        #ffffff;  /* clean white                     */
    --surface:   #faf6f3;  /* warm, very-light neutral        */
    --border:    #e5dfdb;
    --fg:        #1e2227;  /* near-black text                 */
    --muted:     #6b6f77;
    --accent:    #b74a00;  /* deep burnt-orange (4.5 ✕ on white) */
    --code:      #5137ff;  /* indigo – echoes Vanta low-light */
    --highlights:#1a7f37;  /* evergreen OK colour             */

    /* Vanta FOG (light) – **do not change** as requested */
    --vanta-highlight:  #ffc300;
    --vanta-midtone:    #ff1f00;
    --vanta-lowlight:   #2d00ff;
    --vanta-base:       #ffebeb;
  }
}
/* ──────────────────────────────────────────────────────────── */

/* ───────────────────────────────────────────────────────────── */

    /* background */
    html,              /* full-bleed */
    #canvas {
      width: 100%;
      height: 100%;
      background:var(--bg);
    }

    body {             /* dark stage for green blips */
      margin: 0;
      padding: 0;
      background: transparent;
    }

    #canvas{
      position:fixed;
      inset:0;             /* full viewport, shorthand for top/right/bottom/left:0 */
      z-index:-100; 
      pointer-events:none; /* make it “click-through” */
    }

    /* ─── GLOBAL RESET ─── */
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
      color:var(--fg);
      line-height:1.6;
    }

    /* ─── UNIVERSAL LINK STYLE ─── */
    a{color:var(--accent);text-decoration:none;border-bottom:1px dashed transparent;transition:border-color .3s;}

    /* ─── HERO ─── */
    header{min-height:60vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem;}
    h1{font-size:clamp(2.5rem,6vw,4rem);font-weight:700;}
    .lead{margin-top:1rem;font-size:clamp(1rem,2.2vw,1.6rem);max-width:55ch;color:var(--muted)}

    /* ─── NEW INTRO PARAGRAPH & CTA BUTTON ─── */
    .intro{margin-top:1.5rem;font-size:clamp(1rem,2vw,1.25rem);max-width:75ch;}
    .button{display:inline-block;margin-top:1.2rem;background:var(--accent);color:#fff;padding:.6em 1.2em;border-radius:var(--radius);font-weight:600;border:none;transition:background .3s;}
    @media(hover:hover) and (pointer:fine){.button:hover{background:#1f6feb;text-decoration:none;}}

    /* ─── SECTIONS fade-in on scroll ─── */
    main{max-width:1200px;margin:0 auto;padding:0 2rem 5rem;}
    section{margin-top:4rem;opacity:0;transform:translateY(40px);transition:all .6s ease;}
    section.visible{opacity:1;transform:none}
    section h2{font-size:clamp(1.75rem,3.8vw,2.5rem);border-bottom:1px solid var(--border);padding-bottom:.5rem;margin-bottom:1.5rem;}

    /* ─── SUMMARY CARDS ─── */
    .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.5rem;}
    .card{
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:1.5rem;
      transition:transform .4s ease,box-shadow .4s ease;
      position:relative;
      cursor:pointer
    }
    @media (hover: hover) and (pointer: fine) {
      .card:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
      }
      a:hover {
        border-color: var(--accent);
      }
    }
    .card h3{font-size:1.25rem;margin-bottom:.35rem;line-height:1.3;}
    .card small{display:block;color:var(--muted);margin-bottom:.75rem}
    .links{display:flex;flex-wrap:wrap;gap:.75rem;}
    .links a{position:relative;z-index:2;}

    /* ───── BADGES & REPO LINK ───── */
    .badges{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:2rem;}
    .badges img{height:20px;}
    .repo-link{text-align:center;margin:.5rem 0;}

    /* ─── FOOTER ─── */
    footer{margin-top:4rem;margin-bottom:2rem;text-align:center;font-size:.875rem;color:var(--muted);}    

    /* ─── PULSE-CURSOR ─── */
    .prompt{
      font-family:monospace;
      color:var(--code);
      font-size:1.2rem;
      display:inline-block;
      margin-bottom:2rem
    }
    .prompt::after{
      content:"_";
      animation:blink 1s steps(2,end) infinite;
    }
    @keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

    /* ─── PROMPT BAR ─── */
    .prompt-bar{
      position:sticky;      /* keeps it fixed at the very top */
      top:0;
      width:100%;
      background:var(--bg); /* re-use your existing dark/light token */
      border-bottom:1px solid var(--border);
      padding:.25rem 0.75rem;
      z-index:999;          /* stays above everything else */
    }
    /* re-use the old blinking-cursor prompt style, but kill the margin */
    .prompt-bar .prompt{margin:0;}

    /* === Vanta background === */
#vanta-bg{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  z-index:-1;         /* behind all real content */
}
html,body{margin:0;height:100%}   /* avoids scrollbars */