/* Home page (HOME_PAGE_SPEC.md). Values come from tokens.css only. */

.srv-main--flush { padding-top: 0; }

/* Reveal targets start hidden only when motion runs (see motion-flag.js). */
.srv-motion [data-reveal] { opacity: 0; }
.srv-motion [data-hero-line] { transform: scaleX(0); }

/* ---------- 1. Hero ----------
   Reference look (docs/home/reference-hero.png): narrow top-left column,
   light serif headline, the video stays the subject. */
.srv-hero {
  --hero-column: max(30vw, 380px);
  --hero-dim: 0.22; /* smallest desktop dim that keeps the subline at 4.5:1+ at 1440 (0.18 measured 4.38:1); phones below */
  position: relative;
  display: grid;
  align-items: start;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

.srv-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Scaled from the left edge so the bright galaxy core sits right, away from the text.
     home.js starts the scroll push-in from this framing. */
  transform: scale(1.15);
  transform-origin: left center;
  will-change: transform;
}
.srv-hero__poster,
.srv-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.srv-hero__video { opacity: 0; transition: opacity var(--dur-slow); }
.srv-hero__video.is-playing { opacity: 1; }

/* One flat dim layer over the whole video. No gradient, no blur. */
.srv-hero__dim { position: absolute; inset: 0; background: var(--bg); opacity: var(--hero-dim); }

.srv-hero__content {
  padding-top: max(17dvh, calc(var(--header-height) + var(--header-inset) * 2 + var(--space-6)));
  padding-bottom: var(--space-16);
}
.srv-hero__text { max-width: var(--hero-column); }

.srv-hero__label {
  color: var(--ink-muted);
  font: 500 var(--text-micro) var(--font-sans);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.srv-hero__label-num { color: var(--accent); }

.srv-hero__title {
  margin-top: var(--space-4);
  font: 300 var(--text-hero-title) var(--font-serif);
  letter-spacing: var(--tracking-hero);
}
.srv-hero__title em { color: var(--accent); font-style: italic; }

.srv-hero__line {
  display: block;
  width: var(--space-24);
  height: 1px;
  margin-block: var(--space-6);
  background: var(--ink);
  transform-origin: left center;
}
.srv-hero__subline { color: var(--ink); font: 300 var(--text-body-lg) var(--font-sans); }
.srv-hero__lead {
  max-width: var(--measure-lead);
  margin-top: var(--space-4);
  color: var(--ink-soft);
  font: 300 var(--text-lead) var(--font-sans);
}

/* Quiet text link, not a button. */
.srv-hero__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-block: var(--space-2);
  color: var(--ink);
  font: 500 var(--text-micro) var(--font-sans);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
}
.srv-hero__link:hover { color: var(--accent); }
.srv-hero__link-arrow { display: inline-block; transition: transform var(--dur-fast); }
.srv-hero__link:hover .srv-hero__link-arrow,
.srv-hero__link:focus-visible .srv-hero__link-arrow { transform: translateX(var(--space-1)); }

/* ---------- Chapter counter (top-right, desktop only) ---------- */
.srv-progress {
  position: fixed;
  top: calc(var(--header-height) + var(--header-inset) * 2 + var(--space-4));
  right: max(var(--gutter), calc((100% - var(--content-width)) / 2));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  pointer-events: none;
}
.srv-progress[hidden] { display: none; }
.srv-progress { transition: opacity var(--dur-base); }
.srv-progress.is-faded { opacity: 0; }
.srv-progress__current { font: 300 var(--text-h2) var(--font-serif); font-variant-numeric: lining-nums; }
.srv-progress__rule { width: var(--space-12); height: 1px; background: var(--line-strong); }
.srv-progress__total {
  color: var(--ink-muted);
  font: 500 var(--text-micro) var(--font-sans);
  letter-spacing: var(--tracking-wide);
}
.srv-progress__dots { display: flex; gap: var(--space-2); margin-left: var(--space-3); }
.srv-progress__dots > span {
  width: var(--space-2);
  height: var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-base), border-color var(--dur-base);
}
.srv-progress__dots > span.is-active { border-color: var(--accent); background: var(--accent); }

