/* ============================================================
   O'Bryant Acres — Custom Styles (Techy Farm Vibe)
   Overrides for Casper default theme
   ============================================================ */

/* ---------- Color palette ---------- */
:root {
    --brand-accent: #c2780f;
    --brand-accent-hover: #e0961a;
    --brand-dark-bg: #1a1a0d;
    --brand-wallpaper-green: #4a7c59;
    --brand-border-soft: rgba(194, 120, 15, 0.15);
}

/* Use the brand accent for Ghost's accent-color variable */
body {
    --ghost-accent-color: var(--brand-accent) !important;
}

/* Override Ghost's link colors in post content */
html:not(.dark-mode) .gh-content a,
.gh-content a {
    color: var(--brand-accent) !important;
}

/* Dark mode overrides for links */
html.dark-mode .gh-content a,
:where(html.dark-mode) .gh-content a {
    color: #fff !important;
    opacity: 0.9;
}

html.dark-mode .gh-content a:hover {
    color: var(--brand-accent-hover) !important;
}

/* ---------- Card hover animation ---------- */
.post-card-image-link {
    transition: transform 0.3s ease;
    display: block;
}

.post-card:hover .post-card-image-link {
    transform: scale(1.02);
}

.post-card-content-link:hover {
    text-decoration: none;
}

/* ---------- Blockquote — chip-trace style (circuit board trace) ---------- */
.gh-content > blockquote:not([class]) {
    padding-left: 1em !important;
    border-left: none;
    position: relative;
    margin-left: -0.5em;
}

.gh-content > blockquote:not([class]):before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-image: repeating-linear-gradient(
        180deg,
        var(--brand-accent) 0px,
        var(--brand-accent) 4px,
        transparent 4px,
        transparent 8px
    );
}

/* ---------- Code — terminal aesthetic ---------- */
.gh-content > pre {
    background: #0d1117 !important;
    border: 1px solid #30363d !important;
    font-family: "IBM Plex Mono", monospace !important;
    box-shadow: none !important;
}

.gh-content > pre:before {
    content: "● ● ●";
    color: #484f58;
    font-size: 0.7rem;
    letter-spacing: 3px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #21262d;
    text-align: left;
    display: block;
}

.gh-content :not(pre) > code {
    background-color: rgba(194, 120, 15, 0.1) !important;
    border-color: var(--brand-border-soft) !important;
    color: var(--brand-accent-hover) !important;
}

/* ---------- Post card meta date highlight ---------- */
.post-card-meta-date {
    color: var(--brand-accent);
    font-weight: 500;
}

/* ---------- Custom 404 error code gradient ---------- */
.error-code {
    background: linear-gradient(135deg, var(--brand-accent), var(--brand-wallpaper-green)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ASCII art on 404 page */
.chicken-art {
    font-family: monospace;
    font-size: clamp(0.8rem, 1.5vw, 1.1rem);
    line-height: 1.2;
    color: var(--brand-accent);
    white-space: pre;
    text-align: center;
    margin-bottom: 24px;
    opacity: 0.6;
}

/* ---------- Footer tagline ---------- */
.footer-tagline {
    font-size: 1.3rem;
    color: hsla(0, 0%, 100%, 0.35) !important;
    font-style: italic;
    margin-bottom: 8px;
    text-align: center;
}

/* Hide "Powered by Ghost" */
.gh-powered-by {
    display: none !important;
}

.site-footer .inner {
    grid-template-columns: auto 1fr !important;
}

/* ---------- Nav hover underline ---------- */
.nav a {
    position: relative;
}

.nav a::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.3s ease;
}

.nav a:hover::after {
    width: 100%;
}

/* ---------- Drop cap for first paragraph of posts ---------- */
.gh-content > p:first-of-type:first-letter {
    float: left;
    font-size: 4.2em;
    line-height: 0.85;
    padding-right: 0.15em;
    padding-top: 0.08em;
    color: var(--brand-accent);
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
}

/* ---------- Scrollbar — thin amber bar ---------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(194, 120, 15, 0.3);
    border-radius: 3px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-accent);
}

/* Scrollbar for Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(194, 120, 15, 0.3) transparent;
}

/* ---------- Page transition overlay (fade-through) ---------- */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--brand-dark-bg);
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 0.4s ease;
}

.page-transition-overlay.fade-out {
    opacity: 1;
    pointer-events: auto;
}

