/* ══════════════════════════════════════════════════════════════════
   protect-pdf.html — page-specific styles (loaded after base.css).
   Currently just the bespoke upload-zone visual below.
   ══════════════════════════════════════════════════════════════════ */

/* ── Bespoke upload-zone visual: an open padlock swinging shut over a
   page, the moment the document becomes password-protected — same
   visual grammar as the other tool scenes (one authored motion,
   on-brand gradient) instead of a static icon in a box. ── */
.prt-scene {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.5rem;
    height: 4.75rem;
    margin: 0 auto 1.5rem;
}

.prt-page {
    width: 3rem;
    height: 3.75rem;
    border-radius: .625rem;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .45);
}

.prt-lock {
    position: absolute;
    right: .25rem;
    bottom: -.25rem;
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px -4px rgba(220, 38, 38, .5);
    animation: prtGlow 3s cubic-bezier(.5, 0, .5, 1) infinite;
}

.prt-shackle {
    transform-origin: 19px 11px;
    animation: prtClose 3s cubic-bezier(.5, 0, .5, 1) infinite;
}

@keyframes prtClose {
    0%, 12% { transform: rotate(-30deg); }
    42%, 100% { transform: rotate(0deg); }
}

@keyframes prtGlow {
    0%, 40% { box-shadow: 0 6px 16px -4px rgba(220, 38, 38, .5); }
    55%, 85% { box-shadow: 0 6px 16px -4px rgba(220, 38, 38, .5), 0 0 0 4px rgba(220, 38, 38, .18); }
    100% { box-shadow: 0 6px 16px -4px rgba(220, 38, 38, .5); }
}

@media (max-width: 480px) {
    .prt-scene { width: 5.5rem; height: 4rem; }
    .prt-page { width: 2.5rem; height: 3.125rem; }
    .prt-lock { width: 2rem; height: 2rem; }
}