@media (max-width: 767px) {
  .srv-hero__content { padding-top: calc(var(--header-height) + var(--header-inset) * 2 + var(--space-8)); }
  .srv-hero { --hero-dim: 0.15; } /* phones: text covers more of the screen; 15% max (Elyas) */
  .srv-hero__text { max-width: none; }
  .srv-progress { display: none; }
}

/* ---------- Chapters (sections 3 to 6): text one side, diagram the other ---------- */
.srv-chapter { position: relative; border-top: 1px solid var(--line); }
.srv-chapter--who        { --chapter-span: 220vh; }
.srv-chapter--legacy     { --chapter-span: 220vh; }
.srv-chapter--resilience { --chapter-span: 300vh; } /* the peak gets the most scroll room */
.srv-chapter--multi      { --chapter-span: 200vh; }

.srv-chapter__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100dvh;
  padding-block: var(--section-pad);
  overflow: hidden;
  isolation: isolate;
}

/* Desktop with motion: the stage pins while the section scrolls past. */
@media (min-width: 768px) and (min-height: 640px) {
  .srv-motion .srv-chapter { height: var(--chapter-span); }
  .srv-motion .srv-chapter__stage {
    position: sticky;
    top: 0;
    height: 100dvh;
    padding-block: calc(var(--header-height) + var(--header-inset) * 2) var(--space-12);
  }
}

.srv-chapter__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: center;
  gap: var(--space-16);
}
.srv-chapter--flip .srv-chapter__text { order: 2; }
.srv-chapter__text > * + * { margin-top: var(--space-4); }
.srv-chapter__text .srv-h2 { margin-top: var(--space-4); }
.srv-chapter__copy { font: 400 var(--text-body-lg) var(--font-sans); }
.srv-chapter__copy + .srv-chapter__copy { margin-top: var(--space-4); }
.srv-chapter__visual { margin: 0; }

.srv-chapter__backdrop { position: absolute; inset: 0; z-index: -1; }
.srv-chapter__backdrop img { width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }

/* ---------- Diagrams (inline SVG, colors from tokens) ---------- */
.srv-dia { display: block; width: 100%; height: auto; max-height: 68dvh; overflow: visible; }
.srv-dia text { fill: var(--ink); font: 500 var(--text-code) var(--font-mono); text-anchor: middle; dominant-baseline: central; }
.srv-dia .srv-dia__caption { fill: var(--ink-muted); font: 400 var(--text-code-sm) var(--font-mono); text-anchor: start; }
.srv-dia .srv-dia__caption--center { text-anchor: middle; }
.srv-dia__links line { stroke: var(--line-strong); stroke-width: 2; }
.srv-dia__hops line,
.srv-dia__path { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.srv-dia__path--failed { stroke: var(--danger); stroke-dasharray: 6 10; opacity: 0.6; }
.srv-dia__path--was-ok { opacity: 0; }
.srv-dia__node circle { fill: var(--bg); stroke: var(--line-strong); stroke-width: 2; }
.srv-dia__node .srv-dia__node-ring { fill: none; stroke: var(--accent); stroke-width: 3; }
.srv-dia__node:not(.is-on-path) .srv-dia__node-ring { opacity: 0; }
.srv-dia__sidlist rect { fill: none; stroke: var(--accent); stroke-width: 2; }
.srv-dia__bar-frame { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.srv-dia__bar-tick { stroke: var(--line); stroke-width: 2; }
.srv-dia__bar text { fill: var(--ink-muted); }
.srv-dia__bar-fill { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.srv-dia__bar--short text { fill: var(--ink); }
.srv-dia__break line { stroke: var(--danger); stroke-width: 4; stroke-linecap: round; }
.srv-dia .srv-dia__break text { fill: var(--danger); font: 600 var(--text-code) var(--font-mono); }
.srv-dia__packet { fill: var(--accent); }
.srv-dia .srv-dia__metric { fill: var(--ink); font: 500 var(--text-h3) var(--font-display); }
.srv-dia__ring { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 2 8; }
.srv-dia__earth { fill: var(--surface-raised); stroke: var(--line-strong); stroke-width: 2; }
.srv-dia__sat { fill: var(--accent); }
.srv-dia__sat--small { fill: var(--ink); }

/* ---------- Vendor row (scroll-driven on desktop, wraps otherwise) ---------- */
.srv-vendors {
  margin-top: var(--space-12);
  padding-inline: var(--gutter);
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.srv-vendors__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-12);
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--space-4) 0;
  list-style: none;
  color: var(--ink-muted);
  font: 400 var(--text-body-lg) var(--font-display);
}
.srv-vendors__list li { white-space: nowrap; }
@media (min-width: 768px) {
  .srv-motion .srv-vendors__list { flex-wrap: nowrap; justify-content: flex-start; max-width: none; width: max-content; }
}

/* ---------- 2. Five pillars (hidden until items exist) ---------- */
.srv-pillars { border-top: 1px solid var(--line); }
.srv-pillars__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-6);
  padding: 0;
  list-style: none;
}

