/* DNA chip page: scroll-driven sections (see docs/scroll-driven-design.md) */

/* ---------- Schmoo: scrolling fills the plot ---------- */
.schmoo-sec { height: 320vh; padding: 0 !important; position: relative; }
.ss-stage { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 70px 0 34px; }
.ss-hint, .vs-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font: 600 11px 'JetBrains Mono', monospace; letter-spacing: 1.5px; text-transform: uppercase; color: #7ee8ff; opacity: .85; transition: opacity .4s; white-space: nowrap; pointer-events: none; }
.ss-hint i, .vs-hint i { display: inline-block; animation: hintBob 1.4s ease-in-out infinite; } @keyframes hintBob { 50% { transform: translateY(3px); } }
@media (max-width: 820px) { .ss-stage { padding: 62px 0 26px; justify-content: flex-start; } .schmoo-sec .tiny { display: none; } .schmoo-sec h3 { margin-bottom: 8px !important; } .ss-hint, .vs-hint { font-size: 9.5px; } }

/* ---------- See through the chip ---------- */
.st { position: relative; height: 560vh; background: radial-gradient(80% 70% at 75% 40%, #1d1308, #050403 70%); }
.st-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.st-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 64px clamp(16px, 4vw, 40px) 20px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(22px, 5vw, 64px); align-items: center; }
.st-k { display: inline-block; font: 600 12px 'JetBrains Mono', monospace; letter-spacing: 2.5px; text-transform: uppercase; color: #ffd9a0; padding: 6px 14px; border: 1px solid rgba(255,194,122,.5); border-radius: 999px; background: rgba(255,170,80,.1); }
.st h2 { margin: 14px 0 14px; font: 800 clamp(1.8rem, 4.6vw, 3.2rem)/1.06 Poppins, sans-serif; letter-spacing: -.02em; color: #fff; }
.st h2 span { background: linear-gradient(100deg, #ffd9a0, #ff8a3d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-lines { position: relative; min-height: 4.2em; }
.st-line { position: absolute; left: 0; top: 0; margin: 0; max-width: 34ch; font: 600 clamp(1.05rem, 2.2vw, 1.45rem)/1.35 Poppins, sans-serif; color: #f3e6d4; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; }
.st-line b { color: #ffd27a; } .st-line.on { opacity: 1; transform: none; }
.st-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; }
.st-steps span, .vs-steps span { font: 600 10.5px 'JetBrains Mono', monospace; letter-spacing: 1px; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.15); color: #7d7262; transition: all .3s; }
.st-steps span.done, .vs-steps span.done { color: #c8b8a2; border-color: rgba(255,194,122,.35); }
.st-steps span.on, .vs-steps span.on { color: #2b1700; border-color: #ffd27a; background: #ffd27a; }
.st-fig { position: relative; margin: 0; width: min(100%, 74svh); aspect-ratio: 1; justify-self: center; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255,194,122,.35), 0 30px 90px rgba(0,0,0,.65), 0 0 80px rgba(255,150,60,.15); }
.st-fig img, .st-dark { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; }
.st-b { opacity: var(--b, 0); } .st-lay { opacity: var(--lay, 0); } .st-route { opacity: var(--rt, 0); }
.st-dark { background: #050403; opacity: var(--dk, 0); }
.st-tag { position: absolute; left: 12px; bottom: 14px; padding: 5px 13px; border-radius: 999px; font: 600 11.5px 'JetBrains Mono', monospace; color: #ffd9a0; background: rgba(8,6,4,.82); border: 1px solid rgba(255,194,122,.4); }
.st-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.06); } .st-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, #00d4ff, #ffb454); }
@media (max-width: 820px) {
  .st-wrap { grid-template-columns: 1fr; gap: 12px; padding-top: 66px; align-content: start; }
  .st h2 { font-size: clamp(1.45rem, 7vw, 2rem); margin: 8px 0; } .st-lines { min-height: 3em; } .st-line { font-size: 1rem; max-width: none; } .st-steps { margin-top: 8px; }
  .st-fig { width: min(100%, 52svh); }
}
@media (prefers-reduced-motion: reduce) {
  .st { height: auto; } .st-stage { position: relative; height: auto; padding: 40px 0; }
  .st-line { position: static; opacity: 1; transform: none; margin-bottom: 6px; } .st-lines { min-height: 0; }
}

/* ---------- What we tried: scroll steps through V1 -> V4 ---------- */
.vs { position: relative; height: 340vh; margin: 10px 0; }
.vs-stage { position: sticky; top: 64px; height: calc(100vh - 64px); height: calc(100svh - 64px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.vs-steps { display: flex; gap: 6px; justify-content: center; }
.vs .ver-grid { position: relative; display: block; margin: 0 auto; width: min(100%, 520px); height: min(68svh, 620px); }
.vs .ver { position: absolute; inset: 0; opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .35s, transform .35s; pointer-events: none; }
.vs .ver.on { opacity: 1; transform: none; pointer-events: auto; }
.vs .ver:hover { transform: none; }
.vs .ver svg { flex: 1; min-height: 0; width: 100%; height: auto; }
.vs .ver figcaption b { font-size: 1.1rem; } .vs .ver figcaption span { font-size: 14px; }
.vs-hint { bottom: 4px; }
@media (max-width: 820px) { .vs .ver-grid { height: min(64svh, 560px); } .vs-stage { gap: 10px; } }
@media (prefers-reduced-motion: reduce) {
  .vs { height: auto; } .vs-stage { position: relative; top: 0; height: auto; } .vs-hint, .vs-steps { display: none; }
  .vs .ver-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; height: auto; width: 100%; }
  .vs .ver { position: relative; opacity: 1; transform: none; }
}