/* GetParentWise paper style
   Two paper stocks: a smooth hot-press sheet for the page, cold-press cards on top of it.
   Texture, shadow and motion follow importance: feature cards (bento tiles, research
   block, closing band) get all of it; supporting cards (steps, FAQ) step back; media
   frames stay clean. See DESIGN.md, "Paper & Elevation".
   Load after the page's own <style>, with /assets/style/paper.js (deferred) for the reveal. */

:root {
  --paper-card: url("/assets/images/texture/paper-cold-press.webp");
  --paper-page: url("/assets/images/texture/paper-hot-press.webp");
  --paper-light: .45;  /* cream and lavender cards */
  --paper-deep: .7;    /* deep purple cards */
  --paper-sheet: .7;   /* the page itself */
  --shadow-paper: 0 1px 1px rgba(74,58,40,.05), 0 2px 5px -1px rgba(74,58,40,.06), 0 12px 28px -12px rgba(74,58,40,.16);
  --shadow-paper-lift: 0 2px 3px rgba(74,58,40,.06), 0 6px 12px -2px rgba(74,58,40,.08), 0 22px 40px -14px rgba(74,58,40,.24);
  --shadow-paper-deep: 0 1px 2px rgba(51,32,87,.14), 0 4px 10px -2px rgba(51,32,87,.14), 0 18px 36px -14px rgba(51,32,87,.38);
  --shadow-paper-deep-lift: 0 2px 4px rgba(51,32,87,.16), 0 8px 16px -4px rgba(51,32,87,.18), 0 26px 48px -16px rgba(51,32,87,.45);
}

/* ---------- The page: hot-press sheet, scrolls with the content ----------
   Soft-light lifts and sinks the paper's formation evenly, so the cream holds. */
body { position: relative; }
body::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--paper-page) 0 0 / 1200px auto repeat;
  mix-blend-mode: soft-light; opacity: var(--paper-sheet);
}

/* ---------- Cards: cold-press paper ----------
   Light cards multiply a brightened copy, so only the tooth's valleys darken and the
   card colour stays put. Deep cards overlay, which lifts and sinks the grain. */
.tile, .step, .proof, .band, .faq details { position: relative; isolation: isolate; }
.tile::before, .step::before, .proof::before, .band::before, .faq details::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--paper-card) 0 0 / 800px auto repeat;
  mix-blend-mode: multiply; filter: brightness(1.95) sepia(.12) blur(.35px); opacity: var(--paper-light);
}
.tile--soft::before { filter: brightness(1.95) blur(.35px); }
.tile--deep::before, .proof::before, .band::before { mix-blend-mode: overlay; filter: none; opacity: var(--paper-deep); }

/* Each card shows a different part of the sheet */
.tile:nth-child(3n+1)::before { background-position: 13% 27%; }
.tile:nth-child(3n+2)::before { background-position: 61% 8%; }
.tile:nth-child(3n)::before   { background-position: 88% 73%; }
.step:nth-child(2)::before { background-position: 40% 60%; }
.step:nth-child(3)::before { background-position: 75% 20%; }
.proof::before { background-position: 30% 90%; }
.band::before  { background-position: 70% 40%; }

/* Supporting cards step back */
:is(.step, .faq details)::before { opacity: calc(var(--paper-light) * .5); }

/* ---------- Elevation: paper resting on the page ----------
   Warm, layered, never gray. Deep cards cast a purple-tinted shadow. The FAQ stays flat. */
.tile, .step { box-shadow: var(--shadow-paper); }
.tile--deep, .proof, .band { box-shadow: var(--shadow-paper-deep); }

/* ---------- Motion ---------- */
/* Bounce: feature cards lift a few pixels on hover, with a small overshoot */
.tile { transition: transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .5s ease; }
.tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-paper-lift); }
.tile--deep:hover { box-shadow: var(--shadow-paper-deep-lift); }

/* Reveal: cards below the fold settle into place once (paper.js adds .rv, then .in) */
.rv { opacity: 0; translate: 0 26px; }
.rv.in { opacity: 1; translate: 0 0; transition: opacity .8s ease-out, translate .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }

@media (prefers-reduced-motion: reduce) {
  .tile, .tile:hover { transition: none; transform: none; }
  .rv, .rv.in { opacity: 1; translate: none; transition: none; }
}