/* ==========================================================================
   alumnetwork — landing view
   Single-screen hero with the interactive fluid background.
   ========================================================================== */

@font-face {
  font-family: "Host Grotesk";
  src: url("assets/fonts/host-grotesk-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0a0a0a;
  --surface: rgba(255, 255, 255, 0.03);
  --border-strong: rgba(255, 255, 255, 0.16);
  --brand: #2e9e5b;
  --brand-light: #6fbf8f;
  --text: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.8);
  --font-display: "Host Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --container: 1140px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1 { font-family: var(--font-display); font-weight: 600; margin: 0; }
p { margin: 0; }

::selection { background: rgba(46, 158, 91, 0.45); }

.container { width: min(100% - 48px, var(--container)); margin-inline: auto; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 48px 0;
  overflow: hidden;
}

/* Fog-of-war background layer (drawn by fog-of-war.js) */
.fog-canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}

/* Miniature skyline banner — same fog-of-war canvas, ~33% of the full hero height */
.hero-mini {
  position: relative;
  height: 33vh;
  height: 33svh;
  overflow: hidden;
  background: #0a0a0a;
}

/* NHI logo emblem — inline inside the headline's "emp◼werment" */
.logo-slot {
  position: relative;
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  vertical-align: -0.05em;
}
.logo-canvas {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 3.4em;
  height: 3.4em;
  pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 14px; color: var(--text-secondary);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-light);
  box-shadow: 0 0 0 0 rgba(111, 191, 143, 0.6);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(111, 191, 143, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(111, 191, 143, 0); }
  100% { box-shadow: 0 0 0 0 rgba(111, 191, 143, 0); }
}

