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

/* ── Bespoke upload-zone visual: two separate page stacks sliding
   together and combining into one — same visual grammar as the other
   tool scenes (one authored motion, on-brand gradient) instead of a
   static icon in a box. ── */
.mrg-scene {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.25rem;
    margin: 0 auto 1.5rem;
}

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

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

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

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

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

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

.mrg-plus {
    position: absolute;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: 800;
    font-size: .8rem;
    line-height: 1;
    box-shadow: 0 3px 8px -2px rgba(15, 23, 42, .2);
    opacity: 0;
    animation: mrgPlus 3.4s cubic-bezier(.5, 0, .5, 1) infinite;
}

@keyframes mrgPlus {
    0%, 45% { opacity: 0; transform: scale(.6); }
    60%, 92% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(.6); }
}

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