/* Concept v3, motion version. Built with the scroll-craft engine (untouched); this file holds the page's own choreography. */

/* the engine's base sheet loads first; restate the page base it touches */
body { font-family: var(--sans); background: var(--paper); color: var(--ink); }

/* ---------- hero: layered portrait, pinned briefly ---------- */
.hero--layered { display: block; min-height: 0; overflow: visible; background: #8E9293; }
.hero--layered::after { display: none; }
.hero__stage { display: grid; align-items: end; color: #FBF8F2; }
.hero__plane { position: absolute; inset: 0; overflow: hidden; }
.hero__plane img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 72% 28%; }
.hero__plane--plate { transform: scale(calc(1.1 - .1 * var(--sc-p, 0))); transform-origin: 72% 40%; }
.hero__plane--alex { transform: scale(calc(1 + .07 * var(--sc-p, 0))); transform-origin: 72% 100%; }
.hero__scrim { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, rgba(20,24,25,.8) 0%, rgba(20,24,25,.62) 30%, rgba(20,24,25,.25) 50%, rgba(20,24,25,0) 64%),
  linear-gradient(0deg, rgba(20,24,25,.55) 0%, rgba(20,24,25,0) 45%),
  linear-gradient(180deg, rgba(20,24,25,.5) 0%, rgba(20,24,25,0) 16%); }
.hero__wrap { position: relative; z-index: 2; }
.hero__body { transform: translateY(calc(var(--sc-p, 0) * -2.5vh)); }
@media (max-width: 720px) {
  .hero__plane img { object-position: 80% 22%; }
  .hero__plane--alex { transform-origin: 80% 100%; }
  .hero__scrim { background: linear-gradient(0deg, rgba(20,24,25,.88) 0%, rgba(20,24,25,.66) 45%, rgba(20,24,25,0) 72%), linear-gradient(180deg, rgba(20,24,25,.5) 0%, rgba(20,24,25,0) 18%); }
}

/* ---------- about: words arrive ---------- */
#about-title.sc-is-split { text-wrap: balance; }

/* ---------- projects: the index rules draw in ---------- */
.pillars--index .pillar { position: relative; border-top-color: transparent; }
.pillars--index .pillar::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--rule);
  transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.js .pillars--index .pillar.is-in::before, html:not(.js) .pillars--index .pillar::before { transform: scaleX(1); }
.pillars--index .pillar:nth-child(2)::before { transition-delay: .12s; }
.pillars--index .pillar:nth-child(3)::before { transition-delay: .24s; }

/* ---------- Waking Up: the peak ---------- */
.wu-act { padding: 0; }
.wu-stage { display: grid; align-items: center; padding-block: clamp(4.5rem, 9vh, 6rem) 2rem; }
.wu-fig .frame { aspect-ratio: 4 / 5; max-height: 74svh; }
.wu-fig .frame img { height: 118%; margin-top: -9%; }
.wu-h { position: relative; isolation: isolate; display: grid; gap: .1em; font-size: var(--t-3xl); line-height: .95; }
.wu-head, .wu-heart { display: block; }
.wu-thread { position: absolute; z-index: -1; left: 0; top: .5em; height: 1.02em; width: 100%; overflow: visible; pointer-events: none; }
.wu-heart { padding-left: 1.5em; }
.wu-thread path, .contact-thread path { fill: none; stroke: var(--accent-soft); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 1; }
.wu-thread path { stroke-dashoffset: calc(1 - clamp(0, (var(--sc-p, 0) - .06) * 2.6, 1)); }
.wu-heart { opacity: clamp(.14, calc((var(--sc-p, 0) - .26) * 4), 1); }
.wu-step { --s: 0; opacity: var(--s); transform: translateY(calc((1 - var(--s)) * 16px)); }
.wu-step--1 { --s: clamp(0, calc((var(--sc-p, 0) - .44) * 4.5), 1); }
.wu-step--2 { --s: clamp(0, calc((var(--sc-p, 0) - .54) * 4.5), 1); }
.wu-step--3 { --s: clamp(0, calc((var(--sc-p, 0) - .64) * 4.5), 1); }
.wu-more { padding-top: clamp(1rem, 3vw, 2.5rem); }
.wu-more .formats { margin-top: 0; }
/* below 960px the peak is not pinned (see the inline script); it reads as a normal section and still draws from its own progress */
@media (max-width: 960px) {
  .wu-act { padding-block: var(--section) 0; }
  .wu-stage { padding-block: 0; }
  .wu-fig .frame { aspect-ratio: 4 / 3; max-height: 50svh; }
  .wu-thread path { stroke-dashoffset: calc(1 - clamp(0, (var(--sc-p, 0) - .12) * 3.2, 1)); }
  .wu-heart { opacity: clamp(.14, calc((var(--sc-p, 0) - .2) * 5), 1); }
  .wu-step--1, .wu-step--2, .wu-step--3 { --s: clamp(0, calc((var(--sc-p, 0) - .3) * 5), 1); }
}

/* ---------- Hillside / Food2Grow: images drift inside their frames ---------- */
.frame--drift img { height: 116%; margin-top: -8%; }

/* ---------- contact: the thread returns, drawn once ---------- */
.contact-thread { display: block; width: min(22rem, 70%); height: auto; margin-top: 1.4rem; overflow: visible; }
.contact-thread path { stroke-width: 2; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .2s; }
.is-in > .contact-thread path, html:not(.js) .contact-thread path { stroke-dashoffset: 0; }
.contact-thread path { stroke: var(--accent); }

/* ---------- reduced motion: same page, settled ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__plane--plate, .hero__plane--alex, .hero__body { transform: none; }
  .wu-thread path, .contact-thread path { stroke-dashoffset: 0; transition: none; }
  .wu-heart, .wu-step { opacity: 1; transform: none; }
  .pillars--index .pillar::before { transform: scaleX(1); transition: none; }
}
.pillars--index .pillar:nth-child(4)::before { transition-delay: .36s; }