/* ============================================================
   SITE MOTION — Stripe-inspired pass, 2026-09-26.
   Loaded by every page, after styles.css. styles.css is untouched.
   Revert: claudedocs/home-revert/README.md (tags home-v1, site-motion-v0).
   1. Heroes centred on the nav's content column
   2. Scroll reveal (classes added by js/site-motion.js)
   3. Systems diagrams on a navy dot grid (.estate / .estate-map)
   4. Slow colour drift in the closing CTA band
   5. Numbers row (.stat-strip) in the Stripe pattern
   ============================================================ */

/* 1. HEROES — the scene stage used to span the whole window, so every hero's
   art ran past the nav's right edge (up to ~285px at 1920). From 1200px up the
   stage is the content column itself (568px = half of 1200 - 2 x 2rem); the
   hero scripts size and place their scenes from the stage, so they follow.
   A short fade at each edge keeps full-width scenes (cyber grid, terrain,
   comms ground line) from ending in a hard vertical line. */
@media (min-width: 1200px) {
  .hero--earth .hero-earth-stage {
    left: calc(50% - 568px);
    right: calc(50% - 568px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  .hero--system .hero-earth-stage { -webkit-mask-image: none; mask-image: none; }  /* home art has its own edge mask */

  /* Home: narrower copy + smaller art so the two have air between them. The art's
     mask fades its outer ~8%, so the box runs 48px past the stage and the visible
     platform ends where the Contact Us button ends. */
  .hero--system .hero-earth-copy { max-width: 520px; }
  .hero--system .hero-system__art { right: -48px; width: min(620px, 86svh); }
  /* art is under ~800px at every width here, so use the small-art logo-row
     placement from styles.css (lower-right corner) instead of centred-bottom */
  .hero--system .hero-system__cloud { left: 76%; bottom: 7%; }
  .hero--system .hero-system__marks { gap: 18px; }
  .hero--system .hero-system__marks img { height: 24px; }
  .hero--system .hero-system__marks img:first-child { height: 32px; }
}

/* 2. SCROLL REVEAL — hidden only once JS has tagged the element, so the page
   reads fine without JS; js/site-motion.js skips it under reduced motion. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }

/* 3. SYSTEMS DIAGRAMS — navy band with a faint dot grid. A <div>, not a <section>,
   so styles.css's nth-of-type section colour rotation is unaffected. */
.estate {
  padding: 6rem 0;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--logo-cyan) 16%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(180deg, var(--text-strong) 0%, #020617 100%);
}
.estate h2 { color: var(--white); }
.estate .section-header p { color: #9FB0CC; }  /* same muted blue as the dark hero copy */
.estate .label { color: var(--logo-cyan); }

.estate-map {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  max-width: 1000px;
  margin: 0 auto;
}
.estate-map__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.estate-map__row { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; }
.estate-map__row--links { gap: 40%; }
.estate-map__row--hub { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.estate-map__row--hub > :first-child { justify-self: start; }
.estate-map__row--hub > :last-child { justify-self: end; }
.estate-map__caption {
  position: absolute; top: -1.75rem; left: 0; right: 0; text-align: center;
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: #9FB0CC;
}

.estate-node {
  position: relative; z-index: 1;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem; font-weight: 600; color: var(--white);
  background: var(--logo-blue-dark);
  border: 1px solid color-mix(in srgb, var(--logo-blue-mid) 60%, transparent);
  transition: box-shadow 0.6s ease, border-color 0.6s ease;
}
.estate-node--ghost { background: color-mix(in srgb, var(--logo-blue-dark) 35%, var(--text-strong)); }  /* opaque, so wires pass behind */
.estate-node.is-lit { border-color: var(--logo-cyan); box-shadow: 0 0 18px color-mix(in srgb, var(--logo-cyan) 45%, transparent); }
.estate-node--hub {
  padding: 1.25rem 2rem;
  font-size: 1.125rem; text-align: center;
  background: linear-gradient(90deg, var(--logo-blue-dark), var(--logo-green-dark));
  border-color: transparent;
}
.estate-node--hub small { display: block; font-size: 0.75rem; font-weight: 500; opacity: 0.85; margin-top: 0.25rem; }
.estate-node--cloud { display: flex; align-items: center; gap: 1.25rem; padding: 0.75rem 1.5rem; background: color-mix(in srgb, var(--white) 6%, transparent); }
.estate-node--cloud img { height: 28px; width: auto; display: block; }
.estate-node--cloud img:first-child { height: 34px; }  /* the AWS wordmark sits low in its box, as in the hero */

/* wires: a faint dashed track, plus a solid line that draws in over it */
.estate-wire { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.estate-wire--track { stroke: color-mix(in srgb, var(--logo-blue-mid) 45%, transparent); stroke-dasharray: 3 5; }
.estate-wire--draw {
  stroke: var(--logo-cyan);
  opacity: 0.55;
  stroke-dasharray: 1; stroke-dashoffset: 1;  /* pathLength="1" on the element */
  transition: stroke-dashoffset 1.1s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: var(--wire-delay, 0s);
}
.estate-map.is-drawn .estate-wire--draw { stroke-dashoffset: 0; }

@media (max-width: 760px) {
  .estate-map { gap: 2.25rem; }
  .estate-map__row--links { gap: 1.5rem; }
  /* phones: hub on its own line, tests + monitoring side by side beneath it */
  .estate-map__row--hub { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  .estate-node--hub { grid-column: 1 / -1; order: -1; justify-self: center; }
  .estate-map__row--hub > :first-child { justify-self: end; }
  .estate-map__row--hub > :last-child { justify-self: start; }
  .estate-node { font-size: 0.8125rem; padding: 0.4rem 0.8rem; }
}

/* 4. CTA — two soft brand-colour glows drifting behind the copy */
.cta::before {
  content: "";
  position: absolute; inset: -40%;
  background:
    radial-gradient(circle at 35% 45%, color-mix(in srgb, var(--logo-blue-mid) 22%, transparent), transparent 35%),
    radial-gradient(circle at 65% 55%, color-mix(in srgb, var(--logo-green-mid) 16%, transparent), transparent 35%);
  animation: cta-drift 26s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes cta-drift {
  from { transform: translate(-6%, -3%) rotate(0deg); }
  to   { transform: translate(6%, 3%) rotate(12deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cta::before { animation: none; }
  .estate-wire--draw { transition: none; stroke-dashoffset: 0; }
  .estate-node { transition: none; }
}

/* 5. NUMBERS ROW — Stripe pattern: no box, hairlines above and below, light
   numerals, one cell highlighted at a time (js/site-motion.js steps it). */
.stat-strip {
  background: none;
  border-radius: 0;
  overflow: visible;
  color: var(--text-strong);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat-strip__cell {
  position: relative;
  padding: 2.25rem 1.5rem;
  border-right: none;
}
/* short brand-gradient accent on the hairlines above and below the lit cell */
.stat-strip__cell::before,
.stat-strip__cell::after {
  content: "";
  position: absolute; left: 0; width: 70%; height: 1px;
  background: linear-gradient(90deg, var(--logo-blue-mid), var(--logo-green-mid), transparent);
  opacity: 0;
  transition: opacity 0.8s ease;
}
.stat-strip__cell::before { top: -1px; }
.stat-strip__cell::after { bottom: -1px; }
.stat-strip__cell.is-lit::before,
.stat-strip__cell.is-lit::after { opacity: 1; }
.stat-strip__num,
.stat-value {
  font-weight: 300;
  letter-spacing: -0.02em;
}
.stat-strip__num {
  font-size: 3rem;
  color: var(--text-muted);
  transition: color 0.8s ease;
}
.stat-strip__lab { color: var(--text-secondary); transition: color 0.8s ease; }
.stat-strip__cell.is-lit .stat-strip__num { color: var(--text-strong); }
.stat-strip__cell.is-lit .stat-strip__lab { color: var(--text-primary); }
.stat-value { font-size: 2.5rem; }
@media (max-width: 768px) {
  .stat-strip__cell { border-bottom: 1px solid var(--border); }
  .stat-strip__cell:last-child { border-bottom: none; }
  .stat-strip__num { font-size: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .stat-strip__cell::before, .stat-strip__cell::after, .stat-strip__num, .stat-strip__lab { transition: none; }
}