/* ============================================================
   NORFORGE — Layout, transitions, and interactive effects
   Hover/focus/active states, GSAP reveal placeholders, responsive.
   ============================================================ */

html, body { margin: 0; background: var(--bg); scroll-behavior: smooth; }
* { box-sizing: border-box; }

/* Offset anchor targets so the sticky 60px nav doesn't cover section titles
   when scrolling to a #hash (both same-page clicks and cross-page landings). */
section[id] { scroll-margin-top: 80px; }

/* Link normalization */
a { color: inherit; text-decoration: none; }

/* Nav link hover — base colour lives here (not inline) so :hover can win.
   Used by the GitHub icon (and footer links): brighten to white on hover. */
.nf-nav-link { color: var(--iron-200); transition: color 200ms cubic-bezier(0.2, 0, 0, 1); }
.nf-nav-link:hover { color: var(--paper-pure); }

/* Header text links: a thin verdigris underline appears on hover (instead of
   brightening — that treatment is reserved for the GitHub icon). */
.nf-nav-textlink { position: relative; color: var(--iron-200); }
.nf-nav-textlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px;
  background: var(--accent); border-radius: 1px; opacity: 0;
}
.nf-nav-textlink:hover::after { opacity: 1; }

/* Buttons - a verdigris glow radiates from the button on hover (no movement),
   echoing the aurora. */
.nf-btn-primary { transition: box-shadow 240ms cubic-bezier(0.2, 0, 0, 1); }
.nf-btn-primary:hover { box-shadow: 0 0 20px rgba(71,160,140,0.55), 0 0 44px rgba(71,160,140,0.3); }
.nf-btn-secondary { transition: border-color 200ms cubic-bezier(0.2, 0, 0, 1), color 200ms cubic-bezier(0.2, 0, 0, 1); }
.nf-btn-secondary:hover { border-color: rgba(210,212,213,0.32); color: var(--paper-pure); }

/* Title-line mask for GSAP reveal */
.nf-mask { display: block; overflow: hidden; padding-bottom: 0.08em; }
.nf-mask > span { display: block; will-change: transform; }

/* Pillar cards */
.nf-pillar { transition: border-color 250ms cubic-bezier(0.2, 0, 0, 1), transform 250ms cubic-bezier(0.2, 0, 0, 1); }
.nf-pillar:hover { border-color: rgba(71,160,140,0.42); transform: translateY(-2px); }

/* Team cards */
.nf-team-card { position: relative; cursor: default; overflow: hidden; transition: transform 350ms cubic-bezier(0.2, 0, 0, 1), border-color 350ms cubic-bezier(0.2, 0, 0, 1); }
.nf-team-card:hover { transform: translateY(-3px); border-color: rgba(71,160,140,0.45); }
.nf-team-img-wrap { overflow: hidden; }
.nf-team-img { transition: transform 600ms cubic-bezier(0.2, 0, 0, 1), filter 600ms cubic-bezier(0.2, 0, 0, 1); filter: grayscale(0.55) contrast(1.02); }
.nf-team-card:hover .nf-team-img { transform: scale(1.04); filter: grayscale(0) contrast(1.05); }
.nf-team-card::before {
  content: ""; position: absolute; left: 20px; top: 20px; width: 6px; height: 6px;
  background: var(--accent); border-radius: 999px; opacity: 0; transform: scale(0.6);
  transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1), transform 300ms cubic-bezier(0.2, 0, 0, 1);
  box-shadow: 0 0 0 4px rgba(71,160,140,0.18);
  z-index: 2;
}
.nf-team-card:hover::before { opacity: 1; transform: scale(1); }

/* LinkedIn profile icon (next to names in the team + about rosters) */
.nf-linkedin { display: inline-flex; align-items: center; color: var(--iron-300); transition: color 200ms cubic-bezier(0.2, 0, 0, 1); position: relative; z-index: 3; }
.nf-linkedin:hover { color: var(--accent); }

/* Section accent underline */
.nf-accent-bar { display: inline-block; width: 28px; height: 2px; background: var(--accent); margin-bottom: 18px; transform-origin: left center; }

/* Hero grid layer uses will-change for smoother parallax */
.nf-hero-grid { will-change: transform; }

/* ============================================================
   Hero — three core messages side by side.
   All three show at once as a 3-column grid over the aurora, no card chrome,
   and fade/rise in on entry with a stagger (driven in JS). All three text
   blocks live in the DOM and are visible with no JS, so nothing is hidden
   from search or non-JS visitors.
   ============================================================ */
.nf-hero-stage { position: relative; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }

/* No card chrome - the message text floats directly over the aurora. */
.nf-hero-card { position: relative; box-sizing: border-box; min-width: 0; will-change: transform, opacity; }

