/* Section headings and per-section entrances. Everything is gated on .js-reveal,
   which sections-motion.js adds, so content stays visible without JS. */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

/* ── Heading ─────────────────────────────────────────────────── */
.sec-heading { margin: 0 0 18px; }
/* Section titles are set in Pinyon Script; its swashes and descenders need room inside the reveal masks. */
.sec-heading-text { font: 400 clamp(52px, 6.4vw, 92px)/1.15 'Pinyon Script', cursive; letter-spacing: 0; color: var(--heading); }
.sec-heading-text .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .12em .28em; margin: -.08em -.12em -.16em; }
.sec-heading-text .w > span { display: inline-block; }
.sec-heading-text .amp { color: var(--reading-muted); }
@media (max-width: 720px) { .sec-heading-text { font-size: 54px; } }

.js-reveal .sec-heading-text .w > span { transform: translateY(110%); transition: transform .9s var(--ease-out); }
.js-reveal .sec-heading-text .w:nth-child(2) > span { transition-delay: .08s; }
.js-reveal .sec-heading-text .w:nth-child(3) > span { transition-delay: .16s; }
.js-reveal .sec-heading.in .w > span { transform: none; }

/* Experience heading is scrubbed: the title follows scroll, so slow scrolling reads slowly. */
.js-reveal .sec-heading.sec-heading--scrub .w > span { transform: translateY(calc((1 - var(--p, 0)) * 110%)) !important; transition: none; }

/* ── Experience: spotlight + timeline rail ───────────────────── */
#sec-experience .exp-list { position: relative; padding-left: 32px; }
@media (min-width: 1101px) {
    #sec-experience .stack { width: min(720px, 52vw); }
    #sec-experience .exp-list { gap: 10vh; }
}
.exp-rail { position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.14); }
.exp-rail-fill { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--heading); transform-origin: top; transform: scaleY(var(--prog, 0)); }
.exp-rail-dot { position: absolute; left: -4px; width: 9px; height: 9px; border-radius: 50%; background: #0b0c0f; border: 1px solid rgba(255,255,255,.4); transition: background .4s ease, border-color .4s ease, transform .4s var(--ease-out); }
.exp-rail-dot.is-passed { border-color: var(--heading); }
.exp-rail-dot.is-active { background: var(--reading-accent); border-color: var(--reading-accent); transform: scale(1.35); }
.js-spot .exp-item { opacity: .38; transform: scale(.985); transform-origin: left center; transition: opacity .6s ease, transform .7s var(--ease-out); }
.js-spot .exp-item.is-active { opacity: 1; transform: none; }

/* ── Recognition: same expanding index as Projects (projects.css) ── */
@media (min-width: 1101px) { #sec-recognition .stack { width: min(760px, 54vw); } }
#sec-recognition .proj-title { font-size: clamp(22px, 2.3vw, 30px); }
#sec-recognition .proj-head { padding: 18px 0; }
.rec-place { color: var(--reading-accent); }
.rec-quote { margin-top: 14px !important; font: italic 400 15px/1.5 'Libre Baskerville', Georgia, serif; color: var(--heading); }

/* ── Education: a horizontal wipe, then the skills count in ──── */
.js-reveal #sec-education .edu-side { clip-path: inset(0 100% 0 0 round 24px); transition: clip-path 1.1s var(--ease-out); }
.js-reveal #sec-education .edu-side.in { clip-path: inset(0 0 0 0 round 24px); }
.js-reveal #sec-education .technical-skills dl > div > * { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * .1s); }
.js-reveal #sec-education .technical-skills dl > div > dd { transition-delay: calc(var(--i, 0) * .1s + .12s); }
.js-reveal #sec-education .technical-skills dl > div.in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js-reveal .sec-heading-text .w > span,
    .js-reveal #sec-education .edu-side, .js-reveal #sec-education .technical-skills dl > div > *, .js-spot .exp-item
    { transition: none !important; animation: none !important; transform: none !important; opacity: 1 !important; filter: none !important; clip-path: none !important; }
}