/*
 * Behaviour layer that replaces the original React/framer-motion animations.
 * tailwind.css is the original compiled design system and is left untouched.
 */

/* Scroll reveal: [data-reveal="24"] starts 24px lower and transparent */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(calc(var(--reveal-y, 24) * 1px));
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Hero floating cards */
@keyframes ig-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
.float-card { animation: ig-float 5.5s ease-in-out .5s infinite; }
.float-card--late { animation-delay: 1.2s; }

/* Metrics band motifs (SVG) */
[data-motifs] [data-anim] {
    transition: stroke-dasharray 1.4s cubic-bezier(.16, 1, .3, 1), opacity .5s cubic-bezier(.16, 1, .3, 1), transform .4s cubic-bezier(.16, 1, .3, 1);
    transform-box: fill-box;
    transform-origin: center;
}

/* Mobile menu */
.mobile-menu[hidden] { display: none; }
.mobile-menu { animation: ig-fade .3s ease both; }
.mobile-menu__item { animation: ig-slide-in .4s ease both; animation-delay: calc(.08s + var(--i) * .06s); }
@keyframes ig-fade { from { opacity: 0; } }
@keyframes ig-slide-in { from { opacity: 0; transform: translateX(-16px); } }

.empty\:hidden:empty { display: none; }
.field-validation-valid { display: none; }
.input-validation-error { border-color: #e2532d !important; }

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] { opacity: 1; transform: none; transition: none; }
    .float-card, .mobile-menu, .mobile-menu__item { animation: none; }
}

.h-auto { height: auto; }

/* Brand logo: trimmed artwork, so the height below is the visible logo height */
.brand-logo { display: block; height: 38px; width: auto; }
@media (min-width: 640px) { .brand-logo { height: 44px; } }
.brand-logo--footer { height: 56px !important; }