/* Oversized index numeral, set high and to the right as a faint watermark. */
.nf-hero-card-num {
  position: absolute; top: -0.28em; right: -4px; z-index: 0;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(64px, 7vw, 100px); line-height: 0.8; letter-spacing: -0.05em;
  color: rgba(71,160,140,0.13); pointer-events: none; user-select: none;
}
.nf-hero-bar {
  position: relative; z-index: 1;
  display: block; width: 40px; height: 2px; background: var(--accent); margin-bottom: 20px;
  box-shadow: 0 0 12px rgba(71,160,140,0.4);
}
.nf-hero-card-head {
  position: relative; z-index: 1;
  font-family: 'Space Grotesk', sans-serif; font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 500; line-height: 1.15; letter-spacing: -0.02em;
  color: var(--fog); margin: 0 0 14px; overflow-wrap: break-word;
}
.nf-hero-card-sub {
  position: relative; z-index: 1;
  font-family: 'Inter Tight', sans-serif; font-size: clamp(14px, 1vw, 16px);
  line-height: 1.55; color: var(--iron-100); margin: 0;
}

@media (max-width: 760px) {
  .nf-hero-stage { grid-template-columns: 1fr; gap: 36px; }
  .nf-hero-card-num { font-size: clamp(70px, 20vw, 110px); }
}

/* Reveal defaults (hidden until GSAP fires) — gated behind `.nf-js` so they
   only hide when JavaScript is present to reveal them again. With no JS the
   `.nf-js` class is never added (see Layout.jsx), so the content stays fully
   visible for no-JS visitors and crawlers. */
.nf-js .nf-reveal { opacity: 0; }
.nf-js .nf-reveal-x { opacity: 0; }

/* Reduced motion: don't leave reveal content waiting on a scroll animation —
   show it straight away. `!important` overrides GSAP's inline opacity:0. */
@media (prefers-reduced-motion: reduce) {
  .nf-js .nf-reveal, .nf-js .nf-reveal-x { opacity: 1 !important; }
}

/* ============================================================
   Render-without-animation fallback.
   The entrance/scroll animations reveal content by tweening it from an
   opacity:0 (or transformed) start state back to visible, which relies on the
   animation loop (requestAnimationFrame) advancing. A renderer that runs the
   JS but never advances rAF — notably Google's Web Rendering Service — applies
   the hidden start state and then captures it, so the page looks blank.

   The inline head script (Layout.jsx) adds `nf-no-anim` to <html> when a rAF
   callback hasn't fired within ~1s, i.e. the loop isn't running. That forces
   every animated-hidden element visible here; `!important` in the stylesheet
   overrides GSAP's non-important inline opacity/transform. Real users' rAF
   fires, so `nf-no-anim` is never added and the animations play as normal.

   Every element GSAP hides/tweens from a hidden start state carries the shared
   `.nf-anim` marker (added alongside its existing classes), so this one rule
   covers them all — no enumerated selector list to keep in sync when a new
   animated element is added.
   ============================================================ */
.nf-no-anim .nf-anim {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Form inputs */
.nf-input, .nf-textarea {
  width: 100%;
  background: var(--bg-subtle);
  border: 1px solid rgba(210,212,213,0.12);
  border-radius: 4px;
  padding: 12px 14px;
  color: var(--fog);
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  transition: border-color 180ms cubic-bezier(0.2, 0, 0, 1), background 180ms cubic-bezier(0.2, 0, 0, 1);
  outline: none;
}
.nf-textarea { resize: vertical; min-height: 120px; font-family: 'Inter Tight', sans-serif; }
.nf-input::placeholder, .nf-textarea::placeholder { color: var(--iron-400); }
.nf-input:hover, .nf-textarea:hover { border-color: rgba(210,212,213,0.22); }
.nf-input:focus, .nf-textarea:focus {
  border-color: var(--accent);
  background: var(--iron-800);
  box-shadow: 0 0 0 3px rgba(71,160,140,0.18);
}
.nf-input[aria-invalid="true"], .nf-textarea[aria-invalid="true"] { border-color: var(--danger); }
.nf-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--iron-200);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.nf-field-required { color: var(--accent); margin-left: 4px; }
.nf-submit[disabled] { opacity: 0.6; cursor: not-allowed; }
.nf-submit[disabled]:hover { box-shadow: none; }

/* Visually hidden, but available to screen readers and search engines. */
.nf-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .nf-nav-links { display: none !important; }
  .nf-pillar-grid, .nf-footer-cols { grid-template-columns: 1fr !important; }
  .nf-footer-inner { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .nf-section-h2 { font-size: 32px !important; }
}

/* On phones the hero is tall and narrow, so object-fit:cover magnifies the 16:9
   aurora until it dominates. Keep the sky at the top and the mountains at the
   bottom, but dim the middle band behind the text so the copy stays legible. */
@media (max-width: 760px) {
  .nf-hero-aurora {
    opacity: 0.7;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 20%, rgba(0,0,0,0.28) 48%, rgba(0,0,0,0.5) 72%, #000 96%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 20%, rgba(0,0,0,0.28) 48%, rgba(0,0,0,0.5) 72%, #000 96%);
  }
}

