/* Shared Petra cameo for catalogue and dashboard requests. */
.petra-loading-cameo {
    --petra-loading-text: #66645f;
    --petra-loading-halo: #edf0e8;
    --petra-loading-paper: #fffdf8;
    --petra-loading-paper-back: #e5eadd;
    --petra-loading-paper-edge: #9ca992;
    display: grid;
    place-items: center;
    min-height: 256px;
    padding: 2rem 1rem;
    text-align: center;
}
.petra-loading-cameo-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    opacity: 0;
    animation: petra-loading-cameo-reveal 160ms ease-out 180ms forwards;
}
.petra-loading-cameo-art { position: relative; width: 144px; height: 108px; }
.petra-loading-cameo-art::before { content: ''; position: absolute; left: 10px; bottom: 8px; width: 88px; height: 88px; border-radius: 50%; background: var(--petra-loading-halo); }
.petra-loading-cameo-petra { position: absolute; left: 0; bottom: 0; width: 104px; height: 104px; background: url('../images/petrabot-200.png') center / contain no-repeat; }
.petra-loading-cameo-petra[hidden] { display: none; }
.petra-loading-cameo-papers { position: absolute; right: 9px; bottom: 13px; width: 38px; height: 48px; }
.petra-loading-cameo-papers > span { position: absolute; inset: 0; border: 1px solid var(--petra-loading-paper-edge); border-radius: 3px; background: var(--petra-loading-paper-back); transform: translate(5px, 3px) rotate(8deg); }
.petra-loading-cameo-papers > span:nth-child(2) { background: var(--petra-loading-paper); transform: translate(-3px, 2px) rotate(-9deg); }
.petra-loading-cameo-papers > span:last-child { background: var(--petra-loading-paper); transform: rotate(-2deg); transform-origin: 50% 90%; animation: petra-paper-settle 3s ease-in-out .4s infinite; }
.petra-loading-cameo-papers > span:last-child::before { content: ''; position: absolute; top: 13px; left: 8px; width: 20px; height: 1px; background: var(--petra-loading-paper-edge); box-shadow: 0 6px var(--petra-loading-paper-edge), 0 12px var(--petra-loading-paper-edge); }
.petra-loading-cameo p { max-width: 28rem; margin: 0; color: var(--petra-loading-text); font-size: .95rem; font-weight: 500; line-height: 1.6; text-wrap: balance; }

@keyframes petra-loading-cameo-reveal { to { opacity: 1; } }
@keyframes petra-paper-settle {
    0%, 65%, 100% { transform: translateY(0) rotate(-2deg); }
    30% { transform: translateY(-4px) rotate(2deg); }
}

/* The full-test header keeps the existing catalogue placeholders below it. */
.petra-loading-cameo--compact { min-height: 0; padding: 0; text-align: left; }
.petra-loading-cameo--compact .petra-loading-cameo-content { flex-direction: row; gap: .75rem; }
.petra-loading-cameo--compact .petra-loading-cameo-art { flex: 0 0 100px; width: 100px; height: 76px; }
.petra-loading-cameo--compact .petra-loading-cameo-art::before { left: 4px; bottom: 4px; width: 64px; height: 64px; }
.petra-loading-cameo--compact .petra-loading-cameo-petra { width: 72px; height: 72px; }
.petra-loading-cameo--compact .petra-loading-cameo-papers { right: 4px; bottom: 8px; width: 26px; height: 34px; }
.petra-loading-cameo--compact .petra-loading-cameo-papers > span:last-child::before { top: 9px; left: 5px; width: 14px; box-shadow: 0 4px var(--petra-loading-paper-edge), 0 8px var(--petra-loading-paper-edge); }
.petra-loading-cameo--compact p { max-width: 18rem; font-size: .875rem; }

html.dark-mode .petra-loading-cameo,
body.dark-mode .petra-loading-cameo,
[data-theme="dark"] .petra-loading-cameo {
    --petra-loading-text: #b8b7b1;
    --petra-loading-halo: #29332b;
    --petra-loading-paper: #3d483d;
    --petra-loading-paper-back: #30392f;
    --petra-loading-paper-edge: #91a488;
}

@media (prefers-reduced-motion: reduce) {
    .petra-loading-cameo-content { animation: none; opacity: 1; }
    .petra-loading-cameo-papers > span:last-child { animation: none; }
}