/* ============================================================
   Section scaffolding (Phase 1)
   Per-section detail is layered on in Phase 2. For now each
   section is a full-height shell with a label so we can verify
   smooth scroll, scroll-spy and fonts.
   ============================================================ */

.section {
  min-height: 100vh;
  display: grid;
  align-content: center;
  padding: var(--space-xl) var(--section-pad);
}

.section__eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-mid);
  margin-bottom: var(--space-sm);
}

.section__title {
  font-size: var(--step-4);
  color: var(--fg);
  max-width: 16ch;
}

.section__lead {
  margin-top: var(--space-md);
  max-width: 60ch;
  color: var(--fg-dim);
  font-size: var(--step-2);
  line-height: 1.35;
}

/* the one light section */
#abilities {
  background: var(--light-bg);
  color: var(--light-fg);
}
#abilities .section__title { color: var(--light-fg); }
#abilities .section__lead { color: var(--light-dim); }
#abilities .section__eyebrow { color: var(--accent-deep); }

/* placeholder for a three.js canvas mount inside a section */
.scene-mount {
  position: absolute;
  inset: 0;
  z-index: var(--z-scene);
  pointer-events: none;
}
.scene-mount canvas { width: 100% !important; height: 100% !important; }

/* ============================================================
   Unified section title — ONE definition for every section
   (What I Build, Abilities, Journey, Media, …).
   Requires the plain text also in a data-title attribute so the
   offset echo (::before) can duplicate it.
   ============================================================ */
.section-title {
  /* --- tunable knobs --- */
  --title-fill-from: rgba(156, 227, 37, 0.80); /* #9CE325 @ 80% */
  --title-fill-to:   rgba(156, 227, 37, 0.20); /* #9CE325 @ 20% */
  --title-outline:   #9CE325;
  --title-echo:      #ffffff21;
  --title-echo-x:   0px;   /* echo offset: left */
  --title-echo-y:    6px;   /* echo offset: down */
  --title-stroke-w:  1.3px;

  --title-stripe:    rgba(255, 255, 255, 0.089);
  --title-stripe-gap: 10px;
  --title-stripe-pad-x: 6em;  /* stripe motif extends past text: sides  */
  --title-stripe-pad-y: 0em; /* stripe motif extends past text: top/bottom */

  position: relative;
  display: block;             /* block + fit-content so it can center on the page */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;        /* centered on the page */
  text-align: center;
  isolation: isolate;         /* own stacking context for the ± z pseudo layers */
  font-family: var(--font-head);
  font-weight: 600;
  font-style: italic;
  font-size: var(--step-5);   /* matches the reference "Publication, Media & Awards" */
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-transform: none;

  /* gradient fill: #9CE325 80% -> 20%, left to right */
  color: transparent;
  background: linear-gradient(90deg, var(--title-fill-from), var(--title-fill-to));
  -webkit-background-clip: text;
          background-clip: text;

  /* solid green outline */
  -webkit-text-stroke: var(--title-stroke-w) var(--title-outline);
  paint-order: stroke fill;   /* stroke behind, gradient fill on top */
}

/* offset, outline-only echo in #404040 (down + left) */
.section-title::before {
  content: attr(data-title);
  position: absolute;
  left: var(--title-echo-x);
  top: var(--title-echo-y);
  z-index: -2;
  color: transparent;
  background: none;
  -webkit-text-stroke: var(--title-stroke-w) var(--title-echo);
  paint-order: stroke;
  pointer-events: none;
}

/* horizontal stripe motif — slightly larger than text, radial-gradient masked */
.section-title::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--title-stripe-pad-y)) calc(-1 * var(--title-stripe-pad-x));
  z-index: -1;
  background: repeating-linear-gradient(
    to bottom,
    var(--title-stripe) 0 2px,
    transparent 1px var(--title-stripe-gap)
  );
  -webkit-mask-image: radial-gradient(55% 140% at 50% 50%, #000 20%, transparent 72%);
          mask-image: radial-gradient(55% 140% at 50% 50%, #000 20%, transparent 72%);
  pointer-events: none;
}