/* Canvas-based CD jewel-case heap
   Rendered by /assets/js/heap.js into #heap
*/

#heap {
    position: relative;
    width: 100%;
    /* keeps it present even if JS fails; JS will size canvas anyway */
    min-height: clamp(360px, 60vh, 720px);
    overflow: hidden;
    background: #fff;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

#heap canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Accessibility: allow focusing heap (JS may set tabindex) */
#heap:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.35);
    outline-offset: 6px;
    border-radius: 8px;
}

/* Smooth fade used when "everything disappears under white backdrop" */
#heap .heap__backdrop {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

#heap[data-mode="focus"] .heap__backdrop {
    opacity: 1;
}

/* If JS provides a reduced-motion mode it can switch this attribute */
@media (prefers-reduced-motion: reduce) {
    #heap .heap__backdrop {
        transition: none;
    }
}

/* Optional: if you ever want a subtle texture behind the heap */
#heap[data-bg="paper"] {
    background:
        radial-gradient(
            1200px 700px at 10% 20%,
            rgba(0, 0, 0, 0.025),
            transparent 60%
        ),
        radial-gradient(
            900px 600px at 90% 70%,
            rgba(0, 0, 0, 0.02),
            transparent 55%
        ),
        #fff;
}