/* ============================================================
   Audience toggle — a large segmented pill (Investors | Leaders) with a
   sliding verdigris indicator; the content panel below swaps with a GSAP fade.
   ============================================================ */
.nf-aud-toggle { position: relative; display: inline-flex; padding: 5px; border-radius: 999px; background: var(--iron-800); border: 1px solid rgba(210,212,213,0.12); }
.nf-aud-toggle-ind {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: 150px; border-radius: 999px;
  background: var(--accent); box-shadow: 0 6px 18px -6px rgba(71,160,140,0.6);
  transition: transform 380ms cubic-bezier(0.2,0,0,1);
}
.nf-aud-toggle-ind[data-pos="leaders"] { transform: translateX(150px); }
.nf-aud-seg {
  position: relative; z-index: 1; width: 150px; border: 0; background: transparent; cursor: pointer;
  padding: 13px 0; font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--iron-200); transition: color 380ms cubic-bezier(0.2,0,0,1);
}
.nf-aud-seg:hover { color: var(--fog); }
.nf-aud-seg.is-active, .nf-aud-seg.is-active:hover { color: var(--on-accent); font-weight: 500; }

@media (max-width: 380px) {
  .nf-aud-toggle-ind { width: 130px; }
  .nf-aud-toggle-ind[data-pos="leaders"] { transform: translateX(130px); }
  .nf-aud-seg { width: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .nf-aud-toggle-ind, .nf-aud-seg { transition: none; }
}

/* ============================================================
   Investor lifecycle timeline — diligence → hold → exit read as a connected
   path. A verdigris line draws across three glowing nodes; the phase label is
   the prominent headline of each pillar (highlighted), the value line sits
   under it in verdigris. (Animated in JS; static + legible with no JS.)
   ============================================================ */
.nf-lifecycle { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 40px 0 8px; }
/* Connecting line, drawn between the first and last node centres. */
.nf-lc-line { position: absolute; top: 7px; left: 16.66%; right: 16.66%; height: 2px; background: rgba(71,160,140,0.3); z-index: 0; }
.nf-lc-stage { position: relative; z-index: 1; text-align: center; }
.nf-lc-node {
  display: block; width: 16px; height: 16px; margin: 0 auto 26px; border-radius: 50%;
  background: var(--iron-900); border: 2px solid var(--accent);
  box-shadow: 0 0 0 5px rgba(71,160,140,0.1), 0 0 16px rgba(71,160,140,0.55);
}
.nf-lc-label { font-family: 'Space Grotesk', sans-serif; font-size: clamp(20px, 2.3vw, 26px); font-weight: 500; color: var(--fog); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 10px; }
.nf-lc-head { font-family: 'Inter Tight', sans-serif; font-size: 15px; font-weight: 500; color: var(--accent); line-height: 1.4; margin: 0 0 12px; }
.nf-lc-body { font-family: 'Inter Tight', sans-serif; font-size: 14px; color: var(--iron-200); line-height: 1.6; margin: 0 auto; max-width: 300px; }

@media (max-width: 760px) {
  .nf-lifecycle { grid-template-columns: 1fr; gap: 38px; }
  .nf-lc-line { display: none; }
  .nf-lc-node { margin-bottom: 16px; }
}

/* ============================================================
   Engagement journey — Feel It → Reach It → Anchor It read as a connected
   path (arrows between the steps), with a lift + verdigris glow on hover and
   the number badge inverting to a solid chip.
   ============================================================ */
.nf-eng-flow { display: flex; align-items: stretch; gap: 4px; }
.nf-eng-flow > .nf-eng-card { flex: 1 1 0; min-width: 0; }

.nf-eng-card { position: relative; transition: transform 300ms cubic-bezier(0.2,0,0,1), box-shadow 300ms cubic-bezier(0.2,0,0,1); }
.nf-eng-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -24px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(71,160,140,0.5); }
/* Accent bar at the card's top edge - drawn in left-to-right as the step activates. */
.nf-eng-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); border-radius: 6px 6px 0 0; transform-origin: left center; }

.nf-eng-num {
  flex-shrink: 0; font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.05em;
  color: var(--accent); background: transparent; border: 1px solid rgba(71,160,140,0.4); border-radius: 6px; padding: 6px 9px;
  transition: background 300ms cubic-bezier(0.2,0,0,1), color 300ms cubic-bezier(0.2,0,0,1), border-color 300ms cubic-bezier(0.2,0,0,1);
}
.nf-eng-card:hover .nf-eng-num { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.nf-eng-arrow { flex: 0 0 auto; align-self: center; display: flex; align-items: center; justify-content: center; padding: 0 8px; color: var(--accent); opacity: 0.6; }
.nf-eng-arrow span { display: block; font-family: 'Inter Tight', sans-serif; font-size: 22px; line-height: 1; }

@media (max-width: 900px) {
  .nf-eng-flow { flex-direction: column; align-items: stretch; gap: 4px; }
  .nf-eng-arrow { padding: 4px 0; }
  .nf-eng-arrow span { transform: rotate(90deg); }
}