/* ============================================================
   effects.css — "Fable"-style type motion + vintage paper texture
   for the Adriele homepage. Adapted from the Claude Design handoff
   (efeitos.css); the Tweaks gating (data-letras / data-papel) is
   dropped — defaults are baked: letters on, paper subtle. Motion is
   driven by src/components/HomeMentorship/effects.tsx, which also
   yields to prefers-reduced-motion; the rules below are the styling
   + the no-JS / reduced-motion / print fallbacks.
   ============================================================ */

:root {
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ── Page-wide paper grain veil (subtle, baked) ─────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  background-image: var(--paper-grain);
  background-size: 240px 240px;
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: 0.1;
}

/* ── Paper plate (mount behind / around an image) ───────────── */
.paper-plate {
  position: relative;
  background:
    radial-gradient(90px 70px at 82% 14%, rgba(139, 90, 43, 0.07), transparent 70%),
    radial-gradient(150px 120px at 10% 80%, rgba(139, 90, 43, 0.05), transparent 70%),
    radial-gradient(44px 36px at 30% 30%, rgba(139, 90, 43, 0.06), transparent 70%),
    linear-gradient(160deg, #f8f2e3, #f2ead7 55%, #eee4cd);
}
.paper-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--paper-grain);
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
}

/* Photo printed on paper: warm tone + grain over the image */
.paper-img {
  position: relative;
}
.paper-img img {
  filter: sepia(0.12) saturate(0.94) contrast(0.98);
}
.paper-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--paper-grain);
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.45;
  pointer-events: none;
}

/* Plate caption — like figure plates in old botanical books */
.paper-caption {
  font-family: var(--font-mono, ui-monospace, 'SFMono-Regular', monospace);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(94, 59, 26, 0.6);
}

/* ── Letter reveal (per-letter rise behind a mask) ──────────── */
.lr-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.13em 0.07em;
  margin: -0.13em -0.07em;
}
.lr .lr-c {
  display: inline-block;
  transform: translateY(125%);
}
.lr-in .lr-c {
  animation: lrUp 0.85s var(--ease-out-soft) both;
}
@keyframes lrUp {
  0% {
    transform: translateY(125%) rotate(1.5deg);
  }
  100% {
    transform: none;
  }
}

/* ── Ink fill (scroll-driven word-by-word darkening) ────────── */
.ink .ink-w {
  opacity: var(--ink-dim, 0.18);
  transition: opacity 0.45s ease;
}

/* ── Intro veil letters (blur-in, like the preloader) ───────── */
.iv-c {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(0.18em);
  animation: ivIn 0.55s var(--ease-out-soft) both;
}
@keyframes ivIn {
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

/* ── Accessibility + print: always show the words, drop grain ── */
@media (prefers-reduced-motion: reduce) {
  .lr .lr-c,
  .lr-in .lr-c {
    animation: none !important;
    transform: none !important;
  }
  .ink .ink-w {
    opacity: 1 !important;
    transition: none !important;
  }
  .iv-c {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}
@media print {
  body::after {
    display: none;
  }
  .lr .lr-c {
    animation: none !important;
    transform: none !important;
  }
  .ink .ink-w {
    opacity: 1 !important;
  }
}