/* ============================================================================
   VANCLEAVE REAL ESTATE — "SURVEY LINE" motion layer                (2026-09-15)
   Canvas instruments live in parcel.js (plat, horizon). Here: headlines rise
   like a horizon, slowly; the accent phrase carries a surveyor's rule that
   measures out with ticks at each end; content settles on the longest, calmest
   curves of any site we build. One broker, no hurry.
   ========================================================================== */

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

/* 1. the horizon rises */
.js .rise{opacity:0}
.js .rise.in{animation:rise 1.4s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes rise{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}

/* 2. the surveyor's rule */
.js .rise .y{position:relative;display:inline-block}
.js .rise .y::after{content:"";position:absolute;left:0;right:0;bottom:-.14em;height:.08em;background:var(--clay);transform:scaleX(0);transform-origin:50% 50%}
.js .rise .y::before{content:"";position:absolute;left:0;right:0;bottom:-.22em;height:.24em;background:linear-gradient(90deg,var(--clay) 0 2px,transparent 2px calc(100% - 2px),var(--clay) calc(100% - 2px));opacity:0}
.js .rise.in .y::after{animation:rule 1.2s cubic-bezier(.2,.6,.2,1) .6s forwards}
.js .rise.in .y::before{animation:ticks .6s ease-out 1.6s forwards}
@keyframes rule{to{transform:scaleX(1)}}
@keyframes ticks{to{opacity:1}}

/* 3. settle */
.js .fx{opacity:0;transform:translateY(12px)}
.js .fx.in{animation:settle 1.1s cubic-bezier(.2,.6,.2,1) forwards}
.js .fx.d1.in{animation-delay:.12s}.js .fx.d2.in{animation-delay:.24s}.js .fx.d3.in{animation-delay:.36s}.js .fx.d4.in{animation-delay:.48s}
@keyframes settle{to{opacity:1;transform:none}}

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

/* 5. cards */
.tract,.chapter{transition:transform .6s cubic-bezier(.2,.6,.2,1),box-shadow .6s,border-color .6s}
.tract:hover{border-color:var(--clay)}
.btn{transition:transform .4s cubic-bezier(.2,.6,.2,1),box-shadow .4s,background .4s,color .4s}
.btn--ink:hover{}

@media (prefers-reduced-motion:reduce){
  .js .rise,.js .rise.in{opacity:1;transform:none;animation:none}
  .js .rise.in .y::after{animation:none;transform:scaleX(1)}
  .js .rise.in .y::before{animation:none;opacity:1}
  .js .fx,.js .fx.in{opacity:1;transform:none;animation:none}
  .tract:hover,.btn--ink:hover{transform:none}
}