/* Shared reader-effects styling for DayDreamReads comic editors.
   Extracted from the Canvas prototype so future issue-builder apps can reuse
   the same reveal/page-turn/rain/sound preview without re-styling them per
   app. Assumes the consuming app defines these custom properties on :root:
   --paper, --card-bg, --ink, --pink, --pink-deep, --line, --font-sans,
   --font-mono. */

/* ---------- reader-effect toggle switches ---------- */
.switch{
  width:38px; height:22px; border-radius:999px; background:var(--line); position:relative;
  cursor:pointer; flex:none; border:none; transition:background .2s ease;
}
.switch::after{
  content:""; position:absolute; width:16px; height:16px; border-radius:50%; background:var(--paper);
  top:3px; left:3px; transition:transform .2s ease; box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.switch.is-on{ background:var(--teal); }
.switch.is-on::after{ transform:translateX(16px); }

/* ---------- preview overlay ---------- */
.preview-overlay{
  position:fixed; inset:0; background:rgba(23,22,26,.92); z-index:100; display:none;
  align-items:center; justify-content:center; flex-direction:column; gap:1.25rem;
}
.preview-overlay.is-visible{ display:flex; }
.preview-panel{
  position:absolute; opacity:0; transform:translateY(14px) scale(.98); transition:opacity .55s ease, transform .55s ease;
}
.preview-panel.is-revealed{ opacity:1; transform:none; }
.preview-close{
  background:transparent; border:2px solid var(--paper); color:var(--paper); border-radius:999px;
  padding:.55rem 1.3rem; font-weight:600; cursor:pointer; font-size:.85rem;
}
.preview-close:hover{ background:var(--paper); color:var(--ink); }
.preview-hint{ font-family:var(--font-mono); font-size:.78rem; color:var(--paper); opacity:.6; }

.rain-layer{ position:absolute; inset:0; pointer-events:none; overflow:hidden; opacity:0; transition:opacity .4s ease; }
.rain-layer.is-on{ opacity:1; }
.drop{
  position:absolute; top:-20px; width:1.5px; height:22px; background:linear-gradient(var(--paper),transparent);
  opacity:.5; animation:canvas-rain-fall linear infinite;
}
@keyframes canvas-rain-fall{ to{ transform:translateY(640px); } }