/* ============================================================
   Lord Kinfauns — motion + rendering only.
   The original look/feel is preserved: NO colour, font, nav,
   or layout changes. This adds load/scroll animations, a
   smoother read-more, image fade-in, focus a11y, and a
   reduced-motion opt-out.
   ============================================================ */

:root{ --ease:cubic-bezier(.22,.61,.36,1); }

/* ---- Image fade-in on load (gated on .img-fade, which the script
        adds only once it's running — a script failure can't hide imgs) ---- */
.img-fade article img{opacity:0;transition:opacity .7s var(--ease)}
.img-fade article img.img-loaded{opacity:1}

/* ---- Loading entrance (final state identical to original) ---- */
@keyframes lk-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes lk-crest{from{opacity:0;transform:translateY(-8px) scale(.92)}to{opacity:1;transform:none}}
@keyframes lk-fade{from{opacity:0}to{opacity:1}}

.js .intro-content .brand img,
.js .secondary-intro-content .brand img{animation:lk-crest 1s var(--ease) both}
.js .intro-content h1.title{animation:lk-rise 1.05s var(--ease) .15s both}
.js .intro-content h2.title{animation:lk-rise 1.05s var(--ease) .45s both}
.js #nav{animation:lk-fade 1.2s ease .15s both}
.js #collector-earl .layer{animation:lk-fade 1.6s ease both}

/* ---- Scroll reveal for timeline entries + prose articles ---- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}

/* ---- Read-more: animate the expand (was an instant snap) ---- */
.fulltext{overflow:hidden;max-height:6000px;opacity:1;transition:max-height .55s var(--ease),opacity .4s ease}
.fulltext.collapsed{max-height:0;opacity:0}

/* ---- Focus visibility (a11y) — uses the site's existing blue ---- */
a:focus-visible,button:focus-visible,.toggle-content:focus-visible,.hamburger:focus-visible{
  outline:2px solid #6bb1ff;outline-offset:3px}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .img-fade article img,.js .reveal,
  .js .intro-content h1.title,.js .intro-content h2.title,
  .js .intro-content .brand img,.js .secondary-intro-content .brand img{opacity:1!important;transform:none!important}
  [data-type='parallax']{transform:none!important}
}