/* ---------- Page header fade-in ---------- */
.site-header-content {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.site-header-content.loaded {
    opacity: 1;
    transform: none;
}

/* ---------- Cover hero zoom-in animation ---------- */
.site-header-cover {
    opacity: 0;
    transform: scale(1.15);
    transition: opacity 1.2s ease, transform 4s ease-out;
}

.site-header-cover.loaded {
    opacity: 1;
    transform: none;
}

/* ---------- Post titles entrance slide-from-left ---------- */
.article-title {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.article-title.loaded {
    opacity: 1;
    transform: none;
}

/* ---------- Post card meta entrance ---------- */
.article-byline {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease, transform 0.5s ease 0.2s;
}

.article-byline.loaded {
    opacity: 1;
    transform: none;
}

/* ---------- Post card reveal animations (homepage) ---------- */
.post-card {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.post-card.visible {
    opacity: 1;
    transform: none;
}

/* Staggered delays for post cards — only when JS observer is active */
.post-feed .post-card:nth-child(1) { transition-delay: 0s; }
.post-feed .post-card:nth-child(2) { transition-delay: 0.08s; }
.post-feed .post-card:nth-child(3) { transition-delay: 0.16s; }
.post-feed .post-card:nth-child(4) { transition-delay: 0.24s; }
.post-feed .post-card:nth-child(5) { transition-delay: 0.32s; }
.post-feed .post-card:nth-child(n+6) { transition-delay: 0.36s; }

/* ---------- Tag pill pop animation ---------- */
.post-card-primary-tag {
    cursor: pointer;
}

@keyframes tag-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.08); }
    70% { transform: scale(0.96); }
    100% { transform: scale(1); }
}

.post-card-primary-tag.pop {
    animation: tag-pop 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.post-card-tag-name a, .post-card-primary-tag a {
    position: relative;
    transition: background-color 0.25s ease, color 0.25s ease;
    border-radius: 4px;
    padding: 0.1em 0.3em;
}

.post-card-primary-tag:hover a, .post-card-tag-name a:hover {
    color: var(--brand-accent) !important;
    background-color: rgba(194, 120, 15, 0.08);
}

/* ---------- Reading progress — terminal cursor bar ---------- */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-accent), var(--brand-wallpaper-green));
    z-index: 10000;
    transition: width 0.05s linear;
    pointer-events: none;
}

/* ---------- Link click peck pulse ---------- */
@keyframes link-peck {
    0% { transform: scale(1); }
    25% { transform: scale(0.94); }
    50% { transform: scale(1.04); }
    75% { transform: scale(0.98); }
    100% { transform: scale(1); }
}

.link-peck {
    animation: link-peck 0.2s ease;
}

/* ---------- Page header title typing effect ---------- */
.site-title.typing::after, .article-title.typing::after {
    content: "▋";
    display: inline-block;
    color: var(--brand-accent);
    animation: cursor-blink 0.8s ease-in-out infinite;
    ml-1234567890abcdef
}

@keyframes cursor-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ---------- Inline images in posts (override screen.css centering) ---------- */

/* Standalone inline images with class="float-left" or "float-right" */
img.float-left {
    float: left !important;
    max-width: 70vw;
    margin: 0 1.2em 1.2em 0 !important;
}

img.float-right {
    float: right !important;
    max-width: 70vw;
    margin: 0 0 1.2em 1.2em !important;
}

/* Koenig image cards aligned left/right (when using "+ Image" block) */
figure.kg-image-card.align-left {
    float: left !important;
    width: auto !important;
    max-width: calc(65vw - 1em);
    margin: 0 1.2em 1.2em 0 !important;
}

figure.kg-image-card.align-right {
    float: right !important;
    width: auto !important;
    max-width: calc(65vw - 1em);
    margin: 0 0 1.2em 1.2em !important;
}

/* Make sure the img inside Koenig card doesn't override the float */
figure.kg-image-card.align-left .kg-image,
figure.kg-image-card.align-right .kg-image {
    margin: auto !important;
    display: block;
}

/* Figcaption keeps full width below the float */
figure.kg-image-card.align-left figcaption,
figure.kg-image-card.align-right figcaption {
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Clear paragraphs that follow a floated image */
.gh-content > figure + p,
.gh-content > div.float-left + *,
.gh-content > div.float-right + * {
    clear: both;
}

/* Responsive — revert floats on mobile to keep text readable */
@media (max-width: 640px) {
    img.float-left,
    img.float-right,
    figure.kg-image-card.align-left,
    figure.kg-image-card.align-right {
        float: none !important;
        max-width: 100% !important;
        margin: 0 0 1.2em 0 !important;
    }

    .gh-content > p:first-of-type:first-letter {
        font-size: 3em;
    }
    
    .chicken-art {
        font-size: 0.7rem;
    }
}