/* ============================================================
   Annota8 — Field Notes motion layer (bold & cinematic)
   Loaded LAST on every /blog/ page. Pairs with js/blog-motion.js.
   - JS-gated initial states (html:not(.no-js)) to avoid FOUC.
   - Fully reduced-motion safe (pre-hide only under no-preference).
   - Reuses the already-loaded GSAP/ScrollTrigger/Lenis stack.
   ============================================================ */

/* Pre-hide JS-revealed elements — ONLY when JS is on AND motion is allowed.
   Under reduced-motion (or no-js) nothing is hidden, so content is always shown. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js) .bloghub__head .eyebrow,
  html:not(.no-js) .bloghub__head h1,
  html:not(.no-js) .bloghub__head .dek,
  html:not(.no-js) .oa-hero .oa-kicker,
  html:not(.no-js) .oa-hero h1,
  html:not(.no-js) .oa-hero .dek,
  html:not(.no-js) .bloghub .kp-uc { opacity: 0; }
}

/* --- Card hover cinematics (index listing only) --- */
.bloghub .kp-uc { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.bloghub .kp-uc:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(11,11,15,.16); }
.bloghub .kp-uc__media img { transition: transform .7s var(--ease-out); }
.bloghub .kp-uc:hover .kp-uc__media img { will-change: transform; }
.bloghub .kp-uc:hover .kp-uc__media img { transform: scale(1.06); }

/* diagonal light sheen sweep across the poster on hover */
.bloghub .kp-uc__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.30) 50%, transparent 65%);
  transform: translateX(-130%); transition: transform .75s var(--ease-out);
}
.bloghub .kp-uc:hover .kp-uc__media::after { transform: translateX(130%); }

/* "Read →" affordance (element injected by blog-motion.js) */
.kp-uc__read {
  display: inline-flex; align-items: center; gap: .35em;
  margin-top: .85rem; font-family: var(--font-ui); font-size: .8rem; font-weight: 600;
  color: var(--brand); opacity: 0; transform: translateY(5px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.bloghub .kp-uc:hover .kp-uc__read { opacity: 1; transform: translateY(0); }
.kp-uc__read svg { transition: transform .4s var(--ease-out); }
.bloghub .kp-uc:hover .kp-uc__read svg { transform: translateX(4px); }
[dir="rtl"] .kp-uc__read svg { transform: scaleX(-1); }
[dir="rtl"] .bloghub .kp-uc:hover .kp-uc__read svg { transform: translateX(4px) scaleX(-1); }

/* --- Reduced motion: neutralize everything above --- */
@media (prefers-reduced-motion: reduce) {
  .bloghub .kp-uc,
  .bloghub .kp-uc__media img,
  .kp-uc__read,
  .kp-uc__read svg { transition: none !important; }
  .bloghub .kp-uc__media::after { display: none; }
  .kp-uc__read { opacity: 1; transform: none; }
}

/* --- TOC active-item motion (premium tell) --- */
.kp-toc a, .oa-toc a { transition: opacity var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.kp-toc a.is-active, .oa-toc a.is-active { transform: translateX(3px); }
[dir=rtl] .kp-toc a.is-active, [dir=rtl] .oa-toc a.is-active { transform: translateX(-3px); }
.kp-toc a.is-active::before, .oa-toc a.is-active::before { background: linear-gradient(90deg, var(--brand), var(--brand-alt)); }

/* --- Inline-link underline draw (GPU-light, reduced-motion-safe) --- */
@media (prefers-reduced-motion: no-preference){
  .kp-article a.inline, .oa-article p a, .oa-article li a {
    border-bottom: none;
    background-image: linear-gradient(90deg, var(--brand), var(--brand-alt));
    background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px;
    transition: background-size .35s var(--ease-out);
  }
  .kp-article a.inline:hover, .oa-article p a:hover, .oa-article li a:hover { background-size: 100% 2px; }
}

/* --- Fixed side-TOC tucks away over the footer (JS toggles .toc-tuck) --- */
.kp-toc, .oa-toc { transition: opacity .3s var(--ease-out); }
.kp-toc.toc-tuck, .oa-toc.toc-tuck { opacity: 0; pointer-events: none; }