/* A quiet threshold between the three-chapter overture and the main chapters. */
.honoca-main-intro {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  padding: clamp(108px, 15vw, 190px) var(--at-pad) clamp(104px, 14vw, 176px);
  padding-block-start: calc(clamp(108px, 15vw, 190px) - 49px);
  color: #493a32;
  background:
    radial-gradient(circle at 13% 20%, rgba(239, 178, 177, 0.16), transparent 24rem),
    radial-gradient(circle at 88% 82%, rgba(211, 229, 218, 0.22), transparent 27rem),
    linear-gradient(180deg, #fffdf9 0%, #faf4eb 55%, #f8f1e8 100%);
}

/* The light thread is the hand-off to chapter 04, not an extra empty scene. */
.honoca-main-intro:has(.honoca-main-intro__scroll-cue) {
  padding-block-end: clamp(1rem, 3vw, 1.5rem);
}

.honoca-main-intro:has(.honoca-main-intro__scroll-cue.is-dismissed) {
  padding-block-end: clamp(2.2rem, 8vw, 3rem);
}

.honoca-main-intro::before,
.honoca-main-intro::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(128, 94, 72, 0.11);
  border-radius: 50%;
  pointer-events: none;
}

.honoca-main-intro::before {
  inline-size: clamp(13rem, 32vw, 27rem);
  aspect-ratio: 1;
  inset: -8rem auto auto -9rem;
}

.honoca-main-intro::after {
  inline-size: clamp(9rem, 23vw, 19rem);
  aspect-ratio: 1;
  inset: auto -7rem -6rem auto;
}

.honoca-main-intro__inner {
  position: relative;
  z-index: 1;
  inline-size: min(100%, 46rem);
  margin-inline: auto;
  text-align: center;
}

.honoca-main-intro h2 {
  margin: 0;
  color: #523e34;
  font-family: var(--at-honoka-mincho, "Honoka Shin Mincho", "Yu Mincho", serif);
  font-size: clamp(1.85rem, 5vw, 3.2rem);
  font-weight: 400;
  letter-spacing: 0.075em;
  line-height: 1.55;
}

.honoca-main-intro h2 span {
  display: block;
}

.honoca-main-intro__name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: clamp(1.35rem, 3vw, 2.2rem) 0 0;
  color: #886e60;
  font-family: var(--at-honoka-mincho, "Honoka Shin Mincho", "Yu Mincho", serif);
  font-size: clamp(0.98rem, 2.2vw, 1.2rem);
  letter-spacing: 0.09em;
  line-height: 1.7;
}

.honoca-main-intro__name::before,
.honoca-main-intro__name::after {
  content: "";
  flex: 0 1 3.4rem;
  border-block-start: 1px solid rgba(112, 82, 64, 0.2);
}

.honoca-main-intro__copy {
  inline-size: min(100%, 39rem);
  margin: clamp(3rem, 7vw, 5.4rem) auto 0;
  font-family: var(--at-honoka-mincho, "Honoka Shin Mincho", "Yu Mincho", serif);
  font-size: clamp(1.023rem, 1.95vw, 1.128rem);
  letter-spacing: 0.035em;
  line-height: 2.15;
  text-align: center;
}

.honoca-main-intro__copy p {
  margin: 0;
}

.honoca-main-intro__copy p + p {
  margin-block-start: 1.55em;
}

.honoca-main-intro__scroll-cue {
  position: relative;
  display: grid;
  place-items: start center;
  block-size: 3.45rem;
  inline-size: 1.5rem;
  margin: clamp(2.2rem, 5vw, 3.25rem) auto 0;
  opacity: 1;
  overflow: hidden;
  transition:
    block-size 440ms cubic-bezier(0.22, 1, 0.36, 1),
    margin-block-start 440ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease,
    transform 440ms cubic-bezier(0.22, 1, 0.36, 1);
}

.honoca-main-intro__scroll-cue > span {
  position: relative;
  display: block;
  inline-size: 1px;
  block-size: 100%;
  background: linear-gradient(to bottom, transparent, rgba(116, 79, 61, 0.58) 34%, rgba(183, 120, 97, 0.72) 68%, transparent);
  box-shadow: 0 0 8px rgba(255, 250, 243, 0.94);
}

