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

/* ── Bespoke hero scene: a page squeezed down by two brackets, with the
   size saving revealed as it shrinks — same visual grammar as the
   homepage orbit hero (one authored motion, on-brand gradient), telling
   this tool's own story instead of a static icon in a box. ── */
.cpr-scene {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    height: 4.5rem;
    margin: 0 auto 1.5rem;
}

.cpr-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);
    animation: cprSqueeze 3.2s cubic-bezier(.5, 0, .5, 1) infinite;
}

.cpr-bracket {
    font-size: 2rem;
    font-weight: 300;
    color: #000;
    line-height: 1;
    animation: cprBracket 3.2s cubic-bezier(.5, 0, .5, 1) infinite;
}

.cpr-bracket-r { animation-name: cprBracketR; }

.cpr-pct {
    position: absolute;
    right: -.25rem;
    bottom: 0;
    background: #0a7a54;
    color: #fff;
    font-size: .625rem;
    font-weight: 700;
    padding: .15rem .4rem;
    border-radius: 9999px;
    opacity: 0;
    transform: scale(.7);
    animation: cprPct 3.2s cubic-bezier(.5, 0, .5, 1) infinite;
}

@keyframes cprSqueeze {
    0%, 20% { transform: scale(1); }
    55%, 75% { transform: scale(.66); }
    100% { transform: scale(1); }
}

@keyframes cprBracket {
    0%, 20% { transform: translateX(0); }
    55%, 75% { transform: translateX(10px); }
    100% { transform: translateX(0); }
}

@keyframes cprBracketR {
    0%, 20% { transform: translateX(0); }
    55%, 75% { transform: translateX(-10px); }
    100% { transform: translateX(0); }
}

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

@media (max-width: 480px) {
    .cpr-scene { height: 4rem; }
    .cpr-page { width: 2.5rem; height: 3.125rem; }
    .cpr-bracket { font-size: 1.625rem; }
}