/* ============================================================
   FROGLESS — shared design system
   Palette sampled directly from the coin artwork:
     acid  #85F10A   ink #002101   moss #3FA002
   ============================================================ */

:root{
  --acid:#85F10A;
  --acid-hot:#9BFF2B;
  --acid-deep:#6FCE05;
  --ink:#002101;
  --ink-soft:#0B3A08;
  --moss:#3FA002;
  --moss-dark:#2C7501;
  --bone:#EEFFD6;
  --pale:#C9FF7A;
  --void:#00140B;

  --edge:5px;                     /* signature contour weight   */
  --edge-thin:3px;
  --r-lg:34px;
  --r-md:20px;
  --r-sm:12px;

  --shadow-hard:0 10px 0 var(--ink);
  --shadow-soft:0 24px 60px rgba(0,33,1,.28);

  --f-display:'Poppins',system-ui,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;

  --maxw:1220px;
  --pad:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;background:var(--void)}
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--bone);
  background:transparent;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{position:relative;padding-block:clamp(84px,12vw,160px)}
.stack{display:grid;gap:clamp(18px,2.4vw,30px)}

/* ---------- type ---------- */
.display{
  font-family:var(--f-display);
  font-weight:800;
  line-height:.86;
  letter-spacing:-.035em;
  text-transform:uppercase;
  margin:0;
}
.h1{font-size:clamp(56px,13vw,168px)}
.h2{font-size:clamp(38px,6.6vw,88px)}
.h3{font-size:clamp(24px,3.2vw,42px)}
.eyebrow{
  font-family:var(--f-body);
  font-weight:800;
  font-size:clamp(11px,1.1vw,13px);
  letter-spacing:.34em;
  text-transform:uppercase;
  opacity:.62;
  margin:0;
}
.lede{
  font-size:clamp(17px,1.9vw,23px);
  line-height:1.55;
  max-width:62ch;
  margin:0;
  font-weight:450;
}
.muted{opacity:.66}
.mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:1.05em 1.9em;
  border-radius:999px;
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(14px,1.35vw,17px);
  letter-spacing:.02em;
  text-transform:uppercase;
  border:var(--edge) solid var(--ink);
  background:var(--ink);
  color:var(--acid);
  box-shadow:0 7px 0 rgba(0,33,1,.34);
  transition:transform .16s cubic-bezier(.2,.9,.3,1),box-shadow .16s,background .2s;
  will-change:transform;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 11px 0 rgba(0,33,1,.34)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,33,1,.34)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:0 7px 0 rgba(0,33,1,.16)}
.btn.ghost:hover{background:var(--ink);color:var(--acid)}
.btn[disabled]{opacity:.42;pointer-events:none}

/* ---------- panels ---------- */
.panel{
  border:var(--edge) solid var(--ink);
  border-radius:var(--r-lg);
  background:var(--acid);
  color:var(--ink);
  padding:clamp(22px,3vw,38px);
  position:relative;
}
.panel.solid{background:var(--ink);color:var(--acid)}
.panel.moss{background:var(--moss);color:var(--bone)}

/* ---------- scroll reveal ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0ms);
}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="scale"]{transform:translateY(28px) scale(.965)}
[data-reveal="scale"].in{transform:none}
[data-reveal="left"]{transform:translateX(-40px)}
[data-reveal="left"].in{transform:none}
[data-reveal="right"]{transform:translateX(40px)}
[data-reveal="right"].in{transform:none}

/* ---------- draw-on stroke animation ----------
   :not([stroke-dasharray]) matters — shapes that are deliberately dashed
   (the empty outlines) must keep their own dash pattern, not get overwritten. */
.draw :is(path,circle,ellipse,rect,line,polyline):not([stroke-dasharray]){
  stroke-dasharray:var(--len,1400);
  stroke-dashoffset:var(--len,1400);
  transition:stroke-dashoffset 2.4s cubic-bezier(.22,1,.28,1);
}
.draw.in :is(path,circle,ellipse,rect,line,polyline):not([stroke-dasharray]){
  stroke-dashoffset:0;
}

/* ---------- the standing wallpaper ----------
   A fixed layer rather than background-attachment:fixed — that is unreliable
   on iOS and repaints badly. Sits behind everything; the hero paints its own
   photo on top of it, so this is what you see from the hero down. */
.wallpaper{
  position:fixed;inset:0;z-index:-2;
  background-image:url(/assets/pond2.jpg);
  background-image:image-set(url(/assets/pond2.webp) type("image/webp"),
                             url(/assets/pond2.jpg)  type("image/jpeg"));
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
.wallpaper::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,19,0,.78) 0%,rgba(0,19,0,.84) 55%,rgba(0,19,0,.9) 100%);
}

/* ---------- utility ---------- */
.par{will-change:transform}
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.16;mix-blend-mode:multiply}
.nowrap{white-space:nowrap}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- variant switcher (site chrome) ---------- */
.switcher{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:18px;z-index:80;
  display:flex;align-items:center;gap:4px;
  padding:5px;
  border:3px solid var(--ink);
  border-radius:999px;
  background:var(--acid);
  color:var(--ink);
  box-shadow:0 8px 30px rgba(0,33,1,.35);
  font-family:var(--f-display);font-weight:800;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
}
.switcher a{padding:.62em 1.1em;border-radius:999px;transition:background .18s,color .18s;opacity:.7}
.switcher a:hover{opacity:1}
.switcher a.on{background:var(--ink);color:var(--acid);opacity:1}
.switcher .tag{padding-left:12px;padding-right:6px;opacity:.5;font-size:10px;letter-spacing:.2em}
@media(max-width:560px){.switcher .tag{display:none}.switcher{font-size:11px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .draw path,.draw circle,.draw ellipse,.draw rect,.draw line,.draw polyline{stroke-dashoffset:0!important}
}