/* ===================================================================
   Chapter page — scrollytelling layout
   =================================================================== */
@use "../mixins" as m;

.chapter-page {
  position: relative;
}

// ===== Hero / chapter opener =====
.chapter-hero {
  height: 100vh;
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  &-bg {
    position: absolute;
    inset: -10%;
    background:
      radial-gradient(ellipse at 30% 40%, rgba(90, 14, 14, 0.6) 0%, transparent 50%),
      radial-gradient(ellipse at 70% 60%, rgba(20, 8, 8, 0.8) 0%, transparent 60%), var(--bg);
    will-change: transform;
  }

  &-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='turbulence' baseFrequency='0.02' numOctaves='3' seed='3'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.05  0 0 0 0 0.05  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.4;
    mix-blend-mode: multiply;
  }

  &-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    padding: 0 40px;
  }
}

// ===== Chapter numeral =====
.chapter-numeral-frame {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto 48px;
  display: flex;
  align-items: center;
  justify-content: center;

  svg.ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: slow-rotate 120s linear infinite;
  }
}

.chapter-numeral {
  font-family: var(--font-display);
  font-size: 180px;
  font-weight: 300;
  font-style: italic;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 0 40px rgba(185, 28, 28, 0.4);
  position: relative;
  z-index: 2;
}

@keyframes slow-rotate {
  to {
    transform: rotate(360deg);
  }
}

.chapter-kicker {
  @include m.mono-label(12px, 0.4em);
  color: var(--ink-dim);
  margin-bottom: 16px;

  .accent {
    color: var(--accent);
  }
}

.chapter-title {
  @include m.display-italic(clamp(50px, 7.8vw, 108px));
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-bottom: 32px;

  .typed-cursor {
    display: inline-block;
    width: 0.5ch;
    background: var(--accent);
    animation: blink 0.8s steps(2, end) infinite;
    margin-left: 4px;
    height: 0.9em;
    vertical-align: -0.1em;
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.chapter-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  @include m.mono-label(11px, 0.25em);
  color: var(--ink-faint);

  .dot {
    color: var(--accent);
  }
}

.scroll-cue {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  @include m.mono-label(10px, 0.3em);
  color: var(--ink-faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: bob 2.5s ease-in-out infinite;

  &::after {
    content: "";
    width: 1px;
    height: 32px;
    background: linear-gradient(to bottom, var(--accent), transparent);
  }
}

@keyframes bob {
  0%,
  100% {
    transform: translate(-50%, 0);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, 6px);
    opacity: 1;
  }
}

// ===== Prose body =====

p {
  line-height: 1.75;
  text-wrap: pretty;
  position: relative;
}

.chapter-body {
  margin: 0 auto;
  position: relative;
  //font-family: var(--font-body);

  p {
    color: var(--ink);
    margin-bottom: 1.6em;
  }

  .prose,
  .pinned-image-content {
    p {
      text-indent: 1rem;
    }
  }

  .column-container {
    margin: 0 auto;
    padding: 0 40px;
    max-width: 680px;
  }

  .pull {
    @include m.display-italic(1.7rem);
    font-weight: 400;
    line-height: 1.25;
    color: var(--paper);
    margin: 80px -40px;
    padding: 0 40px;
    position: relative;
    text-wrap: balance;

    p {
      line-height: 1.25;
    }

    em,
    i {
      font-style: normal;
    }

    &::before {
      content: "";
      position: absolute;
      left: 2px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--accent);
    }
  }

  .key-line,
  em {
    //font-family: var(--font-display);
    font-style: italic;
    color: var(--accent-bright);
  }
}

.prose.capitalise {
  padding-top: 120px;

  p:first-of-type {
    text-indent: 0;
    &::first-letter {
      @include m.display-italic(5.5em);
      font-weight: 400;
      float: left;
      line-height: 0.85;
      margin: 0.05em 0.12em 0 -0.05em;
      color: var(--accent);
    }
  }
}

