/* ═══════════════════════════════════════════════════════════════
   AGLF GEOSPATIAL GLYPH SYSTEM — Animated v2
   Original spatial-intelligence language for AGLF 2026.
   Stroke-draw · node activation · scanning · orbital motion ·
   rotational geometry · mouse parallax · scroll-triggered build.
   Companion JS: js/aglf-glyphs.js
   ═══════════════════════════════════════════════════════════════ */

/* ─── BASE GLYPH RULES ───────────────────────────────────────── */
.aglf-glyph {
  display: block;
  width: 100%;
  height: auto;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.aglf-glyph path,
.aglf-glyph circle,
.aglf-glyph ellipse,
.aglf-glyph rect {
  stroke: currentColor;
  fill: none;
}

/* ─── NAVIGATION GLYPHS ──────────────────────────────────────── */
.site-nav .aglf-glyph--nav {
  width: 13px;
  height: 13px;
  margin-right: .42rem;
  color: var(--text-subtle);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
  opacity: .85;
  transition: color .3s ease, opacity .3s ease, transform .3s ease;
}

.nav-link {
  position: relative;
}

.nav-link:hover .aglf-glyph--nav {
  color: var(--accent);
  opacity: 1;
  transform: scale(1.12);
}

.nav-link.is-active .aglf-glyph--nav {
  color: var(--aglf-gold-soft);
  opacity: 1;
}

.nav-link.is-active::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 50%;
  width: 60%;
  height: 2px;
  background: var(--aglf-gold-soft);
  border-radius: 1px;
  transform: translateX(-50%);
  pointer-events: none;
}

/* ─── DECORATIVE GLYPH FAMILIES ──────────────────────────────── */
.aglf-glyph--terrain path {
  stroke-width: 1;
  stroke-linecap: round;
  opacity: .8;
}

.aglf-glyph--graticule path,
.aglf-glyph--graticule circle {
  stroke-width: 1;
}

.aglf-glyph--orbit ellipse,
.aglf-glyph--orbit circle {
  stroke-width: 1.1;
}

.aglf-glyph--orbit .aglf-sat {
  fill: currentColor;
  stroke: none;
}

.aglf-glyph--network circle {
  stroke-width: 1.2;
}

.aglf-glyph--network path {
  stroke-width: 1;
  opacity: .75;
}

.aglf-glyph--signal path {
  stroke-width: 1.1;
  stroke-linecap: round;
}

/* ─── DRAW-IN SYSTEM ───────────────────────────────────────────
   Requires pathLength="1" on drawable SVG elements.
   Only active when JS is available (html.aglf-js), so the glyphs
   remain fully visible without JavaScript.
   ═══════════════════════════════════════════════════════════════ */
.aglf-js .aglf-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.aglf-js .is-in-view .aglf-draw {
  animation: aglf-draw var(--draw-dur, 1s) var(--ease-out) both;
  animation-delay: calc(var(--draw-i, 0) * 90ms);
}

@keyframes aglf-draw {
  to { stroke-dashoffset: 0; }
}

/* ─── NODE ACTIVATION ──────────────────────────────────────────
   Nodes pop in with scale + opacity.
   ═══════════════════════════════════════════════════════════════ */
.aglf-js .aglf-node {
  opacity: 0;
  transform: scale(.4);
  transform-box: fill-box;
  transform-origin: center;
}

.aglf-js .is-in-view .aglf-node {
  animation: aglf-node-in .5s var(--ease-out) both;
  animation-delay: calc(var(--node-i, 0) * .12s + .2s);
}

@keyframes aglf-node-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ─── SCANNING ─────────────────────────────────────────────────
   Thin scan line sweeps through the glyph group.
   ═══════════════════════════════════════════════════════════════ */
.aglf-js .aglf-scan {
  opacity: 0;
  transform-box: view-box;
  transform-origin: center;
}

.aglf-js .is-in-view .aglf-scan,
.aglf-js .is-loaded .aglf-scan {
  animation: aglf-scan 4.5s ease-in-out 1.2s infinite;
}

@keyframes aglf-scan {
  0%   { transform: translateY(-30px); opacity: 0; }
  15%  { opacity: .9; }
  85%  { opacity: .9; }
  100% { transform: translateY(150px); opacity: 0; }
}

/* ─── SPIN / ROTATION ──────────────────────────────────────────
   Continuous slow rotation. Set --spin-dur and origin via style.
   ═══════════════════════════════════════════════════════════════ */
