/* Vistamark motion layer (Oct 2026) — loaded after site.css by base.html.
   Rules of the road:
   - Decorative motion is opt-in through html.vm-motion, which motion.js sets only when the browser
     supports IntersectionObserver AND the visitor has not asked for reduced motion. Without JS, or
     with reduced motion, every element renders in its final, static state.
   - Only opacity and transform are animated; every reveal plays once and lasts under a second.
   - Nothing hijacks scrolling. The investment-architecture walkthrough uses position:sticky only.
   Bump the ?v= number on the <link>/<script> tags in base.html when this file or motion.js changes
   (assets are served with a one-year immutable cache). */

/* 1. Page-to-page cross-fade (View Transitions: Chrome/Edge 126+, Safari 18.2+; others navigate normally) */
@view-transition{navigation:auto}
header.site{view-transition-name:vm-header}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* 2. Reveal on scroll — motion.js tags below-the-fold blocks with .vm-rv, then .vm-in when they enter */
.vm-motion .vm-rv{opacity:0;transform:translate3d(0,18px,0);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--vm-i,0) * 90ms)}
.vm-motion .vm-rv.vm-in{opacity:1;transform:none}
/* Book covers settle in with a slight tilt */
.vm-motion .vm-rv.vm-book{transform:translate3d(0,40px,0) rotate(-3deg);transition-duration:.9s,1.2s}
.vm-motion .vm-rv.vm-book.vm-in{transform:none}
@media print{.vm-motion .vm-rv{opacity:1!important;transform:none!important}}

/* 3. Practice cards — hover lift, gold rule sweeps across the top, checkmarks tick in on reveal */
.pr-card{position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.pr-card::before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.65,0,.35,1);border-radius:4px 4px 0 0}
.pr-card.pr-gold::before{background:var(--navy)}
@media (hover:hover){
  .pr-card:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(16,38,58,.06),0 20px 44px rgba(16,38,58,.12)}
  .pr-card:hover::before{transform:scaleX(1)}
}
.pr-card:focus-within::before{transform:scaleX(1)}
.vm-motion .pr-card.vm-rv .pr-points li::before{opacity:0;transform:scale(.2)}
.vm-motion .pr-card.vm-rv.vm-in .pr-points li::before{opacity:1;transform:none;transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.6,.5,1)}
.vm-motion .pr-card.vm-in .pr-points li:nth-child(1)::before{transition-delay:calc(var(--vm-i,0) * 90ms + .35s)}
.vm-motion .pr-card.vm-in .pr-points li:nth-child(2)::before{transition-delay:calc(var(--vm-i,0) * 90ms + .5s)}
.vm-motion .pr-card.vm-in .pr-points li:nth-child(3)::before{transition-delay:calc(var(--vm-i,0) * 90ms + .65s)}
.vm-motion .pr-card.vm-in .pr-points li:nth-child(n+4)::before{transition-delay:calc(var(--vm-i,0) * 90ms + .8s)}

/* 4. Investment architecture walkthrough (desktop): heading + step rail pinned left, the three engines
      scroll past on the right and light up one at a time. motion.js adds .om-walk and the step list. */
.om-steps{display:none}
@media (min-width:1024px){
  .opmodel.om-walk .om-walk-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,96px);align-items:start}
  .opmodel.om-walk .om-head{grid-column:1;grid-row:1;position:sticky;top:110px;margin:0;text-align:left;justify-items:start;max-width:none}
  .opmodel.om-walk .om-grid{grid-column:2;grid-row:1;grid-template-columns:1fr;gap:clamp(48px,12vh,120px);padding-block:2vh 8vh}
  .opmodel.om-walk .om-card{padding:34px 34px 26px;opacity:.42;transform:scale(.965);transform-origin:left center;transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .55s ease,background-color .55s ease}
  .opmodel.om-walk .om-card.is-active{opacity:1;transform:none;background:#fff;box-shadow:inset 3px 0 0 var(--brass),0 1px 2px rgba(16,38,58,.06),0 22px 50px rgba(16,38,58,.10)}
  .om-walk .om-steps{display:grid;gap:2px;list-style:none;margin:28px 0 0;padding:0 0 0 22px;position:relative;width:100%}
  .om-walk .om-steps::before,.om-walk .om-steps::after{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--rule)}
  .om-walk .om-steps::after{background:var(--brass);transform-origin:top;transform:scaleY(var(--om-p,0))}
  .om-steps a{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:baseline;padding:9px 0;text-decoration:none;color:var(--mist);transition:color .3s ease}
  .om-steps .om-n{font-family:var(--mono);font-size:12px;letter-spacing:.08em}
  .om-steps .om-t{font-family:var(--display);font-size:20px;line-height:1.25}
  .om-steps .om-t small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px;color:inherit}
  .om-steps a:hover,.om-steps a.is-active{color:var(--ink)}
  .om-steps a.is-active .om-n,.om-steps a.is-active small{color:var(--brass-deep)}
}

