/* ═══════════════════════════════════════════════════════════════════
   SAMARITAN
   A reserved name with nothing behind it yet, which is exactly what
   the page says. The design job is to make "we have not built this"
   read as deliberate rather than as an unfinished page, so the one
   piece of ornament on the page is the word itself.

   Everything else here is restraint: a cool platinum ground, a single
   metal plate of status rows, and no imagery.
   ═══════════════════════════════════════════════════════════════════ */


/* ── The word ──────────────────────────────────────────────────────
   Two layers, and the split is the whole trick.

   The BASE layer is a static metal ramp and never moves. It is what the
   word looks like when nothing is happening.

   The GLINT layer sits on top and is fully TRANSPARENT except for one
   narrow band. It is 250% wide, so it can park the band off the left
   edge, slide it the whole way across, and end with it off the right
   edge. Between sweeps there is no glint on the word at all.

   That is what the earlier version got wrong. It used a single repeating
   gradient whose period was the word, so a band was permanently sitting
   on the letters: the sweep visibly began and ended on the same glyph
   instead of crossing and leaving. Parking the band outside the word is
   the only way the pass reads as a pass.

   Because both ends of the sweep show the glint layer's transparent
   region, the first and last frames are identical and the loop has no
   seam. No angle constraint either, so the gradient keeps its tilt.

   The two animations do not touch the same properties. fadeUp owns
   opacity and transform; the sheen owns background-position, and only
   the first layer's half of it. */
.samaritan-title {
  /* Load-bearing. background-clip: text paints the gradient over the
     element's BOX, not its glyphs, and an h1 is a block: left as one it
     spans the full container and the word picks up a single flat slice
     of the ramp. Shrunk to the word, the whole ramp lands on the
     letters, which is the only reason this reads as metal. */
  display: inline-block;
  color: #3b4250;
  animation: fadeUp 0.8s var(--ease-out-expo) 0.2s both;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .samaritan-title {
    background-image:
      /* glint: transparent, then a band, then transparent again. The
         band is kept narrow on purpose. Its peak measures about 1.4:1
         against this page's ground, so a band wider than a glyph would
         leave a letter effectively blank as it passed over. */
      linear-gradient(100deg,
        rgba(206, 213, 223, 0) 0%,
        rgba(206, 213, 223, 0) 45%,
        rgba(206, 213, 223, 0.45) 48%,
        rgba(214, 221, 231, 1) 50%,
        rgba(206, 213, 223, 0.45) 52%,
        rgba(206, 213, 223, 0) 55%,
        rgba(206, 213, 223, 0) 100%),
      /* base: the resting metal */
      linear-gradient(100deg,
        #3f4655 0%,
        #2e3441 34%,
        #4a5263 62%,
        #363d4c 100%);
    background-size: 250% 100%, 100% 100%;
    background-position: 0 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: fadeUp 0.8s var(--ease-out-expo) 0.2s both,
               samaritanSheen 6.4s 0.9s infinite both;
  }
}

/* One pass, then the wait. Only the glint layer's position changes; the
   base sits at 0 0 throughout. The band is off-word at both 0% and 28%,
   so holding the last keyframe and restarting is invisible. */
@keyframes samaritanSheen {
  0%   { background-position: 100% 0, 0 0; animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
  28%  { background-position: 0 0, 0 0; }
  100% { background-position: 0 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .samaritan-title {
    animation: none;
    background-position: 0 0, 0 0;
  }
}


/* ── Prose ────────────────────────────────────────────────────────
   Same measure and rhythm as /monarch. Lifted rather than reinvented
   so the two reference pages read as one pair. */
.samaritan-page .prose {
  max-width: 70ch;
}
.samaritan-page .prose p {
  font-size: var(--text-lg);
  color: var(--text-50);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}
.samaritan-page .prose strong {
  color: var(--text-90);
  font-weight: 500;
}
.samaritan-page .prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.samaritan-page .prose ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.samaritan-page .prose li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-lg);
  color: var(--text-50);
  line-height: var(--leading-relaxed);
}
.samaritan-page .prose ul > li::before {
  content: '·';
  position: absolute;
  left: var(--space-2);
  color: var(--accent);
}


/* ── Status plate ─────────────────────────────────────────────────
   A brushed panel rather than a model card, because a card would
   imply there is a model. The 1px top highlight and the faint
   vertical ramp are the whole of the effect. */
.samaritan-plate {
  position: relative;
  max-width: 70ch;
  margin: var(--space-10) 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(240, 242, 246, 0.62) 46%,
      rgba(226, 229, 236, 0.56) 100%);
  overflow: hidden;
}
/* The specular line along the top edge. Inset by a corner radius at
   each end so it does not run out past the curve. */
.samaritan-plate::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.95) 22%,
    rgba(255, 255, 255, 0.95) 78%,
    transparent);
  pointer-events: none;
}
.samaritan-plate__row {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.samaritan-plate__row:last-child {
  border-bottom: 0;
}
.samaritan-plate__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-25);
}
.samaritan-plate__value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-50);
}
/* Row one is the sentence the rest of the plate depends on, so it
   gets the weight the "Undisclosed" rows deliberately do not. */
.samaritan-plate__value--plain {
  color: var(--text-90);
}

/* Phones: 13rem of label plus a value does not fit a 375px screen, so
   the pair stacks and the label sits above its value. */
@media (max-width: 640px) {
  .samaritan-plate__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
  }
}