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

/* ── Bespoke upload-zone visual: a closed padlock swinging open over a
   page — the mirror image of protect-pdf's scene, the moment the
   password comes off — same visual grammar (one authored motion,
   on-brand gradient) instead of a static icon in a box. ── */
.ulk-scene {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.5rem;
    height: 4.75rem;
    margin: 0 auto 1.5rem;
}

.ulk-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);
}

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

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

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

@keyframes ulkGlow {
    0%, 40% { box-shadow: 0 6px 16px -4px rgba(10, 122, 84, .5); }
    55%, 85% { box-shadow: 0 6px 16px -4px rgba(10, 122, 84, .5), 0 0 0 4px rgba(10, 122, 84, .18); }
    100% { box-shadow: 0 6px 16px -4px rgba(10, 122, 84, .5); }
}

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