.honoca-main-intro__scroll-cue > span::after {
  content: "";
  position: absolute;
  inset: 0 auto auto -1px;
  inline-size: 3px;
  block-size: 3px;
  border-radius: 50%;
  background: #fffaf4;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.95), 0 0 15px rgba(207, 142, 116, 0.55);
  animation: honoca-intro-cue-particle 2.8s cubic-bezier(0.35, 0.05, 0.25, 1) infinite;
}

.honoca-main-intro__scroll-cue.is-dismissed {
  block-size: 0;
  margin-block-start: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.55rem);
  /* This is dismissed at the very first chapter storage.  Its former
     height/margin transition kept changing the document after the chapter
     pin had finished, which made only the head of chapter 05 rise.  Let the
     visual fade continue, but settle its layout in the same frame as the
     stored heading so the reading edge stays exactly under the header. */
  transition: opacity 300ms ease, transform 440ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes honoca-intro-cue-particle {
  0% { opacity: 0; transform: translateY(0) scale(0.7); }
  18% { opacity: 0.92; }
  74% { opacity: 0.54; }
  100% { opacity: 0; transform: translateY(3.1rem) scale(1.12); }
}

.vertical-scene--chapter-4 .nyurun-reading__panel {
  padding-block-start: clamp(1rem, 3vw, 1.5rem);
}

/* Chapters 4–7: finished prose gathers into a compact reading-history index. */
.vertical-story--manuscript .vertical-scene[data-nyurun-chapter] {
  --nyurun-duration: 380ms;
  --nyurun-ink: #4f3d33;
  --nyurun-muted: #9a7f70;
  --nyurun-rule: rgba(105, 78, 61, 0.17);
  box-sizing: border-box;
  min-inline-size: 0;
  padding: 0 !important;
}

/* The script alone owns viewport compensation while a chapter gathers.
   Native scroll anchoring is intentionally disabled for this reading system:
   enabling it again at the end of the animation allowed browsers to apply a
   delayed second correction, which looked like a page jump on mobile. */
html.has-nyurun-reading,
html.has-nyurun-reading * {
  overflow-anchor: none !important;
}

/* The site normally uses smooth anchor scrolling.  Storage correction is not
   navigation: it is internal bookkeeping and must always be instantaneous. */
html.has-nyurun-reading {
  scroll-behavior: auto !important;
}

.vertical-story--manuscript .vertical-scene.is-nyurun-storing,
.vertical-story--manuscript .vertical-scene.is-nyurun-storing * {
  overflow-anchor: none;
}
html.is-nyurun-pinning,
html.is-nyurun-pinning * {
  overflow-anchor: none !important;
}
/* Chapter 07 stays open, but it must not become a competing browser anchor
   while chapter 06 gathers. */
.vertical-story--manuscript .vertical-scene.is-nyurun-storing + .vertical-scene[data-nyurun-static],
.vertical-story--manuscript .vertical-scene[data-nyurun-static],
.vertical-story--manuscript .vertical-scene[data-nyurun-static] * {
  overflow-anchor: none;
}
.vertical-story--manuscript .vertical-scene[data-nyurun-static] .nyurun-reading__anchor {
  display: block;
  block-size: 1px;
  inline-size: 1px;
  overflow-anchor: none !important;
  pointer-events: none;
}

