/* Projects page. Builds on styles.css (brand tokens, nav, buttons, rails). */

.p-page { background: var(--ink); color: var(--on-dark); }

/* Shared hero */
.p-hero { padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; }
.p-hero h1 { font-size: var(--title-size); max-width: 14ch; }
.p-hero .lede { margin-top: 1.5rem; font-size: 1.15rem; color: var(--on-dark-muted); max-width: 54ch; }
.p-hero .actions { display: flex; gap: .6rem; margin-top: 2rem; flex-wrap: wrap; }

/* Scrambled title that decodes into the project name */
.scramble { font-variant-numeric: tabular-nums; }

/* Placeholder project UI: a generic app skeleton inside a window */
.stage {
  background: var(--window); border: 1px solid var(--line-dark); border-radius: var(--radius);
  overflow: hidden;
}
.stage-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line-dark); font-size: .88rem; }
.stage-bar .name { display: flex; align-items: center; gap: .55rem; font-weight: 500; }
.stage-bar .name i { width: 18px; height: 18px; border-radius: 5px; background: var(--accent, var(--mint)); }
.stage-bar .meta { color: var(--on-dark-faint); font-size: .8rem; }
.skel { display: grid; grid-template-columns: 170px 1fr; min-height: 320px; }
.skel-side { border-right: 1px solid var(--line-dark); padding: 1rem; display: grid; gap: .55rem; align-content: start; }
.skel-side span { height: 9px; border-radius: 4px; background: rgba(247, 243, 234, .08); }
.skel-side span:nth-child(2) { background: var(--accent, var(--mint)); opacity: .55; width: 70%; }
.skel-side span:nth-child(odd) { width: 85%; }
.skel-main { padding: 1.1rem; display: grid; gap: 1rem; align-content: start; }
.skel-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.skel-kpis div { border: 1px solid var(--line-dark); border-radius: var(--radius-sm); padding: .75rem; display: grid; gap: .45rem; }
.skel-kpis div span { height: 7px; width: 55%; border-radius: 4px; background: rgba(247, 243, 234, .1); }
.skel-kpis div b { height: 16px; width: 40%; border-radius: 4px; background: rgba(247, 243, 234, .22); }
.skel-chart { display: flex; align-items: flex-end; gap: 6px; height: 110px; padding: .5rem; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); }
.skel-chart i { flex: 1; border-radius: 3px 3px 0 0; background: rgba(247, 243, 234, .1); }
.skel-chart i:nth-child(3n) { background: var(--accent, var(--mint)); opacity: .7; }
.skel-rows { display: grid; gap: .5rem; }
.skel-rows span { height: 26px; border-radius: 5px; background: rgba(247, 243, 234, .04); border: 1px solid var(--line-dark); }
.placeholder-note { font-size: .78rem; color: var(--on-dark-faint); }

/* Project blocks (concept A) */
.p-project { padding: clamp(4rem, 8vw, 6.5rem) 0; border-top: 1px solid var(--line-dark); position: relative; }
.p-project-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.p-project-head h2 { font-size: var(--title-size); }
.p-project-head .tagline { color: var(--on-dark-muted); font-size: 1.1rem; max-width: 40ch; }
.versions { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0 0; font-size: .82rem; color: var(--on-dark-faint); }
.versions .track { flex: 1; max-width: 360px; height: 3px; border-radius: 2px; background: rgba(247, 243, 234, .1); overflow: hidden; }
.versions .track b { display: block; height: 100%; width: 20%; background: var(--accent, var(--mint)); }
.p-split { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.p-split .summary { font-size: 1.25rem; line-height: 1.45; letter-spacing: -0.02em; }
.feats { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.feat { border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 1.25rem; background: rgba(247, 243, 234, .025); }
.feat h3 { font-size: 1.05rem; margin-bottom: .45rem; }
.feat p { color: var(--on-dark-muted); font-size: .92rem; }
.p-cta {
  grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.4rem 1.5rem; border-radius: var(--radius); background: var(--accent, var(--mint)); color: var(--ink); text-decoration: none;
}
.p-cta .label { font-size: .8rem; font-weight: 500; opacity: .75; display: block; margin-bottom: .2rem; }
.p-cta strong { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; }
.p-cta .arrow { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; flex: none; transition: transform var(--acorn-dur-settle) var(--acorn-ease-settle); }
@media (hover: hover) and (pointer: fine) { .p-cta:hover .arrow { transform: translateX(4px); } }

/* Concept B: project switcher */
.switch { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; align-items: start; }
.switch-list { display: grid; gap: .5rem; position: sticky; top: 100px; }
.switch-item {
  text-align: left; background: transparent; border: 1px solid var(--line-dark); border-radius: var(--radius); color: var(--on-dark-muted);
  padding: 1rem 1.1rem; cursor: pointer; font: inherit; position: relative; overflow: hidden;
  transition: scale 140ms var(--ease-out);
}
.switch-item strong { display: block; color: var(--on-dark); font-weight: 500; font-size: 1.05rem; margin-bottom: .25rem; }
.switch-item span { font-size: .88rem; }
.switch-item[aria-selected="true"] { background: rgba(247, 243, 234, .05); border-color: var(--accent); }
.switch-item .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.switch-item[aria-selected="true"] .bar { transform: scaleX(1); transition: transform 9s linear; }
.switch-panel h2 { font-size: var(--title-size); margin: 1.5rem 0 .75rem; }
.switch-panel .feats { margin-top: 1.5rem; }

@media (max-width: 900px) {
  .p-split, .switch { grid-template-columns: 1fr; }
  .switch-list { position: static; }
  .skel { grid-template-columns: 1fr; }
  .skel-side { display: none; }
}
@media (max-width: 600px) { .feats { grid-template-columns: 1fr; } }

/* Intro text on the dark project pages */
.p-page .section-intro { color: var(--on-dark-muted); }

/* 1. Sprouting headline: a soil line draws in, then each word rises out of it */
.sprout-title { position: relative; padding-bottom: .12em; }
.sprout-title .word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.sprout-title .word > span { display: inline-block; transform: translateY(110%); }
.sprout-title.is-grown .word > span { transform: none; transition: transform var(--acorn-dur-spring) var(--acorn-ease-spring); transition-delay: calc(var(--i) * var(--acorn-stagger) + 260ms); }
.sprout-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: min(100%, 12ch); background: var(--mint);
  transform: scaleX(0); transform-origin: left; opacity: .8;
}
.sprout-title.is-grown::after { transform: scaleX(1); transition: transform 320ms var(--acorn-ease-settle); }
@media (prefers-reduced-motion: reduce) {
  .sprout-title .word > span { transform: none; }
  .sprout-title::after { transform: scaleX(1); }
}

/* 2. Root-drawn reveal: roots grow across the window and the project fills in behind them */
.stage { position: relative; }
.stage-roots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; transition: opacity 600ms var(--acorn-ease-settle); }
.stage-roots.is-fading { opacity: 0; }
.stage .skel { clip-path: circle(150% at 0 0); }

