/* ============================================================================
   DUNNAWAY FENCE — "THE LINE" motion layer                          (2026-09-15)
   Canvas instruments live in linefence.js (build, walk). Here: headlines run in
   from the corner post left to right, the accent phrase gets a honey rail that
   runs the line, content is set like posts, cards drive down on hover.
   ========================================================================== */

.build{position:relative;width:100%;aspect-ratio:4/3;max-width:34rem;justify-self:center;border:1px solid var(--line-w);border-radius:10px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(0,0,0,.8)}
.build canvas{position:absolute;inset:0;width:100%;height:100%}
.walk__stage{position:relative;width:100%;aspect-ratio:16/11;max-width:34rem;justify-self:center;border:1px solid var(--line-w);border-radius:10px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.walk__stage canvas{position:absolute;inset:0;width:100%;height:100%}

/* 1. from the corner post */
.js .run{opacity:0}
.js .run.in{animation:runin .6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes runin{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-6px)}100%{opacity:1;clip-path:inset(0 0 0 0);transform:none}}

/* 2. the rail runs the line */
.js .run .y{position:relative;display:inline-block}
.js .run .y::after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:.12em;background:var(--honey);opacity:.6;transform:scaleX(0);transform-origin:0 50%}
.js .run.in .y::after{animation:rail .7s cubic-bezier(.2,.8,.2,1) .4s forwards}
@keyframes rail{to{transform:scaleX(1)}}

/* 3. set like a post */
.js .fx{opacity:0;transform:translateY(-10px)}
.js .fx.in{animation:setpost .5s cubic-bezier(.2,.9,.25,1.1) forwards}
.js .fx.d1.in{animation-delay:.08s}.js .fx.d2.in{animation-delay:.16s}.js .fx.d3.in{animation-delay:.24s}.js .fx.d4.in{animation-delay:.32s}
@keyframes setpost{70%{opacity:1;transform:translateY(2px)}100%{opacity:1;transform:none}}

/* 4. the pinned stage */
.walk.is-pinned .walk__pin{position:sticky;top:0;height:100vh;display:grid;align-items:center}
.walk.is-pinned .stage{opacity:.3;transition:opacity .4s ease,transform .4s cubic-bezier(.25,.85,.2,1);transform:translateX(-6px)}
.walk.is-pinned .stage.is-on{opacity:1;transform:none}
.walk.is-pinned .stage.is-done{opacity:.6;transform:none}
.walk.is-flat .stage{opacity:1}

/* 5. posts drive down on hover */
.post,.rev,.chapter{transition:transform .3s cubic-bezier(.2,.9,.25,1.1),box-shadow .3s,border-color .3s}
.post:hover,.rev:hover{transform:translateY(3px);box-shadow:0 8px 20px -14px rgba(0,0,0,.5);border-color:var(--honey)}
.ph img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.ph:hover img{transform:scale(1.03)}
.btn{transition:transform .22s cubic-bezier(.2,.9,.25,1.1),box-shadow .22s,background .22s,color .22s}
.btn--ink:hover{transform:translateY(2px);box-shadow:0 8px 18px -12px rgba(44,58,38,.7)}

@media (prefers-reduced-motion:reduce){
  .js .run,.js .run.in{opacity:1;clip-path:none;transform:none;animation:none}
  .js .run.in .y::after{animation:none;transform:scaleX(1)}
  .js .fx,.js .fx.in{opacity:1;transform:none;animation:none}
  .post:hover,.rev:hover,.btn--ink:hover,.ph:hover img{transform:none}
}