/* Utilities used by the blog pages that the original compiled Tailwind build doesn't include */
.pt-36 { padding-top: 9rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-24 { padding-bottom: 6rem; }
.leading-\[1\.05\] { line-height: 1.05; }
@media (min-width: 640px) {
    .sm\:pt-40 { padding-top: 10rem; }
    .sm\:pb-32 { padding-bottom: 8rem; }
    .sm\:items-end { align-items: flex-end; }
}

/* ---------- Blog ---------- */
.post-card {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
    border: 1px solid var(--hairline); border-radius: 1.5rem; background: #fff;
    box-shadow: 0 10px 40px -26px rgba(31,36,25,.35);
    transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(31,36,25,.45); }
.post-card__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-base-850); }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.post-card:hover .post-card__img img { transform: scale(1.04); }
.post-card__placeholder { display: block; width: 100%; height: 100%; background: radial-gradient(60% 60% at 30% 30%, #e8f1c6, transparent), radial-gradient(50% 50% at 80% 70%, #dbe8a8, transparent), var(--color-base-850); }
.post-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.5rem 1.75rem 1.75rem; }
.post-card__title { margin-top: .75rem; font-family: var(--font-display, inherit); font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--color-ink); }
.post-card__title a:hover { color: var(--color-coral-deep); }
.post-card__excerpt { margin-top: .6rem; color: var(--color-sage); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card__more { margin-top: auto; padding-top: 1.25rem; display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 600; color: var(--color-coral-deep); }
.post-card__more svg { transition: transform .2s; }
.post-card:hover .post-card__more svg { transform: translateX(3px); }

.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; font-size: .85rem; color: var(--color-sage-dim); }
.post-chip { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--hairline); background: #fff; padding: .2rem .75rem; font-size: .8rem; font-weight: 500; color: var(--color-coral-deep); transition: border-color .2s, background .2s; }
.post-chip:hover, .post-chip.is-active { border-color: color-mix(in oklab, var(--color-emerald) 60%, transparent); background: #f1f6df; }

.blog-filters { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.blog-cats { display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-search input { width: 16rem; max-width: 100%; border-radius: 999px; border: 1px solid var(--hairline); background: #fff; padding: .55rem 1rem; color: var(--color-ink); outline: none; }
.blog-search input:focus { border-color: color-mix(in oklab, var(--color-emerald) 70%, transparent); box-shadow: 0 0 0 3px #e8f1c6; }
.blog-empty { padding: 3rem 0; color: var(--color-sage); }
.blog-empty a { color: var(--color-coral-deep); text-decoration: underline; }
.blog-pager { margin-top: 3rem; display: flex; align-items: center; justify-content: center; gap: 1.5rem; color: var(--color-sage); font-size: .95rem; }
.blog-pager a { border-radius: 999px; border: 1px solid var(--hairline); padding: .5rem 1.1rem; color: var(--color-ink); }
.blog-pager a:hover { border-color: var(--color-emerald); }

.post-wrap { margin: 0 auto; max-width: 46rem; padding: 0 1.25rem; }
.post-back { font-size: .9rem; color: var(--color-sage); }
.post-back:hover { color: var(--color-coral-deep); }
.post-hero-img { margin: 0 auto 3rem; max-width: 72rem; padding: 0 1.25rem; }
.post-hero-img img { width: 100%; max-height: 34rem; object-fit: cover; border-radius: 1.75rem; box-shadow: 0 40px 80px -50px rgba(31,36,25,.5); }
.post-share { margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; border-top: 1px solid var(--hairline); padding-top: 1.5rem; font-size: .9rem; color: var(--color-sage-dim); }
.post-share a { border-radius: 999px; border: 1px solid var(--hairline); padding: .3rem .85rem; color: var(--color-ink); }
.post-share a:hover { border-color: var(--color-emerald); color: var(--color-coral-deep); }
.post-cta { margin: 3rem 0 6rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; border-radius: 1.5rem; padding: 2rem; color: #fff; background: linear-gradient(135deg, #9cbf2e, #6a9419 60%, #3f5a12); }
.post-cta h2 { font-size: 1.4rem; font-weight: 700; }
.post-cta p { margin-top: .35rem; color: rgba(255,255,255,.85); }
.post-cta a { border-radius: 999px; background: #fff; padding: .7rem 1.4rem; font-weight: 600; color: #3f5a12; }
.post-preview-bar { position: sticky; top: 68px; z-index: 40; background: #fff7d6; border-bottom: 1px solid #e9d98a; padding: .6rem 1.25rem; text-align: center; font-size: .9rem; }
.post-preview-bar a { text-decoration: underline; margin-left: .5rem; }

/* Rich text from the editor (posts and custom sections) */
.prose-ig { color: #3d4038; font-size: 1.075rem; line-height: 1.8; }
.prose-ig > * + * { margin-top: 1.15em; }
.prose-ig h2 { margin-top: 2em; font-size: 1.6rem; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; color: var(--color-ink); }
.prose-ig h3 { margin-top: 1.7em; font-size: 1.3rem; font-weight: 700; line-height: 1.3; color: var(--color-ink); }
.prose-ig h4 { margin-top: 1.5em; font-size: 1.1rem; font-weight: 700; color: var(--color-ink); }
.prose-ig a { color: var(--color-coral-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose-ig strong { color: var(--color-ink); font-weight: 650; }
.prose-ig ul, .prose-ig ol { padding-left: 1.4em; }
.prose-ig ul { list-style: disc; }
.prose-ig ol { list-style: decimal; }
.prose-ig li + li { margin-top: .4em; }
.prose-ig li::marker { color: var(--color-emerald); }
.prose-ig blockquote { border-left: 3px solid var(--color-emerald); padding: .2em 0 .2em 1.2em; font-style: italic; color: var(--color-sage); }
.prose-ig img { border-radius: 1rem; height: auto; max-width: 100%; }
.prose-ig figure figcaption { margin-top: .5em; font-size: .85rem; color: var(--color-sage-dim); text-align: center; }
.prose-ig table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose-ig th, .prose-ig td { border: 1px solid var(--hairline); padding: .5em .75em; text-align: left; }
.prose-ig th { background: var(--color-base-850); }
.prose-ig hr { border: 0; border-top: 1px solid var(--hairline); margin: 2.5em 0; }
.prose-ig pre { overflow-x: auto; border-radius: .75rem; background: #1f2419; color: #e8f1c6; padding: 1rem 1.25rem; font-size: .9rem; }
.prose-ig code { font-family: var(--font-geist-mono, monospace); font-size: .9em; }

/* ---------- Admin toolbar on the public site ---------- */
.ig-adminbar { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; gap: 1.1rem; height: 32px; padding: 0 1rem; background: #1d2327; color: #f0f0f1; font: 13px/1 -apple-system, "Segoe UI", Roboto, sans-serif; }
.ig-adminbar a { display: inline-flex; align-items: center; gap: .4rem; color: #f0f0f1; }
.ig-adminbar a:hover { color: #72aee6; }
.ig-adminbar__spacer { flex: 1; }
.has-adminbar #site-header { top: 32px; }
.has-adminbar .mobile-menu { top: 32px; }

/* Admin section preview: highlight the section being edited */
.ig-focus { outline: 3px solid #2271b1; outline-offset: -3px; }