/* ivyeyess. A SEPARATE identity from Exodus, on purpose.
   Ty, 2026-08-28: grey-blue static, lighter green accents, the eye logo
   ghosted into the static, everything centred, things moving.

   None of Exodus's signatures appear here. No cream paper, no Titan One,
   no hard offset shadows, no halftone, no tilt, no pill buttons, no mascot. */

/* ============================================================
   FONTS. Ty is sending a face he actually wants.
   Swap the two lines below and the whole site follows. Nothing
   else in this file names a typeface.
   ============================================================ */
:root{
  --font-display:"Anton","Haettenschweiler",Impact,sans-serif;
  --font-body:"Barlow",system-ui,-apple-system,sans-serif;
  --font-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

:root{
  --ground:#2F3740;        /* grey blue, the static ground */
  --ground-deep:#242B33;
  --ground-lift:#39424D;
  --edge:#4A5561;
  --edge-soft:#3D4751;
  --bone:#ECF1F4;
  --mute:#A2B0BB;          /* 5.0:1 on ground */
  --green:#8FE3A8;         /* the accent, 8.3:1 on ground */
  --green-deep:#63BC80;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--bone);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:var(--bone);text-decoration:none;border-bottom:1px solid var(--green-deep)}
a:hover{border-bottom-color:var(--green);color:#FFF}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ============================================================
   THE BACKGROUND. Ghosted eye, then animated static over it.
   Both are fixed and inert. Content sits above on z-index 1.
   ============================================================ */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

.ghost-wrap{
  position:absolute;top:50%;left:50%;
  width:min(150vw,1500px);
  transform:translate(-50%,-50%);
  will-change:transform;                /* transform only, so the blur caches */
}
.ghost{
  width:100%;height:auto;
  filter:blur(26px) saturate(0);
  opacity:.20;
  mix-blend-mode:soft-light;
}
#static{position:absolute;inset:0;width:100%;height:100%;opacity:.55}

/* a soft vignette so the centre stays readable */
.bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 78% 62% at 50% 46%,
    rgba(47,55,64,0) 0%, rgba(36,43,51,.55) 72%, rgba(30,36,43,.86) 100%);
}

.page{position:relative;z-index:1}

/* ============================================================
   TYPE
   ============================================================ */
.dsp{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:.006em;
  line-height:1;
  text-transform:uppercase;
  margin:0;
}
.mono{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mute);
}

/* ============================================================
   SHELL. Centred, narrower than the Exodus pages.
   ============================================================ */
.wrap{max-width:920px;margin:0 auto;padding:0 24px;text-align:center}

.topbar{
  position:sticky;top:0;z-index:20;
  border-bottom:1px solid var(--edge-soft);
  background:rgba(47,55,64,.72);
  backdrop-filter:saturate(140%) blur(10px);
}
.topbar-in{
  max-width:920px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.topbar a{border:0;color:var(--mute)}
.topbar a:hover{color:var(--green)}

/* section headers, centred, with the accent rule under them */
.sec{margin:88px 0 30px}
.sec .n{display:block;color:var(--green);margin-bottom:12px}
.sec h2{font-size:clamp(1.9rem,5.4vw,3rem)}
.sec .lede{
  margin:.95rem auto 0;color:var(--mute);max-width:56ch;font-size:16px;
}
.sec .bar{
  width:52px;height:2px;background:var(--green);
  margin:20px auto 0;border-radius:2px;
}

/* ============================================================
   BUTTONS. Square, flat, no drop shadow.
   ============================================================ */
.act{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  padding:1.05rem 2rem;border-radius:2px;cursor:pointer;
  background:var(--green);color:var(--ground-deep);border:1px solid var(--green);
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.act:hover{background:#A6EDBA;border-color:#A6EDBA}
.act--ghost{background:transparent;color:var(--bone);border-color:var(--edge)}
.act--ghost:hover{background:var(--ground-lift);border-color:var(--green);color:#FFF}

.foot{
  border-top:1px solid var(--edge-soft);margin-top:96px;padding:28px 0 64px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
}

/* ============================================================
   MOTION. Scroll reveal, centred rise.
   ============================================================ */
.rise{opacity:0;transform:translateY(18px)}
.rise.seen{
  opacity:1;transform:none;
  transition:opacity .62s var(--ease),transform .62s var(--ease);
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
  .ghost-wrap{transform:translate(-50%,-50%)!important}
}