/* ============================================================
   notebook.css — Papier-Look: Textur, Hilfslinien, Ränder
   ============================================================ */

/* Körper: wärmer/dunkler als reines Cremeweiß,
   damit der Kontrast besser wird und Augen nicht blenden. */
body {
  background-color: var(--paper);
}

/* Faserrauschen: fixiert über dem ganzen Viewport.
   Keine Parallax-Transformation, keine Vignette —
   Vignetten erzeugen beim Scrollen einen helleren Fleck in der Mitte. */
.paper-texture {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}

/* Schulheft-Linien: eigener fixer Layer, damit sie beim Scrollen
   immer sichtbar bleiben und deutlich genug sind. */
.notebook-lines {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 27px,
    rgba(0, 0, 0, 0.14) 27px,
    rgba(0, 0, 0, 0.14) 28px
  );
}

/* Inhalt über der Textur */
.site-header,
.timeline,
.envelope-section {
  position: relative;
  z-index: 1;
}

/* Abgenutzte Papierkante: weiche, leicht unregelmäßige Seitenränder */
body::before,
body::after {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  width: 18px;
  z-index: 2;
  pointer-events: none;
}
body::before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.10), transparent);
}
body::after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.10), transparent);
}

/* Seiten-Ladeanimation: Papier blendet ein.
   Der Keyframe liegt bewusst HIER, damit auch login.php ihn kennt. */
@keyframes paperFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  opacity: 0;
  animation: paperFadeIn 1.2s ease forwards;
}