/* ============================================================
   showcase.css — scroll-driven 3D showcase section
   Sticky canvas behind a rail of scrolling copy steps.
   ============================================================ */
.showcase{position:relative;background:linear-gradient(180deg,var(--beige),var(--beige-2) 50%,var(--beige))}
#showcase-canvas{position:sticky;top:0;width:100%;height:100vh;display:block;z-index:1}
.showcase-rail{position:relative;z-index:2;margin-top:-100vh;pointer-events:none}
.sc-step{min-height:100vh;display:flex;flex-direction:column;justify-content:center;max-width:520px;margin:0 22px;padding:0 0 0 4px}
.sc-step:nth-child(even){margin-left:auto;margin-right:22px;text-align:right;align-items:flex-end}
.sc-step h2{font-size:clamp(30px,4.6vw,52px);font-weight:700;margin:6px 0 16px}
.sc-step h2 em{font-style:normal;color:var(--lime-deep)}
.sc-step p{color:var(--ink-soft);font-size:17px;line-height:1.7;background:rgba(251,247,238,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:14px 18px;border-radius:14px;border:1px solid var(--line)}
.sc-hint{position:sticky;bottom:24px;z-index:3;text-align:center;font-family:"Space Grotesk";font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);pointer-events:none;margin-top:-60px}

@media(max-width:760px){
  #showcase-canvas{height:70vh;top:15vh}
  .sc-step{min-height:82vh;max-width:none;text-align:left !important;align-items:flex-start !important;margin:0 18px}
}