/* 3. Cursor sprouts: tiny pixel icons pop up on a grid behind the hero title */
.sprouts { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sprouts img { position: absolute; display: block; image-rendering: pixelated; transform: scale(.5); opacity: 0;
  transition: transform 140ms var(--acorn-ease-settle), opacity 140ms var(--acorn-ease-settle); }
.sprouts img.is-in { transform: scale(1); opacity: 1; }
.sprouts img.is-out { transform: scale(.4); opacity: 0; transition-duration: 300ms; }
.p-hero .wrap { position: relative; z-index: 1; }

/* Current page in the nav */
.nav-links a[aria-current="page"] { color: var(--on-dark); box-shadow: inset 0 -2px 0 var(--mint); }

/* Title block: one word across the middle of the first screen */
.p-title {
  position: relative; min-height: calc(100vh - 68px); min-height: calc(100svh - 68px);
  display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line-dark);
}
.p-title-word {
  position: relative; z-index: 1;
  font-size: clamp(4.5rem, 16vw, 15rem); letter-spacing: -0.05em; line-height: .9;
  transform: scale(var(--title-scale, 1)); opacity: var(--title-fade, 1); will-change: transform, opacity;
}
.p-title-word.sprout-title::after { left: 50%; translate: -50% 0; width: 40%; transform-origin: center; }
.p-title-cue {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 1;
  display: grid; justify-items: center; gap: .5rem; font-size: .8rem; color: var(--on-dark-faint); text-decoration: none;
}
.p-title-cue span { width: 1px; height: 36px; background: linear-gradient(var(--mint), transparent); animation: cue 1.8s var(--acorn-ease-slide) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.p-hero-title { font-size: var(--title-size); max-width: 14ch; }
@media (prefers-reduced-motion: reduce) { .p-title-cue span { animation: none; } }

/* Roots in the project window: bolder, and they stay a while before fading */
.stage-roots { opacity: .2; transition: opacity 1200ms var(--acorn-ease-settle); } /* barely-there roots, still in each project's color */
.stage-roots.is-fading { opacity: 0; }
.stage.is-revealed .skel { transition: clip-path 3200ms var(--acorn-ease-slide); }

/* Brand roots behind the title word (Channels, made with the brand kit), growing down row by row */
.p-title { position: relative; }
/* The art was made at 1440×832 with the word's box at y 298; projects.js pins it to the word at any size */
.p-title { background-color: #0E251B; overflow: hidden; }
.p-title-art { position: absolute; left: 50%; top: var(--art-top, 0px); width: 1440px; height: 832px; margin-left: -720px;
  transform: scale(var(--art-scale, 1)); transform-origin: 50% 0; z-index: 0; pointer-events: none;
  background: url("assets/graphics/projects-title.svg") center top / 100% 100% no-repeat;
  clip-path: inset(0 0 100% 0); }
.p-title-art.is-grown { clip-path: inset(0 0 0 0); transition: clip-path 2600ms steps(135, end); }
.p-title .sprouts { z-index: 1; } /* cursor sprouts sit above the roots art */
.p-title-word { position: relative; z-index: 2; }
.p-title-cue { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .p-title-art { clip-path: none; } }