/* Scroll effect demos. Every rule is scoped under a .sc-* root. Each demo scrolls its own container. */

.sc-box { position: absolute; inset: 0; overflow: hidden; }
.sc-scroller {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--stage-line) transparent; scroll-behavior: auto;
}
.sc-lines { display: grid; gap: 6px; margin-bottom: 14px; }
.sc-lines i { display: block; height: 7px; border-radius: 4px; background: var(--stage-line); }

/* parallax */
.sc-px { background: linear-gradient(#2a1f6b, #6b4fe0 52%, #ffb38a); }
.sc-px-bg { position: absolute; inset: 0; pointer-events: none; }
.sc-px-l { position: absolute; inset: 0; will-change: transform; }
.sc-px-sun { position: absolute; left: 64%; top: 14%; width: 16%; aspect-ratio: 1; border-radius: 50%; background: #ffe2a8; box-shadow: 0 0 40px #ffd27a; }
.sc-px-far {
  position: absolute; left: -5%; right: -5%; top: 40%; bottom: -220px; background: #5a48b8;
  clip-path: polygon(0 16%, 13% 4%, 25% 15%, 39% 0, 55% 13%, 70% 2%, 84% 14%, 100% 5%, 100% 100%, 0 100%);
}
.sc-px-near { position: absolute; left: -12%; right: -12%; top: 66%; bottom: -320px; background: #241b5a; border-radius: 50% 50% 0 0 / 70px 70px 0 0; }
.sc-px-l em {
  position: absolute; font: 600 10.5px/1 var(--f-mono); font-style: normal; color: #fff;
  padding: 3px 6px; border-radius: 999px; background: rgb(0 0 0 / 0.3);
}
.sc-px-l:nth-child(1) em { left: 64%; top: 8%; }
.sc-px-l:nth-child(2) em { left: 10%; top: 50%; }
.sc-px-l:nth-child(3) em { left: 72%; top: 74%; }
.sc-px-fg { scrollbar-color: rgb(255 255 255 / 0.4) transparent; }
.sc-px-content { display: grid; gap: 70px; padding: 64px 16px 170px; justify-items: start; }
.sc-px-card {
  position: relative; margin: 0; display: grid; padding: 9px 40px 9px 14px; border-radius: 10px;
  background: rgb(255 255 255 / 0.94); color: #1f2440; font-size: 14px; font-weight: 750;
  box-shadow: 0 10px 26px rgb(20 10 60 / 0.35);
}
.sc-px-card:nth-child(2) { justify-self: end; }
.sc-px-card small { font-size: 11.5px; font-weight: 500; opacity: 0.7; }
.sc-px-card em { position: absolute; right: 8px; top: 8px; font: 600 10px var(--f-mono); font-style: normal; color: #6b4fe0; }

/* scroll-triggered */
.sc-tr .sc-scroller { padding: 14px 14px 40px; }
.sc-tr-intro { margin: 0 0 44px; font-size: 13px; line-height: 1.4; opacity: 0.8; max-width: 34ch; }
.sc-tr-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--stage-card); font-size: 13px; font-weight: 600;
}
.sc-tr-row i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: hsl(var(--h) 80% 62%); }
.sc-tr-row span { flex: 1; min-width: 0; }
.sc-tr-row b { font: 600 10px var(--f-mono); padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--d-lime) 30%, transparent); }
.sc-tr.is-armed .sc-tr-row { transition: opacity 0.5s, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sc-tr.is-armed .sc-tr-row:not(.is-in) { opacity: 0; transform: translateY(18px) scale(0.98); transition: none; }

/* scroll-linked */
.sc-ln-sc { right: 42%; padding: 14px 12px 14px 14px; }
.sc-ln-h { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.sc-ln-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 42%; display: grid; place-items: center; align-content: center; gap: 10px;
  padding: 12px; border-left: 1px solid var(--stage-line);
}
.sc-ln-shape {
  width: 30cqi; max-width: 76px; aspect-ratio: 1; border-radius: calc(8% + var(--p) * 42%);
  background: color-mix(in srgb, var(--d-violet), var(--d-cyan) calc(var(--p) * 100%));
  transform: rotate(calc(var(--p) * 360deg));
}
.sc-ln { --p: 0; }
.sc-ln-meter { width: 80%; height: 5px; border-radius: 4px; background: var(--stage-line); overflow: hidden; }
.sc-ln-meter span { display: block; height: 100%; background: var(--stage-ink); transform-origin: left; transform: scaleX(var(--p)); }
.sc-ln-read { margin: 0; font: 500 11.5px var(--f-mono); font-variant-numeric: tabular-nums; }
.sc-ln-note { margin: 0; font-size: 11px; line-height: 1.3; text-align: center; opacity: 0.7; }

/* reading progress */
.sc-rp { --p: 0; }
.sc-rp-bar { position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 2; background: color-mix(in srgb, var(--stage-line) 60%, transparent); }
.sc-rp-bar span { display: block; height: 100%; background: var(--d-violet); transform-origin: left; transform: scaleX(var(--p)); }
.sc-rp-sc { padding: 22px 18px 18px; }
.sc-rp-k { margin: 0; font: 600 11px var(--f-mono); color: var(--d-violet); }
.sc-rp-h { margin: 4px 0 2px; font-size: 19px; font-weight: 800; font-stretch: 110%; letter-spacing: -0.015em; line-height: 1.1; }
.sc-rp-meta { margin: 0 0 14px; font-size: 12px; opacity: 0.65; }
.sc-rp-pct {
  position: absolute; right: 10px; bottom: 10px; font: 600 11px var(--f-mono); font-variant-numeric: tabular-nums;
  padding: 4px 8px; border-radius: 999px; background: var(--stage-card); border: 1px solid var(--stage-line);
}

/* scroll pinning */
.sc-pin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 12px 0 14px; }
.sc-pin-steps section {
  min-height: calc(var(--vh, 220px) * 0.8); display: grid; align-content: center; gap: 4px;
  opacity: 0.35; transition: opacity 0.3s;
}
.sc-pin-steps section:first-child { padding-top: calc(var(--vh, 220px) * 0.1); }
.sc-pin-steps section:last-child { padding-bottom: calc(var(--vh, 220px) * 0.2); }
.sc-pin-steps section.is-on { opacity: 1; }
.sc-pin-steps b { font-size: 17px; font-weight: 800; }
.sc-pin-steps span { font-size: 12.5px; line-height: 1.35; }
.sc-pin-stick { position: sticky; top: 0; height: var(--vh, 220px); display: grid; place-items: center; }
.sc-pin-g {
  grid-area: 1 / 1; width: 100%; aspect-ratio: 1.1; max-height: 78%; border-radius: 12px; padding: 12px;
  background: var(--stage-card); box-shadow: 0 8px 22px rgb(0 0 0 / 0.12);
  display: grid; gap: 6px; align-content: center; opacity: 0; transform: scale(0.94); transition: opacity 0.3s, transform 0.3s;
}
.sc-pin-stick[data-step="0"] .sc-pin-g0, .sc-pin-stick[data-step="1"] .sc-pin-g1, .sc-pin-stick[data-step="2"] .sc-pin-g2 { opacity: 1; transform: none; }
.sc-pin-g0 i, .sc-pin-g1 i { height: 12px; border-radius: 4px; background: var(--stage-line); }
.sc-pin-g0 i:first-child { background: var(--d-violet); width: 60%; }
.sc-pin-g1 i.is-bad { background: color-mix(in srgb, var(--d-coral) 70%, var(--stage-card)); }
.sc-pin-g2 { grid-template-columns: repeat(4, 1fr); align-items: end; align-content: stretch; }
.sc-pin-g2 i { height: calc(var(--v) * 100%); border-radius: 4px 4px 0 0; background: var(--d-cyan); }
.sc-pin-stick em {
  position: absolute; left: 0; top: 10px; font: 600 10px var(--f-mono); font-style: normal;
  padding: 2px 6px; border-radius: 999px; background: var(--stage-ink); color: var(--stage);
}