.nyurun-reading__panel {
  box-sizing: border-box;
  display: grid;
  inline-size: 100%;
  justify-items: center;
  min-inline-size: 0;
  opacity: 1;
  /* The gathering content cannot become the browser's scroll anchor. */
  overflow-anchor: none;
  overflow: visible;
  padding: clamp(84px, 11vw, 154px) var(--at-pad) 0;
  transform: translateY(0) scaleY(1);
  transform-origin: 50% 100%;
  transition:
    padding-block var(--nyurun-duration) cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease,
    filter 330ms ease,
    transform var(--nyurun-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.nyurun-reading__panel > * {
  box-sizing: border-box;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.nyurun-reading__toggle {
  align-items: center;
  appearance: none;
  background:
    linear-gradient(90deg, rgba(255, 253, 249, 0.9), rgba(250, 241, 232, 0.72));
  block-size: 0;
  border: 0;
  border-block-start: 0 solid transparent;
  box-sizing: border-box;
  color: var(--nyurun-ink);
  cursor: pointer;
  display: flex;
  font-family: var(--at-honoka-mincho, "Honoka Shin Mincho", "Yu Mincho", serif) !important;
  font-weight: 400;
  gap: 0.72rem;
  inline-size: min(calc(100% - (var(--at-pad) * 2)), 54rem);
  justify-content: flex-start;
  letter-spacing: 0.055em;
  line-height: 1.35;
  margin: 0 auto;
  min-block-size: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 1rem;
  pointer-events: none;
  text-align: start;
  transition:
    block-size var(--nyurun-duration) cubic-bezier(0.22, 1, 0.36, 1),
    min-block-size var(--nyurun-duration) cubic-bezier(0.22, 1, 0.36, 1),
    padding-block var(--nyurun-duration) cubic-bezier(0.22, 1, 0.36, 1),
    border-width var(--nyurun-duration) ease,
    opacity 220ms ease,
    background-color 180ms ease;
}

.nyurun-reading__label {
  display: block;
  flex: 1 1 auto;
  font-size: clamp(1rem, 4.2vw, 1.0625rem);
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--at-honoka-mincho, "Honoka Shin Mincho", "Yu Mincho", serif) !important;
}

.nyurun-reading__mark {
  color: var(--nyurun-muted);
  flex: 0 0 auto;
  font-family: var(--at-reference-sans, sans-serif);
  font-size: 0.86rem;
  line-height: 1;
  margin: 0;
}

.is-nyurun-storing > .nyurun-reading__toggle,
.is-nyurun-stored > .nyurun-reading__toggle {
  block-size: 46px;
  border-block-start-width: 1px;
  border-block-start-color: var(--nyurun-rule);
  min-block-size: 46px;
  opacity: 1;
  padding-block: 0.65rem;
  pointer-events: auto;
}

/* Give every compact label its final height in the same layout pass that
   starts storage.  Letting the label grow on its own transition was the last
   source of a one-line viewport drift when the next section appeared. */
.vertical-story--manuscript .vertical-scene.is-nyurun-storing > .nyurun-reading__toggle,
.vertical-story--manuscript .vertical-scene.is-nyurun-unfolding > .nyurun-reading__toggle {
  transition: opacity 220ms ease, background-color 180ms ease;
}

.is-nyurun-storing > .nyurun-reading__panel {
  filter: blur(1.7px);
  opacity: 0.08;
  padding-block: 0 !important;
  transform: translateY(0.55rem) scaleY(0.982);
  will-change: height, opacity, filter, transform;
}

.is-nyurun-stored > .nyurun-reading__panel {
  filter: blur(1.7px);
  opacity: 0;
  padding-block: 0 !important;
  pointer-events: none;
  transform: translateY(0.55rem) scaleY(0.982);
}

.is-nyurun-unfolding > .nyurun-reading__panel {
  will-change: height, opacity, filter, transform;
}

.nyurun-reading__toggle:hover {
  background: linear-gradient(90deg, rgba(255, 249, 242, 0.98), rgba(247, 232, 224, 0.86));
}

.nyurun-reading__toggle:focus-visible {
  outline: 2px solid #9a594d;
  outline-offset: 3px;
}

@media (min-width: 48rem) {
  .is-nyurun-storing > .nyurun-reading__toggle,
  .is-nyurun-stored > .nyurun-reading__toggle {
    block-size: 48px;
    min-block-size: 48px;
  }

  .nyurun-reading__toggle {
    padding-inline: 1.25rem;
  }

  .nyurun-reading__label {
    font-size: 1.0625rem;
  }
}

@media (max-width: 30rem) {
  .honoca-main-intro {
    padding-inline: 24px;
  }

  .honoca-main-intro h2 {
    font-size: clamp(1.72rem, 8vw, 2.2rem);
    letter-spacing: 0.055em;
  }

  .honoca-main-intro__name {
    gap: 0.55rem;
    font-size: 0.94rem;
  }

  .honoca-main-intro__copy {
    line-height: 2.05;
  }

  .nyurun-reading__toggle {
    inline-size: calc(100% - 32px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .honoca-main-intro__scroll-cue,
  .honoca-main-intro__scroll-cue > span::after {
    animation: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-nyurun-chapter] {
    --nyurun-duration: 1ms;
  }

  .nyurun-reading__panel,
  .nyurun-reading__toggle {
    transition-duration: 1ms !important;
  }
}