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

/* ── Bespoke upload-zone visual: a scan-line sweeping down a page,
   revealing searchable text lines as it passes — the OCR moment itself
   — replaces the generic cloud icon. ── */
.ocr-scene {
    position: relative;
    width: 3.25rem;
    height: 4rem;
    margin: 0 auto 1.5rem;
    border-radius: .5rem;
    overflow: hidden;
    background: linear-gradient(135deg, #f97316, #ea580c);
    box-shadow: 0 8px 20px -6px rgba(249, 115, 22, .45);
}

.ocr-line {
    position: absolute;
    left: .5rem;
    right: .5rem;
    height: 2px;
    border-radius: 1px;
    background: rgba(255, 255, 255, .9);
    opacity: 0;
    animation: ocrReveal 3.4s cubic-bezier(.5, 0, .5, 1) infinite;
}

.ocr-line-1 { top: .6rem; animation-delay: .1s; }
.ocr-line-2 { top: 1.15rem; right: .9rem; animation-delay: .45s; }
.ocr-line-3 { top: 1.7rem; animation-delay: .8s; }
.ocr-line-4 { top: 2.25rem; right: 1.25rem; animation-delay: 1.15s; }
.ocr-line-5 { top: 2.8rem; right: .7rem; animation-delay: 1.5s; }

@keyframes ocrReveal {
    0%, 4% { opacity: 0; }
    10%, 88% { opacity: 1; }
    100% { opacity: 0; }
}

.ocr-scanbar {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    box-shadow: 0 0 8px rgba(255, 255, 255, .85);
    animation: ocrSweep 3.4s cubic-bezier(.4, 0, .6, 1) infinite;
}

@keyframes ocrSweep {
    0% { top: -8%; }
    88% { top: 104%; }
    100% { top: 104%; }
}

@media (max-width: 480px) {
    .ocr-scene { width: 2.75rem; height: 3.375rem; }
}