/* ============================================================================
   PILGER TITLE — "ON THE RECORD" motion layer                       (2026-09-15)
   Canvas instruments live in record.js (seal, stamps, coast). This is the CSS
   half: headings are STAMPED (they press down and set), the accent phrase is
   underscored by a ruled line with a brass point at the end, content squares up
   and settles by a hair, cards file in like records being pulled. Nothing drifts.
   ========================================================================== */

.seal{aspect-ratio:1}
.seal canvas{position:absolute;inset:0;width:100%;height:100%}
.closing__doc{position:relative;aspect-ratio:3/4;width:100%;max-width:26rem;background:var(--cream);box-shadow:0 30px 60px -34px rgba(14,27,43,.7);border:1px solid var(--line)}
.closing__doc canvas{position:absolute;inset:0;width:100%;height:100%}
.coast{position:relative;width:100%;aspect-ratio:16/9;background:var(--cream);border:1px solid var(--line)}
.coast canvas{position:absolute;inset:0;width:100%;height:100%}

/* 1. stamped, not floated */
.js .stamp{opacity:0}
.js .stamp.in{animation:stamp .55s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes stamp{0%{opacity:0;transform:translateY(-8px) scale(1.02)}60%{opacity:1;transform:translateY(1px) scale(.995)}100%{opacity:1;transform:none}}

/* 2. ruled line with a brass point */
.js .stamp em{position:relative;display:inline-block}
.js .stamp em::after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:2px;background:currentColor;opacity:.55;transform:scaleX(0);transform-origin:0 50%}
.js .stamp em::before{content:"";position:absolute;right:-.42em;bottom:-.22em;width:.3em;height:.3em;border-radius:50%;background:var(--brass);opacity:0}
.js .stamp.in em::after{animation:rule .8s cubic-bezier(.25,.85,.2,1) .35s forwards}
.js .stamp.in em::before{animation:point .3s ease-out 1.05s forwards}
@keyframes rule{to{transform:scaleX(1)}}
@keyframes point{to{opacity:1}}

/* 3. content squares up */
.js .fx{opacity:0;transform:translateY(10px);transition:opacity .8s cubic-bezier(.25,.85,.2,1),transform .8s cubic-bezier(.25,.85,.2,1)}
.js .fx.in{opacity:1;transform:none}
.js .fx.d1{transition-delay:.1s}.js .fx.d2{transition-delay:.2s}.js .fx.d3{transition-delay:.3s}.js .fx.d4{transition-delay:.4s}

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

/* 5. records being pulled: a bracket squares the corner on hover */
.help,.office,.atty,.rev,.faq{position:relative;transition:transform .35s cubic-bezier(.25,.85,.2,1),box-shadow .35s,border-color .35s}
.help::after,.office::after,.atty::after,.rev::after{content:"";position:absolute;right:.7rem;top:.7rem;width:.9rem;height:.9rem;border-top:2px solid var(--brass);border-right:2px solid var(--brass);opacity:0;transition:opacity .3s,transform .3s;transform:translate(-4px,4px)}
.help:hover::after,.office:hover::after,.atty:hover::after,.rev:hover::after{opacity:1;transform:none}
.help:hover,.office:hover,.atty:hover,.rev:hover{}

/* 6. the button seats */
.btn{transition:transform .25s cubic-bezier(.25,.85,.2,1),background .25s,color .25s,box-shadow .25s}
.btn--brick:hover{}

@media (prefers-reduced-motion:reduce){
  .js .stamp,.js .stamp.in{opacity:1;animation:none}
  .js .stamp.in em::after{animation:none;transform:scaleX(1)}
  .js .stamp.in em::before{animation:none;opacity:1}
  .js .fx{opacity:1;transform:none;transition:none}
  .help:hover,.office:hover,.atty:hover,.rev:hover,.btn--brick:hover{transform:none}
}