// ===== Pinned text — full-bleed sticky stage with centred heading/body =====
.pinned-text {
  &-section {
    height: 250vh;
    position: relative;
    margin: var(--section-margin-bottom) 0;
  }

  &-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg-2);
  }

  &-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.5;
    filter: contrast(1.2) brightness(0.5);

    &.t1 {
      background:
        radial-gradient(circle at 20% 80%, rgba(185, 28, 28, 0.3), transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(40, 12, 12, 0.8), transparent 50%),
        linear-gradient(180deg, #0a0707 0%, #1a0a0a 50%, #0a0707 100%);
    }
  }

  &-overlay {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 80px,
      rgba(232, 226, 214, 0.02) 80px,
      rgba(232, 226, 214, 0.02) 81px
    );
  }

  &-copy {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 40px;
    text-align: center;

    h2 {
      @include m.display-italic(clamp(40px, 6vw, 72px));
      font-weight: 400;
      line-height: 1.1;
      color: var(--paper);
      margin-bottom: 32px;
      text-wrap: balance;
    }

    p {
      //@include m.display-italic(22px, 600);
      color: var(--ink-dim);
      max-width: 520px;
      margin: 0 auto;
      //line-height: 1.5;
    }
  }
}

// ===== Pinned image — image sticks, text scrolls over it =====
.pinned-image {
  &-section {
    position: relative;
    clip-path: inset(0);
    margin: var(--section-margin-bottom) 0;
  }

  &-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    margin-bottom: -100vh;
  }

  &-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.5);
  }

  &-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 30%, rgba(10, 7, 7, 0.85) 100%);
  }

  &-content {
    position: relative;
    z-index: 1;
    padding: 50vh 40px 50vh;
    max-width: 680px;
    margin: 0 auto;

    p {
      /* font-family: var(--font-body);
      font-size: 21px; */
      //line-height: 1.75;
      color: var(--ink);
      margin-bottom: 1.6em;
      text-wrap: pretty;
    }
  }
}

// ===== Section label =====
.section-label {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 680px;
  margin: 0 auto 40px;
  padding: 0 40px;
  @include m.mono-label(11px, 0.3em);
  color: var(--accent);

  &::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--accent);
  }
}

// ===== Image slot (abstract texture placeholder) =====
.texture-slot {
  width: 100%;
  height: 60vh;
  margin: var(--section-margin-bottom) 0;
  position: relative;
  overflow: hidden;

  &.t-rust {
    background:
      radial-gradient(ellipse at 30% 50%, rgba(120, 30, 20, 0.4), transparent 60%),
      radial-gradient(ellipse at 70% 30%, rgba(40, 10, 10, 0.6), transparent 50%),
      linear-gradient(135deg, #1a0a0a, #0a0707);
  }

  &.t-concrete {
    background:
      radial-gradient(circle at 20% 80%, rgba(60, 40, 35, 0.3), transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(20, 14, 14, 0.8), transparent 60%), #0d0908;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='turbulence' baseFrequency='0.015' numOctaves='4'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.1  0 0 0 0 0.05  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode: multiply;
    opacity: 0.6;
  }

  .texture-caption {
    --h-spacing: 60px;
    position: absolute;
    bottom: 20px;
    left: var(--h-spacing);
    width: calc(80% - var(--h-spacing));
    @include m.mono-label(16px, 0.25em);
    color: var(--ink-dim);
    z-index: 2;
  }
}

// ===== Marginalia / note =====
.note {
  margin: 60px auto;
  padding: 32px 40px;
  border-left: 2px solid var(--accent-deep);
  background: rgba(185, 28, 28, 0.04);

  &,
  p {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-dim);
    letter-spacing: 0.02em;
  }

  .note-label {
    display: block;
    @include m.mono-label(10px, 0.3em);
    color: var(--accent);
    margin-bottom: 12px;
  }
}
