/* x-global.css — the global layer: paper rain, the sound hint, the bone circle, the 3am note, the marker cursor */

/* grail landing: torn bits of photocopy and red paper */
.x-burst { position: absolute; inset: 0; z-index: 92; pointer-events: none; overflow: hidden; }
.x-bit { position: absolute; left: 0; top: 0; display: block; background: #EDECE6; opacity: 0; will-change: transform; }
.x-bit.red { background: #D63A2A; }

/* sound hint: a typed scrap under the sound button and a red arrow that draws itself */
.x-bone path, .x-under path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: xdraw .5s ease-out forwards; animation-delay: calc(var(--i, 0) * 70ms + .25s); }
@keyframes xdraw { to { stroke-dashoffset: 0; } }

/* the wordmark's bone, circled */
.x-bone { z-index: 2; }

/* 3am note in the footer */
.x-late { position: absolute; left: 24px; bottom: 36px; z-index: 2; }
.x-late > .scrap { font-size: 15px; white-space: nowrap; }
.x-under { left: 0; top: 0; }

/* the red marker: over paper you hold a sharpie, not a pointer. hotspot at the tip (2,22). */
.sheet, .feed, .form, .icard { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='rotate(45 12 12)'%3E%3Crect x='8.5' y='1' width='7' height='10' rx='1.2' fill='%23161616'/%3E%3Crect x='8.5' y='10.5' width='7' height='9.5' fill='%23D63A2A'/%3E%3Cpath d='M8.5 20 L15.5 20 L12 26 Z' fill='%23D63A2A'/%3E%3C/g%3E%3C/svg%3E") 2 22, auto; }

@media (max-width: 720px) {
  .x-late { left: 16px; bottom: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .x-bone path, .x-under path { animation: none; stroke-dashoffset: 0; }
}