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

/* ── Bespoke upload-zone visual: one page stack splitting apart into
   two separate stacks — the mirror of merge-pdf's scene — same visual
   grammar (one authored motion, on-brand gradient) instead of a static
   icon in a box. ── */
.spl-scene {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.25rem;
    margin: 0 auto 1.5rem;
}

.spl-stack {
    position: relative;
    width: 2.5rem;
    height: 3.25rem;
}

.spl-card {
    position: absolute;
    inset: 0;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 12px -4px rgba(0, 0, 0, .4);
}

.spl-card-a { background: #000; animation: splSlideL 3.4s cubic-bezier(.5, 0, .5, 1) infinite; }
.spl-card-b { background: #000; left: -.5rem; top: .35rem; z-index: -1; opacity: .85; animation: splSlideL 3.4s cubic-bezier(.5, 0, .5, 1) infinite; }

.spl-card-c { background: #000; animation: splSlideR 3.4s cubic-bezier(.5, 0, .5, 1) infinite; }
.spl-card-d { background: #000; left: .5rem; top: .35rem; z-index: -1; opacity: .85; animation: splSlideR 3.4s cubic-bezier(.5, 0, .5, 1) infinite; }

@keyframes splSlideL {
    0%, 20% { transform: translateX(1.375rem); }
    55%, 100% { transform: translateX(0); }
}

@keyframes splSlideR {
    0%, 20% { transform: translateX(-1.375rem); }
    55%, 100% { transform: translateX(0); }
}

.spl-scissor {
    position: absolute;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px -2px rgba(15, 23, 42, .2);
    opacity: 0;
    animation: splCut 3.4s cubic-bezier(.5, 0, .5, 1) infinite;
}

@keyframes splCut {
    0%, 8% { opacity: 1; transform: scale(1); }
    30%, 100% { opacity: 0; transform: scale(.6); }
}

@media (max-width: 480px) {
    .spl-scene { height: 3.75rem; }
    .spl-stack { width: 2.125rem; height: 2.75rem; }
}