/* ═══════════════════════════════════════════════════
   IMAGE FRAME — Newspaper-style image with border
   ═══════════════════════════════════════════════════ */

.image-frame {
    inline-size: calc(100% - var(--space-lg) * 2);
    margin-inline: auto;
    margin-block: var(--space-md);
    border: 2px solid var(--text-main);
    padding: 4px;
    background: var(--white);
    transform: rotate(-1deg);
    transition: transform var(--duration-normal) var(--ease-out);
}

.image-frame--right {
    transform: rotate(1deg);
}

.image-frame--flat {
    transform: none;
}

.image-frame__img {
    inline-size: 100%;
    block-size: auto;
    display: block;
    filter: contrast(1.05) saturate(1.15);
}

.image-frame__caption {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    padding: 6px var(--space-xs);
    border-block-start: 1px solid rgba(0, 0, 0, 0.1);
}

/* Scroll-driven reveal */
.image-frame {
    animation: imageReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

@keyframes imageReveal {
    from {
        opacity: 0;
        transform: scale(0.92) rotate(-3deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(-1deg);
    }
}

.image-frame--right {
    animation-name: imageRevealRight;
}

@keyframes imageRevealRight {
    from {
        opacity: 0;
        transform: scale(0.92) rotate(3deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(1deg);
    }
}