/* ============================================================
   our-story.css — notebook pages that fizzle into focus on scroll
   ============================================================ */

.story-page {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(199, 157, 142, 0.10), transparent 60%),
    var(--background);
}

.sheets {
  max-width: 760px;
  margin: 3rem auto 0;
  padding: 0 var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 8vh, 7rem);
}

/* A single notebook page */
.sheet {
  position: relative;
  aspect-ratio: 5 / 6.6;
  background:
    linear-gradient(#fffef9, #fffdf4);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(44, 51, 42, 0.05),
    0 24px 50px -28px rgba(44, 51, 42, 0.45);
  overflow: hidden;

  /* the "fizzle" — starts blurred, faded, lifted; resolves clean */
  opacity: 0;
  filter: blur(14px);
  transform: translateY(48px) scale(0.985) rotate(var(--tilt, 0deg));
  transition:
    opacity 1.1s var(--ease),
    filter 1.2s var(--ease),
    transform 1.2s var(--ease);
  will-change: opacity, filter, transform;
}
.sheet.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1) rotate(var(--tilt, 0deg));
}

/* gentle organic tilt, alternating */
.sheet:nth-child(odd)  { --tilt: -0.5deg; }
.sheet:nth-child(even) { --tilt:  0.6deg; }

/* torn/taped top edge feel */
.sheet::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, transparent, rgba(199,157,142,0.5), transparent);
  opacity: 0.7;
}

/* The ruled lines now live ON the writing layer (see .sheet__write) so the
   text and the lines always share the same rhythm. This layer is unused. */
.sheet__lines { display: none; }
.sheet::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 48px;
  width: 1.5px;
  background: rgba(199, 157, 142, 0.55);
}

/* Optional page heading, sits in the top margin above the ruled lines */
.sheet__title {
  position: absolute;
  top: 18px;
  left: 66px;
  right: 40px;
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--primary);
}
.sheet__title:empty { display: none; }

/* The writing area draws its OWN ruled lines, so text always rests on them.
   ── Two knobs if you ever want to fine-tune ──
   --line       : spacing between ruled lines (also the text line-height)
   --line-shift : nudges the printed line onto the text baseline.
                  More negative = lines move UP. Tweak by ~1px until the
                  handwriting sits right on each line. */
.sheet__write {
  --line: 38px;
  --line-shift: -10px;

  position: absolute;
  top: 54px;       /* start of the first ruled line */
  left: 66px;      /* just right of the red margin */
  right: 40px;
  bottom: 40px;
  font-family: "Caveat", cursive;
  font-size: 1.6rem;
  line-height: var(--line);
  color: #3a3730;
  white-space: pre-wrap;   /* keeps the line breaks you type */
  overflow: hidden;

  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--line) - 1.5px),
    rgba(130, 147, 126, 0.30) calc(var(--line) - 1.5px),
    rgba(130, 147, 126, 0.30) var(--line)
  );
  background-position: 0 var(--line-shift);
}

/* faint page number in handwriting */
.sheet__num {
  position: absolute;
  bottom: 16px;
  right: 26px;
  font-family: "Caveat", cursive;
  font-size: 1.5rem;
  color: rgba(110, 122, 107, 0.55);
}

@media (max-width: 600px) {
  .sheet::after { left: 38px; }
  .sheet__title { top: 14px; left: 54px; right: 22px; font-size: 1.4rem; }
  .sheet__write {
    top: 44px; left: 54px; right: 22px; bottom: 34px;
    font-size: 1.3rem;
    --line: 30px;
    --line-shift: -8px;
  }
}