/* Drops — effects. Hairlines are fading gradient rules, not solid borders. */
:root {
  --shadow-sheet: 0 24px 64px rgba(0, 0, 0, 0.55);     /* page sheet on canvas */
  --shadow-popover: 0 16px 40px rgba(0, 0, 0, 0.35);
  --shadow-fab: 0 8px 24px rgba(0, 0, 0, 0.3);

  /* Fading hairline: apply as background on a section.
     bottom: … no-repeat bottom / 100% 1px;  top: … no-repeat top / 100% 1px */
  --hairline-fade: linear-gradient(to right, transparent, var(--border-hairline) 48px, var(--border-hairline) calc(100% - 48px), transparent);
  --hairline-fade-soft: linear-gradient(to right, transparent, var(--border-hairline-soft) 48px, var(--border-hairline-soft) calc(100% - 48px), transparent);

  /* Image placeholder stripes */
  --placeholder-bg: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--surface) 55%, var(--bg)), color-mix(in srgb, var(--surface) 55%, var(--bg)) 10px, transparent 10px, color-mix(in srgb, var(--surface) 80%, var(--bg)) 20px), color-mix(in srgb, var(--surface) 45%, var(--bg));
}

@keyframes drops-wave {
  0% { opacity: 0; transform: scale(0.55); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.25); }
}

/* The one nudge on the site: the scroll cue under the first fold. */
@keyframes drops-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}