/* Edge Fund — static landing page */
:root{
  --text:#0b0b0b;
  --shadow: rgba(0,0,0,0.08);
  --font-ui: "Code Pro", ui-sans-serif, -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* Top bar sizing */
  --topbar-top: 28px;
  --topbar-side: 40px;
  --topbar-size: 77px;

  /* Nudge Home left */
  --home-nudge: 24px;
}

@font-face{
  font-family: "Code Pro";
  src: url("/fonts/CodePro.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }

/* Desktop/tablet background: SVG */
body{
  margin:0;
  color:var(--text);
  font-family: var(--font-ui);

  background-color:#ffffff;
  background-image: url("/assets/background.svg?v=3");
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:scroll; /* iOS quirk */
}

/* ─────────── Top bar ─────────── */
.brand-mark{
  position:fixed;
  top: var(--topbar-top);
  left: calc(var(--topbar-side) + env(safe-area-inset-left, 0px));
  display:inline-block;
  line-height:0;
  opacity:.95;
  transition: opacity .2s ease, transform .2s ease;
}
.brand-mark img{
  width: var(--topbar-size);
  height: var(--topbar-size);
  display:block;
}
.brand-mark:hover{ opacity:1; transform: translateY(-1px) }
.brand-mark:active{ transform: translateY(0) scale(.98) }

.home-link{
  position:fixed;
  top: var(--topbar-top);
  right: calc(var(--topbar-side) + env(safe-area-inset-right, 0px) + var(--home-nudge));
  display:inline-flex;
  align-items:center;
  height: var(--topbar-size);
  padding: 0 0 0 6px;
  text-decoration:none;
  font-size:14px; line-height:1; letter-spacing:.01em;
  color:var(--text);
  opacity:.9;
  border-radius:8px;
  transition:opacity .2s ease, transform .2s ease;
}
.home-link:hover{ opacity:1; transform: translateY(-1px) }
.home-link:active{ transform: translateY(0) scale(.98) }

/* ─────────── Center hero ─────────── */
.hero{
  min-height:100svh;
  display:grid;
  place-items:center;
  place-content:center;
  gap:18px;
  text-align:center;
  padding:24px;
}

.logo-inline { display:inline-block; }

/* SVG sizing + keep vector sharp */
.logo-svg{
  width:min(33.52vw, 235.2px);
  height:auto;
  display:block;
  filter:none !important;
  -webkit-filter:none !important;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  vector-effect: non-scaling-stroke;
  isolation:isolate; /* makes mix-blend-mode work predictably */
}

.tagline{
  margin: 6px 0 0;
  font-family: "Code Pro", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial;
  font-size:14px;
  line-height:1.1;
  letter-spacing:.01em;
  opacity:.9;
}

/* ─────────── Ambient shine (uses CSS vars from JS) ─────────── */
.logo-inline { position: relative; }

.logo-svg .edge-shine{
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: translateX(var(--start, 0px));
  animation: edgeShine 4s ease-in-out infinite;  /* visibility bump for testing */
  opacity: .9;                                  /* visibility bump for testing */
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform;
}

@keyframes edgeShine{
  from { transform: translateX(var(--start)); }
  to   { transform: translateX(var(--end)); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .logo-svg .edge-shine{ animation:2.5; opacity:.9; }
}

/* ─────────── Bottom pill image (centered) ─────────── */
.accent-banner{
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, -60px) - 60px);
  transform: translateX(-50%);
  width: min(340px, 31vw);
  height: auto;
  display: block;
  pointer-events: none;
  z-index: 1;
}

/* ─────────── Mobile tweaks ─────────── */
@media (max-width: 520px){
  :root{
    --topbar-top: 24px;
    --topbar-side: 20px;
    --topbar-size: 56px;
  }

  body{
    background-image: url("/assets/background-mobile.jpg?v=1");
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:scroll;
  }

  .logo-svg{ width:min(50vw, 288px); }
  .tagline{ font-size:14px; }

  .accent-banner{
    bottom: calc(env(safe-area-inset-bottom, -20px) - 20px);
    width: min(363px, 60.5vw);
  }
}