/* ---------- 7. Closing ---------- */
.srv-closing { border-top: 1px solid var(--line); }
/* Desktop: the close fills the screen, so the video card scrolls fully past
   the chapter counter before the page ends (and the ending holds). */
@media (min-width: 768px) {
  .srv-closing { display: flex; align-items: center; min-height: 100dvh; }
  .srv-closing__inner { width: 100%; }
}
.srv-closing__title {
  max-width: calc(var(--content-width) * 0.8);
  margin-top: var(--space-6);
  font: 300 var(--text-display-lg) var(--font-serif);
}
.srv-closing__action { margin-top: var(--space-8); }

@media (max-width: 767px) {
  .srv-chapter__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .srv-chapter--flip .srv-chapter__text { order: 0; }
  .srv-dia { max-height: none; }
}

/* ---------- Featured videos (hidden until lib/home-videos.json has entries) ---------- */
.srv-videos { border-top: 1px solid var(--line); }
.srv-videos__heading { margin-top: var(--space-4); }
.srv-videos__card { margin-top: var(--space-8); }

.srv-video__frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg);
}
.srv-video__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.srv-video__play {
  display: inline-grid;
  place-items: center;
  width: calc(var(--btn-height) * 1.6);
  height: calc(var(--btn-height) * 1.6);
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-reveal);
}
.srv-video__play:hover { border-color: var(--accent); color: var(--accent); }
.srv-video__play:active { transform: scale(var(--press-scale)); }
.srv-video__play svg { width: var(--space-8); height: var(--space-8); }
.srv-video__play[hidden] { display: none; }

.srv-video__consent { max-width: calc(var(--content-width) * 0.45); padding: var(--space-6); text-align: center; }
.srv-video__consent[hidden] { display: none; }
.srv-video__consent-text { color: var(--ink-soft); font: 400 var(--text-body-sm) var(--font-sans); }
.srv-video__consent-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); font: 400 var(--text-body-sm) var(--font-sans); }

.srv-video__title { margin-top: var(--space-4); font: 500 var(--text-h3) var(--font-display); }
.srv-video__note { margin-top: var(--space-1); color: var(--ink-muted); font: 400 var(--text-caption) var(--font-sans); }

.srv-videos__thumbs {
  display: flex;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: 0 0 var(--space-2);
  overflow-x: auto;
  list-style: none;
}
.srv-videos__thumb {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc(var(--space-24) * 2);
  aspect-ratio: 16 / 9;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast);
}
.srv-videos__thumb:hover { border-color: var(--line-strong); }
.srv-videos__thumb[aria-pressed="true"] { border-color: var(--accent); }
.srv-videos__thumb-icon svg { width: var(--space-6); height: var(--space-6); }
.srv-videos__thumb[aria-pressed="true"] .srv-videos__thumb-icon { color: var(--accent); }
.srv-videos__thumb-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font: 400 var(--text-body-sm) var(--font-sans);
}