/* ============================================================
   EFFECTS — Sistema Olinda
   Shadows are warm and low. Imagery prints onto the page via
   multiply + sepia. Motion is slow, eased, never bouncy.
   ============================================================ */

:root {
  /* ---- Shadows (warm brown, low spread — like ink lifting off paper) ---- */
  --shadow-sm:   0 4px 12px rgba(90, 72, 36, 0.10);
  --shadow-md:   0 10px 24px rgba(120, 96, 48, 0.18);
  --shadow-lg:   0 12px 28px rgba(90, 72, 36, 0.18);
  --shadow-inset-hairline: inset 0 0 0 1px rgba(120, 96, 48, 0.18);

  /* ---- Motion ---- */
  --ease-paper:  cubic-bezier(0.2, 0.7, 0.2, 1);  /* @kind other */
  --dur-fast:    0.2s;   /* @kind other */
  --dur-base:    0.25s;  /* @kind other */
  --dur-slow:    0.45s;  /* @kind other */
  --dur-reveal:  1s;     /* @kind other */
  --lift:        translateY(-2px);  /* @kind other */

  /* ---- Imagery treatment (engraving-on-paper) ---- */
  --img-blend:   multiply;                    /* @kind other */
  --img-filter:  sepia(0.14) contrast(1.04);  /* @kind other */

  /* ---- Camadas de tempo — three image treatments on one substrate.
         Past = engraving (multiply + grain + vignette); Present = warm natural
         photo; Future = cold desaturated projection. The eras share the cream
         paper, the display serif and the registry frame; only the treatment,
         grain, border, accent and motion change. ---- */
  --layer-past-filter:    sepia(0.20) contrast(1.05) brightness(1.02);  /* @kind other */
  --layer-past-blend:     multiply;                                     /* @kind other */
  --layer-past-radius:    4px;
  --layer-present-filter: saturate(1.03) contrast(1.01) sepia(0.06) brightness(1.02);  /* @kind other */
  --layer-present-radius: 9px;
  --layer-future-filter:  saturate(0.90) brightness(1.04) contrast(0.99);  /* @kind other */
  --layer-future-radius:  2px;
  --layer-present-tint:   linear-gradient(180deg, rgba(231,221,196,0.10) 0%, transparent 30%, rgba(120,80,40,0.14) 100%);  /* @kind other */
  --layer-future-tint:    linear-gradient(180deg, rgba(79,97,115,0.16) 0%, rgba(63,74,107,0.08) 100%);  /* @kind other */

  /* ---- Paper texture overlays (apply on a fixed ::before / layer) ---- */
  --grain:     radial-gradient(rgba(70, 52, 20, 0.16) 0.5px, transparent 0.6px);  /* @kind other */
  --grain-size: 3px 3px;  /* @kind other */
  --vignette:  radial-gradient(130% 110% at 50% 32%, rgba(0,0,0,0) 58%, rgba(58,44,20,0.15) 100%);  /* @kind other */
}

/* ---- Reusable ornamental divider ----
   <div class="ol-divider"><span></span><i>◆</i><span></span></div> */
.ol-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; max-width: 560px; margin: 0 auto;
}
.ol-divider > span {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120,96,48,0.5));
}
.ol-divider > span:last-child {
  background: linear-gradient(90deg, rgba(120,96,48,0.5), transparent);
}
.ol-divider > i {
  font-family: var(--font-display); font-style: normal;
  color: var(--accent); font-size: 18px;
}