/* Apex Venture Club design system: tokens and the few primitives every page shares.
   Loaded first on every page (static pages and the Wix homepage), so the component
   stylesheets after it (agc-static-pages, agc-blog, agc-content, agc-about, agc-polish)
   can build on the same values instead of repeating raw hex and rgba.

   Direction: deep navy grounds (a base navy, a lighter navy band that carries the homepage
   partner and map sections, and a darker navy footer), one warm accent, uppercase Poppins display type, Questrial
   body. Energy comes from alternating full-bleed bands, a dot-grid texture borrowed from
   the hero artwork, and short, purposeful motion. */

:root {
  color-scheme: dark;

  /* Grounds, darkest first. */
  --agc-bg: #071426;
  --agc-bg-band: #0b1c33;
  --agc-bg-raised: #0f2240;
  --agc-bg-footer: #040d1a;

  /* Surfaces sit on top of a ground. */
  --agc-surface: rgba(255, 255, 255, .045);
  --agc-surface-strong: rgba(255, 255, 255, .075);
  --agc-surface-gradient: linear-gradient(160deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02) 62%);
  --agc-line: rgba(255, 255, 255, .11);
  --agc-line-strong: rgba(255, 255, 255, .2);

  /* Text. --agc-text-3 stays above 4.5:1 on every ground above. */
  --agc-text: #fff;
  --agc-text-2: rgba(255, 255, 255, .8);
  --agc-text-3: rgba(255, 255, 255, .62);

  /* Accent. #df4700 is the brand orange: use it for rules, marks and large type.
     It is only ~4:1 against navy and white, so small orange text uses the lighter
     --agc-accent-text and orange fills behind white text use --agc-accent-fill. */
  --agc-accent: #df4700;
  --agc-accent-hover: #f25405;
  /* Fill behind white text (buttons, active tabs): #df4700 is only 4.17:1 with white,
     this darker step is 5.2:1 and passes AA at any size. */
  --agc-accent-fill: #c43e00;
  --agc-accent-text: #ff6a26;
  --agc-accent-soft: rgba(223, 71, 0, .14);
  --agc-accent-line: rgba(223, 71, 0, .55);
  --agc-on-accent: #fff;
  --agc-ink: #090909;

  /* Type. The families match the Wix homepage, which ships the same Google fonts. */
  --agc-font-display: poppins, "Poppins", Arial, sans-serif;
  --agc-font-body: questrial, "Questrial", Arial, sans-serif;
  --agc-fs-hero: clamp(44px, 6.6vw, 96px);
  --agc-fs-h2: clamp(30px, 3.7vw, 54px);
  --agc-fs-h3: clamp(20px, 1.75vw, 25px);
  --agc-fs-lede: clamp(18px, 1.65vw, 23px);
  --agc-fs-body: clamp(16px, 1.2vw, 17px);
  --agc-fs-small: 14px;
  --agc-fs-eyebrow: 12.5px;
  --agc-tracking-caps: .12em;

  /* Space and layout. */
  --agc-max: 1320px;
  --agc-gutter: clamp(20px, 4vw, 56px);
  --agc-section-y: clamp(72px, 8.4vw, 124px);
  --agc-gap: clamp(16px, 1.8vw, 24px);
  --agc-header-h: clamp(76px, 5.9vw, 104px);

  /* Shape. */
  --agc-radius-sm: 10px;
  --agc-radius: 16px;
  --agc-radius-lg: 22px;
  --agc-radius-pill: 999px;

  /* Depth. */
  --agc-shadow-1: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 14px 34px rgba(0, 0, 0, .36);
  --agc-shadow-2: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 26px 60px rgba(0, 0, 0, .5);
  --agc-shadow-accent: 0 16px 36px rgba(223, 71, 0, .28);

  /* Motion. Fast and decelerating; nothing here loops except the hero glow. */
  --agc-ease: cubic-bezier(.22, 1, .36, 1);
  --agc-dur-fast: 160ms;
  --agc-dur: 260ms;
  --agc-dur-slow: 700ms;

  /* Forward arrow used as a CSS mask on calls to action. */
  --agc-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");

  /* Brand texture: the orange dot grid from the hero artwork. */
  --agc-dots: radial-gradient(rgba(255, 106, 38, .34) 1.1px, transparent 1.6px);
  --agc-dots-size: 22px 22px;
}

::selection {
  background: rgba(223, 71, 0, .85);
  color: #fff;
}

/* Reveal on scroll. js/agc-motion.js adds .agc-motion to <html> only once it is running,
   so without JavaScript every [data-reveal] element is simply visible. Children of a
   [data-reveal-stagger] parent come in one after another. */
.agc-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--agc-dur-slow) var(--agc-ease),
    transform var(--agc-dur-slow) var(--agc-ease);
  transition-delay: var(--agc-reveal-delay, 0ms);
}

.agc-motion [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Full-bleed band behind a centred, max-width section. The band is a pseudo-element,
   so no wrapper markup is needed; the parent must clip horizontal overflow. */
.agc-band {
  isolation: isolate;
  position: relative;
}

.agc-band::before {
  background: var(--agc-bg-band);
  border-bottom: 1px solid var(--agc-line);
  border-top: 1px solid var(--agc-line);
  content: "";
  inset: 0 calc(50% - 50vw);
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

/* Dot-grid texture, faded out with a mask so it never sits behind body copy at full strength. */
.agc-dots {
  background-image: var(--agc-dots);
  background-size: var(--agc-dots-size);
  pointer-events: none;
  position: absolute;
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent);
  mask-image: radial-gradient(closest-side, #000 20%, transparent);
}

/* Hero entrance: pure CSS so above-the-fold content never waits on JavaScript.
   Add .agc-rise to a container and its direct children rise in, staggered. */
@keyframes agc-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* fill-mode backwards (not both), so hover transforms still work once the entrance ends. */
.agc-rise > * {
  animation: agc-rise 820ms var(--agc-ease) backwards;
}

.agc-rise > :nth-child(2) { animation-delay: 70ms; }
.agc-rise > :nth-child(3) { animation-delay: 140ms; }
.agc-rise > :nth-child(4) { animation-delay: 210ms; }
.agc-rise > :nth-child(5) { animation-delay: 280ms; }
.agc-rise > :nth-child(n + 6) { animation-delay: 340ms; }

/* Screen-reader-only text, shared by every page. */
.agc-sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Printing (or saving as PDF) without scrolling first must not drop unrevealed content. */
@media print {
  .agc-motion [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

@keyframes agc-drift {
  from {
    transform: translate3d(-4%, -3%, 0) scale(1);
  }

  to {
    transform: translate3d(5%, 4%, 0) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agc-rise > * {
    animation: none;
  }

  .agc-motion [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}