/* horizontal scroll section */
.sc-hz-pad { margin: 0; height: calc(var(--vh, 220px) * 0.45); display: grid; place-items: center; font-size: 13px; font-weight: 600; opacity: 0.7; }
.sc-hz-sec { height: calc(var(--vh, 220px) * 2.6); }
.sc-hz-stick { position: sticky; top: 0; height: var(--vh, 220px); overflow: hidden; display: grid; align-content: center; gap: 14px; }
.sc-hz-track { display: flex; gap: 12px; padding: 0 14px; width: max-content; will-change: transform; }
.sc-hz-card {
  width: 46cqi; aspect-ratio: 1.25; border-radius: 12px; padding: 12px; display: grid; align-content: space-between;
  background: var(--c); color: #fff;
}
.sc-hz-card b { font: 600 12px var(--f-mono); opacity: 0.85; }
.sc-hz-card span { font-size: 19px; font-weight: 800; font-stretch: 112%; }
.sc-hz-prog { margin: 0 14px; height: 3px; border-radius: 2px; background: var(--stage-line); overflow: hidden; }
.sc-hz-prog span { display: block; height: 100%; background: var(--stage-ink); transform-origin: left; transform: scaleX(0); }

/* stacking cards */
.sc-st-list { display: grid; gap: 22px; padding: 12px 14px calc(var(--vh, 220px) * 0.55); }
.sc-st-card {
  position: sticky; top: calc(10px + var(--i) * 9px); height: calc(var(--vh, 220px) * 0.7);
  display: grid; align-content: end; gap: 3px; padding: 14px 16px; border-radius: 14px;
  background: var(--c); color: #fff; transform-origin: 50% 0; box-shadow: 0 -6px 20px rgb(0 0 0 / 0.18);
}
.sc-st-card b { position: absolute; top: 12px; left: 16px; font: 600 11px var(--f-mono); opacity: 0.85; }
.sc-st-card strong { font-size: 22px; font-weight: 850; font-stretch: 115%; letter-spacing: -0.02em; }
.sc-st-card span { font-size: 12.5px; opacity: 0.9; }