.aglf-spin {
  animation-name: aglf-spin;
  animation-duration: var(--spin-dur, 34s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes aglf-spin {
  to { transform: rotate(360deg); }
}

.aglf-counter-spin {
  animation-name: aglf-counter-spin;
  animation-duration: var(--spin-dur, 18s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes aglf-counter-spin {
  to { transform: rotate(-360deg); }
}

/* ─── ORBITAL TRAVEL (squash + spin technique) ─────────────────
   The .aglf-orbit-travel wrapper applies:
   1) tilt rotation (inline transform)
   2) squash scaleY = ry/rx (inline transform)
   Inside: .aglf-spin rotates the satellite group; 
   .aglf-counter-spin cancels rotation on the satellite node
   so it stays circular (counter-squash via inline scale).
   ═══════════════════════════════════════════════════════════════ */

/* ─── SECTION WATERMARKS ───────────────────────────────────────
   Faint map-graph accents behind content. Static — no draw.
   ═══════════════════════════════════════════════════════════════ */
.editorial-section {
  isolation: isolate;
}

.aglf-watermark {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  color: var(--accent);
}

/* Suppress draw animations inside watermarks — keep them static */
.aglf-js .aglf-watermark .aglf-draw {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none;
}

/* Suppress node animations inside watermarks — show them static */
.aglf-js .aglf-watermark .aglf-node {
  opacity: .75;
  transform: none;
  animation: none;
}

/* Suppress scan sweep inside watermarks */
.aglf-js .aglf-watermark .aglf-scan {
  opacity: 0;
  animation: none;
}

.aglf-watermark--top-right {
  top: 3rem;
  right: 2rem;
  width: 150px;
  opacity: .5;
}

.aglf-watermark--top-left {
  top: 3rem;
  left: 2rem;
  width: 130px;
  opacity: .45;
}

.aglf-watermark--bottom-right {
  bottom: 3rem;
  right: 2rem;
  width: 130px;
  opacity: .4;
}

.aglf-watermark--center {
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, 72%);
  opacity: .35;
}

/* ─── SECTION LABEL GLYPHS ─────────────────────────────────────
   Inline 18px icons that precede each .section-label text.
   Family-colored: blue=intelligence, green=terrain, gold=leadership.
   ═══════════════════════════════════════════════════════════════ */
.section-glyph {
  display: inline-flex;
  width: 18px;
  height: 18px;
  margin-right: .55rem;
  vertical-align: -3px;
  flex-shrink: 0;
}

.section-glyph path,
.section-glyph circle,
.section-glyph ellipse,
.section-glyph line,
.section-glyph rect {
  stroke: currentColor;
  fill: none;
}

/* Family colors */
.section-glyph--graticule { color: var(--ocean-blue); }
.section-glyph--signal    { color: var(--ocean-blue); }
.section-glyph--network   { color: var(--aglf-gold); }
.section-glyph--orbit     { color: var(--ocean-blue); }
.section-glyph--terrain   { color: var(--ocean-green-deep); }

/* ─── HERO ATMOSPHERE ──────────────────────────────────────────
   Terrain + orbit beyond the copy block.
   Sits above the ocean layers, below the hero content.
   ═══════════════════════════════════════════════════════════════ */
.hero-glyphfield {
  position: absolute;
  top: clamp(7rem, 20vh, 12rem);
  right: 2rem;
  width: min(400px, 36vw);
  z-index: 0;
  pointer-events: none;
}

.hero-glyphfield .aglf-glyph {
  position: absolute;
  width: 100%;
  height: auto;
}

.hero-glyphfield .aglf-glyph--terrain {
  top: 0;
  color: var(--aglf-gold-soft);
  opacity: .16;
  animation: aglf-terrain-drift 34s ease-in-out infinite alternate;
}

.hero-glyphfield .aglf-glyph--orbit {
  top: 6%;
  right: 0;
  width: 48%;
  color: var(--ocean-green);
  opacity: .6;
}

.hero-glyphfield .aglf-glyph--orbit .aglf-sat {
  color: var(--aglf-gold-soft);
}

@keyframes aglf-terrain-drift {
  from { transform: translateX(-3px); }
  to { transform: translateX(3px); }
}

/* ─── HERO COORDINATES ─────────────────────────────────────────
   Bottom-left coordinate block. Fades in on load.
   ═══════════════════════════════════════════════════════════════ */
.hero-coords {
  position: absolute;
  bottom: 3rem;
  left: 2rem;
  font-family: var(--font-mono);
  font-size: .62rem;
  color: var(--aglf-gold-soft);
  letter-spacing: .1em;
  line-height: 2;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  animation: aglf-fade-in 1.2s ease .8s both;
}

.hero-coords span {
  display: block;
}

@keyframes aglf-fade-in {
  to { opacity: .8; }
}

/* ─── ANIMATED SECTION DIVIDERS ────────────────────────────────
   ●────────◇────────● with coordinate labels.
   ═══════════════════════════════════════════════════════════════ */
.aglf-divider {
  display: flex;
  justify-content: center;
  padding: 2.5rem 0;
}

.aglf-divider .aglf-glyph {
  width: min(400px, 80%);
  color: var(--border);
}

.aglf-divider text {
  fill: var(--text-subtle);
  stroke: none;
}

/* Keep existing datum diamond for non-divider sections */
.editorial-section-lined::after,
.site-footer::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translateX(-50%) rotate(45deg);
  background: #ffffff;
  border: 1px solid var(--border);
  z-index: 1;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   REGISTRATION / SUCCESS — faint graticule on navy canvas
   ═══════════════════════════════════════════════════════════════ */
.registration-page .reg-section,
.success-page .reg-section {
  isolation: isolate;
}

.registration-page .reg-glyph,
.success-page .reg-glyph {
  position: absolute;
  top: 3.5rem;
  right: 2.25rem;
  width: 200px;
  color: var(--reg-gold-soft);
  opacity: .14;
  z-index: -1;
  pointer-events: none;
}

.success-page .reg-glyph {
  right: auto;
  left: 2.25rem;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER SIGNATURE EMBLEM — AGLF spatial seal
   Construction sequence → idle rotation.
   ═══════════════════════════════════════════════════════════════ */
.site-footer-sign {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}

.site-footer .aglf-glyph--signature {
  width: 34px;
  height: 34px;
  --glyph-gold: #D4A72C;
  --glyph-gold-2: #E5C45A;
  --glyph-line: #5B6B78;
}

.aglf-glyph--signature .sig-ring {
  stroke: var(--glyph-gold, currentColor);
}

.aglf-glyph--signature .sig-orbit-draw {
  stroke: var(--glyph-gold, currentColor);
}

.aglf-glyph--signature .sig-line,
.aglf-glyph--signature .sig-contour,
.aglf-glyph--signature .sig-datum {
  stroke: var(--glyph-line, currentColor);
}

.aglf-glyph--signature .sig-sat {
  fill: var(--glyph-gold-2, currentColor);
  stroke: none;
  opacity: 0;
  transition: opacity .4s ease;
}

.aglf-glyph--signature .sig-ticks {
  opacity: 0;
  transition: opacity .6s ease;
}

/* Construction complete — reveal satellite + ticks */
.aglf-glyph--signature.is-drawn .sig-sat {
  opacity: 1;
}

.aglf-glyph--signature.is-drawn .sig-ticks {
  opacity: .7;
}

/* Idle state — continuous rotations */
.aglf-glyph--signature .sig-spin {
  transform-box: view-box;
  transform-origin: 36px 36px;
}

.aglf-glyph--signature.is-idle .sig-spin {
  animation: aglf-spin 46s linear infinite;
}

.aglf-glyph--signature .sig-orbit-spin {
  transform-box: view-box;
  transform-origin: 36px 36px;
}

.aglf-glyph--signature .sig-sat-wrap {
  transform-box: fill-box;
  transform-origin: center;
}

.aglf-glyph--signature.is-idle .sig-orbit-spin {
  animation: aglf-spin 18s linear infinite;
}

.aglf-glyph--signature.is-idle .sig-sat-wrap {
  animation: aglf-counter-spin 18s linear infinite;
}

/* Signature idle blip on satellite */
.aglf-glyph--signature.is-idle .sig-sat {
  animation: aglf-sig-blip 4.2s ease-in-out infinite;
}

@keyframes aglf-sig-blip {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* ═══════════════════════════════════════════════════════════════
   PARALLAX — mouse-driven micro-displacement
   JS sets --aglf-px / --aglf-py on <html> (range -1..1).
   Elements declare --depth for displacement magnitude.
   ═══════════════════════════════════════════════════════════════ */
[data-parallax] {
  transform: translate3d(
    calc(var(--aglf-px, 0) * var(--depth, 0px)),
    calc(var(--aglf-py, 0) * var(--depth, 0px)),
    0
  );
  will-change: transform;
}

/* ═══════════════════════════════════════════════════════════════
   PARTNER CAROUSEL — data-stream marquee
   White wordmark cards flow in one continuous slow stream.
   .is-manual (JS adds it on coarse pointers / reduced motion)
   turns the row into a static, horizontally scrollable strip.
   Drop in a second .partner-tier for the two-row layout: the
   even tier automatically runs reversed at a slower speed.
   ═══════════════════════════════════════════════════════════════ */
.partner-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2.5rem;
}

.partner-heading h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.partner-lede {
  margin: .75rem 0 0;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--text-muted);
}

.partner-connect {
  width: 46px;
  margin: -1rem auto 2rem;
  color: var(--aglf-gold);
  opacity: .55;
}

.partner-tiers {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.partner-tier {
  overflow: hidden;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.partner-tier::-webkit-scrollbar {
  display: none;
}

.partner-tier-track {
  display: flex;
  width: max-content;
  animation: partner-marquee var(--marquee-dur, 34s) linear infinite;
  will-change: transform;
}

/* Each group repeats the full partner set; groups abut exactly
   (trailing padding + gap) so shifting -50% loops seamlessly. */
.partner-tier-group {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  padding-right: 1.25rem;
  flex-shrink: 0;
}

@keyframes partner-marquee {
  to { transform: translateX(-50%); }
}

@media (hover: hover) {
  .partner-tier:hover .partner-tier-track {
    animation-play-state: paused;
  }
}

/* Upgrade path: a second .partner-tier runs reversed, slower */
.partner-tier:nth-child(even) .partner-tier-track {
  animation-direction: reverse;
  animation-duration: calc(var(--marquee-dur, 34s) * 1.35);
}

.partner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-width: 250px;
  padding: 1.5rem 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  text-align: center;
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}

.partner-datum {
  display: block;
  width: 10px;
  height: 10px;
  margin-bottom: .5rem;
  border: 1.5px solid var(--aglf-gold);
  transform: rotate(45deg);
  transition: background .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}

.partner-wordmark {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--text);
}

.partner-category {
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.partner-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-border);
  box-shadow: 0 14px 28px -14px rgba(255, 87, 34, .28);
}

/* Node activation on the datum diamond */
.partner-card:hover .partner-datum {
  background: var(--aglf-gold);
  border-color: var(--aglf-gold);
  box-shadow: 0 0 0 4px var(--gold-dim);
}

.partner-note {
  margin: 2rem 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.partner-note a {
  color: var(--accent);
}

.partner-note a:hover {
  text-decoration: underline;
}

/* Manual mode — coarse pointer / reduced motion (JS adds .is-manual):
   static, native horizontal scroll, no auto-motion */
.is-manual .partner-tier {
  overflow-x: auto;
  -webkit-mask-image: none;
  mask-image: none;
}

.is-manual .partner-tier-track {
  animation: none;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-glyphfield { width: min(300px, 34vw); }
}

@media (max-width: 768px) {
  .hero-glyphfield { display: none; }
  .hero-coords { display: none; }

  .aglf-watermark--top-right,
  .aglf-watermark--top-left,
  .aglf-watermark--bottom-right {
    width: 108px;
    opacity: .3;
  }

  .aglf-watermark--center { display: none; }

  .registration-page .reg-glyph,
  .success-page .reg-glyph {
    width: 140px;
    opacity: .1;
  }

  .aglf-divider { padding: 1.5rem 0; }
  .aglf-divider .aglf-glyph { width: min(320px, 85%); }

  .section-glyph { width: 15px; height: 15px; margin-right: .4rem; }

  .nav-link.is-active::after { display: none; }

  .partner-heading { margin-bottom: 1.75rem; }
  .partner-connect { width: 38px; }
  .partner-card { min-width: 210px; padding: 1.25rem 1.5rem; }
  .partner-tier-group { gap: 1rem; padding-right: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════
   migration.css sets animation-duration: 0.01ms globally.
   We additionally ensure draw/node states snap to final values
   and parallax is disabled.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero-glyphfield .aglf-glyph--terrain {
    animation: none;
    transform: none;
  }

  .hero-coords {
    animation: none;
    opacity: .8;
  }

  .aglf-draw {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }

  .aglf-node {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .aglf-scan { animation: none; }

  .aglf-spin,
  .aglf-counter-spin {
    animation: none;
  }

  /* Partner stream — static, horizontally scrollable collection */
  .partner-tier {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .partner-tier-track {
    animation: none;
  }

  [data-parallax] {
    transform: none;
    will-change: auto;
  }

  .aglf-glyph--signature .sig-sat {
    opacity: 1;
    animation: none;
  }

  .aglf-glyph--signature.is-drawn .sig-sat,
  .aglf-glyph--signature.is-idle .sig-sat {
    animation: none;
  }

  .aglf-glyph--signature .sig-ticks {
    opacity: .7;
  }

  .aglf-glyph--signature .sig-spin,
  .aglf-glyph--signature.is-idle .sig-spin,
  .aglf-glyph--signature .sig-orbit-spin,
  .aglf-glyph--signature.is-idle .sig-orbit-spin,
  .aglf-glyph--signature .sig-sat-wrap,
  .aglf-glyph--signature.is-idle .sig-sat-wrap {
    animation: none;
  }
}