/* Pearl-coated paper. Color lives under the text; the moving film adds luster. */
html.pearl-ready {
  --pearl-x: 48%;
  --pearl-y: 43%;
  --pearl-angle: 118deg;
  --pearl-surface:
    radial-gradient(ellipse at var(--pearl-x) var(--pearl-y), #fffffff0 0%, #fff9f366 26%, transparent 65%),
    linear-gradient(var(--pearl-angle), #edd4e480 0%, #f8ece880 22%, #dae4ee80 45%, #e3e9d580 68%, #f3ddcb80 86%, #e8dced80 100%);
}
html.pearl-ready body {
  background-color: #faf7f2;
  background-image: var(--pearl-surface);
  background-size: 160% 140%;
  background-position: var(--pearl-x) var(--pearl-y);
}
html.pearl-ready :is(.site-header, .site-footer, .paper-note, .form-card, .review-note, .contact-card, .facebook-panel, .side-drawer, .gallery-viewer, .gallery-photo, input, textarea) {
  background-image: url('/__pearl/mica.svg?v=2'), var(--pearl-surface);
  background-size: 256px 256px, 180% 160%, 180% 160%;
  background-position: 0 0, var(--pearl-x) var(--pearl-y), var(--pearl-x) var(--pearl-y);
}
/* Dialogs occupy the browser's top layer, so they receive their own coating. */
html.pearl-ready .side-drawer,
html.pearl-ready .gallery-viewer { background-color: #faf7f2; }
.pearl-shimmer,
.pearl-film {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pearl-shimmer {
  z-index: 9998;
  contain: strict;
  mix-blend-mode: multiply;
  background:
    radial-gradient(ellipse 55% 90% at var(--pearl-x) var(--pearl-y), #fffdf5 0%, transparent 70%),
    linear-gradient(var(--pearl-angle), #efd2e36b, #d8daef60 35%, #cfe7df69 65%, #f2d8bd60);
}
.pearl-shimmer.is-rendered { background: transparent; }
.pearl-film { display: block; }
/* Fine mica catches a moving light. No floating stars or animated confetti. */
.pearl-mica {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: url('/__pearl/mica.svg?v=2') repeat;
  background-size: 256px 256px;
  opacity: .75;
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at var(--pearl-x) var(--pearl-y), #000 5%, #000b 35%, #0003 67%, transparent 95%);
  mask-image: radial-gradient(ellipse 80% 65% at var(--pearl-x) var(--pearl-y), #000 5%, #000b 35%, #0003 67%, transparent 95%);
}
.pearl-enable {
  position: fixed;
  z-index: 10000;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid #cbbac7;
  border-radius: 999px;
  background: linear-gradient(118deg, #fcf4f9, #f6f5fc 45%, #f2f8f1);
  color: #56434e;
  box-shadow: inset 0 1px #fff, 0 4px 18px #44352c16;
  font: 600 12px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  cursor: pointer;
}
.pearl-enable::before {
  content: '';
  width: 14px;
  height: 14px;
  flex: none;
  border: 1px solid #c9b7c7;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #fff 8%, #f0d4e4 35%, #cfdde3 65%, #eee2cc);
  box-shadow: inset -1px -1px 3px #b6a1b344;
}
.pearl-enable[aria-pressed=true] { color: #4e5e4d; border-color: #c1cebd; }
.pearl-enable:focus-visible { outline: 3px solid #97705d; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .pearl-enable { display: none; } }
@media print { .pearl-shimmer, .pearl-mica, .pearl-enable { display: none; } }