/* No pre-hidden content: motion is an enhancement after a section enters view. */
@keyframes j5-enter {
    from { opacity: .58; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
    .j5-motion-enter { animation: j5-enter 450ms cubic-bezier(.22,.68,.3,1) both; }
    .j5-motion-delay-1 { animation-delay: 40ms; }
    .j5-motion-delay-2 { animation-delay: 80ms; }
    .j5-motion-delay-3 { animation-delay: 120ms; }
    .j5 :is(.arrow-link,.text-link,.button,.category-row,.job-row,.post-row,.app-card) {
        transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    }
    .j5 :is(.arrow-link,.text-link,.button) > [aria-hidden="true"] { transition: transform 180ms ease; }
    .j5 [data-j5-media="journal"] img { transition: transform 300ms ease; }
}
/* Keep the small-screen gesture light, with no sideways movement or page overflow. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    @keyframes j5-enter {
        from { opacity: .72; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .j5-motion-enter { animation-duration: 340ms; }
    .j5-motion-delay-1 { animation-delay: 20ms; }
    .j5-motion-delay-2 { animation-delay: 40ms; }
    .j5-motion-delay-3 { animation-delay: 60ms; }
}
.j5-motion-enter:focus-within { animation: none !important; }
@media print { .j5-motion-enter { animation: none !important; transform: none !important; opacity: 1 !important; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .j5 :is(.arrow-link,.text-link,.button):hover > [aria-hidden="true"] { transform: translateX(3px); }
    .j5 :is(a,button)[data-j5-media="journal"]:hover img { transform: scale(1.025); }
    .j5 :is(.category-row,.job-row,.post-row):hover { background-color: rgba(0,83,59,.035); }
}
@media (prefers-reduced-motion: reduce) {
    .j5-motion-enter { animation: none !important; transform: none !important; }
    .j5 :is(.arrow-link,.text-link,.button) > [aria-hidden="true"],
    .j5 [data-j5-media="journal"] img { transition: none !important; transform: none !important; }
}

.j5 [data-j5-media="journal"] { position: relative; overflow: hidden; isolation: isolate; }
.j5 [data-j5-media="journal"] .j5-media-image-failed { display: none !important; }
.j5 .j5-media-placeholder {
    position: relative;
    grid-area: 1 / 1;
    display: flex;
    width: 100%;
    min-height: 180px;
    height: 100%;
    aspect-ratio: 4 / 3;
    align-items: flex-end;
    padding: clamp(1.25rem,3vw,2.5rem);
    overflow: hidden;
    background: #e6ede8;
    color: #00533b;
    text-align: left;
    font-family: inherit;
    font-size: clamp(1rem,2vw,1.5rem);
    font-weight: 500;
    line-height: 1.2;
}
.j5 .j5-media-placeholder::before {
    content: "";
    position: absolute;
    inset: 15% -10% -50% 40%;
    border: 1px solid rgba(0,83,59,.18);
    border-radius: 50%;
    transform: rotate(-25deg);
}
.j5 .j5-media-placeholder::after {
    content: "";
    position: absolute;
    inset: -30% 48% 25% -20%;
    border: 1px solid rgba(0,83,59,.12);
    border-radius: 50%;
}
.j5 .j5-media-placeholder > span { position: relative; z-index: 1; max-width: 14ch; letter-spacing: -.025em; }
.j5 .j5-home-post-media > .j5-media-placeholder { aspect-ratio: auto; min-height: 0; }
.j5 .article-hero.j5-media-unavailable { margin-block: 2rem; }
.j5 .article-hero > .j5-media-placeholder { aspect-ratio: 16 / 7; max-height: 420px; }
.j5 .j5-article-gallery .j5-media-placeholder { min-height: 70px; padding: .75rem; font-size: .65rem; }
.j5 angucompletekeyword .angucomplete-holder > i.fa-close[role="button"]:focus-visible {
    outline: 2px solid #00533b;
    outline-offset: 2px;
    border-radius: 4px;
}

/* The home frame owns the image ratio, including missing media at tablet widths. */
.j5 .j5-home-post-media > .j5-media-placeholder { aspect-ratio:auto;min-height:0; }