.hero-title,
.comparison-title {
  margin-top: 26px;
  font-size: clamp(44px, 7.2vw, 78px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.hero-title {
  font-family: "Cormorant Garamond", Didot, "Bodoni MT", Georgia, serif;
  font-weight: 600;
  font-variant-ligatures: common-ligatures discretionary-ligatures;
  font-feature-settings: "liga" 1, "clig" 1, "dlig" 1, "ss01" 1;
}
.comparison-title {
  margin-top: 22px;
  font-family: "Cormorant Garamond", Didot, "Bodoni MT", Georgia, serif;
  font-weight: 600;
  font-variant-ligatures: common-ligatures discretionary-ligatures;
  font-feature-settings: "liga" 1, "clig" 1, "dlig" 1, "ss01" 1;
}
/* wrapper: plain inline container with the dark separation shadow */
.hero-title .empower-wrap,
.comparison-title .empower-wrap {
  display: inline-block;
  position: relative;
  /* cursor-driven lighting state (updated by gem-light.js) */
  --lx: 0.5; --act: 0;
  filter: drop-shadow(0 0.02em 0.06em rgba(0, 0, 0, 0.5));
}
/* the enlarged word holding the emblem — flat blue, cursor-lit */
.hero-title .empower,
.comparison-title .empower {
  position: relative;
  display: inline-block;
  font-family: "Cormorant Garamond", Didot, "Bodoni MT", Georgia, serif;
  font-weight: 600;
  font-size: 1.3em;
  letter-spacing: 0.005em;
  background-image:
    /* specular shine band under the cursor */
    linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, calc(0.85 * var(--act))) 50%, transparent 70%),
    /* light pool around the cursor */
    radial-gradient(circle, rgba(255, 255, 255, calc(0.5 * var(--act))), rgba(255, 255, 255, 0) 60%),
    /* whole-word glisten: every letter shimmers as the cursor arrives */
    linear-gradient(0deg, rgba(255, 255, 255, calc(0.55 * var(--act))), rgba(255, 255, 255, calc(0.55 * var(--act)))),
    /* flat blue base */
    linear-gradient(0deg, #2f80ed, #2f80ed);
  background-size: 30% 100%, 45% 100%, 100% 100%, 100% 100%;
  background-position:
    calc(var(--lx) * 100%) 0,
    calc(var(--lx) * 100%) 0,
    0 0,
    0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(calc((var(--lx) - 0.5) * 0.6em) 0 0.18em rgba(47, 128, 237, calc(0.2 + 0.25 * var(--act))));
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-title .empower,
  .comparison-title .empower { background: none; color: #2f80ed; -webkit-text-fill-color: currentColor; }
}
/* quieter second line */
.hero-title .tail,
.comparison-title .tail {
  font-size: 0.55em;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

/* ---------- Floating action button ---------- */
.fab-signon {
  position: fixed; top: 20px; right: 20px; z-index: 10;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: #4f91f2;
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(79, 145, 242, 0.45);
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.fab-signon:hover {
  background: #73a9f5;
  border-color: rgba(255, 255, 255, 0.4);
}
.fab-signon:active { transform: scale(0.97); }
.fab-signon:focus-visible {
  outline: 2px solid var(--brand-light);
  outline-offset: 3px;
}

.welcome-fab {
  position: fixed; bottom: 28px; left: 50%; z-index: 10;
  transform: translateX(-50%);
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: #4f91f2;
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(79, 145, 242, 0.45);
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
  animation: welcome-fab-in .3s ease;
}
.welcome-fab:hover {
  background: #73a9f5;
  border-color: rgba(255, 255, 255, 0.4);
}
.welcome-fab:focus-visible {
  outline: 2px solid var(--brand-light);
  outline-offset: 3px;
}
.welcome-fab[hidden] { display: none; }
@keyframes welcome-fab-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.signon-dialog {
  width: min(420px, calc(100% - 32px));
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background: #151218;
  color: var(--text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.signon-dialog::backdrop { background: rgba(0, 0, 0, 0.72); }
.signon-form { position: relative; display: grid; gap: 12px; padding: 32px; }
.dialog-close {
  position: absolute; top: 12px; right: 14px;
  border: 0; background: transparent; color: var(--text-secondary);
  font-size: 26px; line-height: 1; cursor: pointer;
}
.dialog-kicker { color: #2f80ed; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; }
.signon-form h2 { margin: 0; font-family: var(--font-display); font-size: 32px; line-height: 1.1; }
.dialog-copy { color: var(--text-secondary); }
.signon-form label { font-size: 14px; color: var(--text-secondary); }
.signon-form input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: rgba(255, 255, 255, 0.06); color: var(--text); font: inherit;
}
.dialog-submit { padding: 12px 16px; border: 0; border-radius: 8px; background: #2f80ed; color: #fff; font: inherit; cursor: pointer; }
.dialog-submit:hover { background: #4f91f2; }
.dialog-status { min-height: 1.5em; color: var(--brand-light); font-size: 14px; }

/* ---------- People section (black screen) ---------- */
.people {
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 110px 0 130px;
  overflow: hidden;
}
.people-title {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--text);
}

/* two marquee rows drifting in opposite directions */
.marquee {
  margin-top: 72px;
  display: flex; flex-direction: column; gap: 22px;
}
.marquee-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.marquee-row::-webkit-scrollbar {
  display: none;
}
.marquee-track {
  display: flex; gap: 18px;
  width: max-content;
  padding: 4px 0;
  animation: marquee-left 70s linear infinite;
}
.marquee-row.reverse .marquee-track {
  animation-name: marquee-right;
  animation-duration: 88s;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.people-card {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 30px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16.5px;
  font-weight: 500;
  white-space: nowrap;
}
.people-card::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-light);
  flex-shrink: 0;
}

/* ---------- Entrance animation ---------- */
.reveal {
  opacity: 0; transform: translateY(18px);
  animation: reveal-up .7s cubic-bezier(.22,.65,.3,1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes reveal-up {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .pulse-dot { animation: none; }
  .hero-title .empower-wrap { --lx: 0.5; --act: 0; }
}

@media (max-width: 560px) {
  .container { width: calc(100% - 36px); }
}