/* full-page snap */
.sc-fp-sc { scroll-snap-type: y mandatory; scrollbar-width: none; }
.sc-fp-sc::-webkit-scrollbar { display: none; }
.sc-fp-sc section {
  height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; place-content: center; justify-items: center; gap: 4px;
}
.sc-fp-sc b { font-size: clamp(26px, 10cqi, 44px); font-weight: 900; font-stretch: 120%; letter-spacing: -0.03em; }
.sc-fp-sc span { font: 500 11.5px var(--f-mono); opacity: 0.8; }
.sc-fp-a { background: #5b3fd9; color: #fff; }
.sc-fp-b { background: #ffb020; color: #2a1a00; }
.sc-fp-c { background: #1f6fe0; color: #fff; }
.sc-fp-d { background: #9bdc28; color: #1d2a05; }
.sc-fp-dots { position: absolute; right: 12px; top: 50%; translate: 0 -50%; display: grid; gap: 7px; }
.sc-fp-dots button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1.5px solid rgb(255 255 255 / 0.9); background: transparent; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.2);
}
.sc-fp-dots button.is-on { background: #fff; transform: scale(1.25); }

/* smooth scrolling */
.sc-sm { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 12px 36px; }
.sc-sm-col { display: grid; grid-template-rows: auto 1fr; gap: 6px; min-height: 0; }
.sc-sm-lab { margin: 0; font: 600 11px var(--f-mono); }
.sc-sm-native, .sc-sm-view {
  min-height: 0; border-radius: 10px; background: color-mix(in srgb, var(--stage-card) 60%, transparent);
  border: 1px solid var(--stage-line); padding: 0 8px;
}
.sc-sm-native { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--stage-line) transparent; scroll-behavior: auto; }
.sc-sm-view { overflow: hidden; }
.sc-sm-inner { will-change: transform; }
.sc-sm-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--stage-line); }
.sc-sm-row b { font: 600 11px var(--f-mono); width: 20px; }
.sc-sm-row i { flex: 1; height: 14px; border-radius: 4px; background: hsl(var(--h) 75% 62%); }

