/* ==========================================================================
   Single post/page refinements — luisalonsomurillo.com
   Loaded after the theme CSS. Uses .gh-article scoping so it outranks the
   rules in Settings → Code injection.
   ========================================================================== */

:root {
    /* One rhythm for photo → headline → content */
    --lam-article-gap: clamp(48px, 6vw, 88px);
    --lam-ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* soft ease-out */
}

/* ---------- Spacing ---------- */

.gh-article .gh-article-image {
    margin-bottom: var(--lam-article-gap);
    overflow: hidden;            /* keeps the image's settle-in zoom inside its frame */
}

.gh-article .gh-article-title {
    margin-bottom: 0;
}

.gh-article .gh-article-excerpt {
    margin-top: 24px;
}

.gh-article .gh-content {
    margin-top: var(--lam-article-gap);
}

/* ---------- Entrance animation ---------- */

@keyframes lam-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes lam-settle {
    from { transform: scale(1.04); }
    to   { transform: scale(1); }
}

@keyframes lam-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
    .gh-article .gh-article-image {
        animation: lam-fade 0.9s var(--lam-ease) both;
    }

    .gh-article .gh-feature-image {
        animation: lam-settle 1.6s var(--lam-ease) backwards;
    }

    .gh-article .gh-article-title {
        animation: lam-rise 0.9s var(--lam-ease) 0.2s backwards;
    }

    .gh-article .gh-article-excerpt {
        animation: lam-rise 0.9s var(--lam-ease) 0.3s backwards;
    }

    .gh-article .gh-content {
        animation: lam-rise 1s var(--lam-ease) 0.4s backwards;
    }
}