/* ============================================================
   jimbir.ch — Coastal Motifs
   Recurring texture that makes the system feel coastal, not corporate.
   Pair with colors_and_type.css.
   ============================================================ */

/* ---- Paper grain overlay ----
   Very subtle fractal-noise, ~4% opacity. Apply to a full-bleed
   ::before/::after or a fixed overlay element above backgrounds. */
.paper-grain { position: relative; }
.paper-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 1;
}

/* ---- Depth-sounding contour lines ----
   Thin teal curves at low opacity behind hero sections.
   Use the contour-lines.svg asset as a background, or this CSS version. */
.contours {
  position: relative;
  isolation: isolate;
}
.contours::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: url("/assets/contour-lines.svg");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  opacity: 0.6;
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

/* ---- Wave divider ----
   Place at the bottom of a cream section; the section BELOW must be --ink.
   <div class="wave-divider"></div> spanning full width, ~120px tall. */
.wave-divider {
  display: block;
  width: 100%;
  height: clamp(56px, 7vw, 120px);
  line-height: 0;
  background-image: url("/assets/wave-divider.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ---- Seal / maker's mark ----
   Circular stamp, typically overlapping a hero portrait corner.
   <img src="assets/seal.svg" class="seal"> */
.seal {
  width: clamp(96px, 12vw, 156px);
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(21,51,59,0.18));
}

/* ---- Fade-up reveal on scroll ----
   Add .reveal to elements; toggle .is-visible via IntersectionObserver. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow, 560ms) var(--ease-out, ease),
              transform var(--dur-slow, 560ms) var(--ease-out, ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}