/* ============================================================================
   Eyas — 05 Credo  (the five lines)
   Composition: the feather is the CENTRAL AXIS of the section. The five lines
   alternate left / right around it (two columns) and slide in from their own
   side, meeting at the axis. Near-monochrome + steel only, no amber, no cards.
   All custom classes prefixed `credo-`.
   ========================================================================== */

.credo {
  position: relative;
  overflow: hidden;
  /* extra breathing room above/below: this is a held pause in the page */
  padding-block: clamp(6rem, 14vh, 13rem);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(175, 200, 228, 0.05), transparent 55%),
    var(--bg-deep);
}

.credo-wrap {
  position: relative;
  z-index: var(--z-base);
}

/* ── Header: centered entrance ────────────────────────────────────────────── */
.credo-head {
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: clamp(3rem, 8vh, 6rem);
  text-align: center;
}
.credo-head .eyebrow { justify-content: center; }
.credo-statement {
  margin-top: var(--sp-4);
  margin-inline: auto;
  max-width: 24ch;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  /* Heavier display weight for the weight-contrast against the 400 cue/soft
     sublines below. */
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: var(--tracking-tight);
  color: var(--text-hi);
  text-wrap: balance;
}
.credo-statement__soft { font-weight: 400; color: var(--text-lo); }
.credo-cue {
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;        /* clearly lighter than the 700 statement */
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-lo);
}

/* ── Stage: feather axis + alternating lines ─────────────────────────────── */
.credo-stage {
  position: relative;
}

/* Feather: the vertical axis in the centre of the stage */
.credo-feather {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(220px, 24vw, 360px);
  aspect-ratio: 2 / 3;
  pointer-events: none;
  z-index: 0;
}
.credo-feather__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* screen-blend drops the near-black ground; the edge mask melts the bounds */
  mix-blend-mode: screen;
  filter: brightness(1.15);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 70%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image:
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 70%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  will-change: transform;
}
.credo-feather__glow {
  position: absolute;
  inset: -18% -34%;
  z-index: -1;
  background: radial-gradient(56% 48% at 50% 46%,
    rgba(175, 200, 228, 0.26) 0%,
    rgba(175, 200, 228, 0.09) 44%,
    transparent 72%);
  filter: blur(10px);
  pointer-events: none;
}

/* ── The five lines: two columns around the axis ─────────────────────────── */
.credo-lines {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* left column | feather corridor | right column */
  grid-template-columns: minmax(0, 1fr) clamp(180px, 18vw, 300px) minmax(0, 1fr);
  row-gap: clamp(2.25rem, 7vh, 4.5rem);
  align-items: center;
}

.credo-line {
  display: flex;
  align-items: baseline;
  gap: clamp(0.9rem, 1.6vw, 1.5rem);
}

/* left lines: right-aligned, hugging the axis from the left.
   (Kein row-reverse: das dreht die Flex-Hauptachse und damit flex-end um.) */
.credo-line--left {
  grid-column: 1;
  justify-content: flex-end;
  text-align: right;
}
/* right lines: left-aligned, hugging the axis from the right */
.credo-line--right {
  grid-column: 3;
  justify-content: flex-start;
  text-align: left;
}

.credo-line__num {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: var(--tracking-wide);
  transform: translateY(-0.4em);
  user-select: none;
}

.credo-line__text {
  font-size: clamp(1.9rem, 3.2vw, 3.4rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: var(--tracking-tight);
  color: var(--text-hi);
  max-width: 14ch;
  text-wrap: balance;
}

/* Emphasized word: solid steel, faint glow. NEVER gradient text. */
.credo-em {
  color: var(--accent);
  text-shadow: 0 0 28px rgba(175, 200, 228, 0.35);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* Tablet / mobile: single column, feather recedes to a faint centered backdrop,
   lines keep their left/right identity as alternating alignment. */
@media (max-width: 900px) {
  .credo-head { margin-bottom: clamp(2.5rem, 7vh, 4rem); }

  .credo-lines {
    grid-template-columns: 1fr;
    row-gap: clamp(2rem, 6vh, 3.25rem);
  }
  .credo-line--left,
  .credo-line--right { grid-column: 1; }

  .credo-line--left { justify-content: flex-start; text-align: left; }
  .credo-line--right { justify-content: flex-end; text-align: right; }

  .credo-line__text { max-width: 16ch; font-size: clamp(1.7rem, 7vw, 2.4rem); }

  .credo-feather {
    width: clamp(200px, 52vw, 300px);
    opacity: 0.4;
  }
}

@media (max-width: 560px) {
  .credo-line { gap: var(--sp-3); }
  .credo-line__num { display: none; }   /* the alternation carries the rhythm */
  .credo-feather { opacity: 0.32; }
}

/* ── Reduced motion: everything still + visible, no parallax drift ────────── */
@media (prefers-reduced-motion: reduce) {
  .credo-feather__img { transform: none !important; }
}