/* velocity */
.sc-vs { background: #0d0f1f; }
.sc-vs-marq { position: absolute; left: 0; right: 0; top: 0; height: 40px; overflow: hidden; display: flex; align-items: center; border-bottom: 1px solid #343a58; }
.sc-vs-row { display: flex; align-items: center; gap: 14px; width: max-content; padding-right: 14px; will-change: transform; }
.sc-vs-row span { font-size: 16px; font-weight: 850; font-stretch: 120%; white-space: nowrap; color: #e9ebf7; }
.sc-vs-row span:nth-of-type(2n) { color: var(--d-lime); }
.sc-vs-row i { width: 7px; height: 7px; border-radius: 50%; background: #5a6080; }
.sc-vs-sc { top: 41px; scrollbar-color: #343a58 transparent; }
.sc-vs-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 14px 40px; will-change: transform; }
.sc-vs-tile {
  aspect-ratio: 1.5; border-radius: 10px; padding: 10px; display: grid; align-content: end;
  background: linear-gradient(140deg, hsl(var(--h) 80% 62%), hsl(calc(var(--h) + 40) 70% 42%)); color: #fff;
}
.sc-vs-tile b { font-size: 12.5px; font-weight: 700; }
.sc-vs-read {
  position: absolute; right: 10px; bottom: 10px; margin: 0; font: 600 11px var(--f-mono); font-variant-numeric: tabular-nums;
  padding: 4px 8px; border-radius: 999px; background: #22263c; color: #e9ebf7; border: 1px solid #343a58;
}

/* zoom on scroll */
.sc-zm-sec { height: calc(var(--vh, 220px) * 2.2); }
.sc-zm-stick {
  --p: 0; position: sticky; top: 0; height: var(--vh, 220px); display: grid; place-items: center; align-content: center; gap: 10px;
  perspective: 700px; padding: 0 12px;
}
.sc-zm-title {
  margin: 0; font-size: 16px; font-weight: 800; font-stretch: 112%; letter-spacing: -0.01em;
  opacity: calc(1 - var(--p) * 0.65); transform: translateY(calc(var(--p) * -6px));
}
.sc-zm-frame {
  width: 78%; aspect-ratio: 16 / 9.5; border-radius: 12px; padding: 5px; background: #1b1e2e;
  box-shadow: 0 18px 40px rgb(10 12 40 / 0.35); transform-origin: 50% 0;
  transform: rotateX(calc((1 - var(--p)) * 32deg)) scale(calc(0.8 + var(--p) * 0.2));
}
.sc-zm-ui { height: 100%; border-radius: 8px; overflow: hidden; display: grid; grid-template-columns: 16% 1fr; background: #f4f5fa; color: #1f2440; }
.sc-zm-side { background: #e4e7f2; display: grid; align-content: start; gap: 6px; padding: 8px 6px; }
.sc-zm-side i { height: 6px; border-radius: 3px; background: #c4c9dc; }
.sc-zm-side i:first-child { background: var(--d-violet); }
.sc-zm-main { display: grid; grid-template-rows: auto 1fr; gap: 6px; padding: 8px 10px; min-height: 0; }
.sc-zm-main p { margin: 0; display: grid; line-height: 1.1; }
.sc-zm-main small { font-size: 9px; opacity: 0.65; }
.sc-zm-main b { font-size: 15px; font-weight: 800; }
.sc-zm-bars { display: flex; align-items: end; gap: 5px; min-height: 0; }
.sc-zm-bars i { flex: 1; height: calc(var(--v) * 100%); border-radius: 3px 3px 0 0; background: var(--d-violet); }
.sc-zm-bars i:nth-child(odd) { background: color-mix(in srgb, var(--d-violet) 55%, #fff); }
.sc-zm-after { margin: 0; height: calc(var(--vh, 220px) * 0.5); display: grid; place-items: center; font-size: 13px; font-weight: 600; opacity: 0.7; }

/* quick-return header */
.sc-qr-sc { padding: 0 0 30px; }
.sc-qr-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--stage-ink); color: var(--stage); font-size: 12.5px; font-weight: 600;
  transition: transform 0.22s ease-out; box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
}
.sc-qr-head b { font-size: 15px; font-weight: 850; font-stretch: 115%; margin-right: auto; }
.sc-qr-head span { opacity: 0.8; }
.sc-qr-head i { width: 20px; height: 20px; border-radius: 50%; background: var(--d-amber); }
.sc-qr-head.is-hidden { transform: translateY(-110%); }
.sc-qr-item { display: flex; gap: 10px; padding: 12px 14px 0; }
.sc-qr-item > i { flex: none; width: 56px; height: 44px; border-radius: 8px; background: linear-gradient(135deg, hsl(var(--h) 75% 64%), hsl(calc(var(--h) + 50) 70% 50%)); }
.sc-qr-item div { flex: 1; min-width: 0; display: grid; gap: 6px; }
.sc-qr-item b { font-size: 13px; line-height: 1.25; }
.sc-qr-item .sc-lines { margin: 0; gap: 5px; }
.sc-qr-item .sc-lines i { height: 6px; }
.sc-qr-state {
  position: absolute; right: 10px; bottom: 10px; margin: 0; font: 600 11px var(--f-mono);
  padding: 4px 8px; border-radius: 999px; background: var(--stage-card); border: 1px solid var(--stage-line);
}

/* scrollspy */
.sc-sp-nav {
  position: absolute; left: 0; top: 0; bottom: 0; width: 34%; padding: 14px 8px 14px 14px;
  display: grid; align-content: start; gap: 2px; border-right: 1px solid var(--stage-line);
}
.sc-sp-nav button {
  position: relative; z-index: 1; text-align: left; font: 500 12.5px var(--f-display); color: inherit; opacity: 0.65;
  background: none; border: 0; padding: 6px 10px; border-radius: 6px; cursor: pointer;
}
.sc-sp-nav button[aria-current="true"] { opacity: 1; font-weight: 700; }
.sc-sp-ind {
  position: absolute; left: 14px; right: 8px; top: 0; height: 28px; border-radius: 6px;
  background: color-mix(in srgb, var(--d-violet) 22%, transparent); box-shadow: inset 2px 0 0 var(--d-violet);
  transform: translateY(14px); transition: transform 0.22s ease-out, height 0.22s;
}
.sc-sp-sc { left: 34%; padding: 10px 14px 30px; }
.sc-sp-sc section { padding-bottom: 8px; }
.sc-sp-h { margin: 6px 0 8px; font-size: 15px; font-weight: 800; }