/* 5. FAQ answers open and close smoothly (Chrome/Edge 131+; elsewhere they snap as before) */
@supports (interpolate-size:allow-keywords){
  .faq details{interpolate-size:allow-keywords}
  .faq details::details-content{height:0;overflow:clip;transition:height .38s cubic-bezier(.2,.7,.2,1),content-visibility .38s allow-discrete}
  .faq details[open]::details-content{height:auto}
}

/* 6. Long reads: reading-progress bar under the header + table-of-contents highlight */
.vm-progress{position:absolute;left:0;right:0;top:100%;height:3px;pointer-events:none;z-index:2}
.vm-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--brass),#D9B866);transform-origin:left;transform:scaleX(var(--p,0))}
.toc ol{gap:0}
.toc li{position:relative;padding:5px 0 5px 14px}
.toc li::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--rule-soft);transition:background-color .25s ease}
.toc li:has(a.is-active)::before{background:var(--brass)}
.toc a{transition:color .25s ease}
.toc a.is-active{color:var(--brass-deep)}

/* 7. Case studies carousel (/case-studies/) — native horizontal scroll-snap; buttons and meter added by JS */
.cs-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-14px 0 18px}
.cs-bar[hidden]{display:none}
.cs-count{display:flex;align-items:center;gap:14px;margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--slate)}
.cs-meter{position:relative;width:120px;height:2px;background:var(--rule);overflow:hidden}
.cs-meter i{position:absolute;inset:0;background:var(--brass);transform-origin:left;transform:scaleX(var(--cs-p,.2));transition:transform .2s linear}
.cs-nav{display:flex;gap:8px}
.cs-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--navy);border-radius:50%;background:#fff;color:var(--navy);font:inherit;font-size:18px;line-height:1;cursor:pointer;transition:background-color .15s,color .15s,opacity .15s}
.cs-btn:hover:not(:disabled){background:var(--navy);color:#fff}
.cs-btn:disabled{opacity:.3;cursor:default}
.cs-track{list-style:none;margin:0 calc(-1 * var(--gutter));padding:4px var(--gutter) 22px;display:grid;grid-auto-flow:column;grid-auto-columns:min(480px,84%);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.cs-track:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
@media (min-width:1100px){.cs-track{grid-auto-columns:min(460px,38%)}}
.cs-slide{display:flex;scroll-snap-align:start}
.cs-card{flex:1;display:flex;flex-direction:column;gap:10px;padding:28px 28px 24px;background:#fff;border:1px solid var(--rule);border-top:3px solid var(--brass);text-decoration:none;color:var(--ink);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.cs-card:hover{color:var(--ink)}
@media (hover:hover){.cs-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(16,38,58,.10)}}
.cs-card .eyebrow{margin:0}
.cs-card h3{font-size:clamp(24px,2.2vw,30px)}
.cs-card .cs-line{flex:1;margin:0;color:var(--slate)}
.cs-card .cs-ch{margin:0}
.cs-card .btn{align-self:flex-start;margin-top:8px;white-space:nowrap}
.cs-card.cs-caution{background:#FBF3F1;border-top-color:#9A4A3A}

/* 8. About page milestones timeline — the gold line draws down as you scroll */
.vm-timeline{list-style:none;margin:0;padding:0 0 0 36px;position:relative;display:grid;gap:34px}
.vm-timeline::before,.vm-timeline::after{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--rule)}
.vm-timeline::after{background:var(--brass);transform-origin:top;transform:scaleY(var(--tl-p,1))}
.vm-timeline li{position:relative}
.vm-timeline li::before{content:"";position:absolute;left:-36px;top:4px;width:16px;height:16px;box-sizing:border-box;border-radius:50%;border:2px solid var(--brass);background:var(--brass);z-index:1;transition:background-color .35s ease,box-shadow .35s ease}
.vm-motion .vm-timeline li:not(.is-past)::before{background:#fff}
.vm-motion .vm-timeline li.is-past::before{box-shadow:0 0 0 5px var(--brass-soft)}
.vm-timeline .tl-when{display:block;margin-bottom:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-deep)}
.vm-timeline h3{font-size:clamp(21px,2vw,25px);margin-bottom:6px}
.vm-timeline p{margin:0;color:var(--slate);font-size:16px;max-width:60ch}
