/* Left chapter rail */
.mika-rail {
  left: 18px;
  right: auto;
  width: 148px;
  gap: 8px;
}

.mika-rail a {
  text-transform: none;
  align-items: flex-start;
  line-height: 1.25;
}

.mika-rail .mika-rail-no {
  color: var(--mika-cyan);
  min-width: 1.6em;
}

.mika-rail .mika-rail-name {
  color: inherit;
}

/* Viewport cuts. Native scroll moves between pages.
   Long .is-reveal sections play one transform to show the clipped rest. */

html.mika-slice {
  scroll-snap-type: y proximity;
  scroll-behavior: auto;
}

html.mika-slice .hv2-main > .hv2-section {
  height: 100svh;
  max-height: 100svh;
  overflow: hidden;
  box-sizing: border-box;
  padding: calc(var(--hv2-nav-h) + 28px) 0 32px;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  position: relative;
}

html.mika-slice .hv2-section.is-reveal > .hv2-wrap {
  transition: transform 0.72s cubic-bezier(0.22, 0.8, 0.2, 1), clip-path 0.72s cubic-bezier(0.22, 0.8, 0.2, 1);
  clip-path: inset(0 0 var(--cut-clip, 0px) 0);
  will-change: transform, clip-path;
}

html.mika-slice .hv2-section.is-reveal.is-open > .hv2-wrap {
  clip-path: inset(0 0 0 0);
  transform: translateY(calc(var(--cut-shift, 0px) * -1));
}

html.mika-slice .hv2-section.is-reveal:not(.is-open)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 88px;
  background: linear-gradient(to bottom, transparent, var(--mika-bg));
  pointer-events: none;
  z-index: 2;
}

html.mika-slice .hv2-section.is-reveal.has-fold:not(.is-open)::after {
  top: var(--fold-line);
  bottom: auto;
}

html.mika-slice .hv2-section.is-reveal:nth-of-type(even):not(.is-open)::after {
  background: linear-gradient(to bottom, transparent, var(--mika-bg-2));
}

@media (prefers-reduced-motion: reduce) {
  html.mika-slice .hv2-section.is-reveal > .hv2-wrap {
    transition: none;
  }
}